Google PageSpeed

Présentation

Nous avons optimisé les sites Web publiés sur la plate-forme afin qu'ils obtiennent d'excellents résultats au test Google PageSpeed. Ce test évalue de nombreux aspects techniques de la création de pages Web et vérifie qu'ils correspondent aux meilleures pratiques permettant aux sites Web d'offrir un chargement rapide. Le contrôle le plus important du test PageSpeed examine la manière dont le code du site Web est structuré. Google vérifie que le code est structuré de manière à permettre au navigateur de charger le contenu plus rapidement.

Pourquoi cette optimisation ?

Nous pensons que la vitesse des sites Web est l'un des plus grands enjeux pour le Web aujourd'hui. Les sites dont le chargement est lent présentent des taux de rebond plus élevés et un engagement plus faible. De plus, par leur faute, c'est le Web tout entier qui a la réputation d'être lent. Nous savons que les sites Web qui réagissent rapidement apportent de la valeur ajoutée aux visiteurs en offrant à chaque personne une meilleure expérience de navigation.

Pourquoi Google a conçu cet outil ?

Google a créé l'outil PageSpeed parce que l'entreprise a estimé que de nombreux sites Web se chargent trop lentement et que leur contenu n'est pas proposé assez rapidement aux utilisateurs. Google sait que les utilisateurs sont plus susceptibles de consulter des sites Web dont le contenu s'affiche plus rapidement, ce qui permet à Google et au site Web de fournir une meilleure expérience globale. En général, cela signifie qu'un site Web se charge en moins de trois secondes. Étant donné que le produit principal de Google (la recherche) s'appuie sur les sites Web d'autres personnes, l'entreprise souhaite s'assurer que les webmasters / concepteurs / développeurs créent des sites Web qui se chargent rapidement.  

Ce que Google vérifie

Google dispose d'une liste de 10 optimisations qui sont vérifiées sur les versions pour ordinateur et mobile du site Web. Google s'appuie sur le niveau d'optimisation de votre site correspondant à chacun de ces contrôles pour obtenir un score total (sur 100) indiquant la vitesse de votre site. Voici ce que Google vérifie :

  • Éviter les redirections vers la page de destination : cela signifie que vous ne devez pas rediriger les utilisateurs vers une autre page de votre site Web lors de son chargement. Par exemple, vous ne devez pas rediriger tous les visiteurs vers la deuxième version de votre page d'accueil.  

  • Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison : c'est de loin le contrôle le plus important que Google effectue. Cette vérification examine le code de votre site Web et s'assure que vous privilégiez le contenu par rapport à un autre code. Souvent, les développeurs de sites Web placent des scripts lourds et des fichiers CSS au début d'un fichier HTML. Cela permet au navigateur de traiter / charger d'abord ces ressources, au lieu de charger le contenu en premier. Cette vérification s'assure que vous privilégiez le contenu au-dessus de la ligne de flottaison. (Remarque : la ligne de flottaison désigne le premier contenu visible pour un utilisateur lors du chargement d'une page Web. C'est généralement l'en-tête, la navigation et le contenu le plus élevé du corps de la page.)

  • Autoriser la compression : ce contrôle vérifie que votre serveur Web compresse les données brutes (HTML, CSS et Javascript) avant de les transmettre sur Internet à votre navigateur. Cela réduit considérablement la taille totale de votre site.

  • Exploiter la mise en cache dans le navigateur : la vérification de la mise en cache s'assure que vous indiquez au navigateur que vous enregistrez ce contenu localement, au lieu de le télécharger à nouveau la prochaine fois que vous devez y accéder. Cela fait gagner un temps précieux qui est souvent utilisé pour la connexion et le téléchargement du contenu lors des rechargements de page.

  • Réduire la taille des ressources CSS : cela signifie que vous devez réduire au maximum la taille du fichier CSS en supprimant des espaces supplémentaires, des sauts de ligne et d'autres formats. Cela équivaut à compresser le fichier pour réduire la taille totale.

  • Réduire la taille des ressources JavaScript : comme pour les ressources CSS, cette optimisation peut considérablement réduire la taille du fichier téléchargé par le navigateur.

  • Réduire la taille des ressources HTML : cette optimisation est similaire aux deux opérations ci-dessus, mais supprime l'espacement supplémentaire du HTML principal du site.

  • Optimiser les images : deuxième contrôle le plus important effectué par Google qui garantit que les images que vous envoyez au navigateur sont optimisées et compressées, sans être trop volumineuses. Les images représentent environ 65 à 70 % de la taille totale d'un site Web. L'optimisation des images implique que vous comprimiez les images et que vous fassiez en sorte que leur taille corresponde à celle d'un fichier avant que le navigateur ne les télécharge. Vous devez effectuer deux opérations. (1) Vous devez vous assurer que les images sont compressées. Pour ce faire, vous devez les exécuter à l'aide d'outils de compression pour réduire leur taille, sans pour autant diminuer leur qualité. (2) Vous devez redimensionner les images. Vous n'avez pas besoin de fournir une image très grande (5 000 pixels, par exemple) à un navigateur mobile ; vous devez donc la redimensionner.

  • Prioriser le contenu visible : ce contrôle permet de s'assurer que vous placez le contenu en haut du HTML du site Web. Essayez de ne pas charger de contenu supplémentaire qui ne correspond pas au premier chargement du site.

  • Améliorer le temps de réponse du serveur : cette vérification examine votre serveur pour s'assurer qu'il répond très rapidement aux visiteurs qui accèdent à votre site. Google exige que l'utilisateur n'attende pas plus de 200 ms (1 / 5e de seconde) pour récupérer le contenu / HTML de votre serveur.

