Het wereldwijde web is van oorsprong supersnel, gebruiksvriendelijk en toegankelijk. Simpele statische witte pagina's met zwarte tekst, headings, ordered en unordered lists, blauwe links en andere HTML elementen. En toen kwamen er images, CSS, JavaScript, dynamische pagina's en ga zo maar door. We hebben zelf het internet langzaam gemaakt dus het is ook aan onszelf om het internet weer snel te maken! Naast het snelle laden heeft een snelle website ook andere voordelen. Zo zijn de zoekmachines er erg blij mee. Mobiele gebruikers hoeven minder data in te laden waardoor de databundel langer mee gaat. Ook is de kans op conversie hoger als je bezoeker sneller kan vinden wat hij / zij zoekt.

1. Ready, Set, Go!
Snelle websites
Joomla!dagen Nederland
zaterdag 16 april, 2016
Woudschoten, Zeist

2. Perceived speed
Performance budget
Technieken
Tools

3. Perceived speed
Je site is niet zo snel als hij daadwerkelijk is..
Je site is zo snel als hij voelt..

6. Maar wat is dan snel genoeg?

7. Performance budget
Geen geld budget
Maar een budget met KBs
Voor jezelf en voor je opdrachtgever

8. 20%

9. 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

10. 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

11. 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

12. Technieken
Images, images, images
Libraries, libraries, libraries
Frameworks, frameworks, frameworks

13. Images

14. Joomladagen
Wordcamp
Frontend United

16. ImageOptim
imageoptim.com

26. http://bdadam.com/blog/loading-webfonts-with-high-
performance.html
WOFF
Base64
LocalStorage

30. iframes

37. Kleine tips
Weinig domeinen
Inline JavaScript
Lazyload verborgen afbeeldingen
Above the fold CSS

38. Tools
Meten is weten
Na livegang blijven testen
Continuous Integration

46. http://yellowlab.tools/result/eds221dejy

47. Vragen?

48. 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!

49. Time’s up
@rhcpoort

50. 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

51. Foto’s komen van https://unsplash.com/