Optimisation de la vitesse du site Web: comment le faire en 2020 # étape par étape

Il y a environ une décennie, Google a annoncé que la vitesse du site affecterait le classement des recherches sur le Web. Bien que la publication n’ait pas clarifié l’impact de la vitesse sur les classements, les webmasters qui ont lu l’annonce ont compris que l’optimisation de la vitesse du site Web devrait être au sommet de leurs plans de développement..


En plus de Avantages SEO de l’optimisation de la vitesse, les temps de chargement des pages sont importants pour déterminer combien d’utilisateurs restent sur votre site Web. HubSpot rapporte que une baisse de conversion est liée à l’augmentation des temps de chargement des pages – un retard d’une seconde dans le temps de chargement pourrait entraîner une réduction de ~ 20-30% de la conversion!

Guide d'optimisation de la vitesse du site Web

Au cours des dernières années, la taille moyenne des pages a augmenté. En fait, en 2018, en moyenne, la taille d’une page était supérieure à 2 Mo! Une partie importante de ce chargement de page se compose d’images, de fichiers statiques et de vidéos.

Pour dire le moins, la taille de votre site Web et la vitesse globale de votre site ont beaucoup d’importance! Même avec un chargement de pages en constante augmentation, vous pouvez faire certaines choses pour améliorer la façon dont votre site gère les choses. Ce post en discute.

Optimisation de la vitesse du site Web: ce dont vous avez besoin avant de commencer

Ce post suppose que vous avez déjà pris en charge deux éléments clés:

  • Vous utilisez un thème optimisé qui n’introduit pas beaucoup de ballonnement sur WordPress lui-même.
  • Vous êtes sur un hôte suffisamment rapide.

Si vous cochez ces deux cases, vous pouvez passer aux sections suivantes pour explorer une liste complète des tâches que vous pouvez entreprendre pour vous assurer que les temps de chargement de votre site Web sont minimaux.

Premiers pas avec l’optimisation de la vitesse du site Web

Anatomie d’une page Web

anatomie

L’astuce pour optimiser la vitesse de vos pages Web est de comprendre ce qui se passe dans une page Web. Passons en revue les composants les plus populaires:

  • Le code HTML qui donne la structure et le contenu à une page Web – même avec WordPress exécutant la fête sur votre site, tout ce qu’il fait est de prendre ce qui est dans la base de données – tout le contenu – et de le convertir en sortie HTML statique
  • Fichiers statiques qui aident à la conception, la fonctionnalité et l’interactivité (CSS, JavaScript)
  • Images pour arrière-plans, logos et contenu

Afin de rendre une page, le navigateur demande pour chaque élément d’une page Web – la page elle-même sous la forme de HTML, de fichiers statiques, d’images, de contenu externe. Par conséquent, le nombre de Demandes HTTP joue également un rôle crucial dans l’optimisation de la vitesse du site Web.

Savoir où vous en êtes: outils d’optimisation de la vitesse du site Web

Avant de passer à des techniques spécifiques qui vous aident à optimiser votre site Web, prenons un moment pour examiner les outils qui aident à analyser la vitesse des pages Web..

Si vous êtes un débutant à la recherche d’un outil de test occasionnel, vous pouvez envisager d’utiliser les outils Pingdom suite pour une évaluation rapide de votre site web. Pour une solution plus complète, vous pouvez vous diriger vers Informations sur la vitesse des pages de Google.

Test de vitesse PingdomOutils Pingdom pour les tests de vitesse

En plus de ceux-ci, si vous cherchez une option rapide sous la forme d’un plugin de navigateur, vous pouvez essayer YSlow, qui teste les sites Web et fournit des suggestions à partir du navigateur. De plus, le Outil GTmetrix utilise les résultats des tests de YSlow pour les rapports.

�� Si vous souhaitez plus d’options pour tester la vitesse de votre site, ce message répertorie 5 des meilleurs outils de contrôle de la vitesse.

Avant de passer par les techniques répertoriées dans cet article, assurez-vous d’exécuter votre site Web sur l’un des outils répertoriés ici pour servir de référence. Dès que vous effectuez une optimisation de la vitesse du site Web, assurez-vous de revenir à l’outil pour vérifier les améliorations de la vitesse.

Étape 1: Optimiser les fichiers statiques

La première étape de ce guide se concentre sur l’optimisation des fichiers statiques – le plus souvent sous la forme de feuilles de style (fichiers CSS) et de scripts (fichiers JS).

(a) Déplacer CSS vers la tête, JS vers le bas

