Web Performance - theFactor.e

Teaching my co-workers about the low hanging fruits of web performance.

Transcript

1. Web Performance TFE bier- & pizza-avond, 8 maart 2016
2. WPO Web performance optimization, WPO, or website optimisation is the field of knowledge about increasing the speed in which web pages are downloaded and displayed on the user's web browser. Bron: Wikipedia https://en.wikipedia.org/wiki/Web_performance_optimization
5. “Ja maar…”
6. Prepare to not #fail
7. Kosten
9. Dus, wat kunnen wij doen om het een stukje beter te maken? Vooruitgang is een team effort
10. De do do do’s • Optimaliseer afbeeldingen (format, rendering) • Minimaliseer CSS en JS • Compressie aanzetten (gzip) • Gebruik picture element in HTML (vrij nieuw) • Cache! Cache! Cache!
11. De don’t s • (Te) veel third party content (hoe groot zijn die bij elkaar?) • Caching expire headers vergeten in de web server • Resize van afbeeldingen met height en / of width
12. Oh noooooo…
13. Laaghangend fruit - Afbeeldingen optimaliseren - Statisch content cachen
14. Tips en tools
15. Cache static content # Enable long browser caching for assets. # This affects Frontend and Backend and increases performance. location ~* \.(js|css|png|jpg|jpeg|gif|ico|woff|ttf|svg|eot)$ { etag off; expires 31d; } Zonder: Met:
16. In Microsoft IIS
17. Webpagetest supported by Google as part of our efforts to make the web faster http://www.webpagetest.org/ • first byte time • keep alive aan? • compressie • cacheability • CDN?
18. Pingdom Website Speed Test
19. REDbot • header checks • gzip (incl. %’s) • freshness https://redbot.org/
20. IMG’s ($:~/Desktop)-> jpegoptim -m80 toepassingen.jpg toepassingen.jpg 1400x800 24bit N Exif IPTC JFIF [OK] 402871 --> 210680 bytes (47.71%), optimized. TFE-website Deze PNG is 512k —> “Save as”: PNG naar JPG De JPG is 400k Optimize de JPG met “jpegoptim” op de CLI: Geen zichtbaar kwaliteitsverlies in de browser!
22. OS X? ImageOptim! Windows? RIOT! (Radical Image Optimization Tool)
24. Meer weten? • Planet Performance: http://www.perfplanet.com/ • Alles van Steve Souders: http://www.stevesouders.com/ • Boek: Designing for Performance • Vraag het aan mij. Misschien weet ik iets…
25. – M. van Nieuwkerk, mannetje van de televisie “Tot zo ver! Tot morgen!”