Optimisez La Vitesse de Chargement de Votre Site

Les dossiers Webxfrance
Optimisez la vitesse de chargement de votre site
par Gregeek pour webxfrance.org
Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site
Webxfrance juillet 2011 v1.0 Le Code de la proprit intellectuelle nautorisant, aux termes de larticle L.122-5, 2 et 3 a), dune part, que les copies ou reproductions strictement rserves lusage priv du copiste et non destines une utilisation collective et, dautre part, que les analyses et les courtes citations dans un but dexemple et dillustration, toute reprsentation ou reproduction intgrale ou partielle faite sans le consentement de lauteur ou de ses ayants droit ou ayants cause est illicite (art. L. 122-4). Cette reprsentation ou reproduction, par quelque procd que ce soit, constituerait donc une contrefaon sanctionne par les articles L. 335-2 et suivants du Code de la proprit intellectuelle.
http://www.webxfrance.org
2 / 54
Table des matires

Keynote ................................................................................................................................................... 5 Introduction............................................................................................................................................. 6 Pourquoi en aurais-je besoin ? ................................................................................................................ 6 Quand est-ce ncessaire ?....................................................................................................................... 6 Comment faire ? ...................................................................................................................................... 7 Les diffrents outils ............................................................................................................................. 7 Performances globales de mon site ................................................................................................ 7 Performances de chaque page de mon site .................................................................................... 9 Les critres......................................................................................................................................... 13 viter les requtes incorrectes ...................................................................................................... 16 viter d'utiliser CSS @import ........................................................................................................ 16 viter d'utiliser les expressions CSS............................................................................................... 16 viter d'utiliser document.write.................................................................................................... 17 Intgrer les ressources CSS peu volumineuses ............................................................................. 17 Intgrer les ressources JavaScript peu volumineuses ................................................................... 18 Regrouper les images dans des sprites CSS................................................................................... 18 Reporter le chargement du JavaScript .......................................................................................... 19 Diffrer l'analyse du code JavaScript............................................................................................. 21 Autoriser la compression............................................................................................................... 21 Exploiter la mise en cache du navigateur ...................................................................................... 22 Spcifier un en-tte "Vary: Accept-Encoding" .............................................................................. 23 Activer la mise en cache des redirections vers la page de destination ......................................... 24 Rduire la taille des ressources CSS .............................................................................................. 25 Rduire la taille des ressources HTML........................................................................................... 26 Rduire la taille des ressources JavaScript .................................................................................... 27 Rduire la taille de la requte ....................................................................................................... 27 Limiter le nombre de rsolutions DNS .......................................................................................... 28 Limiter le nombre de redirections ................................................................................................. 29 Optimiser les images ..................................................................................................................... 30 Optimiser l'ordre des styles et des scripts .................................................................................... 32 Parallliser les tlchargements travers plusieurs noms de domaine ....................................... 34 Privilgier les ressources asynchrones .......................................................................................... 36 Placer le code CSS dans l'en-tte du document ............................................................................ 38
3 / 54
Supprimer le CSS inutile ................................................................................................................ 39 Diffuser les ressources partir d'une URL unique ........................................................................ 39 Diffuser des images mises l'chelle ............................................................................................ 40 Placer les contenus statiques sur des domains sans cookie ......................................................... 40 Spcifier un jeu de caractres ....................................................................................................... 41 Spcifier les dimensions des images ............................................................................................. 42 Utiliser des slecteurs CSS pertinents ........................................................................................... 43 Optimisation Mobile.............................................................................................................................. 44 Etude de cas .......................................................................................................................................... 45 Conclusion ............................................................................................................................................. 53
4 / 54
Keynote
Voici ce que vous apprendrez, ou confirmerez, dans ce document : Pourquoi la vitesse dun site est un critre important ? Quels sont les outils pour travailler sur la vitesse dun site ? Quels sont les critres pour dterminer la vitesse dun site ? Quelles sont les solutions apporter chaque problme ? Etude de cas : marmiton.org
5 / 54
Introduction
La vitesse est la forme d'extase dont la rvolution technique a fait cadeau l'homme. - Milan Kundera Oui, en peine quelques annes, la vitesse est devenue une proccupation majeure dans notre navigation quotidienne. Il est dj loin le temps o le streaming tait impensable, le temps o des modems 56k monopolisaient nos lignes tlphoniques, le temps o le minitel tait roi. Ds lors que vous avez un site Internet, il va falloir penser loptimiser, le rendre toujours plus rapide.
Pourquoi en aurais-je besoin ?

A quoi peut donc bien servir doptimiser la vitesse dun site ? Aprs tout les internautes trouvent bien linformation quils cherchent quelle que soit la vitesse du site, et attendre quelques secondes de plus a ne les tuera pas ! Certes Mais quen est-il de la fameuse exprience utilisateur ? Ce critre est dsormais au cur des algorithmes des moteurs de recherche. Et cest bien lgitime. Quel est lobjectif dun moteur de recherche ? Offrir ses visiteurs les rsultats les plus pertinents pour une recherche donne. Et si lutilisateur le temps de boire un caf chaque changement de page, il est vident quil sera du. La conclusion est donc toujours la mme : ce qui est bon pour mon visiteur est bon pour mon rfrencement naturel. La vitesse de chargement offre un plus grand confort mes visiteurs, et cest un critre important pour mon rfrencement naturel !
Quand est-ce ncessaire ?