La première optimisation à effectuer consiste à s’assurer que les feuilles de style vont dans la section de la structure de votre page, alors que tous les scripts sont déplacés juste au-dessus de la balise de fermeture de votre page. La logique derrière cela est simple:

  • En règle générale, les feuilles de style sont plus petites que les scripts
  • Une fois que les feuilles de style sont chargées dans la balise avant que le navigateur affiche le corps de la page, tous les éléments qui sont rendus dans la page auront un style approprié
  • La fonctionnalité des scripts entre généralement en jeu une fois le contenu de la page chargé, de sorte que les scripts peuvent généralement être placés en bas

Cette pratique garantit que les visiteurs de votre site Web ne laissent pas une page frustrée en attendant qu’elle se charge..

Pour gérer rapidement la partie des scripts, vous pouvez installer le plugin Scripts to Footer pour WordPress. Il fonctionne sur le pilote automatique et fait bien le travail.


Scripts To Footer Scripts To Footer

Auteurs): Joshua David Nelson

Version actuelle: 0.6.4.1

Dernière mise à jour: 15 avril 2020

scripts-to-footerphp.0.6.4.1.zip


94% Évaluations


20000 + installations


3.1.0Requires

(b) Mettre en place la minification

La minification est le processus de suppression des parties d’un fichier qui ne sont pas nécessaires à son exécution. Par exemple, dans vos feuilles de style ou scripts, les éléments suivants ne sont pas nécessaires à l’exécution:

  • espaces pour l’indentation
  • commentaires
  • fonction longue et noms de variables
  • code inutilisé

La minification aide grandement en réduisant la taille de vos fichiers statiques. Vous pouvez réduire vos fichiers en utilisant un service comme Réduire, ou en installer un plugins de minification dans WordPress.

(c) Utiliser le chargement asynchrone

Un navigateur Web affiche et demande les ressources de manière séquentielle telles qu’elles apparaissent sur une page Web. Ceci est appelé chargement synchrone. Cependant, vous pouvez modifier cette fonctionnalité par défaut du navigateur en utilisant l’attribut async pour charger les ressources dès qu’elles sont disponibles. Par exemple, vous pouvez charger un script de manière asynchrone comme suit:

Voici une liste de plugins qui vous aident avec le chargement asynchrone dans WordPress.

(d) Utiliser la compression GZIP

La compression GZip est une technique pour compresser des ressources via des requêtes HTTP. Avec la compression GZip, le serveur envoie des fichiers compressés de ressources, que le navigateur décompresse lors du rendu d’une page Web.

Le temps et les ressources nécessaires pour compresser et décompresser une ressource sont compensés par le temps et la bande passante économisés lors du transfert d’un fichier plus petit du serveur vers le client. Cette technique non seulement charge les pages plus rapidement, mais permet également d’économiser sur les coûts du serveur.

La compression GZip fait partie de quelques plugins de mise en cache WordPress comme WP Fastest Cache.

(e) Utiliser Google CDN pour les bibliothèques populaires

La technique d’optimisation finale de cette étape est d’utiliser soit Google ou Microsoft CDN lors de la récupération des bibliothèques courantes utilisées sur votre site. La raison en est simple – en raison de la popularité de ces CDN, il est probable qu’un visiteur dispose déjà d’une version en cache de la ressource dans son navigateur..

Étape 2: Optimiser les images

Comme indiqué ci-dessus, la principale source d’augmentation de la taille des pages Web au fil des ans est les images.

Jetez même un œil aux propres numéros de CodeinWP:

chargement d'image

Donc, s’attaquer aux images devrait entraîner les améliorations les plus importantes de la vitesse de votre site Web, et ça fait.

Les images sont essentielles pour un site Web, cependant, l’utilisation d’images de haute qualité pour le Web n’est pas vraiment recommandée. Vous devez compresser les images à un degré qui réduit considérablement la taille, tout en donnant une qualité visuelle équitable.

Vous pouvez faire quelques choses pour y arriver et avoir en tête l’optimisation de la vitesse du site Web:

(a) Téléchargez des images de la bonne taille

Votre thème actuel a probablement la taille maximale de l’image qu’il peut afficher – en termes de dimension. Découvrez ce que c’est, puis téléchargez uniquement des images qui sont au maximum deux fois plus grandes que cela.

Pourquoi deux fois? Cela permettra également au thème d’afficher des versions des images de qualité rétine.

(b) Utilisez le bon type d’image

Les deux types d’images les plus utilisés sur le Web sont les JPG et les PNG.

