Google PageSpeed

Guesty a optimisé les sites Internet publiés sur la plateforme afin d'obtenir un Score élevé au test Google PageSpeed. Ce test examine de nombreux détails techniques sur la conception des pages web et vérifie leur conformité aux bonnes pratiques pour un chargement rapide des sites Internet. Le contrôle le plus important du test PageSpeed porte sur la structure du code du site web. Google vérifie que le code est structuré de manière à permettre au navigateur de charger le contenu plus rapidement.

Pourquoi Guesty a optimisé pour cela

Chez Guesty, nous pensons que la vitesse des sites web est l'un des principaux problèmes du web actuel. Les sites Internet lents à charger ont des taux de rebond plus élevés, un engagement plus faible et donnent au web une image négative de lenteur. Nous savons que des sites Internet plus réactifs offrent une valeur considérable aux visiteurs en leur offrant une meilleure expérience de navigation.

Pourquoi Google a créé cet outil

Google a développé l'outil PageSpeed ​​car il estimait que de nombreux sites Internet se chargeaient trop lentement et ne fournissaient pas leur contenu assez rapidement. Google sait que les utilisateurs sont plus susceptibles d'interagir avec les sites Internet qui proposent un contenu visible plus rapidement, ce qui permet à Google et au site web d'offrir une meilleure expérience globale. Généralement, cela signifie qu'un site web se charge en moins de trois secondes. Puisque son produit principal (la recherche) repose sur les sites Internet d'autres utilisateurs, Google souhaite s'assurer que les webmasters, concepteurs et développeurs créent des sites Internet qui se chargent rapidement.

Ce que Google vérifie

Google dispose d'une liste d'optimisations vérifiées sur les versions ordinateur et mobile de ses sites web. Le niveau d'optimisation de votre site pour chacune de ces vérifications est ensuite évalué afin d'obtenir un Score global (sur 100) pour la vitesse de votre site. Voici les critères vérifiés par Google :

• Évitez les redirections de page de destination. Cela signifie que vous ne devez pas rediriger les utilisateurs vers une autre page de votre site web lorsqu'ils le consultent. Par exemple, vous ne devez pas rediriger tous les visiteurs vers une deuxième version de votre page d'accueil.
• Éliminez les JavaScript et CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison. Il s'agit de loin du contrôle le plus important effectué par Google. Ce contrôle examine le code de votre site web et garantit que vous donnez la priorité au contenu par rapport aux autres codes. Souvent, les développeurs de sites web placent les scripts et les fichiers CSS lourds en haut des fichiers HTML. Le navigateur traite/charge ainsi ces ressources en premier, au lieu de charger le contenu en premier. Ce contrôle garantit que vous donnez la priorité au contenu au-dessus de la ligne de flottaison. (Remarque : le contenu au-dessus de la ligne de flottaison correspond au premier contenu qu'un utilisateur voit lors du chargement d'une page web. Il s'agit généralement de l'en-tête, de la navigation et du contenu du haut de la page.)
• Activez la compression. Cette option vérifie que votre serveur web compresse (réduit la taille) des données brutes (HTML, CSS et JavaScript) avant de les transmettre à votre navigateur. Cela permet de réduire considérablement la taille totale de votre site web.
• Exploitez la mise en cache du navigateur. La vérification de la mise en cache vous permet de demander au navigateur d'enregistrer ce contenu localement, au lieu de le télécharger à nouveau lors de votre prochaine consultation. Cela vous fait gagner un temps précieux, souvent consacré à la connexion et au téléchargement du contenu lors des rechargements de page.
  Minifier le CSS. Minifier le CSS signifie réduire au maximum la taille du fichier CSS en supprimant les espaces superflus, les sauts de ligne et autres formats. C'est un peu comme compresser le fichier pour en réduire la taille totale.
