Comment gagner 100/100 points sur Google Pagespeed pour votre site WordPress

0
768
pagespeed-insights

Google Pagespeed Insights est l’outil de site Web bien connu avec lequel vous pouvez vérifier et optimiser tous les paramètres pertinents pour le moteur de recherche. Vous pouvez cliquer sur le lien en haut de la page, ou vous pouvez généralement voir une valeur mise à jour quotidiennement de votre page dans le système d’administration.

Dans ce tutoriel, nous allons vous montrer comment il est facile d’atteindre le score de vitesse de page de 100/100. Tu peux le faire aussi.

Pour notre exemple, nous avons utilisé un site de démonstration avec toutes sortes de contenus et un thème bien connu, qui contient aussi les plugins habituels. Donc, c’est exactement une chose avec laquelle on crée de bons sites Web.

super-food-homepage

Nous avons décidé d’utiliser le Thème The7 ici. Mais peu importe le thème que vous utilisez. L’essentiel est qu’il soit à jour et qu’il offre quelques options pour la création du site.

C’est ce dont vous avez besoin pour un site Web rapide.

  1. un hébergeur rapide et expérimenté
  2. un WordPress courant propre
  3. les paramètres corrects pour le serveur web
  4. un outil d’optimisation et de mise en cache

Dans cet exemple, nous utilisons WP Rocket. Ces outils font tous la même chose. Vous compressez les fichiers texte, résumez le code et, si nécessaire, créez une page statique comme copie.

Cela permet au visiteur d’appeler rapidement la page.

Les pages statiques rappellent le code html de l’époque. Les sites Web constitués uniquement de code html simple et d’images sont toujours les plus rapides. Mais ce n’est pas Avec ces plugins, cependant, le cache est toujours recréé dès que quelque chose a changé sur la page.

Astuce : Désactivez WordPress Cronjob. Ce n’est pas vraiment un cronjob dans le vrai sens du terme, mais il est toujours appelé quand un visiteur vient sur le site. Nous vous montrerons comment cela fonctionne dans un autre article.

Google Pagespeed Insights

Entrez votre site Web actuel sur google et jetez un coup d’oeil à la performance.

Normalement, vous obtenez des valeurs dans la plage jaune jusqu’à 85 si l’hébergeur a un bon serveur.

Dans notre installation standard, PSI nous a montré 85/100 dans l’affichage du bureau.

caption id=“attachment_3490″ align=“align=“alignright“ width=“468″] Installation WordPress standard PSI[/caption] (en anglais)

L’affirmation selon laquelle le serveur a réagi lentement est toutefois quelque peu trompeuse. Ici le temps au premier octet est signifié, qui est transmis.

Il y a de nombreux facteurs qui interagissent ici. Souvent on réduira la TTFB (Time to first Byte), si on fixe tous les autres points.

Google offre pour de nombreux points le code optimisé pour le téléchargement. A ce stade, cependant, je recommande de n’inclure que des images préalablement optimisées dans le site Web.

Vous pouvez même le faire gratuitement avec le Tinypng Pandaerledigen.

Légende id=“attachment_3492″ align=“alignnone“ width=“696″]tinypng compression d'image Tinypng.com Panda alimente les octets superflus.

Cependant, la plupart des thèmes créent également leurs propres images dans des tailles différentes, de sorte qu’il y a toujours besoin d’une nouvelle optimisation.

Il est recommandé d’optimiser et d’écraser tous les fichiers images sur le serveur Web de temps en temps.

Pingdom, GTMetrix and Co.

Bien sûr, il y a aussi d’autres pages de test. Ici, cependant, le problème se pose souvent que l’appel est fait de l’étranger et n’est donc pas assez significatif pour simuler le visiteur habituel de l’Allemagne. Il est également important de savoir que certains programmes de contrôle ne peuvent pas gérer http/2 et ne considèrent pas l’avantage de http/s, c’est-à-dire la transmission parallèle de données via une connexion, et l’interprètent de manière négative.

