Strange gap on repeat view between HTML & Analytics

Web Performance Discuss Test Results
1

Hi all,

I’ve got this strange test result where there is a huge gap/pause between the final bytes of the HTML and the Google Analytics script:

http://www.webpagetest.org/result/151012_NV_G3T/1/details/cached/

This also seems to influence the StartRender.

Does anyone have a clue to what could cause such a pause?

Thanks in advance!

Joyful regards,

Daan

2

Could you post the link again? WPT link that you have shows no results.

3

Hi,

Thanks for noticing akshayranganath! Didn’t know they could suddenly dissapear.

@pmeenan: Is there any way to cause / influence this?

Here is the new test result:

http://www.webpagetest.org/result/151020_VG_BDW/1/details/cached/

Looking forward to your insights.

Joyful regards,

Daan

4

I looked at the waterfall and I can this see this CSS file being called from within the HTML.
https://www.insyde.nl/assets/fceaf56b/A.styles.css.pagespeed.cf.AFqer3Vm-B.css

This stylesheet is being called much later in the render process, after the other JS files and stylesheets have been downloaded, parsed and executed. When the new CSS is included, browser has to rebuild the CSSOM and it takes time.

Can you try to move this stylesheet to head and then check if the performance improves?

5

Hi akshayranganath,

Thanks for the response!

I think you are looking at the wrong view, because my question has to do with the repeat view (WebPageTest Test - WebPageTest Details), which has the CSS file cached already. The only requests are for the html and analytics-script.

So in this case, removing CSS wouldn’t change anything right?

6

From the look of the “CPU Utilization”, it looks like at the machine is loading and parsing your scripts and CSS. Hence the long gap.

If you see the chart for CPU and bandwidth, you will notice that no network requests were made. However, the CPU is flat at 100%. This would indicate that it is doing the heavy lifting of parsing stylesheets, JS files and building the DOM tree or decoding and rendering images.

I re-ran WPT with the timing and trace enabled. I am still learning this part of chrome tools. I can see a lot of activity that appears to be image rendering. Maybe someone on the forum can help you decode the output:
http://www.webpagetest.org/result/151026_KP_2198b13ab2f5558d12e9aa7ccfd19150/1/details/cached/

7

Thanks for the research. Indeed seems to be busy doing some repaints.

What are the best practices to optimize this?