• Minifier JavaScript. Similairement à la minification CSS, la minification JS permet de réduire considérablement la taille du fichier téléchargé par le navigateur.
• Minifier le HTML. Similaire aux deux précédents, mais supprime l'espacement superflu du code HTML principal du site web.
• Optimiser les images. Deuxième vérification la plus importante effectuée par Google, elle permet de s'assurer que les images envoyées au navigateur sont optimisées, compressées et pas trop volumineuses. Les images comptent pour environ 65 à 70 % de la taille/du poids total d'un site web. Optimiser les images consiste à les compresser et à les réduire au maximum avant de les télécharger. Deux points importants sont à prendre en compte : (1) S'assurer que les images sont compressées. Cela nécessite de les compresser pour les réduire, sans altérer leur qualité ; (2) Redimensionner les images. Il n'est pas nécessaire de fournir une image très grande (5 000 pixels, par exemple) à un navigateur mobile ; il est donc conseillé de la redimensionner.
• Privilégiez le contenu visible. Cela garantit que le contenu est placé en haut du code HTML du site web. Évitez de charger du contenu supplémentaire qui n'est pas pertinent pour le premier chargement du site web.
• Réduisez le temps de réponse du serveur. Ce contrôle vérifie que votre serveur répond très rapidement aux visiteurs de votre site web. Google exige que l'utilisateur n'attende pas plus de 200 ms (1/5 de seconde) pour recevoir le contenu/HTML de votre serveur.

