I have a page with a DOMContentLoaded of 4.56 seconds and a load time of 4.68 seconds. . One of the files on the page includes a huge javascript resource of 6mb.
Unfortunately I can’t use WPT on the page since the page is in dev, As a result I am using Chrome Dev tools but would really appreciate insight into what is going on.
The partial waterfall of the first files looks like the following:
tracking.js =========
38k.css ============
100kb.css ===
110kb.css =====
30kb.css ===
1k_synchronous.js ====
40kb_synchronous.js =========
1mb_synch.js =====
90k_synch.js ======
6.2mb_synch.js ==================================
The large file completes downloading in 2700ms. However the filmstrip doesn’t show any content until 5000ms at which point the top nav is displayed - that’s it. The 6.2 mb file is placed at the bottom of the page to prevent blocking. The odd thing too is that the filmstrip ends at 5000ms - however only the nav bar has loaded. Additional files are then loaded, after the initial load time and the whole page above the fold is visually complete in about 20000. The Lighthouse report also doesn’t run properly so I can’t get more accurate stats.
In running a second test the results were worse - the first visual ATF is 13780 on cold cache.
As I understand it, synchronous JS is parser blocking. So would that be the reason why there is nothing on the page visually until after the script is loaded? How would you correct this to get the content load more quickly? From what I have read it seems the solution is to inline critical CSS/javascript to get the DOM from blocking and asynch.
Any suggestions would be greatly appreciated.