Agence web » Actualités du digital » Comment accélérer un site Web lent

Comment accélérer un site Web lent

Lineicons freebird / Shutterstock

Les gens sont plus paresseux que vous ne le pensez. Selon les recherches de Google, 53% des utilisateurs mobiles quitteront votre site si le chargement prend plus de trois secondes. Vous voulez que votre site soit rapide pour améliorer votre taux de conversion et votre classement dans les moteurs de recherche.

Comment vérifier la vitesse de votre site Web

La mesure la plus importante de la vitesse de votre site est sans doute le test PageSpeed ​​Insights de Google. Étant donné que Google est l'arbitre de la performance de votre site dans son classement, vous souhaiterez les apaiser le plus possible. Un bon score au test PageSpeed ​​Insights affectera directement votre référencement. Saisissez simplement l'URL de votre site et cliquez sur «Analyser» pour afficher vos résultats.

PageSpeed ​​Insights donne un aperçu très complet de ce qui ne va pas avec votre site. Vous devez les parcourir comme une liste de contrôle jusqu'à ce que votre score soit beaucoup plus élevé. Google tient à jour une liste de recommandations détaillées sur lesquelles vous pouvez vérifier.

Si vous souhaitez analyser la façon dont votre page est chargée par votre navigateur, vous pouvez ouvrir les outils de développement Chrome (clic droit> Inspecter ou depuis le menu des paramètres). Voici deux onglets utiles: Réseau et Performances.

L'onglet Réseau affiche une chronologie facile à utiliser des demandes faites à votre site, la taille de la réponse et le temps qu'il a fallu. L'onglet Performances affiche une vue beaucoup plus détaillée de tout ce qui se passe avec votre site Web:

À partir de là, vous pouvez diagnostiquer presque tous les problèmes de performances de votre site, y compris le code JavaScript non optimisé, les rendus et les recalculs de style.

Installez le module PageSpeed ​​de Google

L'extension PageSpeed ​​pour Apache et Nginx effectue de nombreuses automatisations pour l'optimisation générale de votre site, telles que la réduction et la compression de votre code HTML, la compression de vos images, la combinaison de plusieurs fichiers JS et CSS en un seul téléchargement et, en général, réduit simplement le volume. Ce n'est pas un fourre-tout, mais c'est une solution facile pour de nombreux problèmes courants.

Réduisez la taille de votre site Web

Réduire la taille de votre site Web réduit directement le temps de téléchargement. Bien que les utilisateurs de postes de travail puissent toujours télécharger votre site assez rapidement, les utilisateurs de connexions mobiles peuvent trouver votre site Web en panne s'il n'est pas optimisé.

Compression et chargement d'images paresseuses

La première façon de réduire la taille concerne les images. Les images (et autres médias) sont souvent les principaux responsables des sites lents. Si vous ne vérifiez pas la taille de vos images, il y a de fortes chances que plusieurs d'entre elles aient plusieurs mégaoctets, ce qui peut prendre une éternité à se charger sur des connexions lentes.

Vous devez vérifier la taille de vos images (ce que vous pouvez faire à partir de l'onglet Réseau dans la console de développement Chrome) et vous assurer qu'aucune d'entre elles n'entre dans la plage des mégaoctets. La plupart des images de ce site font environ 100 Ko.

Si vous avez de grandes images, vous voudrez les compresser. Il existe de nombreux outils en ligne qui peuvent le faire, ou vous pouvez les réexporter manuellement depuis Photoshop, ou vous pouvez convertir un dossier entier à partir de la ligne de commande avec ImageMagick:

for f in *.jpg; do convert -quality 70 $f $f; done

Cela comprime chaque .jpg fichier à 70% de qualité, ce qui devrait économiser beaucoup d'espace tout en étant presque impossible à distinguer des paramètres de qualité supérieure.

Les images ne sont pas bloquées, ce qui signifie que le reste du site se chargera en attendant vos images. Mais vous n'avez pas besoin de les charger tous en même temps, surtout lorsqu'il y a des choses plus importantes à télécharger avant les images.

Vous pouvez résoudre ce problème en chargement paresseux vos images. Cette technique retarde le chargement de vos images jusqu'à ce qu'elles soient nécessaires et affiche un espace réservé à la place (ce qui empêche votre contenu de se déplacer lors du chargement des images réelles). Ces espaces réservés sont souvent conçus pour être la «couleur dominante» ou une image floue plus petite qui est plus rapide à charger, minimisant l’effet de secousses du chargement.

Vous pouvez charger des images paresseusement avec un plugin WordPress, avec du JavaScript simple ou avec une bibliothèque JS.

Fichiers JavaScript Minify et Gzip

Vous devriez essayer de ne pas avoir une tonne de JavaScript, mais si vous le devez, vous devez limiter la taille des fichiers de script. La principale méthode consiste à les réduire et à les compresser.

La minification est une technique où toute la masse inutile de votre code est supprimée et remplacée par moins de caractères. Espaces blancs, nouvelles lignes, tabulations – tout est parti. Les noms de fonction et de variable sont remplacés par des caractères simples. Certes, cela a l'air horrible:

Mais cela réduit la taille du fichier, et personne ne va l'admirer de toute façon. La réduction est quelque chose que vous faites pendant le déploiement, alors ne vous inquiétez pas, vous n'avez pas à travailler sur un code comme celui-ci.

Gzipping est une autre étape qui implique une compression de texte réelle, ce qui peut économiser encore plus d'espace. Il y a une légère surcharge du processeur lorsque le navigateur doit décrypter le fichier, mais les économies de taille justifient ce coût. Les navigateurs compatibles avec les fichiers compressés enverront un Accept-Encoding: gzip en-tête dans leurs demandes de ressources, ce qui permet au serveur de savoir qu'il peut servir les versions compressées.

Ces deux étapes accélèrent le chargement de vos ressources JavaScript. En fait, le JavaScript minifié analyse et s'exécute un peu plus rapidement, donc c'est mieux à cet égard également.

Débarrassez-vous de la masse inutile

La dernière étape pour améliorer les performances du site consiste simplement à supprimer les éléments dont vous n'avez pas besoin. Si vous chargez un tas de bibliothèques JavaScript, envisagez de coder une solution plus simple sans avoir besoin d'une ressource externe. jQuery en est un exemple; c'est génial d'avoir et rend le travail avec JS beaucoup plus facile, mais c'est un blocage de rendu et souvent plus maladroit que vanS JS. Si vous optez pour "aussi vite que possible", n'utilisez pas jQuery.

La même chose vaut pour les plugins et widgets WordPress; s'ils ne sont pas entièrement nécessaires, ils pourraient alourdir votre site. Cherchez à rationaliser votre site chaque fois que possible.

Évitez les ressources de blocage de rendu

Certaines ressources de votre site sont blocage du rendu ce qui signifie que la page ne se chargera absolument pas tant que ces ressources ne seront pas téléchargées. De toute évidence, votre code HTML bloque le rendu, mais votre JavaScript l'est généralement aussi. Cela signifie qu'un utilisateur fera une demande à votre site, attendra de télécharger votre code HTML, verra qu'il a besoin d'un fichier JS supplémentaire, puis attendra également de télécharger ce fichier. Il s'agit d'un problème majeur, car il augmente directement vos temps de chargement.

Il existe quelques solutions à cela:

  • Intégrez le JavaScript. Au lieu de créer un lien vers une ressource externe, collez tout le contenu du fichier JavaScript que vous essayez de charger dans un

    ★★★★★