Ce que nous faisons

Nous avons optimisé les sites Web créés sur notre plate-forme afin qu'ils obtiennent d'excellents résultats, en particulier au test Google PageSpeed. Cela signifie que nous avons examiné les tests indiqués ci-dessus et optimisé nos sites Web pour chacun d'eux. Voici un résumé de la façon dont nous avons traité chacun de ces contrôles :

  • Éviter les redirections vers la page de destination : pour la plupart des sites Web, nous obtenons la note de 100 % à cette vérification. Nous vous recommandons de vous assurer que les liens que vous envoyez à vos clients, partenaires, etc., les redirigent vers une vraie page de votre site Web.

  • Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison : dans le cadre de la publication de sites Web, nous optimisons la structure des sites Web afin de respecter cette recommandation. Pour ce faire, nous prenons deux mesures. (1) Nous calculons ce que nous appelons le CSS « critique ». Cela signifie que nous examinons le site Web et déterminons quels styles CSS sont nécessaires à l'affichage du site. Nous plaçons ensuite ce contenu conforme sur le site Web afin qu'il soit chargé en premier. (2) Nous déplaçons tous les scripts en bas du site, afin que le contenu soit chargé en premier.

  • Autoriser la compression : nous autorisons la compression gzip pour les connexions à notre site. Cela nous permet de nous assurer que le fichier est compressé, transféré sur Internet, puis décompressé par le navigateur.

  • Exploiter la mise en cache dans le navigateur : nous définissons des en-têtes de cache sur tous les fichiers que nous chargeons. Cela nous permet de nous assurer que les navigateurs qui téléchargent ces fichiers (CSS, JS et images) savent comment stocker temporairement le fichier dans le cache du navigateur, de sorte que la prochaine fois que le navigateur doit accéder à ce fichier, celui-ci soit stocké localement sur l'ordinateur, au lieu d'avoir à le télécharger à nouveau depuis le site Web.

  • Réduire la taille des ressources CSS, JS et HTML : dans le cadre de notre processus de publication, nous réduisons la taille de toutes les ressources CSS. Cela nous permet de nous assurer que leur taille est réduite au maximum une fois le téléchargement lancé.

  • Optimiser les images : nous exécutons chaque image jpg ou png que vous téléchargez en suivant un vaste processus de compression et de redimensionnement pour gérer au mieux les images. Nous exécutons les processus suivants :

    • Tout d'abord, nous exécutons l'image grâce à un algorithme de compression sans perte et nous l'enregistrons dans notre CDN. Cela permet de réduire la taille de base de l'image.

    • Nous redimensionnons ensuite l'image en cinq versions différentes. 

    • Après le redimensionnement, nous exécutons toutes les images grâce à un algorithme de compression avec perte. Cela réduit légèrement la qualité de l'image, mais diminue considérablement sa taille. Dans la nette majorité des cas, la perte de qualité n'est pas visible à l'œil nu.

    • À l'issue de la compression avec perte, nous exécutons l'image grâce à une compression sans perte supplémentaire pour nous assurer que sa taille est réduite au maximum.

  • Prioriser le contenu visible : dans le cadre de la conception de chaque site Web, nous structurons le site afin qu'il respecte cette recommandation par défaut. Cela implique de placer le contenu de l'en-tête en premier, suivi du contenu du corps de la page.

  • Améliorer le temps de réponse du serveur : ce contrôle s'assure principalement que votre site Web n'est pas trop lent, plutôt que suffisamment rapide. Étant donné que nous hébergeons tous les sites Web sur notre plate-forme, nous pouvons nous assurer que tous les sites que nous hébergeons réagissent rapidement. Nous utilisons la plate-forme leader sur le marché Amazon Web Services pour nous aider à respecter ces normes.

