Current time: 08-24-2019, 01:34 PM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to speed up initial page render...
12-15-2010, 04:44 PM
Post: #1
How to speed up initial page render...
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...f2d222cf/. Any help would be greatly appreciated.
Find all posts by this user
Quote this message in a reply
12-16-2010, 04:57 AM
Post: #2
RE: How to speed up initial page render...
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 <div> it is pushing the render out.

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.
Visit this user's website Find all posts by this user
Quote this message in a reply
12-16-2010, 05:56 AM
Post: #3
RE: How to speed up initial page render...
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...b6a849272/

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.
Visit this user's website Find all posts by this user
Quote this message in a reply
12-16-2010, 06:26 AM
Post: #4
RE: How to speed up initial page render...
FYI, here are the 3 compared: http://www.webpagetest.org/video/compare...d%20iFrame

The original, moving the css to the top and both moving the css to the top and eliminating the iFrame.
Visit this user's website Find all posts by this user
Quote this message in a reply
12-16-2010, 10:01 PM
Post: #5
RE: How to speed up initial page render...
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/...ering.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...34cfc5192/ 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
Find all posts by this user
Quote this message in a reply
12-17-2010, 12:46 AM
Post: #6
RE: How to speed up initial page render...
Nice! Congratulations, look forward to seeing what else you can do to it but it's worlds better already.
Visit this user's website Find all posts by this user
Quote this message in a reply
12-23-2010, 08:01 PM
Post: #7
RE: How to speed up initial page render...
(12-16-2010 04:57 AM)pmeenan Wrote:  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 <div> it is pushing the render out.

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.

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.

http://www.bulletbits.com - My Performance Blog
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)