Comment obtenir des points 100 / 100 sur Google Pagespeed pour votre site WordPress

0
1253
aperçu Page vitesse

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 ci-dessus ou généralement voir dans le système de gestion une valeur actualisée quotidiennement de votre page.

Dans ce guide, nous allons vous montrer à quel point c'est facile Score pagespeed de 100/100 pour atteindre. Vous pouvez le faire aussi.

Pour notre exemple, nous avons utilisé un site Web de démonstration avec toutes sortes de contenus et un thème bien connu, qui inclut également les plugins habituels. Donc, exactement quoi créer de bons sites Web.

super-alimentaire page d'accueil

Nous sommes ici pour le thème The7 décidé. Le thème que vous utilisez n'a pas vraiment d'importance. La principale chose est à jour et offre quelques options de paramètres pour la création du site.

C'est ce dont vous avez besoin pour un site web rapide.

  1. un hébergeur rapide avec expérience
  2. un WordPress actuel propre
  3. les bons paramètres pour le serveur web
  4. un outil d'optimisation et de mise en cache

Nous utilisons dans cet exemple WP Rocket, Ces outils font tous la même chose. Vous compressez les fichiers texte, réduisez le code et créez éventuellement une page statique en tant que copie.

Cela permet au visiteur d'accéder rapidement à la page.

Les pages statiques rappellent le code HTML de l’époque. Les sites Web composés uniquement de code HTML simple et d'images sont toujours les plus rapides. Mais pas dynamique. Mais avec ces plugins, le cache est toujours recréé dès qu'un élément de la page a changé.

Astuce: Désactiver le WordPress Cronjob, Ce n'est pas vraiment un travail cron, au vrai sens du terme, il est toujours appelé lorsqu'un visiteur visite la page. Comment faire que nous vous montrons dans un autre article.

Google Pagespeed Insights

Entrez votre site actuel sur google et regardez la performance.

Normalement, on obtient les premières valeurs dans la zone jaune jusqu'à 85 si le Webhoster a un bon serveur.

Dans notre installation par défaut, PSI nous a montré 85 / 100 dans la vue du bureau.

Installation de WordPress PSI Standard

Un peu trompeur, cependant, est l'affirmation selon laquelle le serveur a répondu lentement. On entend ici le temps jusqu'au premier octet qui est transmis.

Il y a beaucoup de facteurs qui interagissent ici. Souvent, vous réduirez le soi-disant TTFB (Time to First Byte), si vous corrigez tous les autres points.

Google propose commodément le code optimisé à télécharger pour de nombreux points. À ce stade, toutefois, je recommande généralement d’intégrer uniquement des images précédemment optimisées au site Web.

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

tinypng-image-compression
Tinypng.com Panda alimente les octets redondants.

Cependant, la plupart des thèmes créent également leurs propres images de différentes tailles, de manière à toujours répondre aux nouveaux besoins d'optimisation.

Il est donc parfois conseillé simplement de réoptimiser et d’écraser tous les fichiers image résidant sur le serveur Web.

Pingdom, GTMetrix et Cie.

Bien sûr, il existe d'autres pages de test. Ici, cependant, il y a souvent le problème que l'appel vient de l'étranger et n'est donc pas suffisamment significatif pour simuler le visiteur habituel venant d'Allemagne. Il est également important de savoir que certains programmes de test ne peuvent pas gérer http / xnumx et ignorent exactement l'avantage de http / s, à savoir la transmission parallèle de données sur une connexion et l'interprètent de manière négative.

GTmetrix
Rapport de performance GTMetrix

TTFB ou temps de chargement total?

Fondamentalement, le résultat du temps de charge total compte. Le premier octet dépend de nombreux facteurs sur lesquels on ne peut influer que négativement. Une page non compressée a généralement une valeur TTFB très faible par rapport à une page parfaitement compressée. Mais le temps de chargement total avec la compression est évidemment plus rapide sur une page contenant beaucoup de contenu. Comment google évalue-t-il que c'est nébuleux? Nous avons même des pages à chargement difficile car le logiciel est obsolète et une valeur PSI de 68. Avec 28K mots-clés organiques, mais à propos de 1000 visiteurs viennent sur le site un jour. Mais pour des sites comparables, la page avec les meilleures valeurs sera certainement répertoriée plus haut.

