Download to read offline
More Related Content
Similar to Front-end Performance 101
Front-end Performance 101
- 1. Front-end Performance 101 Showingyou the basics tools to ensure your website has great performance, by Sean O’Mahoney (@Sean12697)
- 2. About Me SeanO’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 PerformanceExperts) @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? A1 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 TheCritical 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.
- 8.
- 9.
- 10.
- 11.
- 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 InSlides 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.