More Related Content
Similar to Get Speed 100 - Optimization techniques to make your website fast (20)
Recently uploaded (19)
Get Speed 100 - Optimization techniques to make your website fast
- 1. powered by
- 2. – S o u rc e ( h t t p : / / g s . s t a t c o u n t e r. c o m / p re s s / m o b i l e - a n d - t a b l e t - i n t e r n e t - u s a g e - e x c e e d s - d e s k t o p - f o r- f i r s t - t i m e - w o r l d w i d e ) „In Oktober 2016 mobile internet usage exceeded desktops for the first time“
- 3. W H Y M A K I N G A W E B S I T E FA S T I S A G O O D I D E A ? • Google included pagespeed as major factor in their search algorithm • 40% of people abandon a website that takes more than 3 seconds to load. (Source: KissMetrics) • A 1 second delay in page response can result in a 7% reduction in conversions. (Source: eConsultancy) • A fast website is environment friendly - Needs less server resources and less data volume to download the resources = less energy consumption
- 4. W H AT I S A S L O W W E B S I T E ?
- 5. T H E B AT T L E ( S L O W 3 G ) F M P 4 , 8 s / 1 7 , 5 sF M P 0 . 8 s / F I 2 . 7 s
- 6. „Deliver interactive content in under 1000ms to keep your users engaged“ G O A L
- 7. C O M M O N C A U S E S O F S L O W W E B S I T E S • Uncompressed, too big images • Too many unused styles • Too many custom web fonts • Slow server / response time • Too much overbloated third party plugins
- 8. O P T I M I Z AT I O N T O O L S & T E C H N I Q U E S
- 9. Website performance begins at the design Above the fold FIRST Above the fold Below the fold
- 10. G O O G L E L I G H T H O U S E • Chrome Canary has it built in (Audits Tab in Dev tools) • as npm module available
- 11. O P T I M I Z AT I O N O P P O R T U N I T I E S Images Images Images Response times CSS & Javascript
- 12. T O O L S T O O P T I M I Z E I M A G E D E L I V E RY • 1. Optimize Images Thumbor http://thumbor.readthedocs.io/ • 2. Lazyload Images Lazysizes https://github.com/aFarkas/lazysizes • 3. Cache via CDN Cloudfront, Cloudflare, Fastly
- 13. Optimized images means: Show the image at the right size with the right compression at the right time
- 14. R E S U LT I M P R O V E D P E R C E P T U A L S P E E D I N D E X
- 15. P E R C E P T U A L S P E E D I N D E X • Measures the pixel difference until the page finished loading • Difficult to optimize when there are custom webfonts and images • A good value makes your users feel that your website is fast
- 16. P R O G R E S S I V E LY E N H A N C I N G C O M P O N E N T S Slider, Meganavi, Interactive Filter, …
- 17. P E R F O R M A N C E K I L L E R : T H E FA M O U S S L I D E R • 6 slides produce a lot of html • Images are often not lazyloaded • Javascript needs to be loaded to initialize • Solution: A progressive enhanced slider with lazy loading
- 18. Load only what you need
- 19. C D N F O R D Y N A M I C PA G E S • Be stateless whenever you can (lazyload dynamic parts) • Set the right headers • Cache invalidation by cookie header Cache-Control: public, s-maxage=7200 CDN Dynamic Sateless Site Dynamic Partial Cache-Control: private
- 20. • Relatively small changes can quickly drive significant results. • Green value easy to achieve • Last 5% of speed score are the most difficult 0 100SPEED EFFORT C O N C L U S I O N
- 21. – B Y A L E X A N D E R F E I G L S T O R F E R Thank you! www.storyblok.com www.getspeed100.com www.storyblok.com/tp/how-to-get-pagespeed-100