Ready, Set, Go! Snelle websites bouwen

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

Transcript of Ready, Set, Go! Snelle websites bouwen

Page 1: Ready, Set, Go! Snelle websites bouwen

Ready, Set, Go!Snelle websites

Joomla!dagen Nederland zaterdag 16 april, 2016

Woudschoten, Zeist

Page 2: Ready, Set, Go! Snelle websites bouwen

Perceived speed

Performance budget

Technieken

Tools

Page 3: Ready, Set, Go! Snelle websites bouwen

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
Page 5: Ready, Set, Go! Snelle websites bouwen
Page 6: Ready, Set, Go! Snelle websites bouwen

Maar wat is dan snel genoeg?

Page 7: Ready, Set, Go! Snelle websites bouwen

Performance budget

Geen geld budget

Maar een budget met KBs

Voor jezelf en voor je opdrachtgever

Page 8: Ready, Set, Go! Snelle websites bouwen

20%

Page 9: Ready, Set, Go! Snelle websites bouwen

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

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

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

Technieken

Images, images, images

Libraries, libraries, libraries

Frameworks, frameworks, frameworks

Page 13: Ready, Set, Go! Snelle websites bouwen

Images

Page 14: Ready, Set, Go! Snelle websites bouwen

Joomladagen

Wordcamp

Frontend United

Page 15: Ready, Set, Go! Snelle websites bouwen
Page 16: Ready, Set, Go! Snelle websites bouwen

ImageOptimimageoptim.com

Page 17: Ready, Set, Go! Snelle websites bouwen
Page 18: Ready, Set, Go! Snelle websites bouwen
Page 19: Ready, Set, Go! Snelle websites bouwen
Page 20: Ready, Set, Go! Snelle websites bouwen
Page 21: Ready, Set, Go! Snelle websites bouwen
Page 22: Ready, Set, Go! Snelle websites bouwen
Page 23: Ready, Set, Go! Snelle websites bouwen
Page 24: Ready, Set, Go! Snelle websites bouwen
Page 25: Ready, Set, Go! Snelle websites bouwen
Page 26: Ready, Set, Go! Snelle websites bouwen

http://bdadam.com/blog/loading-webfonts-with-high-performance.html

WOFF

Base64

LocalStorage

Page 27: Ready, Set, Go! Snelle websites bouwen
Page 28: Ready, Set, Go! Snelle websites bouwen
Page 29: Ready, Set, Go! Snelle websites bouwen
Page 30: Ready, Set, Go! Snelle websites bouwen

iframes

Page 31: Ready, Set, Go! Snelle websites bouwen
Page 32: Ready, Set, Go! Snelle websites bouwen
Page 33: Ready, Set, Go! Snelle websites bouwen
Page 34: Ready, Set, Go! Snelle websites bouwen
Page 35: Ready, Set, Go! Snelle websites bouwen
Page 36: Ready, Set, Go! Snelle websites bouwen
Page 37: Ready, Set, Go! Snelle websites bouwen

Kleine tips

Weinig domeinen

Inline JavaScript

Lazyload verborgen afbeeldingen

Above the fold CSS

Page 38: Ready, Set, Go! Snelle websites bouwen

Tools

Meten is weten

Na livegang blijven testen

Continuous Integration

Page 39: Ready, Set, Go! Snelle websites bouwen
Page 40: Ready, Set, Go! Snelle websites bouwen
Page 41: Ready, Set, Go! Snelle websites bouwen
Page 42: Ready, Set, Go! Snelle websites bouwen
Page 43: Ready, Set, Go! Snelle websites bouwen
Page 44: Ready, Set, Go! Snelle websites bouwen
Page 45: Ready, Set, Go! Snelle websites bouwen
Page 46: Ready, Set, Go! Snelle websites bouwen

http://yellowlab.tools/result/eds221dejy

Page 47: Ready, Set, Go! Snelle websites bouwen

Vragen?

Page 48: Ready, Set, Go! Snelle websites bouwen

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

Time’s up

@rhcpoort

Page 50: Ready, Set, Go! Snelle websites bouwen

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

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