Backend tools als APC, Memcache en Varnish helpen natuurlijk om je site sneller te maken en die gebruiken we daarom ook graag. Echter, de kans is groot dat de meeste performanceproblemen zich bevinden in de front-end: te veel externe resources, een niet-optimale HTML opmaak en JavaScript dat op de verkeerde plek geladen wordt. Wist je dat 80 tot 90% van de laadtijd van een pagina puur front-end is? Laten we daar dan beginnen met optimaliseren!

1. 25 april
2013Front-end performance

2. Waarom focus op front-end?
• De meeste rendertijd gebeurt
in de front-end (JavaScript, CSS3)
• Google:
100 ms = 10% minder traffic,
500 ms = 20% minder traffic
• Amazon: elke 100ms trager = 1% minder sales
• Google rankt snelle sites hoger

3. De basics
• Minder requests
CSS / JS aggregatie & Image sprites
• Minder code
Minify (JSHint, Speedy module) & verwijder ongebruikte CSS / JS
• Minder data
Gzip compressie
• Gebruik een CDN (Content Delivery Network)
• Maximize browser caching (cache control directive)
• Stylesheets in head, JavaScript in footer (en geen inline)

4. Beginsituatie
• Geen caching
• Geen
compressie
• Veel resources
• 138 requests
87.3 KB, 2.63 s

5. Caching aanzetten helpt
• Caching
aanzetten
(settings.php)
• Al iets beter
121 requests
47.8 KB, 1.32 s
>

6. Minder CSS / JS
• Gebruik
hook_css_alter(
) en
hook_js_alter()
• Verwijder
ongebruikte
files
• Groepeer CSS
in dezelfde
groep

7. JavaScript naar de footer
Modernizr script in de header en zet de andere scripts in de footer (JS_DEFAULT).
function hero_js_alter(&$javascript) {
// Place the modernizr JS in the header, so the rest can be in the footer.
$modernizer_script = drupal_get_path('theme', 'hero') . '/js/foundation/modernizr.foundation.js';
$javascript[$modernizer_script]['in_header'] = TRUE;
foreach ($javascript as &$js) {
if ($js['in_header'] != TRUE && $js['type'] != 'inline') {
$js['group'] = JS_DEFAULT;
$js['scope'] = 'footer';
}
}
}

8. Requests verminderen met
sprites
• Elk ingredient
heeft een eigen
afbeelding. Dat
zijn al 39
requests.

9. Requests verminderen met
sprites
In plaats van veel losse afbeeldingen
1 grote afbeelding die alle afbeeldingen bevat
Voor:
a.button-add { background: url(button-add.png); }
a.button-add:hover { background: url(button-add-active.png); }
Na:
a.button-add { background: url(sprite.png); background-position: 0 0; }
a.button-add:hover { background-position: 0 50px; }

10. Spriting in Compass - SCSS
$ingredients-layout: horizontal;
@import "ingredients/*.png";
.product-ingredients-desktop > li {
@include ingredients-sprite('mango');
}
@each $ingredient in aardbeien, appel, banaan, etc {
&[data-id="#{$ingredient}"] {
@include ingredients-sprite-position("#{$ingredient}");
}
}

11. Spriting in Compass - CSS
.product-ingredients-desktop > li {
background: url('../images/ingredients-sa16d376cfe.png') no-repeat;
}
.product-ingredients-desktop > li {
background-position: -1750px 0;
}
.product-ingredients-desktop > li[data-id="aardbei"] {
background-position: -210px -5px;
}
.product-ingredients-desktop > li[data-id="appel"] {
background-position: -420px -5px;
}
.product-ingredients-desktop > li[data-id="banaan"] {
background-position: -630px -5px;
}

12. Spriting: het resultaat
• En weer iets sneller:
74 requests, 16.8 KB, 939 ms

13. Content Delivery Network
• Module: http://drupal.org/project/cdn
• Haal files van een server dichtbij
• Domein zet geen cookies (veel sneller)
• Veel minder requests op de webserver
75 requests, 25.0 KB, 962 ms

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

15. Leesvoer
• https://developers.google.com/speed/docs/best-practices/request
• http://www.sitepoint.com/web-site-optimization-steps/
• http://developer.yahoo.com/performance/rules.html
• http://www.metaltoad.com/blog/drupal-7-taking-control-css-
and-js-aggregation

16. Vragen?
baris@limoengroen.nl | www.limoengroen.nl | 020 - 737 1880