Share
Ce que vous allez créerBienvenue dans la deuxième partie de notre série sur Google PageSpeed. Dans le premier épisode, j'ai optimisé le PageSpeed du thème de mon site, MySiteMyWay's Construct. J'ai réussi à obtenir 70 Mobile et 86 Desktop.
Cependant, avec la fermeture de MySite, j'ai choisi un nouveau thème et atteint un 100 PageSpeed pour mobile et ordinateur de bureau. Il m'a fallu environ 12 heures d'efforts supplémentaires pour accomplir cela. Maintenant, la performance de mon site est l'un des sites WordPress les plus rapides que j'ai vus depuis longtemps - vérifiez-le. La navigation est presque instantanée.
Dans ce tutoriel, je vais vous expliquer comment j'ai accompli cela et ce que j'ai appris sur WordPress et Google PageSpeed. Pendant une bonne partie de la journée, j’ai pensé y arriver dans les années 90. J'ai été un peu surpris quand il est passé soudainement à 100 pour Desktop - et il ne restait que quelques détails pour maximiser Mobile.
Pour ceux qui ne le savent pas, Google 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, lisez l'article de Moz, Pourquoi l'optimisation de la vitesse des sites devrait faire partie de votre stratégie de référencement. «… Plusieurs études de cas ont montré que les pages de chargement plus rapides sont fortement corrélées à des revenus plus élevés».
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.
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 autorisant les mises à niveau régulières des plugins, le défi est de taille dans le monde WordPress, qui évolue constamment.
Cela rend beaucoup de développeurs tristes:
Crédit image: Ma photo du musée Picasso à Paris. Peut maintenant s'appeler "Développeur triste face à PageSpeed of Mobile 55 / Desktop 62"
Cela dit, laissez-moi vous encourager en vous montrant comment je l’ai fait (vous n’avez rien d’utile à faire aujourd’hui, et vous?). N'oubliez pas que les besoins de votre site peuvent différer un peu des miens..
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.
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.
À titre d’exemple des attentes de l’industrie, le site Web du New York Times affiche un score de 53/55 pour moi, bien inférieur à 100..
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 généralement réactif de nos jours, ont un impact important sur le PageSpeed de différents thèmes. Certains créateurs ne semblent pas regarder leur PageSpeed lorsqu’ils construisent.
Pour ce tutoriel, je vais me concentrer sur l'amélioration de mon site web personnel, JeffReifman.com. J'ai choisi Medium by Array Themes pour plusieurs raisons.
Le premier était sa vitesse de base. Les scores moyens Mobile 74 et Desktop 89 pour démarrer à partir de leur serveur de démonstration. Bien que ce soit déjà un peu mieux que ce que j'avais maximisé pour Construct, il s'agissait d'un thème plus moderne et il me restait encore de nombreuses étapes d'optimisation à essayer. J'espérais amener PageSpeed dans les années 80 ou 90.
De plus, étant donné la croissance du nombre de lecteurs sur mobile, je voulais cesser de me fier aux barres latérales, notamment pour le placement publicitaire. (J'espère écrire au sujet de mes nouvelles sources de revenus dans notre Google DFP en cours). Le thème Moyen fait un bon travail en incorporant la barre latérale gauche dans un menu réactif et en dissimulant sa barre latérale droite..
C'était là le PageSpeed initial pour la démo de Medium (l'hébergement de démo n'est jamais optimisé). Il était en fait encourageant de constater qu'il contenait de nombreux problèmes non résolus, car il montrait qu'il était meilleur que mon Construct optimisé avant qu'un effort supplémentaire ne soit appliqué et que des tâches similaires que je savais effectuer pour maximiser son score:
Voici plus de problèmes:
Et plus:
Et les défis de l'expérience utilisateur, qui étaient plus localisés:
Enfin, voici son score de démo Desktop:
Encouragé par le score de fondation, j'ai acheté et installé le thème Moyen sur mon serveur et je me suis mis au travail..
Gardez à l'esprit que changer de thème peut être assez compliqué. Pour moi, le remplacement, l'élimination et la mise à jour des codes courts intégrés à partir du thème Construire ont pris le plus de temps, et je n'ai pas complètement terminé, par exemple. dropcaps, variations de citation, boutons, onglets et menus de navigation basés sur des pages. Mon entraînement pour 100 m'a poussé à avancer malgré tout. Comment effectuer une recherche en masse et remplacer dans WordPress offre de bonnes solutions pour rechercher et remplacer des codes courts.
Bien que ce didacticiel ne vous explique pas exactement les étapes à suivre pour augmenter le nombre de pages de votre site, il vous guidera à travers un grand nombre de solutions possibles et identifiera les obstacles les plus courants. Il y a une autre grande ressource généralisée que je partagerai à la fin.
J'ai contacté un peu ArrayThemes à propos de la performance de démonstration du thème Medium de la catégorie des moins de 100 ans. Ils ont envoyé une excellente réponse:
Le test d'optimisation de PageSpeed doit être pris avec un grain de sel… notre démo est vouée à ne pas mettre en cache, mais nous n'avons pas réellement besoin de le mettre en cache sur nos démos… Les suggestions de PageSpeed ne sont pas tout à fait exactes ou exemplaires de la performance d'un thème. Cela dépendra entièrement de votre configuration, de votre serveur, de votre mise en cache et des autres optimisations que vous décidez de faire..
Cela constitue un point de départ idéal pour passer en revue les éléments de base communs des performances WordPress. Tous les domaines de performance ci-dessous traitent des scores sous-jacents de PageSpeed, pas complètement, mais les bases.
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.
Il s'avère qu'il existe une poignée de plug-ins conçus pour vous aider à relever le défi de la mise en cache efficace. Voici deux des meilleurs que j'ai essayés:
Crédit d'image: WordPress Tavern
Tous deux ont été utiles, mais ni l'un ni l'autre n'a complètement supprimé les obstacles liés à PageSpeed, tels que l'intégration du code CSS dans mon environnement. balise pour supprimer les problèmes de PageSpeed; En d'autres termes, ce plugin ne vous mènera probablement pas jusqu'à 100 PageSpeed. J'ai trouvé l'efficacité de Dependency Minification efficace et utile, mais son manque de souplesse m'a fait fuir..
En fin de compte, je reviendrais de manière répétée sur W3 Total Cache et trouverais de nouveaux moyens plus puissants d’exercer des pressions pour obtenir des performances optimales. Ce n’est pas parfait et a certainement quelques bugs UX, cela a bien fonctionné pour que je trouve mon chemin avec d’autres approches de PageSpeed 100.
En fin de compte, j’ai choisi un seul nouveau plug-in, ce qui facilite la résolution des problèmes de PageSpeed avec Disqus..
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 chez Envato Tuts +, puis j’ai décidé de passer à eux en tant que client..
À la fin, vous pouvez choisir parmi une grande variété de CDN, tels que CloudFlare et RackSpace, pour ne nommer que ceux-ci..
Récemment, j'ai commencé à expérimenter avec le nouveau service d'optimisation d'image Optimus et le plugin WordPress de KeyCDN. Il y a une petite possibilité qu'il soit géré par des robots construits avec les anciens Apple Lisas et Mac:
Cela fonctionne bien, mais une autre alternative populaire est WP-Smush, un plugin plus ancien avec plus de 300 000 utilisateurs..
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:
Cela peut être un élément difficile à éliminer de WordPress en raison du thème et de l’architecture du plugin. On y reviendra.
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..
Examinons pas à pas les problèmes identifiés et les moyens de les résoudre. En vérité, j'ai beaucoup expérimenté différents outils et approches. J'ai régulièrement abandonné une approche et suis retourné à une autre. Ma solution s'est avérée être un patchwork de solutions assez bien géré. Le chemin n'était pas direct Yoda.
Par exemple, voici comment vous réduisez le code HTML dans W3 Total Cache:
De même, il est facile de minimiser JavaScript dans W3 Total Cache. Notez ci-dessous que je demande au W3TC d’incorporer le fichier compressé non dans le mais au lieu juste avant . Retarder JavaScript peut améliorer votre score PageSpeed.
Parce que les thèmes et les plugins utilisent JavaScript et CSS, il faut un peu de travail pour les réduire ensemble et les combiner en un seul fichier (et ce n'est même pas suffisant pour PageSpeed, ce que je vais décrire plus loin)..
Afin d'empêcher les plugins de charger leur propre CSS et de charger W3TC de charger les versions compressées et combinées, vous devez trouver le descripteur du plugin pour le fichier CSS (distinct des noms de fichiers) et ajouter du code à votre thème pour interrompre les instructions de chargement du plugin. Ensuite, entrez le chemin d'accès à chaque fichier CSS dans la boîte de dialogue W3TC ci-dessus pour être chargé avec les autres.
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, en commençant par 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'); 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, comme indiqué ci-dessus..
W3TC peut combiner tous mes thèmes et plugins, mais PageSpeed n'aime toujours pas voir un seul CSS inclus (tant pour les bonnes pratiques de développement HTML):
J'ai finalement chargé neuf fichiers CSS (sept seulement ci-dessous). Tout d'abord, vous devez trouver les descripteurs de plug-in pour CSS et les désenregistrer dans votre thème, comme décrit ci-dessus. Ensuite, vous devez tous les diriger vers W3TC.
Bien qu'il existe plusieurs façons d'obtenir une version abrégée de toutes ces fonctionnalités, je viens en fait de récupérer le fichier compressé de W3TC. J'ai supprimé tous les arguments de requête de mise en cache, par exemple. ?cbe3w2, avec rechercher et remplacer dans TextEditor. Je suis toujours un utilisateur fidèle de TextMate, mais les retards sont énormes et je me bloque lorsque je tente de naviguer dans un fichier CSS simplifié. Donc, TextEditor m'a aidé à éditer ces fichiers individuellement. Toutes mes excuses aux puristes, je ne suis pas encore passé à Sublime.
Bien que cela ait fonctionné pour moi de coller mon CSS modifié dans mon en-tête, j'ai ensuite dû le changer pour obtenir le contenu dynamique des fichiers CSS et les faire écho..
Une fois que j'ai ajouté un autre plugin pour le partage social, le collage ne fonctionnait plus et je devais séparer les fichiers avec le mécanisme ci-dessus. Cela offre également plus de flexibilité pour l'avenir. Google PageSpeed ne voit jamais cela, et mon cache Varnish cache tout ralentissement de l'inclusion de deux fichiers.
En fin de compte, j'ai configuré tous mes fichiers CSS dans W3TC, créé des copies des fichiers compressés, puis désactivé cette fonctionnalité d'inclusion:
L'un des inconvénients du W3TC est qu'il affiche à plusieurs reprises des messages d'erreur gênants même si vous l'utilisez délibérément de manière inhabituelle..
Lorsque vous déplacez des fichiers CSS hors des répertoires du plug-in, assurez-vous de définir les chemins relatifs relatifs aux images, etc., pour pouvoir les utiliser à partir du répertoire racine du site. Il y avait beaucoup de situations où les images ne se chargeaient pas jusqu'à ce que je trouve où résoudre ces problèmes. Je vais partager un exemple dans le Dépannage section ci-dessous.
De façon amusante, PageSpeed de Google se plaint si vous chargez ses bibliothèques JavaScript en externe. J'ai reçu des démérites pour des scripts externes liés à Flickr, Disqus et Google Analytics:
Cela s'est avéré être un obstacle assez important et nécessite beaucoup de temps et de complexité pour résoudre complètement ces problèmes..
Tout d'abord, je venais de rentrer d'un voyage en Inde et de mettre sur la page d'accueil des articles de blog individuels avec des photos intégrées à Flickr. Le thème Mon Média défile rapidement dans un certain nombre de publications, ce qui a amené PageSpeed à se plaindre de toutes les publications..
Après avoir constaté que PageSpeed s'était plaint à la fois de la taille des images incorporées hébergées sur Flickr (à différents nombres de pixels) et vu ces démérites JavaScript externes, je suis revenu à l'auto-hébergement d'images optimisées sur mon site. Ils sont toujours liés à Flickr pour mon album indien en cours.
C’est un bon exemple de la façon dont l’utilisation d’un puissant service tiers dans le seul but d’intégrer des photos tue votre score PageSpeed. Flickr n'a pas réussi à aider les utilisateurs de WordPress à résoudre ce problème. À titre d'exemple, ils auraient besoin de:
Avec les fichiers restants de Google, la meilleure solution consistait à héberger localement une copie des scripts pour Analytics et DFP et à utiliser des scripts cron pour les mettre à jour régulièrement sur un serveur..
Tout d'abord, j'ai arrêté d'utiliser mon plugin Google Analytics et ajouté manuellement du code modifié à l'en-tête de mon thème:
//…
Notez que j'ai changé les chemins d'accès à mes copies locales des scripts. Ensuite, j'ai créé des copies locales des scripts pour Google Analytics et Google DFP, puis peu de temps après, la mise en cache de mon navigateur a été résolue dans PageSpeed, à l'exception de Disqus..
Je ne sais pas exactement si c'est pour la sécurité, le support multi-plateforme ou le pur "intelligence", mais Disqus et d'autres fournisseurs comme Flickr semblent masquer les fichiers qu'ils sont en train de charger avec d'autres fichiers. Cela rend l'optimisation de PageSpeed beaucoup plus difficile et souvent insoluble.
Certes, j'ai passé deux à trois heures à essayer différentes approches pour optimiser le plugin Disqus - rien ne fonctionnait pour moi.
Finalement, j'ai désinstallé le plugin Disqus et installé Disqus Conditional Load:
Bien que censé faire beaucoup de choses, il permet également d'optimiser PageSpeed avec l'installation.
Soudain, les démérites de mise en cache du navigateur Leverage de PageSpeed avaient disparu. Bravo à DCL!
PageSpeed se plaint souvent des liens trop rapprochés dans les appareils mobiles. J'ai expérimenté quelques approches et finalement arrêté d'afficher les tags sur les appareils mobiles.
Si je passe plus de temps, je peux probablement améliorer leur expérience utilisateur et passer avec PageSpeed.
Le plug-in ArrayToolkit, qui affiche les icônes suivantes dans la barre latérale droite, a cessé de fonctionner pour moi. Il m'a fallu un certain temps pour déterminer quels chemins devaient être codés avec des chemins absolus pour que cela fonctionne..
Finalement, j'ai trouvé et remplacé ces chemins par des chemins relatifs corrigés vers le répertoire du plugin d'origine:
// Doit mettre chemin dans le plugin css @ font-face font-family: 'array'; src: url ('./ fontello / array.eot'); src: url ('./ fontello / array.eot # iefix') format ('embedded-opentype'), url ('./ fontello / array.woff') format ('woff'), url ('./ fontello /array.ttf ') format (' truetype '), url (' ./ fontello / array.svg # array ') format (' svg '); poids de police: normal; style de police: normal; J'ai encore un problème à résoudre. Mon nouveau plugin onglets (Construct avait des onglets intégrés) a cessé de fonctionner en cours de route. J'ai juste besoin de passer du temps à le déboguer, mais cela devrait être assez facile à résoudre.
J'ai expérimenté avec YUI Compressor avec W3TC pour compresser mes fichiers JavaScript et CSS. Au lieu de conduire à une augmentation de la vitesse, tout a cassé.
Si vous souhaitez savoir ce que j'ai fait de mal, vous pouvez installer Java et YUICompressor comme ceci:
# bonne chance sudo apt-get installer openjdk-6-jre cd / usr / local / lib sudo wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar
Merci de poster dans les commentaires si vous savez comment bien jouer avec WordPress.
Après cette deuxième série de travaux sur le nouveau thème, tout a fonctionné mieux que je ne l'avais espéré. Je n'étais jamais sûr d'atteindre mon objectif optimal.
J'ai marqué 100 PageSpeed pour Mobile et Desktop. De manière encore plus remarquable, mon site fonctionnait très vite, plus rapidement que jamais auparavant. Je suis très curieux de voir comment le trafic de recherche entrant et l'activité du lectorat réagissent aux scores et performances plus rapides des prochains mois..
Voici mes scores finaux PageSpeed, d'abord Mobile:
Et maintenant, bureau:
Ordinateur de bureau ayant atteint les 100 premiers, et je devais revenir en arrière et terminer certains ajustements (adresser les cibles tactiles) pour y amener Mobile.
Et encore une fois, la vitesse du site mérite une visite rapide. Si vous connaissez d'autres sites Web commerciaux tournant à 100 PageSpeed, veuillez les partager dans les commentaires. J'aimerai les voir.
Comme un exemple de changement de référencement, mon essai populaire sur la datation a grimpé au troisième rang des résultats sur mobile sous "Rencontres à Seattle"(Pas encore sur le bureau.) Cela me dit que peut-être les histoires de sites majeurs qui battent la page ont de mauvaises pages de rapport mobiles, parce que ce n'est pas facile.
Pour optimiser le débit de page de mon site, je devais apporter un certain nombre d'ajustements à mon thème, qui créerait désormais des dépendances sur les modifications apportées aux scripts externes et sur les mises à jour du thème et des plugins. Maintenant que j'en ai terminé avec mon objectif à court terme, j'ai du travail à faire pour organiser mes systèmes afin de gérer plus facilement cette tâche..
J'aurai bientôt besoin d'implémenter ce script cron pour synchroniser mes scripts Google auto-hébergés pour Analytics et DFP..
Voici une entreprise qui propose une approche plus simple d’utilisation d’Analytics sans que PageSpeed soit pénalisé, corrigeant ainsi le dernier point sur Google PageSpeed Insights. Je préfère ne pas compter sur d'autres tiers.
Je devrai également mieux suivre les mises à jour des thèmes de Medium et intégrer les modifications. Construire un thème enfant à partir de mes modifications peut également faciliter ce processus. La plupart du temps, je chercherai des modifications qui écraseraient les fichiers JavaScript et CSS mis à jour (ou supplémentaires)..
De même, lors de la mise à jour des plugins, il faudra que je surveille les mêmes types de mises à jour. Cela peut m'aider à mieux organiser mon utilisation de GitHub avec les plugins WordPress. Je l'utilise déjà pour mon thème.
Je souhaiterais peut-être consacrer un peu de temps à l'écriture de scripts afin de déterminer les fichiers JavaScript et CSS utilisés avec le thème et les plugins mis à jour, de les télécharger sur mon serveur, ainsi que de minimiser et de compiler les fichiers appropriés à lier ou à inclure..
Enfin, l’une de mes surprises est que le protocole SSL n’est pas nécessaire pour atteindre un PageSpeed de 100. Cela a du sens, mais montre qu’une variété de composants différents peuvent affecter votre classement dans les recherches Google. J'écrirai bientôt sur l'implémentation du SSL gratuit de Let's Encrypt avec WordPress.
Si vous avez aimé cela, mais que vous souhaitez lire un didacticiel plus général qui ne rentre pas aussi profondément dans les détails qui peuvent ou ne peuvent pas s'appliquer à vous, Google PageSpeed Scoring 100/100 de KeyCDN avec WordPress est un excellent complément. J'ai également écrit un article sponsorisé à propos de leur CDN sur Envato Tuts + (Accélérez votre diffusion de contenu avec KeyCDN) et je les ai poursuivis en tant que client..
En attendant, si vous recherchez d'autres utilitaires pour vous aider à développer votre ensemble croissant d'outils pour WordPress ou pour que le code soit étudié et approfondi dans WordPress, n'oubliez pas de voir ce que nous avons disponible dans Envato. Marché.À l'avenir, j'examinerai quelques améliorations supplémentaires pour améliorer les performances globales de mon site. Ceux-ci inclus:
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 le clonage de WordPress sous Linux (en 90 secondes).
