A basic intro to increasing web performance.

1. Front-end Performance 101
Showing you the basics tools to ensure your website has great performance,
by Sean O’Mahoney (@Sean12697)

2. About Me
 Sean O’Mahoney
 (Web Wizard) 🧙♂️
 Director of INEVITABLE (AI Tech Start-up, CTO-as-a-Service)
 Computer Science Graduate (1st Class Honours at MMU)
 Dissertation Project “Building a Personalised JPEG Compressor”
 Freelance Photographer (I’ve worked with images a bit)
 Frequent Mentor at coding groups
 Buyer of many Domain names
@WeAreINEVITABLE

3. Idols (Web Performance Experts)
@WeAreINEVITABLE

4. Content
 Why bother?
 Demystify Terms
 Google Dev’ Tools
 Google Lighthouse (Auditing)
 Diagnostic Fixes (Audit Example)
 Web Fonts
 Caching
 The Critical Path / FMP (First Meaningful Paint)
 Image Optimization
 Links/Resources
 Questions
@WeAreINEVITABLE

5. Why bother?
 A 1 second delay decreases customer satisfaction by 16%
 74% of smartphone users leave a website if it does not load within 5 seconds
 2 seconds delay in Bing led to a 4.3% loss in revenue
 AliExpress reduced load times for their pages by 3% and saw a 10.5% increase in orders
 The Trainline reduced latency by 0.3s and saw an extra £8M/year increase in revenue
 Amazon did a test which showed they would lose $1.6B/year if their speed slowed by 1 second
 https://wpostats.com/
@WeAreINEVITABLE

6. Demystify Terms
 The Critical Path/Requests: Websites run on one thread (for the most part), only allowing scripts
and loading to happen sequentially, this is what the critical path refers to.
 TTFB (Time To First Byte): How long does it take before a resource starts loading
@WeAreINEVITABLE

7. Google Dev’ Tools

8. Google Lighthouse (Audit)

9. @WeAreINEVITABLE

10. Web-fonts (font-display)
https://css-tricks.com/almanac/properties/f/font-display/
@WeAreINEVITABLE

11. Caching
https://developer.mozilla.org/en-
US/docs/Web/HTTP/Headers/Cache-Control
https://devcenter.heroku.com/articles/increasing-
application-performance-with-http-cache-headers
Examples:
http://http-caching-demo.herokuapp.com/
http://http-caching-
demo.herokuapp.com/?cache=true

12. The Critical Path / FMP (First Meaningful Paint)
 Gzip (File compression, provided by the backend/server)
 Async scripts (download parallel to HTML and when loaded, execute)
 Defer scripts (download parallel to HTML, but only execute when everything else is loaded)
@WeAreINEVITABLE

13. Image Optimization
 Format (JPEG, PNG, SVG… Webp?)
 Appropriate Sizing - https://www.xnview.com/en/xnconvert/
 Compress - https://compressjpeg.com/
 https://sean12697.github.io/dissertation-web-product-demo/
 Progressive JPEGs - https://coding.tools/progressive-jpeg/
 Base64 Placeholder Images - https://www.base64-image.de/
 LAZY LOADING - https://caniuse.com/#search=lazy%20loading, https://picsum.photos/400/267
 Useful Github Bot - https://github.com/marketplace/imgbot
@WeAreINEVITABLE

14. Links Used In Slides
 Web Performance Optimization Case Studies: https://wpostats.com/
 Web Fonts “Font Display” Property: https://css-tricks.com/almanac/properties/f/font-display/
 Cache Control: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
 Use Cache Control to Improve Performance: https://devcenter.heroku.com/articles/increasing-application-
performance-with-http-cache-headers
 Bulk Image Converter: https://www.xnview.com/en/xnconvert/
 Compress JPEG Images: https://compressjpeg.com/
 Build a Personalised JPEG Compressor: https://sean12697.github.io/dissertation-web-product-demo/
 Create Progressive JPEGs: https://coding.tools/progressive-jpeg/
 Generate Base64 Placeholder Images: https://www.base64-image.de/
 What Browsers Can Use x Feature: https://caniuse.com/#search=lazy%20loading
 Generate a random placeholder image: https://picsum.photos/
 Useful Github Bot for Optimizing Images using PR’s: https://github.com/marketplace/imgbot
@WeAreINEVITABLE

15. Any Questions?
@WeAreINEVITABLE