ready, set, go! snelle websites bouwen
TRANSCRIPT
![Page 1: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/1.jpg)
Ready, Set, Go!Snelle websites
Joomla!dagen Nederland zaterdag 16 april, 2016
Woudschoten, Zeist
![Page 2: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/2.jpg)
Perceived speed
Performance budget
Technieken
Tools
![Page 3: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/3.jpg)
Perceived speed
Je site is niet zo snel als hij daadwerkelijk is..
Je site is zo snel als hij voelt..
![Page 4: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/4.jpg)
![Page 5: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/5.jpg)
![Page 6: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/6.jpg)
Maar wat is dan snel genoeg?
![Page 7: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/7.jpg)
Performance budget
Geen geld budget
Maar een budget met KBs
Voor jezelf en voor je opdrachtgever
![Page 8: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/8.jpg)
20%
![Page 9: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/9.jpg)
http://danielmall.com/articles/how-to-make-a-performance-budget/
Site Start render Doc complete Fully loaded
joomladagen.nl 4,9s 14,3s 18,6s
2015.netherlands.wordcamp.org 5,9s 17,7s 23,3s
frontendunited.org 1,3s 15,9s 16,6s
From: Amsterdam, NL - IISpeed - Chrome - 3GSlow
![Page 10: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/10.jpg)
http://danielmall.com/articles/how-to-make-a-performance-budget/
Huidig Doel
Start render 1,3s 1s
Doc complete 15,9s 12,7s
Fully loaded 16,6s 13,3s
20% sneller
![Page 11: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/11.jpg)
http://danielmall.com/articles/how-to-make-a-performance-budget/
Doel tijd Kilobyte
Start render 1s 96 KB
Doc complete 12,7s 1200 KB
Fully loaded 13,3s 1275 KB
En dan in KBs
![Page 12: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/12.jpg)
Technieken
Images, images, images
Libraries, libraries, libraries
Frameworks, frameworks, frameworks
![Page 13: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/13.jpg)
Images
![Page 14: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/14.jpg)
Joomladagen
Wordcamp
Frontend United
![Page 15: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/15.jpg)
![Page 16: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/16.jpg)
ImageOptimimageoptim.com
![Page 17: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/17.jpg)
![Page 18: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/18.jpg)
![Page 19: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/19.jpg)
![Page 20: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/20.jpg)
![Page 21: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/21.jpg)
![Page 22: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/22.jpg)
![Page 23: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/23.jpg)
![Page 24: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/24.jpg)
![Page 25: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/25.jpg)
![Page 26: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/26.jpg)
http://bdadam.com/blog/loading-webfonts-with-high-performance.html
WOFF
Base64
LocalStorage
![Page 27: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/27.jpg)
![Page 28: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/28.jpg)
![Page 29: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/29.jpg)
![Page 30: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/30.jpg)
iframes
![Page 31: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/31.jpg)
![Page 32: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/32.jpg)
![Page 33: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/33.jpg)
![Page 34: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/34.jpg)
![Page 35: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/35.jpg)
![Page 36: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/36.jpg)
![Page 37: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/37.jpg)
Kleine tips
Weinig domeinen
Inline JavaScript
Lazyload verborgen afbeeldingen
Above the fold CSS
![Page 38: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/38.jpg)
Tools
Meten is weten
Na livegang blijven testen
Continuous Integration
![Page 39: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/39.jpg)
![Page 40: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/40.jpg)
![Page 41: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/41.jpg)
![Page 42: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/42.jpg)
![Page 43: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/43.jpg)
![Page 44: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/44.jpg)
![Page 45: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/45.jpg)
![Page 47: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/47.jpg)
Vragen?
![Page 48: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/48.jpg)
Stel een performance budget samen
Hou je er aan tijdens en na livegang
Vraag je telkens of je functie X nodig hebt
Tools to the rescue
Images!
![Page 49: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/49.jpg)
Time’s up
@rhcpoort
![Page 50: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/50.jpg)
http://yellowlab.tools/result/edo3s7ddu6 http://www.webpagetest.org/result/160411_07_1452/
https://gtmetrix.com/reports/www.joomladagen.nl/ZkYjFfUy http://tools.pingdom.com/fpt/#!/bvuej/http://
www.joomladagen.nl/ https://www.dareboost.com/en/report/
570bfb6e0cf2e634bc50ae9f http://requestmap.webperf.tools/render/
160411_PH_d8619da6f1103e7e9cba2e071d97302a https://developers.google.com/speed/pagespeed/insights/?
url=http%3A%2F%2Fwww.joomladagen.nl%2F&tab=desktop
![Page 51: Ready, Set, Go! Snelle websites bouwen](https://reader033.vdocuments.net/reader033/viewer/2022042722/588b150d1a28abdf3b8b78eb/html5/thumbnails/51.jpg)
Foto’s komen van https://unsplash.com/