Légende id=“attachment_3493″ align=“alignnone“ width=“696″]gtmetrix GTMetrix Performance Report[/caption] (Rapport de performance GTMetrix)

TTFB ou temps de charge total ?

En principe, le résultat du temps de charge total compte. Le premier octet dépend de nombreux facteurs qui ne peuvent être que mal influencés. Une page qui n’est pas compressée a généralement une valeur TTFB très faible qu’une page parfaitement compressée. Mais le temps de chargement total avec la compression est bien sûr plus rapide pour une page avec beaucoup de contenu. Comment Google l’a évalué en fin de compte. Nous avons même des pages qui se chargent lentement parce que le logiciel est obsolète et une valeur PSI de 68, avec 28 000 mots-clés organiques mais environ 1000 visiteurs par jour viennent sur le site. Mais avec des sites comparables, le site avec les meilleures valeurs est certainement plus élevé.

CDN et modules d’accélération

Il existe également des modules qui stockent des données statiques sur d’autres serveurs et les délivrent en fonction de l’emplacement du visiteur. Cela réduit le nombre de connexions au serveur et donc aussi la TTFB. Ici, des caches d’akamai, cloudflare ou incapsula sont disponibles qui offrent simultanément compression et optimisation en fonction du service réservé. Une petite protection (D)Dos est également incluse, à condition que la connexion se fasse complètement par l’intermédiaire de ces fournisseurs.

Légende id=“attachment_3494″ align=“alignnone“ width=“696″]cloudflare-web-trafic overview Cloudflare Trafficanalysis[/caption] (Analyse du trafic des torches nuageuses)

Speedkit pour Plesk

Par exemple, il existe un plugin pour Plesk qui peut rendre votre site Web plus rapide en quelques clics seulement. Dans mon test, cependant, c’est exactement le contraire qui s’est produit. Le principal problème avec de tels plugins est que le cache ne démarre pas tant que le visiteur n’a pas vu la page une deuxième fois, ou qu’il n’a pas établi une connexion avec le système.

L’avantage est que vous pouvez facilement l’activer sans apporter aucune modification à votre système. Mais l’inconvénient est le manque de vitesse avec 1 vue visiteurs. Pour cette raison, vous ne verrez aucun changement avec les programmes de contrôle habituels, car ils visitent toujours le site sans mise en cache comme un nouveau. Utilisateurs.

captionid=“attachment_3495″ align=“alignnone“ width=“852″]speedkit-website-accélérateur-plesk Speedkit pour Plesk est censé rendre les sites Web plus rapides. Mais ça ne marche pas toujours.

Comme la plupart des visiteurs ne viennent souvent sur le site que par un lien à partir d’un moteur de recherche, il n’y a pas d’avantage de vitesse pour ces visiteurs. Avec les ressources embarquées, vous vous débrouillez assez bien sans caches externes. L’utilisation de ces services est également inappropriée au regard de la protection des données, en particulier de l’OSDVB et du futur règlement sur la protection de la vie privée dans le secteur des communications électroniques. Il n’existe déjà aucun contrat pour le traitement des données de commande lors de la commande de ces services.

De cette façon, vous rendez le site plus rapide.

Le point le plus important : le bon hébergeur.

De l’extérieur, tous les hébergeurs font de même. Mais la différence est si souvent cachée.

Il y a des hébergeurs web qui font de la publicité avec des cœurs et des ressources dédiées, mais tout cela fonctionne sur un matériel très faible. Un petit noyau AMD d’un serveur vieux de 10 ans n’est pas le même qu’un noyau sur un Intel Platinum Xeon de la dernière version.

caption id=“attachment_3505″ align=“alignnone“ width=“759″]vmware_cluster Un exemple de cluster VMWare[/caption].

Aujourd’hui, la plupart des fournisseurs virtualisent également l’ensemble de leur infrastructure. Souvent sur des structures étranges comme les systèmes de conteneurs où les noyaux réservés par le client étaient également réservés par 20 autres clients. de bonne qualité et en raison des coûts de licence des logiciels, les vendeurs coûteux utilisent des systèmes de virtualisation réels tels que vmware ou KVM, généralement désignés sous le nom de cloud.