Tous les sites Internet seraient bons optimiser ? En fait oui : on peut videmment toujours faire mieux. Nanmoins il va de soi que les moteurs de recherche ont une certaine tolrance et admettent communment un temps dattente raisonnable. Raisonnable ? Quelle prcision ! Me voil bien avanc ! Il ny a pas de valeur prcise ne pas dpasser. Dailleurs plusieurs experts SEO (cest--dire experts en rfrencement naturel) pensent que cette valeur varie en fonction du temps de chargement au niveau mondial. Autrement dit si demain tous les sites internet de la plante se chargent en 1 milliseconde sauf le vtre - vous risquez dtre trs pnalis ! Cependant lheure actuelle, un temps de chargement denviron 2 secondes par page est une bonne cible. Globalement il faut essayer de charger chaque page dun site au maximum en 2 secondes
6 / 54
Comment faire ?
Les diffrents outils
Pas de panique ! Il nest pas question pour vous de sortir votre chronomtre pour voir le temps de chargement de votre page ! Plusieurs outils existent pour vous faciliter la tche. Comme toujours il y a plusieurs concurrents chaque outil. Je ne traiterai ici que les plus classiques. Performances globales de mon site La premire chose faire est de savoir si votre site est peru par les moteurs de recherche comme un site rapide ou lent. Pour cela Google fournit lexcellent Webmaster Tools (Outils pour les webmaster) : http://www.google.com/webmasters/tools Je vais partir du principe que votre site y est dj inscrit. Si ce nest pas le cas je vous encourage GRANDEMENT le faire en suivant la procdure : https://www.google.com/support/webmasters/bin/answer.py?answer=35179&hl=fr
Pour connaitre la vitesse de votre site : Une fois connect au Webmaster Tools, vous accdez la liste de vos sites. Cliquez sur le site de votre choix. Dans la partie gauche, cliquez sur Labos , puis sur Performance du site
Vous accdez alors lcran vous permettant en un coup dil de savoir si votre site est rapide ou lent. Cest trs simple. Si vous tes dans la zone verte, cest bien - Si vous tes dans la zone rouge, cest pas bien !
Exemple de site lent :
7 / 54
Exemple de site qui a su amliorer sa vitesse de chargement :
Outre le temps de chargement moyen de votre site, il y a une autre information intressante dans le texte au-dessus du graphe : les points de donnes . Il sagit en fait dun score sur la fiabilit des informations affiches. Lorsquil est infrieur 1000, cela signifie que Google ne considre pas quil soit trs utile pour lui de mesurer la vitesse de votre site. Autrement dit votre site est trop petit pour que Google y consacre des ressources importantes. Dans ce cas, la vitesse de votre site nest pas votre priorit et vous devriez probablement commencer par passer plus de temps au contenu de votre site ! Google Webmaster Tools permet davoir une vue densemble de la rapidit de mon site Si votre site est dans la zone rouge il faut agir. La premire chose tudier cest la qualit de votre hbergement. En effet mme si votre site est parfaitement optimis, un mauvais hbergement peut faire chuter votre vitesse de manire vertigineuse. Il existe globalement deux types dhbergement : serveur mutualis ou serveur ddi. Sur un serveur mutualis une machine partage ses ressources entre diffrents sites. En rgle gnrale ces machines sont extrmement puissantes (puisquelles doivent tre capables de grer un grand nombre de sites internet simultanment). Nanmoins imaginons que votre site, hberg sur un serveur mutualis, soit voisin dun autre site sur le mme serveur et que cet autre site vient de russir multiplier son trafic, ou plus simplement quun nouveau trs gros site arrive sur ce mme serveur que restera-t-il comme ressources pour vous ? Evidemment des systmes existent pour limiter ce genre dabus mais sur un serveur mutualis vous serez systmatiquement soumis ce genre de problmatiques. Cest pourquoi, si vous vous souciez vraiment de la vitesse de chargement de votre site, il est trs recommand de passer sur un serveur ddi. Pour optimiser la vitesse de chargement dun site mieux vaut lhberger sur un serveur ddi
8 / 54
Mais sur quels critres choisir son serveur ddi ? Le processeur, la mmoire vive, le disque dur, et la bande passante sont les lments cl. Dautres lments peuvent entrer en jeu mais ce sont l les plus importants. En fonction du type de service que rend votre site, les critres sont plus ou moins importants : Le processeur, cest la puissance de calcul de la machine. Il faut le favoriser lorsque votre site doit effectuer des traitements (ex : nombreuses requtes SQL simultanes, nombreux redimensionnement dimages, encodage de fichiers vidos, etc) La mmoire vive, cest la mmoire temporaire de la machine. Elle est utilise dans normment de traitements. Je vais donc faire simple : plus il y en a, mieux cest. Le disque dur, cest lespace de stockage. La plupart du temps il ne modifie la vitesse de votre site, mais certains disques sont plus rapides que dautres en particulier vous pouvez favoriser les disques SSD quand vous en avez les moyens. La bande passante, cest grosso-modo le diamtre du tuyau par lequel transitent vos donnes. Evidemment il faut que la bande passante soit maximale. Nanmoins cela a un cout important et il nest pas toujours ncessaire davoir une si grande bande passante. Elle est surtout recommande si vous hbergez beaucoup de media et que les internautes les tlchargent en masse (vidos, photos). Pour un serveur ddi il faut surtout sintresser au processeur, la mmoire vive, au disque dur et la bande passante Performances de chaque page de mon site Si votre site est globalement rapide, il nen est pas moins utile doptimiser la vitesse de certaines pages. Google Webmaster Tools vous donne aussi une liste (pas trs prcise mais cest dj un bon point de dpart) des pages quil considre comme lentes. Si votre site est globalement lent, et que vous avez dj optimis votre hbergement ou que vous ne pouvez pas en changer, il va falloir travailler sur chacune des pages de votre site. En rgle gnrale mme si votre site a des milliers de pages il ny a que quelques templates (formats de pages), cest--dire que des paquets de pages ont une structure commune. Prenons par exemple le site http://www.wordreference.com (site de traduction) qui contient prs de 8 millions de pages En pratique il y a un format pour la page daccueil, un format de page pour une recherche infructueuse, et un format de page pour une recherche ayant des rsultats donc seulement 3 templates. Vous laurez compris il nest pas question doptimiser les 8 millions de pages mais uniquement les 3 templates. De manire gnrale il est rare de dpasser les 10 ou 20 templates. Pour optimiser toutes les pages de mon site, je simplifie en mintressant des pages type
9 / 54
Pour tudier les performances dune page, je vous conseille dutiliser les outils suivants : Le navigateur Firefox (http://www.mozilla-europe.org/fr/) Le plugin (indispensable pour tout webmaster) Firebug https://addons.mozilla.org/fr/firefox/addon/firebug/ Le plugin de Google : PageSpeed (qui existe aussi pour Chrome) http://code.google.com/speed/page-speed/download.html#extension-rel-ff
Dautres outils concurrents existent (notamment YSlow de chez Yahoo). Ces outils ont des plus et des moins mais ce sont les plus classiques je my limiterai donc. Une fois les outils installs, lancez Firefox et appuyer sur la touche F12. Cela affiche la console Firebug :
Firebug est compos de plusieurs onglets, ceux qui nous intressent ici sont Rseau et PageSpeed.
10 / 54
Cliquez sur Rseau. Si longlet est vide rechargez la page. Vous pouvez alors voir lensemble des ressources qui ont t charges par votre navigateur. URL contient ladresse de la ressource Statut contient le code retour http (on y reviendra plus tard) Domaine cest le nom de domaine de la ressource Poids cest le nombre de kilo-octets de la ressource Chronologie vous permet dtudier visuellement lordre daffichage des ressources ainsi que le temps qua pris chacune se charger. De plus chaque lment chronologique est compos de plusieurs couleurs nous les expliquerons plus tard.
Il y a de plus un trait vertical bleu et un trait vertical rouge. Le trait bleu correspond au moment o le code HTML de la page a t charg, le rouge correspond grosso-modo au moment o la page est effectivement affiche. Cest le temps rouge qui est le temps ressenti par linternaute et cest galement le temps rouge qui est pris en compte par les moteurs de recherche, et cest donc lui que nous allons tenter de rduire. Comme dit plus haut il faut viter quune page ait un temps de chargement suprieur 2 secondes. Cest sur ce critre que vous allez dcider sil faut optimiser la page ou pas.
Cliquez maintenant sur longlet PageSpeed, puis cliquez sur le bouton Analyze Performance :
11 / 54
PageSpeed ne vous parle pas de temps de chargement, et malgr son nom il nacclre pas non-plus le temps de chargement des pages. Mais quoi sert-il donc ? En fait il effectue un diagnostic sur votre page selon des tas de critres, identifie les faiblesses potentielles dans loptimisation de votre page, et vous donne un Page Speed Score cest--dire une note sur vos bonnes pratiques en matire doptimisation de vitesse. Cest donc un outil prcieux ! Evidemment la page daccueil de Google a un score quasi parfait. Pour vous faire une ide, un score infrieur 70 est insuffisant, et un score au-dessus de 90 est un trs bon score. Des outils permettent de savoir si une page est lente et sur quels critres je dois travailler
12 / 54
Les critres
PageSpeed tudie une trentaine de critres pour tablir votre score. Pour chaque critre il vous donne en plus les moyens de lamliorer ainsi quune explication (en anglais) du pourquoi (pour cela cliquez sur lintitul du critre). Malheureusement ces explications sont trs techniques et un peu obscures. Je vais donc mefforcer de les expliquer ici avec un peu de vulgarisation. Pour comprendre comment optimiser, il faut commencer par comprendre ce qui se passe entre un navigateur et un serveur. Le schma classique est le suivant : 1. Un internaute tape ladresse dune page (ex : http://www.monsite.com/sousrepertoire/page.php?valeur1=test1&valeur2=test2) 2. Le navigateur interroge le fournisseur daccs internet pour savoir sur quel serveur se trouve www.monsite.com (cest ce quon appelle la Rsolution DNS). En pratique le navigateur rcupre ladresse IP du serveur. Ce processus est assimilable trouver le numro de tlphone de quelquun dans lannuaire. 3. Le navigateur demande au serveur ainsi trouv de lui renvoyer le contenu qui se trouve sur la page demande. Pour cela le navigateur envoie une Requte HTTP qui contient ladresse de la page demande mais aussi un tas dautres informations, et notamment le Referer (cest-dire ladresse de la page o se trouve le lien sur lequel lutilisateur a cliqu pour arriver la page demande), le User-Agent (cest--dire le nom et la version du navigateur), les cookies (cest--dire des donnes qui sont lies votre activit sur le site et qui sont stockes par votre navigateur) , et ventuellement les donnes dun formulaire. 4. Le serveur analyse la demande et renvoie la ressource demande ainsi quun code de retour. La ressource peut-tre une page HTML, une image JPEG, une vido, etc Le code retour informe le navigateur de la russite ou de lchec de la demande. Les codes retours les plus importants sont les suivants : 200 OK : Tout sest bien pass 301 Moved Permanently : La page demande a t dplace une nouvelle adresse votre navigateur va donc envoyer une nouvelle demande avec la nouvelle adresse 302 Move temporarily : Identique au code 301, la nuance prs que le serveur signale que cest temporaire. Mais cest juste informatif. 403 Forbidden : Linternaute nest pas autoris accder la ressource demande. Le navigateur ne rcupre donc pas la ressource et la requte a t envoye pour rien. 404 Not found : La ressource demande nexiste pas. Le navigateur ne rcupre donc pas la ressource et la requte a t envoye pour rien. 410 Gone : Pratiquement identique 404 une nuance prs : en 410 le serveur renvoie volontairement ce code pour signifier que le contenu nexiste plus, alors quen 404 cest un constat dabsence de la ressource. On le voit dj : en 301,302,403,404 et 410 il y a des requtes mises inutilement il va donc falloir optimiser tout a ! 5. Le navigateur a rcupr sa ressource, et va ventuellement en chercher dautres. Par exemple si linternaute demande une page HTML, celle-ci contient des images, des fichiers javascript, des fichiers CSS, etc pour chacune de ces ressources une requte sera mise. Ce processus est toujours relativement long mme si la ressource demande est de petite taille. Ainsi, on le verra dans quelques lignes, il est intressant de limiter le nombre de requtes dans une
13 / 54
page HTML. Maintenant que cela est clair passons aux explications des rgles. Selon votre environnement les rgles sont en franais ou en anglais, la liste suivante recense les rgles dans les deux langues. Parfois, curieusement, une rgle en anglais est quivalente deux rgles en franais
14 / 54
Cette liste contient lensemble des critres utiliss par PageSpeed. Vous y trouverez le niveau dimpact de chaque rgle, une explication dtaille du problme, et surtout une solution ! Utilisez cette liste comme un livre de recettes, et utilisez-la en fonction des alertes que remonte PageSpeed pour votre site.
15 / 54
Avoid bad requests
viter les requtes incorrectes
IMPACT VARIABLE Description Votre page fait appel des ressources inexistantes (code 404 ou 410). Ces appels sont superflus et ralentissent donc le chargement de la page. Solution Soit il sagit dune erreur de votre part (ex : nom de fichier mal saisi) et il faut corriger ; soit le contenu que vous utilisez nexiste plus et il va falloir trouver un autre contenu similaire ou se dbarrasser de cet appel.
Avoid CSS @import FAIBLE IMPACT Description
viter d'utiliser CSS @import
Il est possible dintgrer un fichier CSS dans un autre grce linstruction @import url("autrefichier.css"). Bien que cela puisse tre pratique pour le dveloppeur, cela nest pas souhaitable en termes de performances. En effet en pratique, le premier CSS sera intgralement charg et utilis par le navigateur avant de se proccuper du second. Du coup les temps de chargement sont allongs et lutilisateur voit sa page bouger dans tous les sens avant den voir la version dfinitive. Solution Fusionnez vos fichiers CSS en un seul gros fichier.
Avoid CSS expressions
viter d'utiliser les expressions CSS
IMPACT MOYEN Description Internet Explorer ajoute une fonctionnalit au CSS : expression. En pratique cela permet dutiliser du Javascript directement dans le CSS pour avoir des rgles daffichage dynamiques. Par exemple on peut crire des choses comme width : expression((document.body.clientWidth-200)+px). Le problme cest que pour obtenir ce dynamisme Internet Explorer recalcule constamment ces expressions, ce qui est particulirement couteux en termes de performances.
16 / 54
Solution Il faut viter ces expressions et les remplacer par un traitement plus standard en Javascript. Mais le plus souvent il sagit dune mauvaise utilisation des capacits du CSS et du HTML et il vaut donc mieux retravailler son code proprement.
Avoid document.write FAIBLE IMPACT Description
viter d'utiliser document.write
document.write est une fonction Javascript permettant dajouter un contenu dans la page HTML de manire dynamique mme aprs son chargement. Cette rgle ninterdit pas vraiment son utilisation, en fait elle dconseille de sen servir pour charger des nouvelles ressources. Notamment des choses comme document.write('<script src="script.js"><\/script>'). En effet les navigateurs modernes optimisent lordre de chargement des ressources quils trouvent dans la page HTML, mais avec une telle criture cette optimisation ne peut pas tre applique. Solution Quand cest possible il vaut mieux crire directement le code HTML quivalent : <script src="script.js"></script>
Combine external CSS
Intgrer les ressources CSS peu volumineuses
FAIBLE IMPACT Description Le chargement dune ressource - mme petite - est assez couteux car il faut a minima le temps daller-retour entre le client et le serveur. Il est intressant de regrouper ces ressources entre elles. Solution Plutt que dappeler 5 fichiers CSS dans votre page HTML, mieux vaut tous les fusionner en un seul gros fichier CSS.
17 / 54
Combine external JavaScript
Intgrer les ressources JavaScript peu volumineuses
FAIBLE IMPACT Description Le chargement dune ressource - mme petite - est assez couteux car il faut a minima le temps daller-retour entre le client et le serveur. Il est intressant de regrouper ces ressources entre elles. Solution Plutt que dappeler 5 fichiers Javascript dans votre page HTML, mieux vaut tous les fusionner en un seul gros fichier Javascript.
Combine images using CSS sprites
Regrouper les images dans des sprites CSS
GROS IMPACT Description Non un sprite nest pas une boisson gazeuse Un sprite est un regroupement de plusieurs images dans un seul et mme fichier. En rgle gnrale il sagit des diffrents tats dun mme objet. Par exemple un bouton peut avoir une apparence dans son tat normal et une autre quand on passe la souris dessus. Dans ce cas le sprite sera constitu de 2 images colles lune sous lautre. Par exemple :
Comme pour les fichiers CSS ou Javascript, le fait de fusionner plusieurs fichiers en un seul amliore les performances car il diminue le nombre de requtes mises au serveur.
18 / 54
Solution Mettons cet exemple en pratique : Dans un fichier CSS : a.bouton { display : block; /* Indispensable pour pouvoir spcifier les dimensions dune balise <a> */ width : 326px; /* Largeur de limage bouton.jpg */ height : 65px; /* Moiti de la hauteur de limage bouton.jpg */ background-image : url(bouton.png); } a.bouton:hover { /* Concerne le cas o lon passe la souris sur le bouton */ background-position : 0% 100%; /* 100% correspond la hauteur de la balise <a>. Ici on dcale le background de la hauteur dun bouton -> on affiche la deuxime partie de limage */ } Et dans le fichier HTML : <a href="unepage.html" class="bouton"></a>
Cette technique prsente un autre avantage : quand lutilisateur passe la souris sur le bouton, il ny a pas les fameuses millisecondes de latence pendant lesquelles limage est blanche jusqu chargement de la nouvelle image. Lexprience utilisateur est donc amliore. Il sagit ici dun exemple simple mais vous pouvez galement regrouper tous les boutons de votre site dans une seule et mme image. Cela vous simplifiera la maintenance, et surtout amliorera les performances du site.
Defer loading of JavaScript
Reporter le chargement du JavaScript
GROS IMPACT Description Cette optimisation vient de lide que les traitements Javascript sur une page peuvent souvent tre chargs aprs la page elle-mme. Par exemple le script de Google Analytics (permettant davoir des statistiques de frquentation dun site) peut trs bien tre appel une fois que la page a t entirement affiche par le navigateur. Linternaute se fiche bien de ce script et ne devrait pas attendre quil soit charg pour pouvoir visionner sa page. Cette optimisation devrait galement tre utilise pour laffichage de pubs : linternaute arrive sur sa page, tout son vrai contenu saffiche, et les pubs ne sont charges qu partir de l.
19 / 54
Solution La technique la plus simple consiste utiliser lattribut mconnu et pourtant extrmement pratique : defer <script type="text/javascript" src="monscript.js" defer="true"></script> Avec cet attribut, le code javascript est bien charg mais lexcution du code ne se fera quune fois que la page aura t entirement charge. Cest un dbut mais pas encore ce quon aimerait. Il existe plusieurs solutions pour rsoudre le problme dans son ensemble, elles sont plus ou moins lgantes, je vous propose la suivante ( placer lintrieur de la balise <HEAD>) : <script type="text/javascript"> /** * Ajoute dynamiquement un fichier Javascript */ function includeJS(src) { var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.setAttribute('src', src); document.getElementsByTagName('head')[0].appendChild(script); } /** * Une fois la page charge... */ (window.addEventListener || window.attachEvent)( window.addEventListener ? 'load' : 'onload', function() { // ... charge ce fichier Javascript includeJS('monscript.js'); }, true ); </script>
20 / 54
Defer parsing of JavaScript
Diffrer l'analyse du code JavaScript
IMPACT MOYEN Description Lorsquun navigateur tombe sur un bout de code Javascript il doit lanalyser, le dcortiquer pour pouvoir faire ce que le programmeur a demand. Cette analyse est assez lourde et ralentit donc le chargement de la page. Afin doptimiser laffichage, il faudrait faire en sorte que ce temps danalyse soit pris une fois que la page est entirement charge, afin de permettre linternaute daccder sa page plus vite. Solution La solution est identique loptimisation prcdente. Je ne mattarde donc pas
Enable compression
Autoriser la compression
GROS IMPACT Description Un des critres majeurs dans loptimisation du temps de chargement est le temps pris tlcharger les diffrentes ressources. Bien entendu plus la ressource est grosse plus le temps de tlchargement est important et donc plus la page est lente safficher. Pour rduire autant que possible le temps de tlchargement les navigateurs permettent, de manire transparente, de tlcharger des ressources compresses et les dcompressent la vole. Ceci est principalement utile pour les ressources de type texte (HTML, CSS, Javascript). Solution La plupart des serveurs rcents sont correctement configurs pour cette optimisation. Il ny a donc rien faire ! Nanmoins si ce nest pas le cas il faut configurer plusieurs fichiers. La procdure tant trs longue je vous renvoie lexcellent article : http://www.alsacreations.com/article/lire/914compression-pages-html-css-gzip-deflate.html
21 / 54
Leverage browser caching
Exploiter la mise en cache du navigateur
Spcifier une technique de mise en cache
GROS IMPACT Description Afin de limiter les requtes inutiles et donc dafficher plus rapidement les pages dun site, les navigateurs et les serveurs utilisent un mcanisme appel cache. Le principe est simple : Linternaute va sur la page daccueil du site, le navigateur tlcharge donc toutes les ressources de la page (HTML, CSS, Javascript, Images, ) Linternaute clique va sur une autre page, le navigateur devrait tlcharger toutes les ressources de cette page galement En fait le navigateur a dj rcupr bon nombre de ressources (les images du design, le logo, le fichier CSS, ) et na donc pas besoin de les tlcharger au nouveau
Les ressources mises en cache restent donc disponibles chez le client au cas o il en aurait nouveau besoin une seconde fois. Mais plusieurs questions se posent : 1) Combien de temps les ressources restent-elles sur le poste ? Cest un choix on peut dfinir la dure que lon veut (cf. Solution ci-aprs), mais en rgle gnrale un cache de 10 jours est une bonne valeur. 2) Si je change une image de mon site, mes anciens visiteurs verront-ils toujours lancienne ? Absolument ! Et cest LE gros problme du cache. Il existe plusieurs techniques pour forcer la mise jour. La plus propre ( mon avis) consiste ajouter une variable en GET lURL, par exemple si vous avez un fichier style.css qui a chang, utilisez dsormais style.css?version=2 . En effet le systme de mise en cache se base sur le nom du fichier et ce ?version=2 change le nom du fichier mais pas son contenu. 3) Toutes les ressources sont-elles mises en cache ? L encore cest un choix mais en rgle gnrale la totalit des ressources (images, CSS, JavaScript) devraient tre mise en cache (cf. Solution ciaprs).
22 / 54
Solution Dans la lutte contre les mauvaises performances il est donc primordial de se consacrer au cache. En pratique il y a une solution simple : le paramtrage du cache dans le fichier .htaccess : Si vous ne savez ce quest le fichier .htaccess, je rsume : cest un fichier que vous pouvez modifier la vole et qui a des impacts sur le comportement de votre serveur. En gnral il se met la racine de votre site. En mettant les lignes de code ci-dessous dans votre fichier .htaccess le cache sera dj bien optimis ! <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|xml|txt|css|js)$"> Header set Cache-Control "max-age=864000, proxy-revalidate" </FilesMatch>
Leverage proxy caching
Spcifier un en-tte "Vary: Accept-Encoding"
Supprimer les chanes de requte des ressources statiques
FAIBLE IMPACT Description Prenons le cas dune grande entreprise o des dizaines de postes naviguent sur Internet partir de la mme connexion ADSL. En pratique, il y a une sorte de poste central qui est connect directement Internet et les autres postes transitent par ce poste central. Cest ce quon appelle un proxy. Le proxy permet de contrler les donnes qui entrent et qui sortent de lentreprise mais cest galement un moyen de rduire la consommation de bande passante. En effet si plusieurs postes accdent aux mmes sites, il ny a aucune raison pour tlcharger plusieurs fois les mmes ressources. Ainsi un systme de cache sur ce poste permet damliorer les performances globales de la navigation dans lentreprise. Ce comportement peut tre demand par le serveur du site.
23 / 54
Solution En plus de la solution prsente pour Leverage browser caching il faut ajouter la ligne en gras dans le code ci-dessous : <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|xml|txt|css|js)$"> Header set Cache-Control "max-age=864000, proxy-revalidate" Header append Vary Accept-Encoding </FilesMatch>
Make landing page redirects cacheable
Activer la mise en cache des redirections vers la page de destination
FAIBLE IMPACT Description De manire gnrale il vaut mieux viter les redirections (puisque cela ajoute une requte pour rien) nanmoins dans certains cas on ne peut pas faire autrement. Cest notamment le cas dun site ayant une version standard, et une version mobile (ex : www.toto.com qui redirige vers iphone.toto.com). Hors si la navigation se fait via un proxy (cf. Leverage proxy caching) vous risquez davoir un site mobile sur un PC standard ou linverse Solution 1) Ajoutez au fichier .htaccess Header append Vary User-Agent env=!dont-vary 2) Remplacez la ligne Header set Cache-Control "max-age=864000, proxy-revalidate" Par Header set Cache-Control "max-age=864000, private"
24 / 54
Minify CSS
Rduire la taille des ressources CSS
FAIBLE IMPACT Description Un fichier CSS bien crit il y a toujours des espaces, des sauts de ligne, des commentaires, et autres tabulations. Bien que cela offre une trs bonne lisibilit au fichier, en matire de performance cest un peu dommage dans la mesure o tous ces caractres superflus pourraient ne pas tre tlchargs sans pour autant impacter le rendu. Solution PageSpeed inclut un outil appel cssmin qui permet de ne garder que le code utile dun fichier CSS. Pour rcuprer la version optimise cliquez sur la flche gauche de la rgle et vous verrez tous les fichiers CSS qui ne sont pas optimiss et vous pourrez rcuprer directement dans loutil la version optimise.
En pratique je vous conseille le comportement suivant : Ecrivez vos fichiers CSS de manire lisible : avec des espaces, des commentaires et des indentations. Supposons que le fichier sappelle style.css Utilisez loutil de PageSpeed pour rcuprer la version optimise (vous pouvez galement utiliser ce site : http://tools.w3clubs.com/cssmin/) et enregistrez le fichier en le nommant style.optimized.css
25 / 54
Dans votre page HTML remplacez votre <link rel="stylesheet" type="text/css" href="style.css"> par <link rel="stylesheet" type="text/css" href="style.optimized.css">
Ainsi votre code sera toujours aussi maintenable et votre site aura de meilleures performances.
Minify HTML
Rduire la taille des ressources HTML
FAIBLE IMPACT Description Sur le principe cette rgle fonctionne sur le mme principe que Minify CSS et a vocation supprimer les caractres inutiles. Solution En pratique cette rgle na pas vraiment de sens dans la trs grande majorit des cas car le code HTML est gnr partir du code PHP, et prendre en compte cette optimisation serait trop complexe. De plus la compression gzip (cf. Enable compression) permet de limiter le poids effectif des espaces et des tabulations (un des principes de cette compression tant didentifier les rptitions et donc de ne pas stocker AAAAAAAA mais 8A). Nanmoins cette rgle est loccasion de faire attention au poids des commentaires HTML. Un commentaire HTML est de type . Ce code, sans impact du point de vue de lutilisateur est bien tlcharg inutilement. Evitez donc leur utilisation et favorisez les commentaires PHP : <?php /* bla bla bla */ ?>. Ceux-ci sont traits par le serveur et ne sont pas tlcharg par les clients.
26 / 54
Minify JavaScript FAIBLE IMPACT Description Le principe est le mme que pour Minify CSS Solution La solution est la mme que pour Minify CSS !
Rduire la taille des ressources JavaScript
Minimize request size
Rduire la taille de la requte
FAIBLE IMPACT Description Une requte HTTP (qui est le protocole standard du web) contient un certain nombre dinformations : ladresse de la page, le Referer (cest--dire ladresse de la page sur laquelle vous avez cliqu pour arriver cette nouvelle page), le User-Agent (cest--dire le nom et la version du navigateur), les cookies (cest-dire des donnes qui sont lies votre activit sur le site et qui sont stockes par votre navigateur), et ventuellement les donnes dun formulaire. Toutes ces donnes mises bout bout sont constitues dun certain nombre de caractres (= octets) que lon appelle taille de la requte . Or les requtes sont mises par paquet de 1500 octets environ. Lidal consiste donc faire en sorte davoir une taille de requte dau maximum 1500 octets pour nmettre quun seul paquet. Solution Malheureusement vous navez pas la main sur grand-chose Ladresse de la page (qui prend aussi en compte les ventuelles donnes aprs le ?, ex : http://www.monsite.com/unsousrepertoire/unepage.php?query=toto) Vous pouvez vous efforcer de limiter la taille des sous-rpertoires ou du nom des fichiers mais le jeu nen vaut pas la chandelle Le Referer : il est gr par le navigateur, il ny a rien faire Le User-Agent : il est gr par le navigateur, il ny a rien faire
27 / 54
Les ventuelles donnes dun formulaire : vitez les formulaires avec des champs qui ne sont pas utiliss. Mais l encore cest une faible optimisation. Les cookies : cest le seul point qui peut vraiment tre amlior de manire sensible. Certains sites utilisent les cookies pour accder un tas dinformations sur lutilisateur (ex : les pages vues, les objets sur lesquels il a cliqu, etc). Cela peut rsulter en des cookies trs volumineux, ce qui gnre de grandes tailles de requte. Plutt que de stocker des grands cookies utilisez les variables de session (http://php.net/manual/fr/features.sessions.php). En pratique seul un identifiant unique de linternaute sera stock comme cookie et toutes les autres informations seront stockes sur le serveur. La seule information qui transitera dans la requte http sera donc lidentifiant, et la requte sen trouvera plus lgre.
Minimize DNS lookups
Limiter le nombre de rsolutions DNS
FAIBLE IMPACT Description Lorsquun navigateur souhaite accder une ressource, la premire chose quil doit faire cest la rsolution DNS, cest--dire rcuprer ladresse IP correspondant au nom de domaine. Dans la mesure o les ressources sont souvent sur les mmes serveurs, les navigateurs optimisent et nexcute cette phase quune fois par domaine (cela inclut le sous-domaine) et par session (cest--dire tant que vous navez pas ferm toutes les fentres du navigateur). Solution Il faut limiter le nombre de domaines utiliss. En pratique il est rare davoir besoin de cette optimisation car la plupart des dveloppeurs le font sans mme y penser Cela peut nanmoins arriver si, par exemple, vous avez une page qui affiche un patchwork dimages venues dautres sites. Dans ce cas il y aura autant de rsolution DNS que dimages et il vaudrait mieux rcuprer les images sur votre propre serveur afin de nutiliser quun seul domaine.
28 / 54
Minimize redirects
Limiter le nombre de redirections
IMPACT MOYEN Description Une redirection sert gnralement indiquer un nouvel emplacement pour une ressource ou encore pour traquer des clics. Il y a plusieurs cas dans lesquels des redirections sont mauvaises pour les performances : Des redirections multiples : A renvoie vers B et B renvoie vers C Pour traquer des clics : on passe par une page intermdiaire qui fait perdre en gnrale environ une seconde Les redirections en Javascript : avec des pages du type <html> <head> <script type="text/javascript"> window.location = "http://www.monsite.com/autre_emplacement.html"; </script> </head> </html>
29 / 54
Solution Pour les redirections multiples : au lieu de faire A > B > C faites directement A > C Pour traquer les clics : plutt que de passer par une page intermdiaire, intgrer le systme de tracking directement dans le code PHP de la page de destination Pour les redirections Javascript : Remplacez-les par des redirections HTTP (plus performantes car le navigateur na pas besoin danalyser le contenu de la page). Pour cela remplacez le code Javascript par le code PHP suivant ( placer au tout dbut de votre page) : <?php header('Location: http://www.monsite.com/autre_emplacement.html'); header("HTTP/1.1 301 Moved Permanently"); /* Uniquement si la page de destination doit tre considre par les moteurs de recherche comme la remplaante dfinitive de la page dorigine ! */ die; /* Cette ligne, trop souvent nglige par les dveloppeurs, est importante pour les performances */ ?> Une autre solution consiste passer par le fichier .htaccess : RewriteEngine on RewriteRule ^emplacement.html$ autre_emplacement.html permanente */
[L] /* ou [L,R=301] si redirection
Optimize images IMPACT MOYEN Description
Optimiser les images
Cest une vidence mais le poids des images prsentes sur votre site est un critre de vitesse. Il faut donc avoir les images les plus petites possibles.
30 / 54
Solution PageSpeed vous propose des images parfaitement optimises sans perte de qualit :
Vous pouvez visionner la version propose par PageSpeed en cliquant sur Optimized version ou rcuprer directement le fichier optimis en cliquant sur Save as . En interne PageSpeed utilise jpegtran pour les fichiers JPEG (http://jpegclub.org/) et OptiPNG pour les fichiers PNG (http://optipng.sourceforge.net/). Nhsitez pas remplacer systmatiquement vos images par celles proposes par PageSpeed. Attention pour les fichiers JPEG car les fichiers optimiss proposs par PageSpeed ont lextension .jpeg et non pas .jpg, ce qui prte parfois confusion
31 / 54
Optimize the order of styles and scripts
Optimiser l'ordre des styles et des scripts
FAIBLE IMPACT Description Lorsquun navigateur lit une page HTML, il le fait de haut en bas et tlcharge les ressources au fur et mesure de sa lecture. Autant que possible il tlcharge les ressources en parallle afin de rduire le temps de tlchargement. Nanmoins pour diverses raisons lorsquun navigateur tlcharge un fichier Javascript il bloque le tlchargement des autres ressources tant que le fichier JavaScript nest pas entirement tlcharg, analys et excut ! Prenons un exemple fourni par Google. Si votre page est du type : <head> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> <script type="text/javascript" src="scriptfile1.js" /> <script type="text/javascript" src="scriptfile2.js" /> <link rel="stylesheet" type="text/css" href="stylesheet2.css" /> <link rel="stylesheet" type="text/css" href="stylesheet3.css" /> </head> Le chargement des ressources suivra ce schma (en supposant que chaque ressource se charge en 100ms) :
Soit un temps total de 300ms.
32 / 54
Solution Il faut reporter le Javascript le plus tard possible. Votre page devient ainsi : <head> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> <link rel="stylesheet" type="text/css" href="stylesheet2.css" /> <link rel="stylesheet" type="text/css" href="stylesheet3.css" /> <script type="text/javascript" src="scriptfile1.js" /> <script type="text/javascript" src="scriptfile2.js" /> </head> Le chargement des ressources suit le schma suivant :
Soit un temps total de 200ms. Cette optimisation doit galement tre applique pour les codes javascript dits inline . Par exemple : <head> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> <script type="text/javascript"> document.write("Hello world!"); </script> <link rel="stylesheet" type="text/css" href="stylesheet2.css" /> <link rel="stylesheet" type="text/css" href="stylesheet3.css" /> <link rel="alternate" type="application/rss+xml" href="front.xml" title="Say hello" />
33 / 54
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> </head> Doit tre remplac par : <head> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> <link rel="stylesheet" type="text/css" href="stylesheet2.css" /> <link rel="stylesheet" type="text/css" href="stylesheet3.css" /> <link rel="alternate" type="application/rss+xml" title="Say hello" href="front.xml" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <script type="text/javascript"> document.write("Hello world!"); </script> </head>
Parallelize downloads across hostnames
Parallliser les tlchargements travers plusieurs noms de domaine
IMPACT MOYEN Description Lorsque vous avez un grand nombre de ressources sur votre page, par exemple un grand nombre dimages, le navigateur lance les tlchargements en parallle. Cependant il y a une limite du nombre de tlchargements en parallle par domaine. Ainsi si vous avez par exemple 20 images charger (img1, img2, , img20), le chargement se fera grosso modo par paquets de 6 : img1 img6, puis img7 img12, puis img13 img18, puis img19 img20
Si par exemple chaque ressource se charge individuellement en 100ms, il y aura eu 4 chargements successifs donc 400 ms.
34 / 54
Solution Mettez vos ressources sur un plusieurs autres domaines ou sous-domaines. La paralllisation ne sera alors plus plafonne. Si par exemple vous crez un sous-domaine par paquets de 5 ressources : r0.monsite.com/img1.jpg r0.monsite.com/img2.jpg r0.monsite.com/img3.jpg r0.monsite.com/img4.jpg r0.monsite.com/img5.jpg r1.monsite.com/img6.jpg r1.monsite.com/img7.jpg r1.monsite.com/img8.jpg r1.monsite.com/img9.jpg r1.monsite.com/img10.jpg r2.monsite.com/img11.jpg r2.monsite.com/img12.jpg r2.monsite.com/img13.jpg r2.monsite.com/img14.jpg r2.monsite.com/img15.jpg r3.monsite.com/img16.jpg r3.monsite.com/img17.jpg r3.monsite.com/img18.jpg r3.monsite.com/img19.jpg r3.monsite.com/img20.jpg
Dans les mmes conditions que plus haut, le temps de chargement passerait donc de 400 ms 100ms. Evidemment stocker ses ressources sur un sous-domaine en fonction de son nom ou dun autre critre est trs contraignant. Pour vous simplifier la tche je vous conseille de placer toutes vos ressources sur un nom de domaine ddi (cf. Serve static content from a cookieless domain) et de crer des sous-
35 / 54
domaines qui sont en fait des alias. Ainsi, r0.monsite.com/img1.jpg sera identique r1.monsite.com/img1.jpg ou r18.monsite.com/img1.jpg. Ensuite utilisez la fonction PHP suivante : <?php function getOptimizedImgPath($src) { static $cpt = 0; $subdomain = 'r'.ceil(($cpt++)/6); return $subdomain.'/monsite.com/'.$src; // Remplacez monsite.com par votre domaine } ?> et remplacez vos images du type <img src="image.jpg"> par <img src="<?php echo getOptimizedImgPath('image.jpg') ?>"> Vos images seront alors automatiquement affectes un sous-domaine par paquets de 6.
Prefer asynchronous resources
Privilgier les ressources asynchrones
GROS IMPACT Description Globalement il sagit de la mme optimisation que Defer loading of JavaScript
36 / 54
Solution Cest la mme que Defer loading of JavaScript Note : Google Analytics propose dsormais un code asynchrone prenant donc en compte cette optimisation. Le script type est donc devenu : <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.googleanalytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>
37 / 54
Put CSS in the document head IMPACT VARIABLE Description Le CSS peut tre utilis de 3 faons :
Placer le code CSS dans l'en-tte du document
un appel un fichier externe avec une balise du type <link rel="stylesheet" type="text/css" href="theme.css" />
lutilisation de rgles directement dans la page. Par exemple : <style type="text/css"> body { ... } </style>
lutilisation de lattribut style dans le corps de la page : <div style="width : 320px; height : 250px"></div>
La plupart des navigateurs tolrent que les deux premires soient utilises dans la partie BODY (alors quil est recommand de les placer dans la partie HEAD). Nanmoins en plaant ces codes dans la partie BODY, lexprience utilisateur sen trouve dgrade car les navigateurs ne peuvent pas pr-formater la structure de la page et cela provoque un affichage de la page qui bouge dans tous les sens avant de se stabiliser. Solution Il faut, comme bien souvent, suivre les recommandations et placer au maximum les rgles CSS dans la partie HEAD.
38 / 54
Remove unused CSS
Supprimer le CSS inutile
FAIBLE IMPACT Description Un fichier CSS peut parfois contenir un trs grand nombre de rgles. Toutes ne sont pas utilises et cest donc autant de caractres inutilement tlchargs qui pourraient tre supprims. Solution Sauf dans certains trs rares cas, cette optimisation est extrmement difficile mettre en uvre car mme si une rgle nest pas utilise sur une page donne, ce nest peut-tre pas le cas pour les autres pages du site... Je vous conseille donc de ne pas en tenir compte.
Serve resources from a consistent URL
Diffuser les ressources partir d'une URL unique
IMPACT VARIABLE Description Si vous avez des ressources identiques accessibles depuis plusieurs adresses, vous ne pourrez pas bnficier de la mise en cache (cf. Leverage browser caching )et vous augmenterez le nombre de rsolutions DNS (cf. Minimize DNS lookups). Solution Faites en sorte de ne pas avoir de doublons Facile dire, hein ? Effectivement mais je nai pas de recette miracle vous proposer malheureusement.
39 / 54
Serve scaled images
Diffuser des images mises l'chelle
IMPACT MOYEN Description Vous avez une page avec une image, qui fait par exemple 320px par 200px, et vous voulez lafficher en plus petite. Vous lintgrez ainsi : <img src="image.jpg" width="160" height="100"> Dans ce cas limage charge est inutilement lourde Solution Redimensionnez limage avec un diteur (Photoshop, GIMP, ou autre) et utilisez-la dans votre page. Serve static content from a cookieless domain Placer les contenus statiques sur des domaines sans cookie IMPACT VARIABLE Description Lorsquun navigateur doit accder une ressource, il met une requte HTTP. Dans les informations qui transitent, il y a notamment les cookies. Les cookies sont des informations stockes par le navigateur gnralement la demande du serveur. Les cookies sont utiliss par pratiquement tous les sites internet mais les donnes qui sy trouvent sont trs variables : identifiants de connexion, panier dachat, etc Ce mcanisme permet donc au code PHP de rcuprer ces fameuses informations. Nanmoins elles sont aussi transmises lorsquil sagit de tlcharger une image. Dans ce cas les donnes transitent inutilement et cest donc une source doptimisation ! Solution Les cookies sont lis un nom de domaine. Prenez donc un nom de domaine ddi vos ressources. Prenons lexemple de facebook.com, ils utilisent le domaine fbcdn.net pour stocker lensemble de leurs ressources. Par exemple leur logo est de la forme <img src="http://static.ak.fbcdn.net/rsrc.php/v1/zK/r/NGGPJRdOdhs.png">
40 / 54
Specify a character set
Spcifier un jeu de caractres
FAIBLE IMPACT Description Le charset (jeu de caractres) est assimilable un alphabet. Selon la langue employe il faut donc utiliser tel ou tel charset. Mais en fonction du charset les caractres sont stocks sur 1 ou 2 octets. Le navigateur ne peut pas savoir a priori quel charset vous voulez utiliser donc ils en utilisent un par dfaut (pas le mme selon les navigateurs) et partent avec un a priori sur le charset utilis. Si le navigateur dtecte que son charset ntait pas le bon, il va recommencer lanalyse de la ressource voire dans certains cas la re-tlcharger. Il est donc important de renseigner le navigateur sur le charset utiliser. Solution Il y a plusieurs faons de spcifier le charset, la plus simple est de mette la ligne suivante tout en haut de la balise <head> : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Depuis HTML5 on peut galement utiliser cette criture : <meta charset="iso-8859-1">
Ici jai choisi iso-8859-1 qui correspond lalphabet latin standard cest--dire au franais. Cest le cas le plus frquent. Nanmoins si votre site est multilingue vous pourrez prfrer utf-8.
41 / 54
Specify image dimensions
Spcifier les dimensions des images
FAIBLE IMPACT Description Dans votre page vous intgrez vos images comme suit : <img src="image.jpeg"> A priori rien de mal a mais dans ce cas le navigateur doit aller chercher dans limage sa largeur et sa hauteur afin de dfinir la taille de la bote dans laquelle sera affiche limage. Afin de ne pas bloquer laffichage, le navigateur utilise donc gnralement une boite vide, qui sera redimensionne une fois que limage aura t charge (et que ses dimensions seront connues) ce qui dplace gnralement les autres botes pour faire de la place. Solution Mme si vous ne voulez pas redimensionner votre image, spcifiez de manire explicite la taille de celle-ci : <img src="image.jpeg" width="320" height="200"> Ou <img src="image.jpeg" style="width:320px; height: 200px"> Ainsi laffichage global de votre page ne sera pas affect quand limage sera effectivement charge.
42 / 54
Use efficient CSS selectors
Utiliser des slecteurs CSS pertinents
FAIBLE IMPACT Description Les rgles CSS sont dfinies par un identifiant et un type daffichage associ. Par exemple : ul.liste li { color : red } Ici lidentifiant est ul.liste li et laffichage est color : red. La difficult pour un navigateur consiste identifier parmi toutes les balises dune page celles qui correspondent lidentifiant. Ce traitement est assez complexe, donc long et plus la rgle est cible, moins le navigateur a de travail. Solution Evitez dutiliser des rgles trop sommaire, et utilisez autant que possible les classes et les ID. Remplacez donc ul li.item par quelque chose comme ul#maliste li.item
Cela vitera au navigateur daller chercher tous les <UL> alors que la plupart ne contiennent pas des <LI> de classe item.
43 / 54
Optimisation Mobile
Optimiser un site mobile se fait pratiquement de la mme manire. Les critres sont les mmes, mais les exigences sont plus grandes dans la mesure o les connexions sont plus lentes (Edge, 3G, ). Pour faire lanalyse de la version mobile de votre site, je vous conseille de passer par la version online de loutil PageSpeed : http://pagespeed.googlelabs.com/
Saisissez lURL de votre site, et cliquez sur la petite flche toute droite pour slectionner Obtenir des suggestions pour mobile . La suite est identique lanalyse dun site pour ordinateur.
44 / 54
Etude de cas
Aprs toute cette belle thorie, je vous propose de passer la pratique. Je vais donc prendre un site trs connu et voir tout ce qui ne va pas dessus, et ils auraient beaucoup faire ! Puisque je vous ai fourni une liste de recettes pour amliorer les performances, jai choisi de partir sur le plus grand site de recettes de cuisine : http://www.marmiton.org Bien entendu nous navons pas accs au Webmaster Tools et nous allons devoir nous limiter ltude des pages elles-mmes. Qu cela ne tienne : nous nous limiterons mme la page daccueil pour cette tude de cas. Que nous dit PageSpeed ?
66/100 ! Ce score est trs surprenant pour un site de cette notorit.
45 / 54
Et malgr ma trs bonne connexion internet le temps de chargement dpasse allgrement les 2 secondes :
On se situe donc entre 4 et 5 secondes pour le chargement de la page daccueil. Cest beaucoup trop ! Quelles sont les rgles travailler daprs PageSpeed ? Il sagit essentiellement de: Exploiter la mise en cache du navigateur Regrouper les images dans des sprites CSS Limiter le nombre de redirections Optimiser les images Diffrer l'analyse du code JavaScript
46 / 54
Commenons par le commencement : Exploiter la mise en cache du navigateur :
On voit dj plusieurs choses amliorer : en quelques lignes dans le fichier .htaccess, ils pourraient rgler le cache sur une dure de 10 jours par exemple toutes leurs images sont stockes sur le domaine www.marmiton.org, ce qui a pour consquence de transmettre les cookies chaque appel, et surtout ne permet pas la paralllisation des tlchargements. Dans la capture dcran suivante on voit dailleurs trs bien les vagues de tlchargement :
47 / 54
Ces tlchargements pourraient tre lancs en parallle avec un domaine ddi aux ressources et plusieurs sous-domaines associs.
48 / 54
Passons la rgle suivante : Regrouper les images dans des sprites CSS
Effectivement certaines images auraient pu tre regroupes en sprites, en particulier les puce****.gif . Il aurait fallu quils crent une image puce.gif de ce type (ici zoome x10 et avec un fond bleu pour mieux y voir) :
quils mettent dans le CSS : div.puce { background-image: url(puce.gif) ; overflow: hidden; } div.puce_actu { background-position: 0px 0px; width: 11px; height: 10px; } div.puce_menusemaine { background-position: 11px 0px; width: 4px; height: 5px; } div.puce_plusdiapo {
49 / 54
background-position: 15px 0px; width: 4px; height: 7px; } div.puce_plusedito { background-position: 19px 0px; width: 4px; height: 7px; } div.puce_salon { background-position: 23px 0px; width: 4px; height: 5px; } div.puce_typecommunaute { background-position: 27px 0px; width: 2px; height: 2px; } et enfin quils utilisent les images de cette manire dans la page : <div <div <div <div <div <div class="puce class="puce class="puce class="puce class="puce class="puce puce_actu"></div> puce_menusemaine"></div> puce_plusdiapo"></div> puce_plusedito"></div> puce_salon"></div> puce_typecommunaute"></div>
50 / 54
Rgle suivante ! Limiter le nombre de redirections
Ici il ny a malheureusement rien faire. Marmiton utilise vraisemblablement la plateforme publicitaire de aufeminin et subit sa mauvaise optimisation.
51 / 54
Rgle suivante : Optimiser les images
Comme le dit PageSpeed, ils auraient pu rduire la taille des images de 72,7 ko (ce qui reprsente tout de mme 10% de lensemble des ressources de la page !)
Dernire rgle : Diffrer l'analyse du code JavaScript
Il aurait fallu charger tous les fichiers Javascript aprs le chargement total de la page. La technique pour le faire est prsente dans les pages prcdentes de ce dossier.
En prenant en compte ces rgles, je pense quils atteindraient entre 80 et 90 points sur le score de PageSpeed (pour rappel il est actuellement 66 !), et le temps de chargement serait de lordre de 2 3 secondes (il est actuellement entre 4 et 5 secondes). Bien entendu en ayant la main complte sur le site on pourrait encore largement amliorer les choses.
52 / 54
Conclusion
Optimiser la vitesse de chargement dun site est un travail consquent mais qui porte trs rapidement ses fruits. Les retombes, que ce soit en termes de satisfaction des utilisateurs, dutilisation de votre serveur, ou de rfrencement sont gnralement assez impressionnantes. Bien que le gros du travail soit fait une fois pour toutes , je vous conseille de mettre en place une veille, par exemple mensuelle, afin de suivre lvolution de vos temps de chargement. Pour cela un rapide coup dil dans Google Webmaster Tools et vous verrez si vous gardez toujours le bon cap. Je dois rgulirement vrifier que mon site est toujours optimis
Il y a galement dautres axes doptimisation (mise en cache applicative, optimisation des requtes SQL, ). Nhsitez pas explorer dautres pistes et vous trouverez peut-tre vous-mme de nouvelles optimisations !
Je vous remercie pour votre attention et me tiens prt rpondre vos questions sur Webxfrance.org. Bonne optimisation tous !
53 / 54
54 / 54

Optimisez La Vitesse de Chargement de Votre Site

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Optimisez La Vitesse de Chargement de Votre Site

Uploaded by

Copyright:

Available Formats

Les dossiers Webxfrance

Optimisez la vitesse de chargement de votre site

par Gregeek pour webxfrance.org

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Table des matires

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Pourquoi en aurais-je besoin ?

Quand est-ce ncessaire ?

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Exemple de site lent :

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Exemple de site qui a su amliorer sa vitesse de chargement :

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Avoid bad requests

viter les requtes incorrectes

Avoid CSS @import FAIBLE IMPACT Description

viter d'utiliser CSS @import

Avoid CSS expressions

viter d'utiliser les expressions CSS

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Avoid document.write FAIBLE IMPACT Description

viter d'utiliser document.write

Combine external CSS

Intgrer les ressources CSS peu volumineuses

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Combine external JavaScript

Intgrer les ressources JavaScript peu volumineuses

Combine images using CSS sprites

Regrouper les images dans des sprites CSS

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Defer loading of JavaScript

Reporter le chargement du JavaScript

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Defer parsing of JavaScript

Diffrer l'analyse du code JavaScript

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Leverage browser caching

Exploiter la mise en cache du navigateur

Spcifier une technique de mise en cache

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Leverage proxy caching

Spcifier un en-tte "Vary: Accept-Encoding"

Supprimer les chanes de requte des ressources statiques

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Make landing page redirects cacheable

Activer la mise en cache des redirections vers la page de destination

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Rduire la taille des ressources CSS

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Rduire la taille des ressources HTML

Les dossiers WebXFrance - Optimisez la vitesse de chargement de votre site

Rduire la taille des ressources JavaScript

Minimize request size