Ils ne se ressemblent pas.

  • Les images JPG sont destinées aux photos et autres images complexes contenant beaucoup d’informations sur les couleurs
  • Les images PNG sont parfaites pour les graphiques qui contiennent peu d’informations sur les couleurs, comme les captures d’écran de l’interface.

Exemple d’image PNGthèmes

(c) Optimiser les images localement avant de les télécharger

Il existe différents outils que vous pouvez utiliser avant de télécharger des images sur votre site.

tinypng
imageoptim

(d) Lazy charge tes images

Une autre technique pour optimiser les images est le chargement paresseux, une pratique où une image n’est pas téléchargée jusqu’à ce qu’un visiteur défile vers le bas pour la voir.

démo lazyloadDémonstration de chargement paresseux sur CodeinWP

Voici un guide complet pour le chargement d’images paresseuses sur votre site.

(e) Obtenez un plugin d’optimisation d’image

Enfin, vous devriez obtenir un plugin d’optimisation d’image de qualité pour votre site WordPress. Selon celui que vous finirez par utiliser, vous pourriez obtenir la majeure partie de vos besoins d’optimisation d’image sur le pilote automatique.

Voici 6 des meilleurs plugins d’optimisation d’image comparés.

Si vous avez besoin d’une recommandation rapide, consultez notre propre Optimole. Il fournit une compression d’image très efficace, en plus d’un CDN dans le plan gratuit! Optimole offre également des résultats exceptionnels face à ses principaux concurrents:

Résultats d’optimisation PNG

PluginOriginal PNG SizeAfter OptimizationOptimization% Compression
Optimole301 KB34 KB88,7%Avec perte et sans perte
Imaginez301 KB67 KB77,7%Lossy
TinyPNG301 KB79,7 KB73,5%Lossy
ShortPixel301 KB90,4 Ko69,96%Lossy
Smush301 KB247 KB17,9%Sans perte
EWWW301 KB257,4 KB14,6%Sans perte

Résultats d’optimisation JPG

PluginOriginal JPG SizeAfter OptimizationOptimization% Compression
ShortPixel518 KB169 KB67,36%Lossy
TinyPNG518 KB248,6 KB52%Avec perte
Optimole518 KB274 KB47%Avec perte et sans perte
Imaginez518 KB338,7 KB34,64%Lossy
EWWW518 KB488,9 KB5,7%Sans perte
Smush518 KB493 KB4,9%Sans perte


Optimisation d'image et Lazy Load par Optimole Optimisation d’image & Lazy Load par Optimole

Auteurs): Optimole

Version actuelle: 2.3.1

Dernière mise à jour: 21 avril 2020

optimole-wp.zip


96% Évaluations


50000 + installations


WP 4.7 + Requiert

Étape 3: Optimiser les requêtes HTTP

Plus tôt dans l’article, nous avons expliqué que lorsqu’un navigateur utilisateur commence à charger une page Web, les transferts réels sont effectués via des requêtes HTTP individuelles. Une seule requête récupère chaque ressource. Par conséquent, une augmentation du nombre de ces demandes augmente les temps de chargement de votre page Web.

demandes de siteRequêtes HTTP d’une page Web

(a) Combiner des fichiers

La première tâche pour minimiser la charge des requêtes HTTP est de combiner des ressources similaires. Lorsque vous réduisez les ressources, vous pouvez combiner des fichiers similaires. Par exemple, toutes les feuilles de style (fichiers CSS) et tous les fichiers JavaScript personnalisés peuvent être combinés en fichiers uniques. Cela réduit le nombre de demandes qu’un client doit effectuer pour charger toutes les ressources.

Encore une fois, ces plugins de minification pour WordPress peut vous aider à le faire.

(b) Minimiser les recherches DNS

Lorsqu’une demande HTTP est effectuée vers un domaine tel que www.codeinwp.com, une recherche DNS (système de nom de domaine) est effectuée pour trouver l’adresse IP du serveur. Par conséquent, votre objectif devrait également être de minimiser le nombre de recherches DNS sur toutes les demandes, afin d’accélérer le chargement du site Web..

Voici un guide cool par Kinsta sur la façon de le faire.

(c) Activer le maintien en vie

Sans aucune optimisation, le navigateur envoie une seule requête HTTP pour chaque ressource. Cette connexion se ferme une fois le téléchargement terminé. Le navigateur fait alors une nouvelle demande au serveur pour une nouvelle ressource. Garder en vie est une technique qui ne met pas fin à une demande lorsqu’un téléchargement de ressources est terminé.

Vous pouvez activer Keep Alive de différentes manières:

