Caring about performance

Frontend Rijeka meetup #2

Transcript

1. Caring about performance Teo Dragovic
2. Average page size • 735kb in 2011. • 2281kb in 2016. http://httparchive.org/compare.php?&r1=Mar%201%202016&s1=All&r2=Mar%2015%202011&s2=All
3. 80% of internet users own a smartphone http://www.globalwebindex.net/blog/80-of-internet-users-own-a-smartphone
4. Why #perfmatters • Direct impact on success of your project • Amazon: 100ms on page load time == 1% increase in revenue • Mozilla: 2.2s off landing page == 15.4% more conversions (60 mil. downloads per year) https://blog.mozilla.org/metrics/category/website-optimization/
5. Perception of speed • < 100ms - feels instant • 100ms - 1000ms - noticeable delay (machine is working) • > 1s - mental context switch • > 10s - task is abandoned https://www.nngroup.com/articles/response-times-3-important-limits/
6. Design for performance • Performance is a feature • You can’t mock up performance in Photoshop • Improve on perceived performance
8. async <script src="https://third-party.com/resource.js" async></script>
9. Performance budget • Milestone timings (page load time, render time...) • SpeedIndex • Quantity based metrics (page weight, number of requests...) • Rule based metrics (Google PageSpeed, YSlow...) • Set realistic goals (use 20% rule) http://www.webpagetest.org/
10. Working within budget • Optimize to make room for new features • Remove old features • Don’t add new features
11. Quick wins (low effort, big impact) • HTTP compression (GZIP, deflate) • Cache • Concat and minify
12. HTTP compression <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript </ifmodule> gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.1; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
13. Cache • html5boilerplate.com • Don’t forget to break the cache styles.css?v=1 scripts.js?v=2
14. Concat and minify • “Fastest request is the one never made” • Automate process (use task runners like Grunt or Gulp or CodeKit)
15. Images and web fonts
16. Images • ~70% of average page weight are images • Choose the right format ◦ JPG vs PNG vs SVG • Quick win: lossless optimization ◦ ImageOptim, TinyPNG, TinyJPEG, PNGGauntlet • Responsive images ◦ www.responsivebreakpoints.com
17. Web fonts • FOUT vs FOIT • Use webfontloader • Subset only what you need ◦ Font Squirrel webfont generator https://github.com/typekit/webfontloader http://www.fontsquirrel.com/tools/webfont-generator
18. Future is now
19. HTTP/2 • Only on SSL • Multiplexed • Also: binary, has header compression and push ability • If going on HTTP/2 don’t: concat, use sprites and do domain sharding
20. Pick your battles • Not all web sites are the same • Use tools not rules • Test everything ◦ Analytics, PageSpeed, webpagetest, developer tools, Navigation Timing API
21. Thank you questions?