CDN et modules d'accélération

Il existe également des modules qui stockent des données statiques sur d'autres serveurs et les transmettent en fonction de l'emplacement du visiteur. Cela réduit le nombre de connexions au serveur et le soi-disant TTFB. Les caches d'akamai, cloudflare ou incapsula sont disponibles ici et offrent également compression et optimisation en fonction du service réservé. Une petite protection (D) Dos est également incluse si la connexion est entièrement établie via ces fournisseurs.

cloudflare-web-trafic Uebersicht
Analyse du trafic Cloudflare

Speedkit pour Plesk

Par exemple, il existe un plugin pour Plesk, qui peut rendre le site plus rapide en quelques clics. Dans mon test, cependant, c'était exactement le contraire. Le principal problème de ces plugins est le fait que le cache ne commence que lorsque le visiteur visualise la page une deuxième fois ou se connecte pour la première fois au système.

L'avantage est que vous pouvez l'activer facilement sans apporter de modifications à votre système. Mais l’inconvénient est alors plutôt le manque de rapidité avec les visiteurs de 1 View. Pour cette raison, vous ne pouvez voir aucun changement avec les programmes de test habituels, car ils visitent toujours le site sans se mettre en cache comme un tout nouvel utilisateur.

Speedkit-site-accélérateur plesk
Speedkit for Plesk est conçu pour rendre les pages Web plus rapides. Mais probablement pas toujours fonctionne.

Étant donné que la plupart des visiteurs ne visitent souvent le site que via un lien provenant d'un moteur de recherche, ils ne bénéficient d'aucun avantage en termes de rapidité. Avec à bord, on s'entend bien sans caches externes. En ce qui concerne la protection des données, en particulier DSGVO et le futur règlement ePrivacy, l’utilisation de tels services n’est pas appropriée. Il manque déjà un contrat pour le traitement des données de commande lors de la commande de ces services.

Donc, vous rendre le site plus rapide.

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

Vu de l'extérieur, tout le monde fait Fournisseur d'hébergement Web le même. Mais la différence est si souvent cachée.

Il y a des hôtes Web qui annoncent avec des cœurs et des ressources dédiées, mais pour lesquels tout cela ne fonctionne que sur un matériel très faible. Un petit noyau AMD issu d'un serveur de plus d'un an 10 n'est pas identique à un noyau d'un Intel Platinum Xeon de la dernière version.

vmware_cluster
Un exemple de cluster VMWare

Aujourd'hui, la plupart des fournisseurs virtualisent également l'ensemble de leur infrastructure. Souvent, sur des structures étranges telles que des systèmes de conteneurs dans lesquels les clients ont réservé des cœurs ont été réservés par d'autres clients 20. Bon et coûteux en raison du coût des licences logicielles, les fournisseurs utilisent des systèmes de virtualisation appropriés, tels que vmware ou KVM, généralement appelés cloud.

kvm_cluster
Un petit cluster KVM

Souvent, un partage suffit standard out. Nous avons nous-mêmes mis en place des sites Web avec des dizaines de milliers de visiteurs par mois. Celles-ci fonctionnent également sur un petit compte d’hébergement, car les machines d’hébergement Web sont généralement très grandes par le fournisseur, ce qui leur permet de desservir des centaines de sites Web.

virtuozzo_cluster
Vue d'un noeud Virtuozzo 7

Cependant, la plupart des sites n’auront pas besoin des services qu’ils ont réservés; il reste donc toujours beaucoup d’électricité.

Lorsque vous choisissez l'hébergeur Web, il vous suffit de rechercher un compte d'essai et de lire votre site Web sans obligation. Vous pouvez généralement les atteindre via un sous-domaine et tester la vitesse. Si ce n'est rien, il suffit de passer à un autre fournisseur.

Dans cet exemple, la page de démonstration est sur un Serveur de référencement Webhoster.de AG où vous obtenez un compte revendeur Plesk avec des adresses IP 10 pour vos projets.

Le matériel utilisé est un serveur Dell R740 avec des SSD de serveur MLC en tant que matrice RAID.

