Share
Ce que vous allez créerGoogle PageSpeed est un outil gratuit qui évalue les performances et la convivialité de votre site Web pour les plates-formes mobiles et de bureau. C’est très important, car Google l’utilise pour déterminer les éléments clés de notre classement SEO, c’est-à-dire à quel point nous figurons dans les résultats de recherche..
Si vous souhaitez en savoir plus sur les avantages d'une vitesse de site accrue, consultez la rubrique Pourquoi l'optimisation de la vitesse de site devrait-elle faire partie de votre stratégie de référencement, qui souligne que «… plusieurs études de cas ont montré que le chargement plus rapide des pages était fortement corrélé à des revenus plus élevés».
Dans ce tutoriel, je vais vous présenter quelques approches techniques pour optimiser PageSpeed sur votre site WordPress. Bien que les modifications de base puissent être assez simples et faciles, des mises à jour plus complètes peuvent en réalité être assez difficiles.
Fait intéressant, il est peut-être plus facile d'optimiser les sites Web personnalisés que les sites WordPress, en raison de l'utilisation intensive par le cadre de thèmes et de plug-ins tiers. Il est également basé sur une architecture conçue avant sa popularité et repose sur une architecture imparfaite pour la compatibilité descendante..
Avant de commencer, rappelez-vous que j’essaie de participer aux discussions ci-dessous. Si vous avez une question ou une suggestion de sujet, veuillez poster un commentaire ci-dessous ou contactez-moi sur Twitter @reifman. Je suis intéressé par votre expérience avec WordPress et PageSpeed.
Pour ce tutoriel, je vais me concentrer sur l'amélioration de mon site web personnel, JeffReifman.com..
Il y a quelque temps, mon PageSpeed était Mobile 65 et Desktop 64 - pas très bon:
Remarque: voici l'article à lire si vous êtes curieux de connaître le Capture d'écran mobile drôle avec Russell Wilson.
Avant de commencer à faire des optimisations, parlons de certains facteurs de performance de base de WordPress..
Il existe plusieurs méthodes principales pour commencer à optimiser votre site WordPress en termes de performances et d'augmentation de la vitesse de la page..
Le nombre et la taille des fichiers JavaScript et des CSS qu’ils utilisent, le nombre d’images utilisées et leur taille, ainsi que l’approche adoptée pour leur implémentation mobile, c’est-à-dire la réactivité de PageSpeed des différents thèmes, sont largement affectés.
Si vous êtes à la recherche d'un nouveau thème WordPress et souhaitez évaluer PageSpeed, vous serez peut-être surpris de constater que les partitions de thèmes bien connus tournent souvent dans les années 60 et 70, mais aussi dans les années 90. Voici quelques articles évaluant les thèmes et PageSpeed via ColorLib et WPMU. En tout cas, je m'attendais à plus.
J'ai utilisé le thème My Site My Way Construct pendant plusieurs années. Fait intéressant, le site de support de la société est resté silencieux récemment, et ils n'ont laissé aucune explication aux utilisateurs..
Cependant, comme il n'y aura plus de mises à jour du thème, cela me facilite légèrement la tâche de modifier radicalement les performances de ce didacticiel sans avoir à gérer les mises à jour ultérieures du code de la société. J'y arriverai sous peu.
L'utilisation de serveurs dédiés fonctionnera très probablement mieux que celle de serveurs virtuels partagés de plus en plus courants et plus abordables. Dans le passé, j'ai déjà expliqué comment installer WordPress chez des fournisseurs partagés tels que Digital Ocean. Il existe également des services intermédiaires tels que WP Engine, qui offrent une attention aux développeurs et aux serveurs partagés et dédiés..
La qualité de l'hôte importera aussi. Un grand nombre de fournisseurs WordPress partagés nus peuvent fournir des performances incohérentes.
Par exemple, j'utilise le thème KnowHow pour la publication avec WordPress hébergé sur un serveur virtuel Digital Ocean et pour Flee the Jungle hébergé sur WP Engine. Le poids du contenu des sites est assez similaire, par ex. utilisation du texte et des images. PageSpeed pour la publication avec PagePress de WordPress est Mobile 73 et Desktop 88, tandis que Flee the Jungle chez WP Engine était un peu plus rapide (Mobile 78 et Desktop 91); L'hébergement géré de WP Engine est un peu plus rapide que mon hébergement autonome avec un serveur partagé.
J'ai également constaté de mauvaises performances avec l'hébergement AWS bas de gamme d'Amazon. En avoir pour son argent.
La mise en cache WordPress est essentielle pour la performance et j'ai régulièrement écrit sur mes favoris: W3TC et Varnish Cache, par exemple. Optimisation de WordPress avec Varnish et W3 Total Cache.
Un autre service essentiel est un réseau de diffusion de contenu. Auparavant, j’avais écrit à propos d’accélérer la livraison de votre contenu avec KeyCDN pour Envato Tuts +, puis j’ai décidé de passer à eux..
Réduire régulièrement les dimensions et la taille des fichiers d’images dans WordPress prend du temps, mais est critique.
J'utilise régulièrement Acorn comme un outil léger pour réduire rapidement les images destinées au Web. J'ai ri lorsque quelqu'un a récemment tweeté qu'ils venaient d'ouvrir Photoshop et qu'ils étaient disponibles pour les appels téléphoniques pendant un certain temps, le temps que celui-ci soit chargé - Acorn est petit et rapide. Ce modèle d’abonnement Adobe est si lent à charger, désolé, abonnés.
Il existe également des plug-ins d'optimisation d'image automatisés tels que WP-Smush. J'ai récemment commencé à expérimenter le nouvel Optimus de KeyCDN. En outre, voici le résumé de WPMU des 10 meilleurs plug-ins d'optimisation d'image pour accélérer votre site WordPress.
De plus en plus, j'accède également aux images de mon message en externe à partir de Flickr. Par exemple, lorsque mon article sur Slashdot sur la croissance du quartier impulsé par l'Amazone de Seattle est devenu viral, il n'y a pas eu de problème de performances ni de coût de bande passante pour toutes les photos, car Flickr s'en est occupé..
Vous pouvez lire le Guide d'optimisation des images de Google PageSpeed, mais j'ai de plus en plus constaté que l'aide de Google était trop axée sur la recherche (ce qui est bien comme ressource) mais qu'elle n'était pas très utile pour résoudre les problèmes par vous-même. Il y a peut-être un trop grand nombre de docteurs et un trop peu d'utilisateurs effectifs.
Bien que je connaisse toujours W3TC et Varnish, l’ajout de KeyCDN et Optimus a augmenté mon PageSpeed vers Mobile 72 et Desktop 82, ce qui constitue une nette amélioration par rapport à 65 et 64:
Fait intéressant, les plaintes relatives à la mise en cache des images de Google semblent pouvoir continuer indéfiniment, quelles que soient les améliorations que vous apportez. Pour ce tutoriel, j'ai essayé d'optimiser certains des délinquants restants identifiés afin de voir ce qui se passerait. Le résultat était intéressant, et je vous en dirai plus longement.
Si vous avez suivi tous les principes de base ci-dessus, l'amélioration de votre PageSpeed avec WordPress s'avère demander un effort considérable et peut prendre beaucoup de temps..
Un site statique a généralement un fichier avec CSS et JS inclus qui peuvent être facilement décomposés et combinés. WordPress est beaucoup plus complexe.
Tant de choses sont créées dynamiquement grâce à l'architecture parfaite de WordPress. Cela peut prendre du temps de trouver où les fichiers sont créés, s'ils se trouvent dans les thèmes ou les plugins, et comment résoudre ces problèmes. Il s'avère que lorsque vous avez sept plugins, y compris des fichiers JavaScript, et que vous souhaitez les minimiser et les combiner en un seul tout en permettant des mises à niveau régulières des plugins, le défi est de taille..
La mise à jour de mes paramètres W3TC HTML minify a rapidement résolu la plainte de PageSpeed à ce sujet..
Pour CSS, je devais ajouter individuellement les fichiers que PageSpeed me signalait au sujet de la gestion des fichiers CSS du W3TC. W3TC a ensuite commencé à minifier mon CSS et à combiner les fichiers nommés en un seul fichier à inclure.
Cette exigence de minification CSS résolue de PageSpeed.
Il a également réduit le nombre de fichiers CSS signalés pour le blocage du rendu de sept à quatre fichiers liés à un thème (répertoriés en premier sous Optimiser la livraison CSS):
Les trois fichiers restants proviennent de répertoires de plugins en dehors de mon thème (que nous explorerons plus tard):
J'espère que cela vous donne une idée du trou du lapin que l'optimisation de WordPress PageSpeed devient rapidement.
Bien que la simplification et la fusion de CSS soient généralement assez faciles, JavaScript a tendance à échouer beaucoup lorsque vous essayez de le faire, ce qui crée des bogues majeurs, révolutionnaires..
Fait intéressant, PageSpeed offre maintenant des téléchargements complets compressés de ses versions compressées de vos fichiers, ce qui ne lui plaît pas..
Il répertoriait dix de mes fichiers JS qu’il souhaitait résoudre:
Pour référence, voici plus de ressources de minimisation de Google PageSpeed pour HTML, CSS et JS. J'ai également utilisé Refresh SF, qui fournit un accès Web facile à divers outils de compression..
Compresser et combiner JavaScript peut certainement créer des bugs, je devais donc procéder étape par étape. À l'aide de la gestion de fichiers JS de W3TC, j'ai synthétisé et combiné les sept fichiers JS du thème Construct:
Cela ne me permettait pas de traiter les fichiers JS de mes plugins ni les problèmes que je rencontrais avec un mystérieux fichier base.js hébergé de façon externe et introuvable. Passons maintenant au rendu des problèmes de blocage, puis revenons à la minification JS après.
Si vous avez un grand nombre de fichiers à charger dans un style (CSS) et à activer (JS) la fonctionnalité de votre page Web, la plupart des navigateurs ralentissent lorsque quatre ressources sont demandées en parallèle..
Voici un exemple de plainte de blocage de rendu CSS dans PageSpeed:
Alors que W3TC en avait combiné plusieurs dans include.c46b63.css, les trois suivants étaient issus de mes plugins.
Le blogueur Justin Tadlock a expliqué comment demander à WordPress de ne pas charger les fichiers CSS que mes plugins avaient mis en file d'attente. La réponse est de les désenregistrer puis de charger vous-même un fichier combiné..
Voici mon plugin Table of Contents mettant en file d'attente ses fichiers JS et CSS:
Accentsconagua
/ ** * Enregistrez et chargez les fichiers CSS et javascript pour le frontend. * / function wp_enqueue_scripts () $ js_vars = array (); // enregistre notre CSS et nos scripts wp_register_style ('toc-screen', $ this-> chemin. '/screen.min.css', array (), TOC_VERSION); wp_register_script ('toc-front', $ this-> chemin. '/front.min.js', array ('jquery'), TOC_VERSION, true); // les en file d'attente! if (! $ this-> options ['exclude_css']) wp_enqueue_style ("toc-screen"); if ($ this-> options ['smooth_scroll']) $ js_vars ['smooth_scroll'] = true; wp_enqueue_script ('toc-front');Suivant la suggestion de Tadlock, j'ai annulé l'inscription de mon plugin dans le fichier functions.php de mon thème. Tout d'abord, le CSS - vous devez trouver les références utilisées par le développeur du plugin:
add_action ('wp_print_styles', 'my_deregister_styles', 100); function my_deregister_styles () wp_deregister_style ('toc-screen'); wp_deregister_style ('blogsynthesis_jss_css'); wp_deregister_style ('edd-styles'); J'ai créé manuellement un fichier CSS combiné avec ces trois feuilles de style de plug-in. Ensuite, j'ai demandé au W3TC de réduire et d'associer ce fichier à sa propre méga-feuille de style:
Il y a un problème majeur ici: lorsque je mets à jour mes plugins, il se peut que je devrais mettre à jour ce fichier CSS combiné et les fichiers JS qui l'accompagnent..
Voici un article de blog avec d'autres approches que vous pouvez utiliser pour relever ces défis..
En utilisant l'approche de Tadlock, voici à quoi ressemblait le blocage du rendu PageSpeed:
J'ai suivi les mêmes étapes pour les fichiers JS, juste un peu plus attentivement. Peu à peu, la plainte de JS de mon PageSpeed pour mon site est devenue assez mineure:
Cependant, comme vous pouvez le voir ci-dessous, il se plaignait également de problèmes de mise en cache du navigateur avec les fichiers JS auxquels je ne pouvais pas trouver dans ma base de code, tels que ad_status.js de Doubleclick..
Suppression d'un ancien lecteur YouTube intégré
Finalement, j'ai découvert que le problème de la minification JS et celui de la mise en cache étaient liés à l'utilisation d'un lecteur vidéo YouTube externe..
Alors que j'étais curieux d'essayer une petite solution suggérée ici pour empêcher le chargement de la vidéo sans intervention de l'utilisateur, j'ai décidé de supprimer la vidéo de la page d'accueil de mon diaporama..
Il est probable que la manière dont mon thème Construct intégrait les fichiers YouTube était une solution classique. Le support HTML5 de YouTube peut fonctionner beaucoup mieux maintenant. Pourtant, il est assez drôle de voir comment un service Google influe sur l'évaluation des performances d'un autre service Google..
La suppression de la seule fonctionnalité de ma page d'accueil qui intégrait une vidéo YouTube a résolu quelques problèmes:
Puisque je ne veux pas que vous manquiez de voir ma meilleure moitié avant que je sois corrompu par WordPress, je vais inclure la vidéo ici. J'étais un bon gars.
Voici ce qui se passait:
Une fois les modifications antérieures apportées à JS et la vidéo supprimée, le problème de minification JavaScript a été résolu pour mon maître PageSpeed:
L'erreur de mise en cache du navigateur avec Doubleclick indiquée ci-dessous a également disparu.
À présent, je n'avais besoin que de mettre en cache gpt.js et ga.js, deux autres services Google hébergés en externe:
Cela s'est avéré être un obstacle assez important et a nécessité beaucoup de complexité pour résoudre complètement ces problèmes. La meilleure solution consiste à héberger localement une copie des scripts Google pour Analytics et DFP et à utiliser des scripts cron pour les mettre à jour régulièrement sur votre serveur. Alice commençait à s'ennuyer avec moi-espère que vous suivez toujours.
J'ai consulté d'autres thèmes que j'utilise avec le plug-in Google Analytics (l'option Construire a des paramètres pour Analytics), mais ils ne l'ont pas résolu non plus..
J'ai donc créé des copies locales des scripts pour Google Analytics et Google DFP, et peu de temps après, la mise en cache de mon navigateur a été résolue dans PageSpeed:
Voici plus d'informations de Google sur la mise en cache de navigateur, encore une ressource technique très approfondie sans trop de conseils pour les administrateurs WordPress.
Google pourrait fournir des regroupements communs de ses fichiers JavaScript populaires, minifiés et combinés, afin de mieux prendre en charge le PageSpeed des éditeurs. Cela aiderait aussi s'ils ne chargeaient pas leurs fichiers individuellement et de manière obscure dans des scripts.
Revenons brièvement aux plaintes concernant la taille des images PageSpeed avant de terminer..
Les suggestions d'image de Google PageSpeed peuvent en réalité affaiblir la convivialité de votre site. Voici un exemple, une image sélectionnée que j'ai hébergée sur ma page d'accueil.
Pour que mes articles paraissent dans Facebook avec une vignette, le réseau social requiert des dimensions minimales de 200 pixels sur son côté le plus court. Ma version est 281 x 200 (montré ici légèrement ajusté pour Tuts + exigences):
Et voici la version fournie par PageSpeed dans son téléchargement zippé:
Vous pouvez voir que la qualité est encore pire, mais plus important encore, PageSpeed veut que je réduise l'image à une dimension que Facebook n'accepterait pas de montrer dans ses messages..
En fin de compte, j'ai choisi de quitter mon site avec une poignée de plaintes relatives à l'optimisation des images PageSpeed, ce qui abaissait mes scores..
Après tout ce travail, où mon site at-il fini?
Les scores finaux de PageSpeed incluent Mobile 70, montrant certaines des plaintes restantes ci-dessous:
Voici les optimisations d'image restantes:
Et voici un résumé de toutes les règles passées:
Aussi, voici les scores finaux UX. La plupart des sites n'ont pas de gros problèmes, alors je ne les ai pas abordés aujourd'hui:
Le score final de Desktop était de 86, pas mal:
JavaScript est capricieux. Je n'ai jamais réussi à minimiser et à combiner ces deux derniers fichiers avec le premier. Même en les laissant non compressés n'a jamais fonctionné. Travailler avec des thèmes et des plugins est difficile. Il aurait fallu plusieurs jours de travail dédié pour résoudre ce problème..
Voici ses plaintes concernant la taille des fichiers image:
En fin de compte, l'optimisation de mon PageSpeed a pris beaucoup de temps et d'efforts et a rendu mon site vulnérable aux futures mises à jour de plugins et de scripts Google. Une grande partie de ce travail est source de confusion, de minutie et de temps. C'est aussi un peu fou et abrutissant. Merci Google.
PageSpeed n'est pas tout. Le contenu compte aussi. Voici quelques sites bien connus et leur PageSpeed. Les résultats vont vous surprendre.
Daring Fireball (DF) est l’un des blogs les plus rapides axés sur le contenu. Il promeut les annonceurs de manière minimale. Les pages sont légères et rapides. Le CMS de Gruber est une version personnalisée de Movable Type. Les scores sont juste un peu mieux que mon site. DF génère également une tonne de revenus avec un minimum de publicité.
De toute évidence, il s’agit d’un grand groupe de presse, ils ont de très mauvais scores pour PageSpeed:
Etonnamment, notre chiffon local avec son modèle de publicité et de rebond d'abonnement est bien pire:
B & H Photo, un site de e-commerce réputé, affiche un score mobile terrible, et un score pour le bureau juste en dessous du mien:
Vous avez peut-être entendu parler de cette société dans mon récent essai Comment faire en sorte que les sites WordPress soient différents en fonction de la géographie: ils vendent beaucoup de choses en ligne. Mes scores PageSpeed sont nettement supérieurs aux leurs:
À l'avenir, j'examinerai quelques améliorations supplémentaires pour améliorer PageSpeed sur mon site:
Si je ne migre pas les thèmes sous peu, je devrai implémenter ce script cron pour synchroniser mes scripts Google auto-hébergés pour Analytics et DFP et comprendre comment surveiller les mises à jour de plug-in pour les modifications JS et CSS. Je devrais peut-être inverser ces gains spécifiques à PageSpeed, honnêtement.
Si vous avez des questions, merci de les poster ci-dessous. Ou vous pouvez me contacter sur Twitter @reifman. S'il vous plaît consulter ma page d'instructeur Envato Tuts + pour voir d'autres tutoriels que j'ai écrits, tels que ma série de démarrage (Construire votre démarrage avec PHP).
