Speed up Load
localnerve opened this issue · 2 comments
Judging by the request waterfall comparison:
flux-react-example-sw WPT vs flux-react-example WPT
The Content Download completes about 600 ms later, and completes when the initial background image request completes.
The start of the initial background request starts even later than it normally would (@2.9s vs @2.6s). This is slowing visually complete and speed index.
This is fueled by two SSL negotiations, one for the main origin and one for the image origin (~600ms). Also, the settings.css is adding a small amount to DOMContentLoaded.
Ideas
- Notice the TTFB growth after main.js. Indicates server resources would remedy.
- Remove the request for settings.css until much later. This contributes to later DOMContentReady and its not even used until the modal is called for.
ff42d82 uses non-blocking script load instead of injecting css links into the end of the document. Costs initial payload size increase of ~500 bytes, but should be faster.
708c475 adds preconnect resource hint to allow modern browsers to make the full connection, including TLS earlier if possible.
The result of adding the preconnect resource hint makes the biggest, measurable difference here.
Using preconnect for the image resource and to a lesser degree non-blocking css loads combined to shave almost 800ms from the load. That's the win needed for this issue.
3GFast
http://www.webpagetest.org/result/151123_63_SJ0/
3G
http://www.webpagetest.org/results.php?test=151124_9C_18F7