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!
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)
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';
}
}
}
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.