I'm trying to address the slow loading speed of this website. We delved into the network traffic and found that much of the APIs (Google Maps, Facebook, etc.) are causing the slow load.
What we are having a hard time figuring out is the staggered loading of the navigation bar on the homepage. The navigation bar is not an image but a series of styled texts. Would you be so kind to share your thoughts on why the navigation bar takes a longer time to load? More importantly, what we can do to speed this up so it loads like other components on the webpage?
We are using a CMS and are willing to make some changes. Any other suggestions for speed improvement are welcome!
Related
My website for architectural visualization: http://www.greenshell3d.com
I noticed on the networking tab / incognito it takes 15 seconds or so to load the above-the-fold content. (most notably the image slideshow.)
Some of the images in the slideshow load at the very end instead of the beginning of the website load process. Now I understand the browser handles this order, but perhaps there is another way. As it stands, the bounce-rate is too high and I expect it is because of load time.
I've seen a jquery snippet on github that allows one to control the order of image loads - do you think this is a good option? I'd be glad to hear any opinions before investing the time to fix this.
Any ideas? Thanks!
You said you are interested in any opinions as well, so first some general thoughts: There is no page fold. The web that we produce content for exists in so many different screen sizes + resolutions that it’s impossible to say "The fold is below this big image!". Yes, Google changed the pagespeed insights tool to make people load stuff on top of the page first, but I think their wording there is really bad.
Now to your image loading issue:
The first thing I would recommend is to reduce the size of all the images. They seem to be around 280 - 300 kb per image and you have a few of them. Since there is a translucent overlay over them anyways you can probably get away with reducing the image quality without people noticing it (because they don’t see the image directly). Play around with the values here.
I would then look into optimizing the code for the slider to load the first image first, then the rest of the page and the other images asynchronously maybe after that. Another trick could be to increase the slide fade time from the first slide to other slides so the slider doesn’t change if the next image isn’t ready yet. You said you found a jQuery script to implement that, that’s where I’d start.
As a general guideline: the position of requests in the source code usually determines the load order of things on the page. If your images are requested by JavaScript at the end of the page, that lead to the images being loaded later than you want them to be loaded.
I have a web application which makes quite a few AJAX requests. Some of them are very light, others are heavy.
I have a loading screen that is really useful for the heavy requests, but on the light ones it is just a(n annoying) flicker.
I could just avoid displaying the loading screen for the light requests, but here's the catch: I expect that those light requests might still take a while when the user is in a remote (slow) network, making them useful and not at all an annoying flicker.
I've thought about measuring latency with a light request every couple of page loads, but that will probably get complicated easily (are there libraries already made for this?)
Anyway, is there a standard solution to this issue? What would you do?
There's really no way (that I know of) to measure the time it takes for the AJAX request to complete beforehand. If there is, I'd like to know about it!
What I'd do is to introduce the loading bar after a set amount of delay. A respectable delay would show the loading bar on the heavy AJAX requests, (hopefully) prevent the loading bar from displaying on light AJAX requests, and gracefully fall back to displaying it when an AJAX request takes abnormally long.
This doesn't stop the flicker though -- there's still that chance. But I imagine that this will significantly reduce the flicker on unnecessary occasions.
I'm trying many problems with the time loading of my web page:
www.alvaromillan.es.
I've tried to minify the js and the images but the problem is, as you can see, that my web site is only this page so every image and js is on this document...
The loading time is really high and even the smooth scrolling movement lasts a lot and the first time you use it it doesn´t go fine...
Please may any of you help me??
I took a quick look at the page just using the chrome developer tools and while there are probably several things you can do which YSlow would suggest, I think the biggest gain would come from optimizing and spriting your images. 131 of the 156 requests on your page are for images. Thats alot of images and many are fairly small. Also alot of the images seem quite large in bytes for their size. Here is what I would do:
Combine the images using several sprite sheets about 50k-100k per sheet.
Use the PNG format.
Quantize the sprite sheets to 8bit PNGs. My guess is that you will not experience perceptible quality loss by doing this. You could use spmething like pngquant to do this.
Use something like optipng to apply lossless compression on the quantized image.
I think this will yield dramatic improvements.
As skaffman suggests, do run yslow and/or google page speed test for more thorough suggestions. I also like using webpagetest.org which provides great metrics for optimizing pages.
Give the YSlow Firefox plugin a try. It will analyze the load times of your site and advise you the best course of action to take to fix it.
OK, here's some quick initial thoughts...
Flush the page after the head so that the browser can start downloading those resources sooner.
Remove the iframe
jquery appears to be loaded twice - once directly and once via google.load
Can you defer the loading of the javascript until later e.g. put it at the bottom of the page or load it asynchronously?
Rather than preloading the slideshow images - why not load them on demand when clicked on, or lazy load them after the page has finished load?
Also do you really want IE to emulate IE6???
I'm working on a site with lots of CSS3 transitions (which are hardware accelerated) and high memory objects (for example, an array of 39 objects, each containing the full html source for a typical online news article) and I'm noticing some very choppy/jittery scrolling, which I've been unable to debug.
I've kept these high memory objects out of the DOM, which should prevent them from affecting DOM performance, however, I can't help but think that they are still having a negative effect. I don't have code samples to post because I'm unsure of whether this is even an issue.
Please go to this site (Orange) and click on an article tile. In the reader div that pops up over the page, try scrolling as you normally would. Does it feel choppy/jittery? Do you have any suggestions on how to improve this?
CSS3 transitions, opacity, text and box-shadows and the like are certainly known to impact rendering speeds. In fact, even sites with heavy use of text-shadow alone can cause choppy scrolling on the average computer. Combining this with heavy use of javascript seems like a recipe for choppy web browsing.
edit: The loading animation on the o in orange is pretty awesome!
Yes, that's jittery. A page with a lot of Javascript will do that and frameworks like jQuery won't help at all. I'd recommend recoding as much as you can without using jQuery and passing it through JSLint (http://www.jslint.com/).
Try using Chrome's developer tools too to get an idea of what the bottleneck is.
Try disabling Javascript too and seeing if it's any better. If it isn't, then you know where your problem lies.
I'm building an art gallery website that updates its images via AJAX, for those who have javascript enabled, rather than request multiple page loads. I assume this will appear as though my site has a high bounce percentage. I understand that search engines will not be able to index dynamic content, but will such a misinterpreted bounce rate hurt my search engine ratings, even if I have many return visitors?
Short answer, no.
Bounce rate is (if even relevant here) is the least of your problems. Worry more about the content on the page. The search engines are much better at reading dynamic content than they used to be.
If your site is 100% dynamic ajax... you might have problems. IF it's just a gallery, you'll be fine IMO. Use nice titles on pages, text on pages, alt tags etc... give the spiders lots to read.
it actually may have good bounce rate via ajax which do not normally counted by normal anlaytics ( google or whatever) systems. bounce rate is normally indicator of user activity on your site and does not depend on how much time the url changed.
I use GWT on my penwag.com website, and for some time used the approach where it was nearly 100% AJAX. I did a revamp not too long ago (see http://penwag.blogspot.com/2010/04/april-penwag-update.html) basically to change who's in the driver's seat. Now, The basic navigation is controlled by HTML, there's a lot more HTML content than there used to be. This helps in a number of ways. First, search engines have more to work with. Second, the navigation is simpler. Third, separation of concerns is easier to achieve, since each page is its own module. Fourth, integration with third-party tools is more seamless. Things that specifically affected penwag.com were Google Ads integration and Google Friend Connect integration. This is probably true of most gadgets out there: they're designed to be embedded in HTML, and embedding them into a GWT component is harder.
Some of what I said here is specific to GWT, but a lot of it is true whatever AJAX framework you're using.