(d) Minimiser les redirections

Une redirection est une instruction pour amener automatiquement un client d’un emplacement vers un autre emplacement d’une ressource. Chaque redirection augmente les temps de chargement de votre page Web et à moins que cela ne soit absolument nécessaire, vous devez éviter toute redirection dans votre code.

(e) Utiliser un CDN

Un CDN (réseau de diffusion de contenu) est une collection de serveurs Web présents sur de vastes emplacements géographiques qui fournissent du contenu rapidement et efficacement aux clients.

Un client qui demande une ressource recevra la ressource d’un serveur qui est géographiquement le plus proche de l’emplacement du client. Cela garantit que le contenu demandé parvient au client dans les plus brefs délais.!

Nous avons une ressource distincte comparant les meilleures solutions CDN pour les sites WordPress, ainsi que des informations sur la façon de regarder.

Étape 4: mise en cache

Aucun guide d’optimisation de la vitesse d’un site Web ne peut exister sans une section sur la mise en cache. Certaines techniques dont nous avons discuté précédemment, telles que la compression GZip et la minificaiton, font partie de nombreuses solutions de mise en cache aujourd’hui.

La mise en cache fait référence à un phénomène de stockage d’une ressource dans un stockage temporaire pour la récupérer rapidement en cas de besoin. Il existe différentes formes de mise en cache:

  • Mise en cache des pages: version HTML statique d’une page stockée sur le serveur
  • Mise en cache de la base de données: résultats des requêtes de base de données courantes (telles que les 10 meilleures publications sur votre site) stockées sur le serveur
  • Mise en cache du navigateur: stockage de parties de votre page dans le navigateur

Nous avons comparé les plugins de mise en cache WordPress les plus populaires dans cet article. TL; DR: Allez voir WP Rocket si vous cherchez une solution complète. Alternativement, si vous préférez quelque chose de gratuit, voici un guide sur comment configurer W3 Total Cache.

Étape 5: Optimiser pour mobile

Dans les parties précédentes de cet article, nous avons discuté des techniques d’optimisation pertinentes pour les ordinateurs de bureau et les mobiles. Cependant, la consommation de contenu sur mobile augmente, et un écran plus petit pose de nouveaux défis. Cette section traite donc des méthodes d’optimisation de la vitesse du site Web pour les appareils mobiles.

L’optimisation mobile fait référence à la pratique consistant à garantir que les visiteurs mobiles de votre page Web bénéficient des mêmes fonctionnalités et efficacité que leurs homologues de bureau. La liste suivante contient certains facteurs d’hygiène pour la conservation du contenu Web pour les appareils mobiles:

  • Utilisez une conception Web réactive pour garantir que différents appareils obtiennent différentes versions d’une page Web
  • Évitez d’utiliser le flash et les fenêtres contextuelles, car les appareils mobiles peuvent ne pas le prendre en charge
  • Ne placez pas les interactions telles que les liens trop près les unes des autres

En plus de ces facteurs, AMP (Accelerated Mobile Pages) est un projet qui vise à créer un contenu rapide et cohérent sur tous les appareils.

Voici un guide pour commencer avec AMP dans WordPress.


AMP

Auteurs): Contributeurs au projet AMP


74% Évaluations


500 000+ installations


WP 4.9 + Requiert

Plus d’informations

amp.1.5.3.zip

Version actuelle: 1.5.3

Dernière mise à jour: 15 avril 2020


74% Évaluations


500 000+ installations


WP 4.9 + Requiert

Page Plugin WordPress.org


AMP

Conclusion

J’espère que ce guide vous a donné quelques conseils sur ce que vous devez faire pour améliorer le niveau global d’optimisation de la vitesse de votre site Web..

Juste pour récapituler; nous avons d’abord examiné l’anatomie d’une page Web pour aborder des domaines spécifiques à améliorer. Ensuite, nous sommes passés à des étapes spécifiques d’optimisation:

  • L’étape 1 a couvert l’optimisation des fichiers statiques sous forme de feuilles de style et de scripts
  • Étape 2 abordé les images et leur optimisation
  • L’étape 3 concernait les techniques pour optimiser les requêtes HTTP
  • L’étape 4 a discuté de quelques techniques de mise en cache populaires
  • Étape 5 a couvert l’optimisation pour les appareils mobiles

Y a-t-il quelque chose qui vous pose problème en ce qui concerne l’optimisation de la vitesse du site Web? Faites-le nous savoir dans les commentaires ci-dessous.

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Mise en page, présentation et édition par Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map