Que faire si votre site obtient un mauvais score ?

Bien que nous souhaitions que chaque site Web que nous exécutons obtienne d'excellents résultats, nous ne pouvons pas faire une telle promesse. Cela est dû au fait que nos clients peuvent ajouter leurs propres code, contenu et conception au site Web, de sorte que nous n'avons pas un contrôle total sur ce qu'ils peuvent ajouter ou non. C'est pour cela que dans certaines situations nos sites Web n'obtiendront pas un score de 90 ou plus. Voici une liste d'erreurs / de problèmes que Google PageSpeed nous signale, selon le mode de conception du site Web :

  • Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison :

    • Elément de carte au-dessus de la ligne de flottaison : si vous placez un élément de carte en haut de votre site Web, cela a souvent un effet négatif sur vos classements PageSpeed. Pour y remédier, déplacez l'élément de carte en bas de la page.

    • Boutique au-dessus de la ligne de flottaison : si vous placez une boutique en haut, cet avertissement s'affiche souvent. Nous travaillons actuellement sur un correctif, mais dorénavant, la seule recommandation que nous faisons est de placer le contenu plus bas sur la page. Pour ce faire, vous pouvez ajouter une image et un texte utile au-dessus de l'élément de la boutique afin que la boutique elle-même ne se trouve pas au-dessus de la ligne de flottaison du site Web.

    • Code / script personnalisé dans l'en-tête : si vous avez placé un code personnalisé dans la section d'en-tête du site, un message d'erreur de Google s'affiche souvent pour vous indiquer que cela ralentit l'affichage de la page. Vous pouvez résoudre ce problème de deux façons. (1) Placez le code dans le fichier body-end.html du site Web au lieu de l'en-tête. Cela déplace le code vers le bas, ce qui l'oblige à se charger plus tard et non plus tôt. (2) Assurez-vous que le script intégré est chargé de manière asynchrone. Cela signifie que le navigateur le charge en arrière-plan tout en continuant à charger le reste du contenu du site. Pour activer l'exécution asynchrone du script, vous devez le modifier de la manière suivante :

      • Ancien code : <script src=”https://example.com/script.js”></script>

      • Nouveau script asynchrone : <script src=”https://example.com/script.js” async defer></script>

      • Vous remarquerez que le code ci-dessus indique au navigateur de charger ce code de manière « asynchrone », ce qui devrait permettre de réussir ce test Google PageSpeed.

    • Intégration iframe : si vous intégrez un iframe personnalisé dans un site Web au-dessus de la ligne de flottaison, il est très probable que vous obteniez ce message d'erreur. Déplacez ce contenu plus bas sur la page ou supprimez-le complètement.

  • Optimiser les images : aujourd'hui, notre processus d'optimisation d'image fonctionne uniquement sur les images JPG et PNG. Si vous téléchargez une image au format TIFF, GIF ou autre, il est possible que nous ne puissions pas l'optimiser. C'est ce qui peut expliquer cet avertissement. Nous vous recommandons d'exécuter l'image via un service d'optimisation d'image comme EzGif, Compressor.io ou TinyPNG.

    Une autre vérification effectuée par Google consiste à s'assurer que des images volumineuses ne sont pas redimensionnées pour s'adapter à de petits emplacements. Nous essayons de résoudre ce problème en plaçant des images de plus petite taille dans des colonnes de faible dimensionnement, mais ce processus n'est pas parfait. Parfois, vous devrez peut-être télécharger une image, la redimensionner exactement en fonction de la taille de colonne que vous souhaitez utiliser, puis la recharger. C'est un cas assez rare.

  • Exploiter la mise en cache dans le navigateur : si vous incluez du code personnalisé sur votre site, il sera souvent chargé à partir d'un site Web tiers. Si ce site n'autorise pas la mise en cache, Google vous le signale et vous recommande d'autoriser la mise en cache du navigateur. Vous devez contacter ce service tiers pour lui demander d'implémenter cette modification sur son serveur.

Cas où nous n'optimisons pas le site 

Dans certains cas, nous n'essayons pas d'optimiser le site lors de la publication. Si vous avez placé un code personnalisé qui utilise jQuery (($ ('# ex')) dans l'en-tête du site. Nous procédons ainsi parce que ce code nécessite souvent l'existence de jQuery, mais parce que notre processus d'optimisation déplace ce code plus bas sur la page, cela ne fonctionne plus et « casse » le code qui a été installé.