Kalash82.
Membre
- Inscription
- 25 Février 2013
- Messages
- 124
- Réactions
- 82
- Points
- 8 963
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Depuis peu Google prend en compte la vitesse de chargement des sites internet dans son algorithme de positionnement. Concrètement cela veut dire que les sites lent seront pénalisés.
De plus, des études ont montré que les internautes ne sont pas très patient et que si la page met plus de quelques secondes à charger, ils préféreront chercher ailleurs. Voici quelques chiffres impressionnant qui vous convaincront d’améliorer la vitesse de chargement de votre site :
- +100 ms sur le temps de chargement sur Amazon : -1% du chiffre d’affaire
- 500ms de plus chez Google : 20% de recherches en moins
- 400ms de plus pour Yahoo et 5% des gens iront chercher ailleurs
Sommaire
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
-
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Avant de commencer à modifier son site pour le rendre plus rapide, il faut faire le point, observer ce qui rend le site lent et effectuer une série de mesures. Pour cela il existe énormément d’outils, certains sont en ligne (donc indépendant de notre connexion internet) et d’autres se présentent sous forme de plugins pour Firefox.
Pingdom Tools :
Pingdom tools est un service en ligne qui permet de voir l’ensemble des requêtes effectués afin de voir le temps que mets chaque fichier de votre site (css, javascript, image) à se télécharger. Ci-dessous une partie du graphique renvoyé par Pingdom Tools pour tutoriels-video.fr.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Ce graphique est simple à exploiter : il faut observer le nombre de fichiers qui se téléchargent, voir ceux que l’on peut supprimer ou les fichiers que l’on peut réunir (concaténer pour diminuer le nombre de requêtes).
Ensuite, il faut regarder les fichiers qui mettent du temps à se télécharger et voir s’ils ne bloquent pas les autres (cas typique des fichiers javascripts).
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Cet outil donne également d’autres informations intéressantes comme le temps de chargement, le nombre de fichiers ainsi que leurs poids et le nombre de redirections.
Webpagetest
Webpagetest est un autre outil en ligne, similaire à pingdom Tools, mais en plus complet. À la différence de pingdom, il charge le site 2 fois, ceci afin de tester le système de cache (le second chargement devrait prendre moins de temps). De plus, ce système vous attribue des notes à l’américaine sur certain critères :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Vous retrouvez le graphique « Waterfall » qui permet de voir tous les fichiers utilisés sur votre page et vous avez également un second graphique qui indique ce qui peut être optimisé.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Firebug + Yslow
Firebug est un plugin pour Firefox très connu des développeurs web, car il permet de gagner un temps fou, mais il possède aussi un onglet réseau qui donne le même type de graphique que le site présenté précédemment (à l’exception que la qualité de votre connexion internet est prise en compte !).
Quant à Yslow (Why slow ?) c’est un plugin pour Firebug développer par Yahoo qui permet de diagnostiquer votre site Web, il donne un score sur 100 et une note à l’américaine (A -> F). Ce qui est bien avec cet outil, c’est qu’il précise, point par point, ce qui peut être optimiser et fournit des tutoriels.
Lorsque vous avez installé Firebug, activé l’onglet réseau en cliquant sur la flèche et recharger votre page (F5). Vous devez avoir quelque chose similaire à cette capture :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Ce résultat s’interprète de la même manière que pour Pingdom Tools, à l’exception qu’il dépend de la qualité de votre connexion internet (ça reflète plus la réalité, tout le monde n’a pas un serveur avec une connexion de 100 Mega).
Sur la droite de la barre d’onglet de Firebug apparaît l’extension Yslow qui est bien plus intéressante ! Cliquez sur Yslow puis Run Test (si ça ne fonctionne pas rafraîchissez la page avec F5). Vous devez avoir un écran similaire à ci-dessous (à l’exception du score
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Si vous avez une mauvaise note c’est normal ! (la première fois que j’ai lancé le test j’ai eu un F). Vous pouvez changer les règles en cliquant sur la liste déroulante « rulesets« , vous pouvez choisir « Small site » qui est moins exigent.
Normalement vous devrez voir plusieurs catégories d’erreurs avec une note de A à F pour chacune d’entres elles. Si vous cliquez sur l’erreur, vous devez avoir une petite explication et avec un peu de chance de la documentation pour expliquer comment y remédier. Dans le cas contraire, ce billet est fait pour ça
D’autres outils
Comme tous les outils ce ressemble un peu je ne vais pas tous les décrire, mais voici une petite liste non exhaustive :
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.: l’équivalent de Yslow développé par Google (je vous le recommande)
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.: Même genre que pingdom
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.: Fait une moyenne sur X chargements
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.: Encore un équivalent de pingdom
Après avoir fait une série de mesures, il est grand temps de commencer à optimiser le site ! Si on se base sur l’outils Yslow de Yahoo, le premier point à améliorer c’est « Make fewer HTTP requests« . Il faut réduire le nombre de composant (fichiers) sur une page afin de réduire le nombre de requêtes pour créer le rendu de la page. Et moins il y a de requêtes, plus la page se charge vite ! Ça revient à réduire le nombre de ligne que l’on voit sur des outils comme Pingdom Tools ou l’onglet réseau de firebug.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Un bon moyen de réduire le nombre de requêtes faites au serveur est de concaténer les fichiers de même type ensemble. Plutôt que d’avoir 5 fichiers javascripts différents, provoquant 5 requêtes HTTP , il vaut mieux avoir un gros fichier javascript qui les fusionne tous. Même choses pour les fichiers CSS et les images (même si avec les images c’est plus compliqué, on y reviendra plus tard).
Vous pouvez le faire manuellement en copiant/collant tous vos scripts dans un seul fichier, mais prenez garde aux éventuelles bugs que ça peut causer (et garder toujours les fichiers JS séparer à porter de main, c’est toujours pratique). Si vous utilisez un CMS comme WordPress, il existe des plugins qui gèrent cela tous seul et s’occupe de réunir les différents fichiers externes automatiquement : c’est
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
.III. Compresser vos fichiers
Il faut également réduire le poids de vos pages web et pour cela compresser vos fichiers. Très souvent, les fichiers javascripts et CSS possèdent des espaces blancs et des commentaires (utile pour la lisibilité du codeur), mais ça prend de la place.
Une méthode simple pour compresser tous vos fichier html, css et javascript est d’utiliser Gzip. Gzip est un logiciel libre de compression qui est généralement installé sur Apache. Pour l’utiliser, il faut créer un fichier .htaccess à la racine de votre site web avec ces règles dedans :
1 <filesmatch ".(php|html|css|js)$">
2 SetOutputFilter DEFLATE
3 </filesmatch>
La première ligne indique quels types de fichiers doivent être compressés (surtout les CSS et javascript qui peuvent atteindre des taux de compression de 90% mais attention : pas d’images !!). La seconde ligne indique au navigateur que les fichiers devront être décompressés.
Si vous avez fait les manipulations correctement Yslow devrait vous donner une meilleure note pour « compress components with gzip » et vous devez ressentir la différence sur la bande passante.
IV. Activer le cache
Le cache est une fonctionnalité qui évite au navigateur de télécharger 2 fois le même fichier afin d’accélérer le temps de chargement des pages. Par exemple, si toutes les pages de votre site possède un logo identique, en naviguant de page en page vous n’allez pas re-télécharger cette image à chaque fois. Encore une fois on passe par un bout de code que l’on place dans un fichier .htaccess à la racine du site :
1 <ifmodule mod_expires.c>
2 <filesmatch ".(jpg|jpeg|png|gif|js|css|swf|ico)$">
3 ExpiresActive on
4 ExpiresDefault "access plus 1 months"
5 </filesmatch>
6 </ifmodule>
La première ligne test si le mode expires est bien activé et disponible. La seconde ligne précise les fichiers que l’on souhaite mettre en cache, la 3ème active le cache et la 4ème donne une date d’expiration (les fichiers ayant été téléchargé il y a plus d’un mois devront être re-télécharger).
Encore une fois vous pouvez vérifier vos manipulations en regardant sur Yslow dans la catégorie « Add expires headers » ou sur Webpagetest le « Repeat View » devrait être meilleure.
V. Concaténer et compresser vos images
Il est évident qu’il faut correctement compresser ces images sur le web et utiliser des formats adaptés comme le png, jpg (voir le gif, parfois intéressant). Je ne vais pas revenir là-dessus, mais depuis peu j’ai découvert un outils qui permet de réduire la taille de vos images sans en altérer la qualité. Cet outil c’est
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
et c’est developpé par Yahoo (donc du solide). Je ne sais pas trop comment ça fonctionne (apparemment en enlevant des méta-données), mais ça permet de réduire la taille de vos images de 10 à 20% en moyenne.Ce qui est génial, c’est que Yslow a intégré Smush.it et vous pouvez réduire la taille de l’ensemble des images d’une page en un clic ! Ça se passe dans l’onglet Tools de Yslow, comme on dit en anglais « A picture is worth a thousand words » :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Si vous utilisez un CMS comme WordPress, sachez qu’il existe un plugin
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
qui permet de compresser vos images automatiquement lors de l’upload. Vous pouvez également compressés les images datant d’avant l’installation du plugin en allant dans la bibliothèques des médias.Compresser c’est bien, mais ça ne suffit pas ! De la même manière que pour les fichiers Javascript et CSS on peut concaténer les images que l’on utilise dans les propriétés background en CSS. C’est à dire qu’à la place d’avoir plusieurs images pour plusieurs background, on les réunit toutes en une « super image » (un sprite) et on utilise la propriété background position pour afficher une partie de ce sprite. Je ne vais pas rentrer dans les détails dans ce billet, je vous renvois sur mon tutoriel :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
.VI. Quelques bonnes pratiques
J’ai bien détaillés les techniques les plus utilisés et performante, cependant pour avoir un site rapide il faut y faire attention tous les jours, voici quelques bonnes habitudes à prendre :
- Placer le code CSS en haut de votre page et éviter de mélanger du code CSS dans le code HTML
- En revanche placer vos fichiers javascripts en bas de page, car ils bloquent le chargement des autres éléments
- Réduisez les dimensions des images publiées, évitez de prendre des images trop grandes que vous réduisez en utilisant du CSS
- Évitez au maximum les inclusions de scripts externes tels que les boutons « Like » de Facebook ou Twitter
- Utilisez un autre domaine pour héberger les images, vous augmenterez le nombre de téléchargement en parallèle sur votre navigateur
- Faites très attention aux erreurs 404 qui coûte cher, faites en la chasse !
- Si vous utilisez WordPress, n’oubliez pas d’utiliser le plugin
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