L'interface de gestion est Onyx de Plesk dans la version actuelle.

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

  • Affilié Amazon pour WordPress
  • NextScripts: assistant de mise à niveau SNAP Pro
  • NextScripts: Auto-affiche des réseaux sociaux
  • Liens intelligents SEO Développement
  • Shortcodes Ultimate
  • Table des matières Plus
  • The7 Elements
  • Compléments ultimes pour le constructeur de pages WPBakery
  • WPBakery Page Builder
  • Yoast SEO Premium
  • WP Rocket

Le modèle de conception

Le thème est le The7.

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

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

Notre site de démonstration s'appelle www.super-food.de et est également sous cette Domaine réalisable. Ainsi, vous pouvez vérifier tous les tests vous-même. Dans un autre article, nous montrons comment construire un grand site Web avec peu de ressources en un rien de temps. Peut-être que c'est quelque chose pour vous aussi. Le site Web est parfois copié sur d'autres systèmes à des fins de test pour créer des tests comparatifs.

Comment configurer le serveur Web via Plesk

Tout d'abord, le serveur Web doit être défini via Plesk. Il est toujours recommandé d'utiliser nginx en tant que serveur Web pur. Nous ne le faisons pas car essentiellement aucun fichier .htaccess n'est pris en charge et que la plupart des fonctions WordPress des plugins ne peuvent être converties qu'avec un effort supplémentaire, sinon elles sont inefficaces. Il n'y a pas non plus d'avantage de vitesse.

plesk-tableau de bord-domaine
Le tableau de bord Plesk pour le domaine

Paramètres PHP dans Plesk

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

plesk-php-version-set-apache avec
Paramètres PHP dans le menu Plesk. PHP FPM avec serveur Web Apache.

Paramètres pour Apache & nginx

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

Paramètres nginx en tant que proxy dans le menu Plesk

Nous n'utiliserons nginx que comme serveur proxy avec le traitement intelligent des fichiers statiques. En gros, vous pouvez complètement vous passer de nginx. Ensuite, http / 2 ne fonctionne plus et d’autres problèmes se produisent. Laissons donc les valeurs par défaut.

WordPress Dashboard

Notre site de démonstration fonctionne déjà très bien. Mais pour atteindre le 100 / 100, nous avons besoin de quelques modifications telles que la Minification, ainsi le résumé de CSS et Javascript tel que recommandé par Google.

Cela ne permet généralement pas de tout copier ensemble, il existe donc des aides utiles.

Nous utilisons le plugin WP-Rocket dans cette revue. Mais la plupart des autres peuvent.

wp-fusée-réservation
Le tableau de bord WP-Rocket

Dans la section Préférences, dans la section Optimisation de fichier, nous allons simplement cliquer sur tous les éléments, à l'exception de ceux nuisibles pour http / 2. Ce sont les fichiers CSS les "Minify CSS"Et"Optimiser la présentation CSS».

Minify css
WP Rocket CSS Minification

Avec les paramètres javascript, vous devez modifier les paramètres "Réduire Javascript"Et"Javascript retardé le chargement"Ainsi que le"Mode sans échec pour jQuery (recommandé) ".

javascript rapetisser
Paramètres WP Rocket Javascript

C'est presque ça. Avec le plugin, la page à la valeur PSI augmente à 94 / 100. Désormais, seules quelques optimisations mineures des fichiers d’image ou du code CSS manquent, qui n’ont en quelque sorte pas été compressées dans le thème dit des enfants. Google fournit commodément ces fichiers, mais optimisés, de sorte que vous pouvez facilement les remplacer par le gestionnaire de fichiers.

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 de l'enfant.
Ensuite, il n’ya eu qu’un petit rechargement dans l’espoir 100 / 100 une fois que toutes les optimisations ont été effectuées.

aperçu Page vitesse

Page-vitesse-100-100
Google Pagespeed Insights avec 100 / 100 passé.

Nous espérons que notre petit tutoriel vous a aidé dans l'optimisation. Donc tout est possible. Mais les choses changent tous les jours aussi. C'est pourquoi vous devez maintenir votre WordPress à jour, sinon les nouvelles fonctionnalités ne seront plus prises en charge.

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

LAISSEZ UNE RÉPONSE

S'il vous plaît entrer votre commentaire!
S'il vous plaît entrer votre nom ici