Drupal is Traag: handvatten voor een snelle site.
•
0 likes•2,682 views
Presentatie gegeven tijdens DrupalJam 2013
More Related Content
Similar to Drupal is Traag: handvatten voor een snelle site.
Similar to Drupal is Traag: handvatten voor een snelle site. (20)
More from LimoenGroen
More from LimoenGroen (7)
Drupal is Traag: handvatten voor een snelle site.
- 1. 17 mei 2013Drupal is traag. Of niet?
- 2. duurzame websites Waarom is snelheid belangrijk? • Google: 100 ms = 10% minder traffic, 500 ms = 20% minder traffic • Amazon: elke 100ms trager = 1% minder sales • Google rankt snelle sites hoger • De meeste rendertijd in de front-end (JavaScript, CSS3)
- 3. Begin met de 80%
- 4. duurzame websites CSS bovenaan & JS onderaan • CSS blokkeert het renderen, zet deze dus in je <head> • JS blokkeert downloaden, zet deze dus voor je </body> • In Drupal kan dit vrij makkelijk met hook_js_alter en hook_css_alter.
- 5. duurzame websites CSS bovenaan & JS onderaan • CSS blokkeert het renderen, zet deze dus in je <head> • JS blokkeert downloaden, zet deze dus voor je </body> • In Drupal kan dit vrij makkelijk met hook_js_alter en hook_css_alter. • Toch hier bezig? Dan gelijk ook minder code!
- 6. duurzame websites Maak minder requests • CSS & Javascript aggregatie aanzetten • Lazy loading (content pas laden als het in beeld komt). • Gebruik Image Sprites
- 7. duurzame websites Sprites op Hero.nl • 47 ingredienten • Samengevoegd tot 1 afbeelding • Daarnaast nog 1 sprite voor icons
- 8. duurzame websites Gebruik parallellisatie • Gebruik een extra domein (of meer) voor je assets. assets.domein.nl, static.domein.nl of beter: www.imgdomain.com • Let wel: een DNS lookup is traag (20 - 120 ms). Dit hoeft gelukkig maar 1x per domein. • CSS daarom vanaf je hoofddomein (geen extra DNS lookup). • Handvat: ~20 assets per domein. • Let op cookies ivm caching. Serveer assets van een cookie-less domein.
- 9. duurzame websites Leg je focus op de CSS CSS is een bottleneck (het blokkeert rendering), dus: • Gooi onnodige CSS weg (hook_css_alter() of in je theme settings) • Niet vanaf een CDN versturen, maar van zelfde domein als HTML • Zet het in de <HEAD> • Concatenate het: $conf['preprocess_css'] = 1; • Gzip (standaard Drupal) en minify het: SASS: output_style = :compressed • Cache maximaal!
- 10. duurzame websites DNS prefetching Externe scripts? Gebruik DNS prefetching: <link rel="dns-prefetch" href="//widget.externdomein.com"> Kan ook voor assets handig zijn in geval van afbeeldingen: <div class=”hidden”><img src=”sprite” alt=”” /></div> <link rel="prefetch" href="sprite.png">
- 11. duurzame websites Progressive JPG’s • Veel belangrijker dan de exacte laadtijd is de beleving van de gebruiker. Beter een wazig plaatje dan een half plaatje. • Of nog beter: helemaal geen plaatjes (SVG, CSS)
- 12. duurzame websites Progressive JPG’s • Veel belangrijker dan de exacte laadtijd is de beleving van de gebruiker. Beter een wazig plaatje dan een half plaatje. • Of nog beter: helemaal geen plaatjes (SVG, CSS)
- 13. duurzame websites Hoe meet je het? Google Page Speed en Firebug / Chrome DEV Tools
- 14. duurzame websites Caching in Drupal: settings • Page caching zet max-age headers. • Page caching voor uitgelogd • 10 min cache lifetime altijd aan • Block caching wordt genegeerd bij page caching
- 15. duurzame websites Caching in Drupal: code Voor caching binnen 1 page request. Wordt bijvoorbeeld gebruikt in node_load(). function my_module_function() { $my_data = &drupal_static(__FUNCTION__); if (!isset($my_data)) { // Hier een zware berekening. } return $my_data; }
- 16. duurzame websites Caching in Drupal: code Database-caching (tot een cache clear). function my_module_function() { $my_data = &drupal_static(__FUNCTION__); if (!isset($my_data)) { if ($cache = cache_get('my_module_data')) { $my_data = $cache->data; } else { // Zware berekening. cache_set('my_module_data', $my_data,'cache'); } } return $my_data; }
- 17. duurzame websites Caching in Drupal: code Caching in een render array. $content['my_content'] = array( '#cache' => array( 'cid' => 'my_module_data', 'bin' => 'cache', 'expire' => time() + 360, ), );
- 18. duurzame websites Back-end performance • Apache: mod_php of FastCGI ipv CGI. .htaccess settings in httpd.conf opslaan • Cache PHP code met APC/eAccellerator • MySQL tuning: MySQL query cache, persistent DB connections http://drupal.org/node/51263 • Varnish/Squid/Boost voor anonieme bezoekers • Authenticated User Page Caching (Authcache) voor ingelogde bezoekers
- 19. duurzame websites Nog twee tips Specifieke selectors in CSS .selector is sneller dan .body .page .selector DOM aanpassen met jQuery is traag Doe dit zo min mogelijk. Beter eerst je aanpassingen in JS doen en ineens wegschrijven naar de DOM.
- 20. duurzame websites Leesvoer • https://developers.google.com/speed/docs/best-practices/request • http://developer.yahoo.com/performance/rules.html • http://csswizardry.com/2013/01/front-end-performance-for-web- designers-and-front-end-developers/
- 21. Vragen? baris@limoengroen.nl | @BarisW | www.limoengroen.nl | 020 - 737 1880