We’re trying to squeeze a lot out of a beta site, the pagespeed score is 90 and we’ve got a couple small optimizations to go - but we’re struggling to get our initial render time down on the first page view. From a bunch of tests it seems the page render isn’t starting until the last image is loaded. We’ve got css in the head, js down below and a bunch of images in between. I thought we’d see the page render start pregressively as certain images were downloaded. Here’s the test - http://www.webpagetest.org/result/101215_cd12136fdc381fc662cd3a97f2d222cf/. Any help would be greatly appreciated.
I’m trying to find where I found it before but I think I read somewhere that the browser will not render a given block element until all of the components for that block element have loaded. Since your entire page is contained within a
Just working off my memory right now but it’s sounding REALLY familiar.
The way to work around it would be to have multiple block elements of the correct width instead of relying on a single containing block to set the dimensions for everything in it.
Scratch that, looks like moving your print stylesheet up to the top fixes it. I cloned the pages and played around a bit and here is the version with just the print css moved: http://www.webpagetest.org/result/101215_b31434e3415f69236161504b6a849272/
If you can delay load the iFrame as well the render performance will get a lot better as well but since that’s the main user content you might not want to do that.
FYI, here are the 3 compared: http://www.webpagetest.org/video/compare.php?tests=101215_3949e1debc0a2e36fc3a9933568737c0-l:Original,101215_b31434e3415f69236161504b6a849272-l:CSS%20Moved,101215_590f7ea2db8b18bb4a5166875bbc9e87-l:CSS%20and%20iFrame
The original, moving the css to the top and both moving the css to the top and eliminating the iFrame.
Patrick, first of all you’re a champion. First post and you’re all over the issues helping out - much appreciated! I was up late working through it too and realised after a lot of googling that the last css from the iframe was holding it all up - http://code.google.com/speed/page-speed/docs/rendering.html I’ve moved the css from the iframe to the top of the parent page and removed the print file, the latest test shows it speeding up render time by lots http://www.webpagetest.org/result/101216_dfbf70beaa525fbeb2ba47b34cfc5192/ I’ve got a few things to work on next with the calendar search. I’ve got to get the main ext-min.js file as early as possible as it kicks off a few subsequent js and json requests. So going to try running it inline so it gets requested before a lot of images. Will look into the div layout aspect you mentioned too…cheers
Nice! Congratulations, look forward to seeing what else you can do to it but it’s worlds better already.
If you really want to force the print stylesheet to download last see my post here Delay Loading The Print Stylesheet
I think the same idea can be applied to the favicon but I’ve not tested this.