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.

of

Front-end Performance 101 Slide 1 Front-end Performance 101 Slide 2 Front-end Performance 101 Slide 3 Front-end Performance 101 Slide 4 Front-end Performance 101 Slide 5 Front-end Performance 101 Slide 6 Front-end Performance 101 Slide 7 Front-end Performance 101 Slide 8 Front-end Performance 101 Slide 9 Front-end Performance 101 Slide 10 Front-end Performance 101 Slide 11 Front-end Performance 101 Slide 12 Front-end Performance 101 Slide 13 Front-end Performance 101 Slide 14 Front-end Performance 101 Slide 15
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Front-end Performance 101

Download to read offline

A basic intro to increasing web performance.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

A basic intro to increasing web performance.

Views

Total views

54

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×