Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front-end Performance 101

19 views

Published on

A basic intro to increasing web performance.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Front-end Performance 101

  1. 1. Front-end Performance 101 Showing you the basics tools to ensure your website has great performance, by Sean O’Mahoney (@Sean12697)
  2. 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. 3. Idols (Web Performance Experts) @WeAreINEVITABLE
  4. 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. 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. 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. 7. Google Dev’ Tools
  8. 8. Google Lighthouse (Audit)
  9. 9. @WeAreINEVITABLE
  10. 10. Web-fonts (font-display) https://css-tricks.com/almanac/properties/f/font-display/ @WeAreINEVITABLE
  11. 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. 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. 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. 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. 15. Any Questions? @WeAreINEVITABLE

×