Comme je l’ai expliqué dans l’article précédent, les internautes utilisent de plus en plus leur smartphone ou leur tablette pour accéder au web, et il est indispensable que les sites internet créés aujourd’hui s’adaptent à ces périphériques. La première chose à prendre en compte est la taille de l’écran pour pouvoir garder un site lisible, et c’est l’objectif du responsive.
Mais il y a une autre donnée à prendre en compte, qui devient de plus en plus importante. Les téléphones mobiles et la plupart des tablettes utilisent des réseaux 3G pour transférer les données, et la vitesse de la connexion peut varier énormément en fonction de la couverture réseau. C’est encore plus vrai car les sites internet d’aujourd’hui ont beaucoup fonctionnalités qui allongent le temps de chargement.
L’impact de la vitesse de chargement de votre site est donc essentielle. Même sur un ordinateur fixe, si votre site dépasse 8 secondes de chargement, vous perdez 47% des visiteurs ! Et Google adore les sites rapide. Si vous optimisez votre site, vous allez grimper dans les résultats de recherche.
Tester la vitesse de son site
Pour tester la vitesse de votre site, le meilleur outil est GTMetrix. Il vous donnera de nombreuses informations, notamment votre score sur Page Speed et sur YSlow, et des conseils d’optimisation. Mais Le plus important, c’est le temps de chargement (Page Load Time). Si votre site se charge en moins de 4 secondes alors vous avez un excellent score. Entre 4 et 8 secondes, votre score est moyen vous pouvez faire mieux. Au delà de 8 secondes de chargement, votre site est vraiment trop long à charger !
Les indicateurs Page Speed et YSlow sont une note sur votre capacité à utiliser les bonnes pratiques conseillées par Google et Yahoo. Pour l’internaute, et pour le référencement, il est plus important de réduire le temps de chargement que d’améliorer vos scores Page Speed / YSlow. Mais les deux sont souvent liés.
Optimiser son site
J’ai eu de nombreux sites à optimiser, et je vais donc vous donner quelques conseils pour accélérer votre site internet.
Utilisez W3 Total Cache
Si vous avez un site WordPress, la première chose est d’installer un plugin de cache. Pour cela, je vous conseille d’utiliser W3 Total Cache. C’est à mon avis un des meilleurs plugins de cache gratuit. Il existe maintenant WP Rocket, mais je n’ai pas encore eu l’occasion de l’utiliser, et il est payant.
C’est un plugin assez difficile à paramétrer, donc je vous conseille de suivre un tutorial, comme celui-ci : http://www.onlinemediamasters.com/w3-total-cache-settings/
Attention : Si votre site ne s’affiche plus, ou s’affiche mal après avoir installé et configuré le plugin, essayez de désactiver le “Minify” puis videz le cache.
Utilisez CloudFlare
Vous pouvez faire passer toutes les requêtes par cloudflare avant qu’elles n’arrivent chez vous. Cet outil gratuit se chargera d’implémenter pas mal d’optimisations de performance avant même que les requêtes n’atteignent votre site. Cloudflare vous permet aussi d’empêcher les attaques (DDOS) d’arriver sur votre site.
Limitez les extensions wordpress
Plus votre site a d’extensions, plus le moteur WordPress mettra du temps à se charger. C’est normal, quand on découvre la puissance de WordPress, on a tendance à installer des dizaines d’extensions inutiles et fonctionnalités superflues. Pourtant il y a une règle d’or que tous les vrais professionnels du web suivent : rester simple !
J’ai créé plusieurs dizaines de sites sur WordPress, et je suis persuadé qu’il y a aujourd’hui moins de 10 plugins qui sont nécessaires pour faire tourner un site correctement. Sur ce blog, j’ai activé uniquement 7 extensions, et je n’ai pas besoin de plus.
Voici la liste si vous êtes curieux :
- BackWPUP : Gestion des sauvegardes du site, et envoi tous les jours sur ma Dropox.
- Contact Form 7 : Pour placer mon formulaire de contact. Indispensable pour trouver des nouveaux clients.
- Crayon Syntax Highlighter : Pour pouvoir ajouter et coloriser du code source dans mes articles.
- Pretty Link Lite : Pour pouvoir créer des redirections (301 ou 302).
- Live Chat : Plugin payant pour pouvoir chatter directement avec mes visiteurs si je suis connecté. Encore une astuce pour trouver des nouveaux clients, je vous recommande vivement de faire la même chose si vous êtes freelance.
- W3 Total Cache : Plugin pour améliorer la vitesse du site, voir plus haut.
- WordPress SEO by Yoast : Sans doute le meilleur plugin aujourd’hui pour optimiser le référencement.
Et c’est tout !
Utilisez les sprites CSS
Pour ceux qui connaissent un peu le code, vous savez qu’une feuille de style CSS fait appel à de nombreuses images pour gérer le design du site. Le problème, c’est que plus il y a de requêtes vers des fichiers différents, plus le site prend du temps à charger. Un sprite css est tout simplement un groupement de petites images sur une même image. Ensuite, on utilise la puissance de CSS pour positionner les images précisément.
Ci-dessous, une sprite que j’ai déjà utilisée pour un client. Au lieu de faire 12 requêtes HTTP pour 12 fichiers différents, le navigateur n’en fait qu’une, ce qui améliore drastiquement le temps de chargement.
Si vous voulez créer un nouveau site internet, pensez à demander à votre webmaster un design en sprites.
Compresser et mettre à l’echelle les images
Il y a deux choses qui prennent vraiment du temps à charger sur un site internet : les vidéos et les images.
Pour les vidéos, en général vous utiliserez un service externe comme Youtube ou Vimeo qui optimisera automatiquement le chargement de vos vidéos.
Pour les images en revanche, vous devez toujours faire attention à deux choses :
- Redimensionnez votre image. Si votre site affiche une image en 800×600, inutile de forcer l’internaute à télécharger une image de plusieurs mégaoctets en 1920×1200
- Compressez votre image ! Si vous n’utilisez pas des images transparentes, utilisez le jpeg et prenez comme règle de descendre la compression à 85. La perte n’est pas visible sur le web. Parfois je descend des images à 40 sans perte notable.
En redimensionnant et compressant vos images, vous pouvez parfois passer de plusieurs mégaoctets à 100ko, ce qui a un impact énorme sur la vitesse de chargement.
En passant, je suis beaucoup plus mitigé sur les questions de minify CSS ou JavaScript : Passer de 15ko à 3ko sur un script ou une feuille de style n’aura quasiment aucun impact sur les performances, comparé à la compression des images.
Les résultats
Voici les résultats que j’obtiens sur gtmetrix. Je n’ai utilisé que les astuces détaillées plus haut, rien d’autre.
Page d’accueil (pourtant il y a des en-tête vidéos) :
Article (sur les sites en responsive) :
Envoyez-moi vite un mail si vous battez mes records 
Cet article Comment optimiser la vitesse de son site en 5 étapes, et pourquoi vous DEVEZ le faire est apparu en premier sur Julien Arcin.
