Drupal is Traag: handvatten voor een snelle site.

2,517 views

Published on

Presentatie gegeven tijdens DrupalJam 2013

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,517
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Drupal is Traag: handvatten voor een snelle site.

  1. 1. 17 mei 2013Drupal is traag. Of niet?
  2. 2. duurzame websitesWaarom 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 defront-end (JavaScript, CSS3)
  3. 3. Begin met de 80%
  4. 4. duurzame websitesCSS 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. 5. duurzame websitesCSS 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. 6. duurzame websitesMaak minder requests• CSS & Javascript aggregatie aanzetten• Lazy loading (content pas laden als het in beeld komt).• Gebruik Image Sprites
  7. 7. duurzame websitesSprites op Hero.nl• 47 ingredienten• Samengevoegdtot 1 afbeelding• Daarnaast nog 1sprite voor icons
  8. 8. duurzame websitesGebruik 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-lessdomein.
  9. 9. duurzame websitesLeg je focus op de CSSCSS 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. 10. duurzame websitesDNS prefetchingExterne 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. 11. duurzame websitesProgressive JPG’s• Veel belangrijker dan de exacte laadtijd is de beleving van degebruiker. Beter een wazig plaatje dan een half plaatje.• Of nog beter: helemaal geen plaatjes (SVG, CSS)
  12. 12. duurzame websitesProgressive JPG’s• Veel belangrijker dan de exacte laadtijd is de beleving van degebruiker. Beter een wazig plaatje dan een half plaatje.• Of nog beter: helemaal geen plaatjes (SVG, CSS)
  13. 13. duurzame websitesHoe meet je het?Google Page Speed en Firebug / Chrome DEV Tools
  14. 14. duurzame websitesCaching in Drupal: settings• Page caching zetmax-age headers.• Page cachingvoor uitgelogd• 10 min cachelifetime altijd aan• Block cachingwordt genegeerdbij page caching
  15. 15. duurzame websitesCaching in Drupal: codeVoor 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. 16. duurzame websitesCaching in Drupal: codeDatabase-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. 17. duurzame websitesCaching in Drupal: codeCaching in een render array.$content[my_content] = array(#cache => array(cid => my_module_data,bin => cache,expire => time() + 360,),);
  18. 18. duurzame websitesBack-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 connectionshttp://drupal.org/node/51263• Varnish/Squid/Boost voor anonieme bezoekers• Authenticated User Page Caching (Authcache) voor ingelogdebezoekers
  19. 19. duurzame websitesNog twee tipsSpecifieke selectors in CSS.selector is sneller dan .body .page .selectorDOM aanpassen met jQuery is traagDoe dit zo min mogelijk. Beter eerst je aanpassingen in JS doen en ineens wegschrijvennaar de DOM.
  20. 20. duurzame websitesLeesvoer• 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. 21. Vragen?baris@limoengroen.nl | @BarisW | www.limoengroen.nl | 020 - 737 1880

×