Optimiser le temps de chargement de votre site / blog

Sur les sites internet classiques aujourd’hui on trouve beaucoup de médias (vidéos, images, musiques…), des designs de plus en plus évolués et des interfaces utilisateurs de plus en plus travaillés. Sur un site internet on peut faire deux types d’optimisations, les optimisations « serveur » et les optimisations « client ». Alors pourquoi est-il important d’optimiser le temps de chargement de son site?

• 500 ms de plus lors d’une recherche Google et c’est 20 % de recherches en moins.
• 100 ms de temps de chargement à Amazon et vous perdez 1 % des ventes.
• Le temps de chargement d’une page internet rentre dans le critères de positionnement de Google.

Le but de cet article est de vous présenter quelques optimisations faciles à mettre en place qui vous permettrons de gagner un temps de chargement significatif. Par exemple en ayant appliqué ces méthodes sur Lezard Spock j’ai divisé le temps de chargement d’une page par cinq.

Utilisez des PNG Sprites.

Quand vous chargez un site internet votre navigateur doit faire une requête sur un serveur web. Le nombre de requête est multiplié par le nombre d’éléments à charger. Par exemple si votre site contient 5 images, un fichier CSS et un fichier JavaScript on se retrouve déjà avec 8 requêtes HTTP pour charger une page. Le fait d’utiliser des PNG Sprites permet deux choses, d’une part de diminuer le nombre de requêtes, et d’autre part d’alléger le poids de votre design/images.

Commençons avec un exemple. Je veux avoir ces 4 images sur mon site:

En utilisant une balise img classique pour chacune des images comme dans cet exemple, je me retrouve avec 5 requêtes HTTP pour un poids de 127KB et un temps de chargement de 424ms. En créant un pngsprite (voir ici) je me retrouve avec 2 requêtes HTTP pour un poids de 123KB et un temps de chargement de 385ms.

Optimisez vos images PNG

Il est également important de penser à optimiser les images PNG avec l’aide d’un logiciel comme optipng sous linux par exemple. Sur le sprite de dessus je gagne environ 10% (13617 bytes = 10.67% decrease). On arrive donc à un temps de chargement final de 365ms pour un poids total de 112KB.

Pour finir d’illustrer mon propos, voici le sprite de Lezard Spock (168 KB), il contient quasiment tout le design du blog. Pour appliquer cette technique à votre site vous pouvez regarder les sources de cette démo ou chercher PNG Sprite sur Google :)

Mettez vos fichiers CSS dans les headers de votre site

En mettant vos fichiers css entre les balises head de votre site vous permettrez aux navigateurs qui se connectent à votre site de générer plus rapidement le rendu de la page.

Minifiez et unifiez vos fichiers CSS

On à l’habitude de le faire avec le JavaScript, mais c’est important de le faire également avec les fichiers de style. Par exemple si vous avez style1.css et style2.css cela fait 2 requêtes HTTP. L’intérêt est limité si ces deux fichiers sont chargés sur toutes les pages de votre site. Il est clairement plus intéressant de faire un seul fichier styles.css. Même si tous les styles ne sont pas utilisés sur toutes les pages, le fichier sera mit en cache par les navigateurs web. Personnellement pour minifier rapidement mes fichiers CSS j’utilise le petit script PHP suivant:

function minify($content) {
	$content = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $content);
	$content = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $content);
	return $content;
}

Attention, n’utilisez pas ce script à chaque chargement de page, utilisez le comme un outil pour générer vos CSS. Sur Lezard Spock par exemple je gagne 23% sur la taille de mon fichier CSS.

Mettez vos fichiers JavaScript en fin de page

Il est inutile de bloquer une requête HTTP pour charger un JavaScript en haut de page, pensez à mettre vos fichier JS juste avant la fermeture de votre balise body.

Minifiez et unifiez vos fichiers JavaScript

Exactement de la même façon que pour les fichiers CSS il est intéressant de minimiser les fichiers JavaScript. Vous pouvez par exemple utiliser le minifieur de Douglas Crockford. Il existe une version PHP à l’adresse suivante: http://code.google.com/p/jsmin-php/.

Envoyez « Cache-Control » pour les fichiers statiques dans vos headers