Avec le lancement du projet open source Lighthouse en novembre 2018, Google PageSpeed ​​prend désormais en compte un large éventail de propriétés de sites web, en plus de la vitesse (comme le RÉFÉRENCEMENT NATUREL, l'accessibilité, les PWA et les bonnes pratiques). Outre les tests ci-dessus, Lighthouse vérifie désormais :

• Premier affichage de contenu. Cet indicateur provient du chargement d'un site web par un navigateur réel. Lors d'un test Lighthouse, un navigateur réel visite votre site web, le charge et analyse ses performances. Cet indicateur indique le temps nécessaire à l'affichage de tout type de contenu après le début du chargement d'une page. Il peut s'agir d'une image, d'une couleur d'arrière-plan, etc., et se mesure en secondes. Cet indicateur est utile car il indique pour la première fois qu'un élément du site web va être chargé.
• Indice de vitesse. Cet indicateur provient d'un ancien outil de performance web appelé WebPageTest. Utilisé depuis 2012, il est très efficace pour déterminer la vitesse de chargement du contenu d'un site web. Il effectue des captures d'écran du site toutes les 0,5 seconde pendant son chargement. À partir de ces captures, il calcule le pourcentage de contenu chargé sur la page web par incréments de 0,5 seconde et attribue un Score de vitesse global. Plus le score est bas, plus le site web semble se charger rapidement pour l'utilisateur. L'objectif de ce test est de comprendre précisément la vitesse à laquelle l'utilisateur visualise le contenu et d'identifier tout obstacle empêchant le site web de l'afficher au plus vite.
• Temps d'interactivité. Un autre indicateur important est la rapidité avec laquelle l'utilisateur peut interagir avec la page. Par exemple, l'utilisateur peut vouloir cliquer sur un bouton ou faire défiler la page. Ceci est particulièrement important sur mobile, où l'utilisateur touche directement un écran pour interagir avec la page. L'objectif des développeurs web doit toujours être de garantir l'interactivité d'une page dès qu'elle contient du contenu. C'est un défi de taille compte tenu du fonctionnement des navigateurs.
• Premier temps d'inactivité du processeur. Cette mesure est étroitement liée au temps d'interactivité, car elle indique la rapidité avec laquelle le contenu et les ressources initiaux du site web sont chargés et le processeur de l'appareil passe en mode veille (inactivité). Ce rapport indique que les développeurs doivent se concentrer sur le chargement du minimum de contenu en premier. En envoyant une petite quantité, le processeur de l'appareil traitera tout le code et passera plus rapidement en mode veille.
• Latence d'entrée estimée. La dernière mesure utilisée par Lighthouse n'a rien à voir avec les performances de votre site web au premier chargement. Elle vise plutôt à vous fournir un temps de réponse (en millisecondes) aux clics. L'idée est que plus votre site web réagit rapidement, plus les utilisateurs le jugeront rapide et seront moins susceptibles de le quitter.

Après avoir effectué ces tests, Lighthouse vous proposera également des recommandations prioritaires pour améliorer votre Score de vitesse global. Ces recommandations, qui apparaissent dans la deuxième partie de la page, détaillent les actions possibles et les avantages potentiels de ces changements.

Ce que fait Guesty

Guesty a optimisé les sites Internet créés sur notre plateforme afin d'obtenir un Score élevé, notamment au test Google PageSpeed. Cela signifie que nous avons examiné les tests répertoriés ci-dessus et optimisé nos sites Internet pour chacun d'eux. Voici un aperçu de la manière dont nous avons procédé à chacun de ces contrôles :

• Évitez les redirections de page de destination. Sur la plupart des sites Internet Guesty, ce contrôle est irréprochable. Guesty n'a aucun contrôle sur ce point, car nous autorisons les utilisateurs à rediriger vers d'autres pages via notre redirection d'URL. Il est donc recommandé de ne pas envoyer de liens à vos clients, partenaires, etc., qui ne sont pas des pages réelles de votre site web.
• Éliminez les JavaScript et CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison. Dans le cadre de la publication de sites Internet, Guesty optimise la structure des sites Internet pour se conformer à cette recommandation. Pour ce faire, nous : (1) calculons ce que nous appelons le CSS « critique ». Cela signifie que nous analysons le site web et déterminons les styles CSS nécessaires à son affichage. Nous insérons ensuite ce contenu en ligne afin qu'il se charge en premier. (2) Nous déplaçons ensuite tous les scripts en bas du site web afin que le contenu soit chargé en premier.
• Activez la compression. Guesty active la compression gzip pour les connexions à notre site web. Cela garantit que le fichier est compressé, transféré sur Internet, puis décompressé par le navigateur.
• Exploitez la mise en cache du navigateur. Guesty définit des en-têtes de cache pour tous les fichiers chargés. Cela garantit que les navigateurs qui téléchargent ces fichiers (CSS, JS, images) savent comment les stocker temporairement dans leur cache. Ainsi, lors de leur prochain accès, ils seront stockés localement sur la machine, sans avoir à les télécharger à nouveau depuis le site web.
• Minification des CSS, JS et HTML. Dans le cadre du processus de publication de Guesty, nous minimisons la grande majorité des ressources CSS. Cela garantit qu'elles sont aussi petites que possible une fois téléchargées. Il est important de noter que les ressources externes, bien que généralement hébergées via notre CDN, peuvent ne pas être minifiées.
• Optimisation des images. Chaque image JPG ou PNG que vous téléchargez sur Guesty est soumise à un processus complet de compression et de redimensionnement afin d'optimiser le traitement des images. Voici les processus mis en œuvre :
  
  • Tout d'abord, nous soumettons l'image à un algorithme de compression sans perte et l'enregistrons dans notre CDN. Cela réduit la taille de base de l'image.
  • Nous redimensionnons ensuite l’image en cinq versions différentes.
  • Après le redimensionnement, nous soumettons toutes les images à un algorithme de compression avec perte. Cela diminue légèrement la qualité de l'image, mais permet un gain de taille important. Dans la grande majorité des cas, la perte de qualité est invisible à l'œil nu.
  • Après la compression avec perte, nous exécutons une autre compression sans perte sur l'image pour garantir qu'elle soit à la plus petite taille possible.
• Privilégiez le contenu visible. Guesty conçoit chaque site web de manière à ce qu'il réponde à cette recommandation par défaut. Cela signifie que le contenu de l'en-tête est placé en premier, suivi du contenu du corps de la page.
• Réduisez le temps de réponse du serveur. Cette vérification vise principalement à vérifier que votre site web n'est pas trop lent, mais plutôt suffisamment rapide. Guesty héberge tous les sites Internet sur notre plateforme, nous garantissons une hôte optimale. Nous utilisons Amazon Web Services, leader du secteur, pour garantir ces standards.

Que faire si votre site est mal vérifié

Bien que Guesty souhaite que chaque site web que nous gérons soit toujours bien classé, nous ne pouvons pas le promettre. En effet, nos clients peuvent ajouter leur propre code, contenu et design au site web, et nous n'avons donc pas un contrôle total sur ce qu'ils peuvent ou non ajouter. C'est pourquoi, dans certains cas, les sites Internet Guesty n'atteignent pas les 90 %. Voici une liste des erreurs/problèmes signalés par Google PageSpeed, selon la conception du site web :

• Éliminez les JavaScript et CSS bloquant le rendu dans le contenu au-dessus du pli :
  • Élément cartographique au-dessus de la ligne de flottaison. Si vous placez un élément cartographique en haut de votre site web, cela aura souvent un impact négatif sur votre classement PageSpeed. Pour résoudre ce problème, déplacez l'élément cartographique en bas de la page.
  • Vitrine de la boutique au-dessus de la ligne de flottaison. Placer une boutique en haut de la page peut souvent entraîner l'affichage de cet avertissement. Guesty travaille actuellement sur une solution, mais pour l'instant, notre seule recommandation est de déplacer le contenu plus bas sur la page. Une solution possible consiste à ajouter une image et un texte explicatif au-dessus de l'élément « boutique », afin que la boutique elle-même ne soit pas dans la zone « au-dessus de la ligne de flottaison » du site web.
  • Code/script personnalisé dans l'en-tête. Si vous avez placé du code personnalisé dans l'en-tête du site web, Google affichera souvent une erreur indiquant que cela ralentit le rendu de la page. Deux solutions s'offrent à vous : (1) Placer le code dans le fichier body-end.html du site web plutôt que dans l'en-tête. Cela déplace le code vers la fin, forçant ainsi son chargement plus tard. (2) S'assurer que le script intégré ici 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 web. Pour activer l'asynchronisation des scripts, procédez comme suit :
    • Ancien code:

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

    • Nouveau asynchrone :

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

  • Veuillez noter que le code ci-dessus indique au navigateur de charger ce code « asynchrone », ce qui devrait aider à réussir ce test Google PageSpeed.
  • Intégration d'iframe. Si vous intégrez un iframe personnalisé dans un site web au-dessus de la ligne de flottaison, ce message d'erreur s'affichera probablement. Veuillez déplacer ce contenu plus bas sur la page ou le supprimer complètement.
• Optimiser les images : Actuellement, l'optimisation d'image de Guesty ne fonctionne que pour les images JPG et PNG. Si vous importez une image au format TIFF, GIF ou autre, Guesty pourrait ne pas pouvoir l'optimiser, ce qui pourrait expliquer cet avertissement. Nous vous recommandons d'utiliser un service d'optimisation d'image, tel qu'EzGif, Compressor.io ou TinyPNG. Google vérifie également que vous n'avez pas de grandes images redimensionnées pour des zones trop petites. Guesty tente de remédier à ce problème en plaçant les images plus petites dans des colonnes de taille inférieure, mais ce processus n'est pas parfait. Il peut parfois être nécessaire de télécharger une image, de la redimensionner exactement à la taille de colonne souhaitée, puis de la re-télécharger. C'est un cas assez rare.
• Redimensionner les images : Bien que Guesty optimise les images pour garantir leur compression à une taille plus petite, Guesty ne redimensionne pas automatiquement votre image sur la version bureau de votre site. Par exemple, si vous utilisez une image de 3 000 x 3 000 pixels sur une page et que vous la redimensionnez à 300 px seulement grâce à la fonction glisser-déposer de l'éditeur, l'image entière de 3 000 x 3 000 px est chargée. Cela peut affecter votre Score PageSpeed. Vous pouvez corriger ce problème en redimensionnant l'image avec l'éditeur d'images intégré ou en la redimensionnant dans un logiciel de retouche photo, puis en la re-téléchargeant.
• Exploitez la mise en cache du navigateur : Si vous intégrez du code personnalisé à votre site web, il sera souvent chargé depuis un site web tiers. Si ce site web n'active pas la mise en cache, Google le détectera et recommandera d'activer la mise en cache du navigateur. Contactez ce service tiers pour qu'il implémente cette modification sur son serveur.
• Votre page est peut-être trop grande : si vous avez beaucoup de contenu sur une page, la page peut être grande même après avoir exécuté l'outil d'optimisation sur votre site. Pensez à utiliser moins d'images ou à diviser votre contenu en déplaçant le contenu vers d'autres pages.
• Problèmes actuels non réparables : À noter, il s'agit de problèmes de vitesse de page signalés par Google qui ne peuvent pas être résolus par vous-même et doivent être traités comme des demandes de fonctionnalités pour Guesty :
  • Exploiter la mise en cache du navigateur
  • Minifier HTML / CSS / JS
  • Optimiser la diffusion CSS

Cas où Guesty n'optimise pas le site

Dans certains cas, Guesty ne tente pas d'optimiser le site web lors de sa publication. Si vous avez inséré du code personnalisé utilisant

 jQuery (($('#ex')))

ou l'API JS :

 dmAPI.runOnReady('code', fonction(){});

dans l'en-tête du site web. Nous procédons ainsi car ce code nécessite souvent l'utilisation de jQuery ou des fonctions dmAPI. Or, comme notre optimisation déplace ce code plus bas dans la page, il ne fonctionnera plus et endommagera donc le code installé.