Page Load Improvement steps.md

First Time

• Cache Everything -- NGINX, CDN
• Use CDN ( and multiple cdn's because generally broswer restricts concurrent connections)
• Move scripts to body (i.e below the fold)
• Minimize head tag because this is blocking
• HTTP/2 - Stream and Push
• Stream HTML and CSS
• Use appropriate images
• Server Side Rendering of First Page
• Analyze Critical Rendering Path
• Minify CSS and JS bundles and gzip
• Chunk HTML and CSS bundles -- vendor+app and route specific
• Use App Shell CSS in head tag if needed
• Opmitimize CSS
• Care for Above the fold content
• Use preconnect, prefetch, async and defferred
• Without async or defer, browser will run your script immediately, before rendering the elements that's below your script tag.
• With async (asynchronous), browser will continue to load the HTML page and render it while the browser load and execute the script at the same time.
• With defer, browser will run your script when the page finished parsing. (not necessary finishing downloading all image files. This is good.)
• Enable Keep-Alive
• Image Sprites
• Move animations to css from JS if possible
• Move things to requestIdleCallback
• Use font-display for fonts
• Have a loader animation css in head

Subsequent

• Cache using Service Workers - sw-toolbox, lighthouse -- strategy fastest, network-first -- offline
• Browser Caching

Tools

• Lighthouse
• WebPageTest
• Google Page Insights
• Google Chrome