drupal is traag: handvatten voor een snelle site
DESCRIPTION
Presentatie gegeven tijdens DrupalJam 2013TRANSCRIPT
![Page 1: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/1.jpg)
17 mei 2013Drupal is traag. Of niet?
![Page 2: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/2.jpg)
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 de
front-end (JavaScript, CSS3)
![Page 3: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/3.jpg)
Begin met de 80%
![Page 4: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/4.jpg)
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.
![Page 5: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/5.jpg)
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!
![Page 6: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/6.jpg)
duurzame websitesMaak minder requests
• CSS & Javascript aggregatie aanzetten
• Lazy loading (content pas laden als het in beeld komt).
• Gebruik Image Sprites
![Page 7: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/7.jpg)
duurzame websitesSprites op Hero.nl
• 47 ingredienten
• Samengevoegd
tot 1 afbeelding
• Daarnaast nog 1
sprite voor icons
![Page 8: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/8.jpg)
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-less
domein.
![Page 9: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/9.jpg)
duurzame websitesLeg 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!
![Page 10: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/10.jpg)
duurzame websitesDNS 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">
![Page 11: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/11.jpg)
duurzame websitesProgressive 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)
![Page 12: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/12.jpg)
duurzame websitesProgressive 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)
![Page 13: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/13.jpg)
duurzame websitesHoe meet je het?
Google Page Speed en Firebug / Chrome DEV Tools
![Page 14: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/14.jpg)
duurzame websitesCaching 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
![Page 15: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/15.jpg)
duurzame websitesCaching 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;}
![Page 16: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/16.jpg)
duurzame websitesCaching 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;}
![Page 17: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/17.jpg)
duurzame websitesCaching in Drupal: code
Caching in een render array.
$content['my_content'] = array( '#cache' => array( 'cid' => 'my_module_data', 'bin' => 'cache', 'expire' => time() + 360, ),);
![Page 18: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/18.jpg)
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 connections
http://drupal.org/node/51263
• Varnish/Squid/Boost voor anonieme bezoekers
• Authenticated User Page Caching (Authcache) voor ingelogde
bezoekers
![Page 19: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/19.jpg)
duurzame websitesNog twee tips
Specifieke selectors in CSS.selector is sneller dan .body .page .selector
DOM aanpassen met jQuery is traagDoe dit zo min mogelijk. Beter eerst je aanpassingen in JS doen en ineens wegschrijven
naar de DOM.
![Page 20: Drupal is Traag: handvatten voor een snelle site](https://reader030.vdocuments.site/reader030/viewer/2022020122/556a6e22d8b42ab0468b50d3/html5/thumbnails/20.jpg)
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/