We have tried all possible site speed optimizations to improve the site speed and looking for more new optimization techniques.
In our HTML, we have lot of white space. This would not effect the payload to be downloaded since we use GZIP. I am wondering whether this extra white space in the HTML effects rendering (slowness in rendering)?
If you have any new site speed optimizations, please let me know.
Do you have a link to a test result or a page that you can share? It’s unusual for someone to have exhaused all optimizations so there may be some not-obvious ones (Data URI’s, async scripts, etc).
Unless you have HUGE amounts of whitespace it won’t have a measurable impact. It will use more memory and take a little longer to parse but it should compress away on the wire so you’re probably talking microseconds (depending on how much whitespace).
Megabytes of whitespace could certainly be an issue, particularly for mobile.
Here is the link : http://www.webpagetest.org/result/120619_YH_RN5/
We tried following.
- Progressive rendering (chunked encoding)
- Added image dimensions
- Using Data URIs for the above fold images
I really like DNS prefetch as it is pretty much a free win as far as I can tell.
Putting an empty body tag before the css might get Chrome to request a few of the css images a bit earlier. i.e. to behave like FF.
And that’s me fresh out.
@p83822 : Yes, I am trying DNS per-fetching already. Can you provide a sample HTML for chrome optimization you are talking about.
From the looks of things, your biggest bang would come from doing more work on the back-end. Looks like chunked encoding and early flush is working fine but the thumbnails don’t start loading until the base page completes the more expensive operations. Given the scale of your systems I’m sure it’s not a simple task but it looks like you have 500+ms of savings that you could achieve if you can get the back-ends to respond faster.
I’d also spend some time digging into the visual experience: http://www.webpagetest.org/video/compare.php?tests=120619_YH_RN5-r%3A10-c%3A0&thumbSize=200&ival=100&end=all
It looks like the results don’t display at all until well after all of the product thumbnails have loaded (and well after the content itself should be available). Under the advanced settings you can capture a dev tools timeline if you use Chrome for the browser and that should help track it down but without knowing the page logic better it’s hard to say what is causing it to block for so long.
You might also want to look at using Data URI’s for those first 4 thumbnails and embedding them in the HTML directly.
Thanks Patrick for the response.
Regarding results don’t display until all product thumbnails have downloaded issue is only specific to all versions below IE8.
Here are IE9, Chrome and Firefox webpagetest links which are not having this issue. In these tests I am not using JS to load the images and first 6 images are Data URIs.