Pour que la gestion du cache s’effectue correctement il est important d’envoyer des headers HTTP corrects. De base dans la configuration apache classique ces headers ne sont pas envoyés. Vous pouvez automatiser cette opération en activant le module headers d’apache (a2enmod headers). Et en rajoutant les lignes suivantes dans votre fichier de configuration apache ou dans votre .htaccess.

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
	Header set Cache-Control "max-age=290304000, public"
</FilesMatch>

Si vous utilisez Nginx pour vos fichiers statiques (ce que je recommande), vous pouvez utiliser ce code:

location ~* ^.+\.(js|css|php|jpg|jpeg|gif|png|pdf|zip|rar)$ {
	root /home/www/;
	expires max;
}

Utilisez un domaine différent pour vos fichiers statiques

Le fait d’utiliser un domaine différent pour les fichiers statiques (dans mon cas static.weelya.org) permet de paralléliser les requêtes HTTP sans entrainer un nombre de résolutions DNS trop important. Le gain est significatif. L’autre avantage est de ne pas transmettre les cookies de lezard-spock.com. Une économie minime certes, mais c’est toujours ça en plus.

Chargez les fichiers statiques avec Nginx si possible

Nginx est un serveur HTTP (tout comme apache) qui connait des performances bien meilleures pour l’envoie de fichiers statiques (css, js, jpg, png, etc….). Si vous possédez votre propre machine il est intéressant de créer un serveur Nginx (sur le port 8080 si vous n’avez qu’une seule IP). Par exemple le fichier suivant est servit par Nginx: http://static.weelya.org/lezard-spock/favicon.ico.

Évitez la diversité dans vos requêtes externes

Quand vous utilisez une image, une vidéo provenant d’un site externe, par exemple un compteur de visites, un webservice (gravatar par exemple) ou encore une vidéo Youtube, tout navigateur qui se connectera sur votre site internet devra charger ces éléments. Cela augment évidement le nombre de requêtes HTTP mais aussi le nombre de résolutions DNS. De plus, vous n’avez aucun contrôle sur les serveurs qui hébergent ces fichiers. Si possible, évitez ces chargements.

Activez le Mod_Deflate pour Apache 2

Pour cela activez le module deflate (a2enmod deflate) et ajoutez la configuration suivante:

<Location />
        AddOutputFilterByType DEFLATE text/plain
        AddOutputFilterByType DEFLATE text/xml
        AddOutputFilterByType DEFLATE application/xhtml+xml
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE application/xml
        AddOutputFilterByType DEFLATE image/svg+xml
        AddOutputFilterByType DEFLATE application/rss+xml
        AddOutputFilterByType DEFLATE application/atom_xml
        AddOutputFilterByType DEFLATE application/x-javascript
        AddOutputFilterByType DEFLATE application/x-httpd-php
        AddOutputFilterByType DEFLATE application/x-httpd-fastphp
        AddOutputFilterByType DEFLATE application/x-httpd-eruby
        AddOutputFilterByType DEFLATE text/html
        BrowserMatch ^Mozilla/4 gzip-only-text/html
        BrowserMatch ^Mozilla/4\.0[678] no-gzip
        BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

        SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|zip|rar|flv|pdf|wmv)$ no-gzip dont-vary

        Header append Vary User-Agent env=!dont-vary
        Header unset ETag
        FileETag None
</Location>

Cela permet de compresser les fichiers envoyés par Apache.

Évitez les redirections HTTP

Évitez les redirections HTTP vous permet encore une fois de réduire le nombre de requêtes HTTP.

Pour résumer

En appliquant les différentes techniques cités ci-dessus, je suis passé de 6 secondes à environ 1 seconde pour le temps de chargement de la page d’accueil de Lezard Spock.

A retenir donc:

• Réduire: le nombre de requêtes HTTP
• Compresser: HTML, CSS, JavaScript
• Concaténer: CSS, JavaScript, Images
• Cacher: vos fichiers statiques

Utilitaires

Vous pouvez télécharger FireBug, PageSpeed et YSlow, ce sont des plugins pratiques pour l’optimisation coté front. Ci-dessous le résultat de l’analyse de ces plugins pour Lezard Spock. Oui, bon c’est pas parfait, mais c’est déjà pas mal :o