: Reducing waiting delay to webpage rendering time? I ran a few tests on my website at webpagetest.org and while the Time to First Byte is under 200ms, it seems that in all tests I have run
I ran a few tests on my website at webpagetest.org and while the Time to First Byte is under 200ms, it seems that in all tests I have run in different browsers at different locations, the page is presented to the screen much later after the first HTML page has been completely downloaded.
I ran a test in firefox from New York using their native connection and it shows that rendering starts at 600 ms yet the first downloadable byte (TTFB) is ready as of 100 ms:
See: www.webpagetest.org/result/150614_G7_KR7/1/details/
I then proceeded to try chrome from the same computer with other settings the same. TTFB is roughly the same however the rendering starts at 350 ms:
See: www.webpagetest.org/result/150614_56_KTJ/1/details/
I decide then to try IE 11 from California with other settings the same. TTFB is a bit longer as expected, yet the rendering refuses to start before 600 ms:
www.webpagetest.org/result/150614_T3_KYC/
My pages are served gzipped and I flush the buffers between outputting the HTTP headers and outputting the actual webpage data.
I'm gonna look into increasing the compression level but if there is anything else I can do server-side to see the first loaded page right away instead of waiting until the browsers decide when they are good and ready to display it.
Also, if you see the filmstrip view of each test, you'll see my problem dead-on because nothing appears on screen before 500 ms.
I do apologize if this question ends up being placed on-hold, but I feel this is an issue that needs a solution, and I'm sure at least someone else experienced similar results with their websites.
More posts by @Deb1703797
1 Comments
Sorted by latest first Latest Oldest Best
Interesting case, since the page is fairly simple. Firstly, I'd agree with closetnoc's comment that your page is already pretty fast - it's clear you've spent some time working on speed, so any further gains will be micro-optimizations at best. (Faster DNS would certainly help though, as you said.)
My pages are served gzipped and I flush the buffers between outputting the HTTP headers and outputting the actual webpage data
I'm assuming by this you mean you're flushing after the end of the HTML <head> section? There's not much benefit to sending the browser HTTP headers only.
'Flush early' is given as general advice since it lets browsers start grabbing external resources specified in the <head> section whilst they wait for the rest of the HTML page to be downloaded. But since you don't have any external resources linked in the <head>, and your page is being downloaded in 10ms, I really wouldn't worry about this.
I'm gonna look into increasing the compression level
Your HTML page is 5Kb (compressed). Increasing the compression level would save you a few bytes at best, and the increased CPU time required on the server side may well cause this to have a negative effect.
Assuming you do want to try and improve this further, from the CPU utilization graph on your webpagetest results you can see that the browser is busy "doing stuff" between receiving the HTML page and rendering, and since there aren't any external resources it's waiting for, all you can do is try and make the page simpler to render. There are two things I'd suggest:
You have a lot of CSS for a page with a pretty simple layout (it takes up about 50% of the HTML source). Perhaps this can be simplified? Once upon a time guides would have said take a look at using more efficient CSS selectors (avoiding things like #mp DIV DIV A and #mp DIV DIV), but this doesn't seem to be much of an issue these days. (And I see that Page Speed Insights no longer suggests looking at this.)
You have a couple of lines of inline javascript, the purpose of which seems to be allow the Google ads to load as early as possible (invisibly), and then be moved into the right position. Instead, it might be better to split your Google ads JS so that the adsbygoogle.js async call is in the <head> section, and the ads <ins> tag is where you want them to render. Then you could get rid of your inline JS and the related CSS rules completely.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.