caption id=“attachment_3501″ align=“alignnone“ width=“696″]kvm_cluster Un petit cluster KVM[/caption].

Souvent un hébergement mutualisé est suffisant. Nous avons nous-mêmes construit des sites Web avec des dizaines de milliers de visiteurs par mois. Ceux-ci tournent également dans un petit compte d’hébergement, parce que les machines d’hébergement web sont généralement déjà très grands dimensionnés par le fournisseur, de sorte qu’ils peuvent servir des centaines de sites Web.

caption id=“attachment_3500″ align=“alignnone“ width=“939″]virtuozzo_cluster Vue d’un nœud Virtuozzo 7[/catégorie].

Mais la plupart des sites Web n’auront pas besoin de la puissance qu’ils ont réservée, donc il reste toujours beaucoup de puissance.

Il suffit de chercher un compte test lors du choix d’un hébergeur et d’y installer votre site web sans engagement. Vous pouvez généralement les atteindre via un sous-domaine et tester la vitesse. Si ce n’est rien, passez simplement à un autre fournisseur.

Dans cet exemple, la page de démonstration est située sur un serveur SEO de webhoster.de AG où vous obtenez un compte revendeur Plesk avec 10 adresses IP pour vos projets.

En tant que matériel, un serveur Dell R740 est utilisé avec des disques SSD de serveur MLC en tant que RAID Array.

L’interface d’administration est rel=“noopener“>PleskOnyx dans la version actuelle.

Un WordPress standard avec les plugins actifs suivants a été installé :

  • Amazon Affiliate pour WordPress
  • NextScripts : Aide à la mise à niveau SNAP Pro
  • NextScripts : Réseaux sociaux Affiches automobiles
  • SEO Smart Liens d'affaires SEO Smart
  • Shortcodes Ultimate Ultimate
  • Table des matières Plus
  • Les 7 éléments
  • Ultimate Addons pour WPBakery Page Builder
  • WPBakery Page Builder
  • Levure SEO Premium
  • Fusée WP

Le modèle de conception

Le 7 est utilisé comme thème.

La conception de la page se compose de modèles du thème ou du Générateur de pages. Les sous-pages contiennent généralement 2500-3000 mots et de nombreuses images et tableaux.

Par conséquent, il est toujours important de vérifier non seulement la page d’accueil, mais aussi les sous-pages.

Notre site de démonstration s’appelle www.super-food.de et est également disponible sous ce domaine. Vous pouvez donc vérifier tous les tests vous-même. Dans un autre article, nous montrons comment vous pouvez construire un grand site Web avec peu de ressources dans un temps très court. C’est peut-être quelque chose pour toi aussi. Le site Web est copié de temps à autre sur d’autres systèmes à des fins de test afin de créer des tests comparatifs.

Comment configurer le serveur Web via Plesk

Tout d’abord, le serveur Web doit être configuré via Plesk. Il y a toujours des recommandations pour utiliser nginx comme un pur serveur web. Mais nous ne le faisons pas, car aucun fichier.htaccess n’est supporté et la plupart des fonctions WordPress des plugins ne peuvent être converties qu’avec plus d’efforts, sinon elles sont inefficaces. Il n’y a pas non plus d’avantage en termes de vitesse.

Légende id=“attachment_3496″ align=“alignnone“ width=“960″]plesk-dashboard-domaine Le tableau de bord de Plesk pour le domaine[/caption].

Paramètres PHP dans Plesk

Nous utilisons la version 7.2.9 actuelle de php avec les paramètres par défaut. Sous l’option de menu Paramètres PHP, vous pouvez généralement régler vous-même les options. Sinon, le fournisseur d’hébergement Web doit le faire.

