I presented an internal tech talk at Scott Logic on Web Performance and some tooling you can use for improvements.

• Slides
• Video

Web Performance Tools

Here are a list of Web Performance Tools to gather a performance metric.

• Google Chrome Lighthouse (Open Chrome Dev tools -> Audit)
• Google Page Speed Mobile
• Yellow Labs
• Let's Validate
• Pagelocity
• Pingdom

Techniques

• Google Sheet to calculate performance metrics
• GitHub Performance Checklist
• Automate PageSpeed tools
• Gzip Encoding
• Use Typekits js to render fonts instead of their default @import method

Compress

• Image Optim minification service
• Image Minification Webpack plugin
• Uglify Webpack plugin

Preloading Scripts

• Preloading Content Mozilla
• caniuse preload
• async vs defer attributes
• Difference between preload and prefetch

Code Split

• Improve Above-The-Fold Video by Harry Roberts
  • Harry Roberts website cssWizadry
• Critical Path npm package
• Code Split

Images

• LazyLoad offscreen images
• Embed images inline
  • url-loader npm package

Other

• The First Website I have ever Built