25 april 2013Front-end performance

Waarom focus op front-end?

• De meeste rendertijd gebeurtin 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

De basics

• Minder requestsCSS / JS aggregatie & Image sprites

• Minder codeMinify (JSHint, Speedy module) & verwijder ongebruikte CSS / JS

• Minder dataGzip compressie

• Gebruik een CDN (Content Delivery Network)

• Maximize browser caching (cache control directive)

• Stylesheets in head, JavaScript in footer (en geen inline)

Beginsituatie

• Geen caching

• Geen compressie

• Veel resources

• 138 requests87.3 KB, 2.63 s

Caching aanzetten helpt

• Caching aanzetten (settings.php)

• Al iets beter 121 requests47.8 KB, 1.32 s

>

Minder CSS / JS

• Gebruik hook_css_alter() en hook_js_alter()

• Verwijder ongebruikte files

• Groepeer CSS in dezelfde groep

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'; } }}

Requests verminderen met sprites

• Elk ingredient heeft een eigen afbeelding. Dat zijn al 39 requests.

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; }

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}");

}

}

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;

}

Spriting: het resultaat

• En weer iets sneller: 74 requests, 16.8 KB, 939 ms

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

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

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

Vragen?

baris@limoengroen.nl | www.limoengroen.nl | 020 - 737 1880