caption id=“attachment_3497″ align=“alignnone“ width=“949″]plesk-php-version-set-with-apache Paramètres PHP dans le menu Plesk. PHP-FPM avec Apache Webserver[/caption].

Paramètres pour Apache & nginx

Dans les paramètres pour nginx ou Apache, nous ne définissons que les valeurs qui ont déjà été préfabriquées par le fournisseur. Donc rien de spécial. Ici, les liens symboliques sont désactivés et la compression standard n’est activée que pour des raisons de sécurité.

caption id=“attachment_3498″ align=“alignnone“ width=“607″] paramètres nginx comme proxy dans le menu Plesk[/caption].

nginx nous utiliserons seulement comme serveur proxy avec un traitement intelligent des fichiers statiques. Fondamentalement, vous pouvez vous passer complètement de nginx. Alors http/2 fonctionne mais et d’autres problèmes surgissent. Laissons donc les valeurs par défaut.

WordPress Dashboard

Notre page de démonstration fonctionne très bien. Mais pour atteindre le 100/100 nous avons besoin de quelques modifications comme la minification, c’est à dire le résumé du CSS et du Javascript comme Google aime le recommander.

Vous ne pouvez généralement pas tout copier vous-même, mais il existe des aides utiles pour faire le travail.

Nous utilisons le plugin WP-Rocket dans ce test. Mais la plupart des autres peuvent faire de même.

Légende id=“attachment_3502″ align=“alignnone“ width=“696″]tableau de bord wp-rocket-dashboard Le tableau de bord WP-Rocket[/caption] (en anglais)

Dans les paramètres, il suffit de cliquer sur tous les points de la zone Optimisation de fichier, à l’exception des paramètres qui sont nuisibles pour http/2. Ce sont les fichiers CSS „minifier CSS“ et „optimiser la représentation CSS„.

caption id=“attachment_3506″ align=“alignnone“ width=“333″]css-minify WP Rocket CSS Minification[/caption] (en anglais)

Dans les paramètres Javascript, vous devez sélectionner les paramètres „Minify Javascript“ et „Load Javascript delayed“ ainsi que le „Safe mode for jQuery (recommandé)“.

caption id=“attachment_3507″ align=“alignnone“ width=“329″]src=“https://webhosting.fr/wp-content/uploads/2018/08/javascript-minifizieren.png“alt=“javascript-minify“ width=“329″ height=“440″ / WP Rocket Javascript Settings[/caption] (en anglais seulement)

Ça l’était presque. Avec le plugin, la valeur PSI passe à 94/100 et il ne manque plus que quelques optimisations mineures des fichiers images ou du code CSS, qui n’ont pas été comprimées avec le Thème Enfant. Pratiquement google rend ces fichiers disponibles optimisés, de sorte que vous pouvez facilement les remplacer par un gestionnaire de fichiers.

su_youtube_advanced url=“https://www.youtube-nocookie.com/embed/BkoN59dqVvA“ playlist=“PL_g5rilBm5WXqk9J755LBUCYBowdsc7DL“ autohide=“no“ loop=“yes“ rel=“no“ theme=“light“ https=“yes“]


Dans

ce cas, nous avons pu échanger les images modifiées par le thème et placer un fichier CSS et Javascript dans le thème enfant

.

Ensuite, il ne manquait plus qu’une petite recharge au 100/100 espéré après toutes les optimisations effectuées

.

pagespeed-insights

caption id=“attachment_3512″ align=“alignnone“ width=“808″]alt=“page-speed-100-100-100″width=“808″ height=“850″ / Google Pagespeed Insights passe avec 100/100[/caption].

Nous espérons que notre petit tutoriel vous a aidé avec l’optimisation. Donc tout est possible. Mais les choses changent tous les jours. Par conséquent, vous devez toujours garder votre WordPress à jour, sinon les nouvelles fonctionnalités ne sont plus supportées.

Vous trouverez bientôt une vidéo complète sur notre chaîne Youtube.

HINTERLASSEN SIE EINE ANTWORT

Please enter your comment!
Please enter your name here