Share
Ce que vous allez créerBienvenue à mon troisième tutoriel sur l’optimisation de votre vitesse de Google Page. 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..
Les webmasters savent donc qu'il est assez important d'avoir un bon PageSpeed, bien qu'il y ait un débat à ce sujet. Par exemple, la vitesse de page du New York Times est actuellement de 60 et 68 sur 100.
Dans le premier épisode, je vous ai expliqué comment essayer d'améliorer mon PageSpeed avec un thème créé par un ancien fournisseur, Hands On Improving Google PageSpeed (Envato Tuts +). En fin de compte, je suis parvenu à un PageSpeed pour mobile de 70 et de bureau 86.
Dans le deuxième épisode, j'ai fait de mon blog un site de développement ciblé et j'ai personnalisé mon code WordPress de manière à atteindre PageSpeed 100 à la fois sur mobile et sur ordinateur. Voir Optimisation de Google PageSpeed à 100 dans WordPress (Envato Tuts +).
Et j'ai réussi à cela pendant un temps:
Aujourd'hui, je vais vous en dire plus sur mon expérience avec l'optimisation PageSpeed et sur une alternative moins connue que le faire vous-même, le module PageSpeed de Google. Vous pouvez l'installer pour Apache et nginx.
PageSpeed peut s'intégrer à votre serveur Web Apache ou Nginx pour optimiser automatiquement votre site. - Google
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 mon blog était mon objectif à plein temps, alors il n'aurait peut-être pas été trop difficile de maintenir le code optimisé pour PageSpeed à mesure que les mises à jour du plug-in WordPress et des mises à jour de thèmes arrivaient. Mais ce n'est pas. Et franchement, le maintien de ce travail s’est avéré une perte de temps.
Il me tardait de revenir à l'ancienne époque des mises à jour par clic de souris.
J'ai également remarqué qu'après avoir basculé sur un nouveau thème et optimisé mon PageSpeed à 100%, le trafic a diminué et est resté stable. Certes, la disposition des thèmes réactifs y était pour quelque chose, mais Google ne m'a jamais récompensé pour avoir atteint 100 PageSpeed..
De même, comme je l'ai expliqué dans Installation de AMP dans WordPress (Envato Tuts +), AMP a été créé pour capter l'attention des éditeurs de médias, mais n'apporte pas grand-chose aux petits éditeurs. Google n'a jamais généré de trafic supplémentaire sur mon blog après avoir fourni l'assistance technique AMP.
J'ai donc décidé de ne plus me concentrer sur PageSpeed et de passer à un nouveau thème qui aiderait les utilisateurs à naviguer plus facilement sur mon site. J'ai également désinstallé AMP pour le moment.
Cela semblait être l'occasion idéale pour désactiver l'ensemble de mes offres JavaScript et CSS personnalisées et expérimenter avec le module PageSpeed de Google, qui fonctionne au niveau du serveur pour le faire à votre place..
Fondamentalement, le module Google PageSpeed automatise bon nombre des optimisations de performances recherchées par ses classements PageSpeed. Et il est disponible sur les serveurs open source populaires Apache et nginx.
Le module PageSpeed compresse et combine les fichiers inclus tels que les feuilles de style JavaScript et CSS, mais remplacera également les images par des formats de fichier progressifs compressés (.webp)..
Après avoir installé mon nouveau thème, j'ai pris "avant" des instantanés de mon score PageSpeed. J'ai reçu un 83 pour le bureau:
Et un 64 inférieur pour mobile:
Pour ce tutoriel, je vais vous guider à travers l'installation pour Apache. Google propose également des instructions d'installation pour nginx.
Le module PageSpeed n'est pas inclus dans les répertoires de paquets Ubuntu, vous devez donc le télécharger manuellement via wget:
$ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb --2016-10-02 15: 10: 54-- https://dl-ssl.google .com / dl / linux / direct / mod-pagespeed-stable_current_amd64.deb Résolution de dl-ssl.google.com (dl-ssl.google.com)… 74.125.22.136, 74.125.22.91, 74.125.22.190,… Connexion à dl -ssl.google.com (dl-ssl.google.com) | 74.125.22.136 |: 443… connecté. Requête HTTP envoyée, en attente de réponse… 200 OK Longueur: 7009850 (6.7M) [application / x-debian-package] Enregistrement dans: 'mod-pagespeed-stable_current_amd64.deb' 100% [=========== =============================================== ============>] 7 009 850 38,6Mo / s en 0.2s 2016-10-02 15:10:54 (38.6 Mo / s) - 'mod-pagespeed-stable_current_amd64.deb' a été sauvegardé [7009850/7009850]
Ensuite, utilisez dpkg installer le module:
$ sudo dpkg -i mod-pagespeed - *. deb Sélection du paquet non sélectionné précédemment mod-pagespeed-stable. (Lecture de la base de données… 668500 fichiers et répertoires actuellement installés.) Préparation de la décompression du mod-pagespeed-stable_current_amd64.deb… Décompression du mod-pagespeed-stable (1.11.33.2-r0)… Configuration de mod-pagespeed-stable (1.11.33.2-r0 )… Activation du module pagespeed. Pour activer la nouvelle configuration, vous devez exécuter: service apache2 restart
et enfin, apt-get -f install pour réparer les dépendances:
$ sudo apt-get -f install [sudo] mot de passe pour…: Lire les listes de paquetages… Terminé Construire l'arborescence des dépendances Lire les informations d'état… Terminé Les paquetages suivants ont été installés automatiquement et ne sont plus nécessaires: ca-certificates-java default-jre default- jre-headless polices-dejavu-supplémentaire gconf-service gconf-service-backend gconf2 gconf2-common icedtea-6-jre-cacao icedtea-6-jre-jamvm icedtea-netx -wrapper-java libatk-wrapper-java-jni… openjdk-7-jre openjdk-7-jre-headless son-theme-freedesktop ttf-dejavu-extra tzdata-java Utilisez 'apt-get autoremove' pour les supprimer. 0 mis à niveau, 0 nouvellement installé, 0 à supprimer et 0 non mis à niveau.
Ensuite, redémarrez le serveur Apache:
$ sudo service apache2 restart * Redémarrage du serveur Web apache2
Auparavant, j’avais écrit un article sponsorisé Accélérez votre diffusion de contenu avec KeyCDN et continue de l’utiliser. Si vous utilisez un CDN pour votre site, vous devez en informer le module PageSpeed..
Voici comment afficher et éditer le fichier de configuration du module:
$ sudo nano /etc/apache2/mods-available/pagespeed.conf
Et voici la configuration de base:
# Activez mod_pagespeed. Pour désactiver complètement mod_pagespeed, vous # pouvez le définir sur "off". ModPagespeed on # Nous voulons que les hôtes virtuels héritent de la configuration globale. # Si cela n'est pas inclus, ils seront indépendants (sauf pour les # options intrinsèquement globales), du moins pour la compatibilité ascendante. ModPagespeedInheritVHostConfig sur
Tous vos sites fonctionneront avec par défaut. Mais vous devez ajouter les sous-domaines CDN manuellement:
# ModPagespeedDomain # autorise la réécriture des fichiers JS, CSS et Image trouvés dans ce # domaine. Par défaut, seules les ressources ayant la même origine que le fichier HTML # sont réécrites. Par exemple: # # ModPagespeedDomain cdn.myhost.com # # Ceci permettra aux ressources trouvées sur http://cdn.myhost.com d'être # réécrites en plus de celles du même domaine que le HTML. # # D'autres directives relatives au domaine (telles que ModPagespeedMapRewriteDomain # et ModPagespeedMapOriginDomain) peuvent également autoriser des domaines. # # Les caractères génériques (* et?) Sont autorisés dans la spécification du domaine. Soyez prudent lorsque vous les utilisez comme si vous réécriviez des domaines qui ne vous envoient * pas * de trafic, le site destinataire du trafic ne saura pas comment # servir le contenu réécrit. ModPagespeedDomain c? .Jeffreifman.com
Mes CDN sont à c1-, c2-, c3- et c4- .jeffreifman.com, alors j’ai utilisé un ? caractère générique pour faire référence aux quatre précédents.
Ensuite, bien sûr, vous devez redémarrer Apache, comme nous l’avions fait précédemment..
Vous pouvez vérifier le code source sur votre site pour voir si le module PageSpeed fonctionne. Voici un exemple tiré du haut de la page sur JeffReifman.com:
Notez que l'URL src est maintenant:
568f4.js.pagespeed.jm.7B4hJGmADB.js
Voici une image plus grande, placée manuellement (en passant, l'une de mes annonces personnelles) que PageSpeed convertit en .webp:
Tout cela se passe automatiquement.
Changements insignifiants dans PageSpeed
Dans l’ensemble, les résultats de l’utilisation du module PageSpeed ont été décevants. J'ai gagné 4 points sur le bureau et (mieux) 8 points sur le mobile.
Voici le score après pour le bureau:
Voici le score après pour mobile:
En clôture
Si vous êtes administrateur système, le module Google PageSpeed vous sera très utile. Il est entièrement configurable et vous pouvez le personnaliser de différentes manières pour obtenir un meilleur impact. Cependant, pour le développeur moyen, j'ai des doutes sur son efficacité:
Je suis heureux que Google propose le module, conçu pour fonctionner avec des systèmes complexes, mais son impact sur les administrateurs de systèmes professionnels quotidiens est limité..
Si vous avez des questions, merci de les poster ci-dessous. Ou vous pouvez me contacter sur Twitter @reifman. Veuillez consulter ma page d’instructeur Envato Tuts + pour voir les autres tutoriels que j'ai écrits, tels que Cloner WordPress sous Linux (en 90 secondes). Je vous encourage à consulter mes deux séries de programmation ici: Comment programmer avec Yii2 et Construire votre Démarrage avec PHP.
Accentsconagua
