Google PageSpeed

Guesty a optimisé les sites Internet publiés sur sa plateforme afin d'obtenir d'excellents résultats au test Google PageSpeed. Ce test analyse de nombreux aspects techniques de la construction des pages web et vérifie leur conformité aux bonnes pratiques permettant un chargement rapide. Le contrôle le plus important du test PageSpeed porte sur la structure du code des sites Internet. Google s'assure ainsi que cette structure permet au navigateur de charger le contenu le plus rapidement possible.

Pourquoi Guesty est-il optimisé pour cela ?

Chez Guesty, nous sommes convaincus que la vitesse de chargement des sites web est l'un des plus grands défis du web actuel. Les sites Internet lents affichent des taux de rebond plus élevés, un engagement moindre et nuisent à la réputation du web en général. Nous savons que des sites Internet rapides offrent une expérience de navigation optimale et apportent une réelle valeur ajoutée aux visiteurs.

Pourquoi Google a créé cet outil

Google a créé l'outil PageSpeed Insights car il constatait que de nombreux sites Internet se chargeaient trop lentement et ne proposaient pas leur contenu aux utilisateurs assez rapidement. Google sait que les utilisateurs sont plus enclins à interagir avec les sites Internet qui affichent du contenu visible plus rapidement, ce qui permet à la fois à Google et au site web d'offrir une meilleure expérience globale. Généralement, cela signifie qu'un site web devrait se charger en moins de trois secondes. Étant donné que le produit principal de Google (la recherche) repose sur les sites Internet d'autres personnes, il est important pour Google de s'assurer que les webmasters, les concepteurs et les développeurs créent des sites Internet qui se chargent rapidement.

Ce que Google vérifie

Google vérifie la présence d'optimisations sur les versions de bureau et mobile des sites web. Il évalue ensuite le niveau d'optimisation de votre site pour chacun de ces critères afin d'attribuer un score global (sur 100) à sa vitesse de chargement. Voici les éléments vérifiés par Google :

• Évitez les redirections de page d'accueil. Cela signifie que vous ne devez pas rediriger les utilisateurs vers une autre page de votre site web lorsqu'ils la chargent. Par exemple, vous ne devez pas rediriger tous les visiteurs vers une deuxième version de votre page d'accueil.
• Éliminez les scripts JavaScript et CSS bloquant l'affichage du contenu visible au chargement de la page. Il s'agit du contrôle le plus important effectué par Google. Ce contrôle analyse le code de votre site web et vérifie que le contenu est bien mis en avant. Souvent, les développeurs placent des scripts et des fichiers CSS volumineux en haut d'une page HTML. Le navigateur charge alors ces ressources en premier, au lieu du contenu principal. Ce contrôle garantit que le contenu visible au chargement de la page est prioritaire. (Note : le contenu visible au chargement de la page correspond aux premières informations affichées par l'utilisateur lors du chargement d'une page web. Il s'agit généralement de l'en-tête, du menu de navigation et du contenu principal de la page.)
• Activez la compression. Cette option vérifie que votre serveur web compresse (réduit la taille) les données brutes (HTML, CSS et JavaScript) avant de les transmettre à votre navigateur via Internet. Cela permet de réduire considérablement la taille totale de votre site web.
• Tirez parti de la mise en cache du navigateur. La vérification du cache permet de s'assurer que le navigateur enregistre ce contenu localement, au lieu de le retélécharger lors de votre prochain accès. Cela vous fait gagner un temps précieux souvent consacré à la connexion et au téléchargement du contenu lors du rechargement de la page.
  Minifier le CSS. Minifier le CSS consiste à réduire au maximum la taille du fichier CSS en supprimant les espaces superflus, les sauts de ligne et autres éléments de mise en forme. C'est un peu comme compresser le fichier pour en réduire la taille totale.
• Minifier le JavaScript. Tout comme pour le CSS, la minification du JS permet de réduire considérablement la taille du fichier téléchargé par le navigateur.
• Minifier le HTML. Similaire aux deux opérations précédentes, mais supprime les espaces superflus du code HTML principal du site web.
• Optimisez vos images. La deuxième vérification la plus importante effectuée par Google garantit que les images envoyées au navigateur sont optimisées, compressées et de taille raisonnable. Les images comptent pour environ 65 à 70 % du poids total d'un site web. Optimiser les images signifie les compresser et réduire au maximum leur taille avant leur téléchargement par le navigateur. Deux points importants sont à retenir : (1) Compressez vos images. Utilisez des outils de compression pour réduire leur taille sans altérer leur qualité. (2) Redimensionnez vos images. Il est inutile d'envoyer une image très volumineuse (5 000 pixels, par exemple) à un navigateur mobile ; redimensionnez-la donc.
• Privilégiez le contenu visible. Cela garantit que le contenu le plus visible apparaisse en haut du code HTML de votre site web. Évitez de charger du contenu supplémentaire qui n'est pas pertinent lors du premier chargement du site.
• Réduisez le temps de réponse de votre serveur. Ce contrôle vérifie que votre serveur répond 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 l'introduction du projet open source Lighthouse en novembre 2018, l'outil Page Insights de Google analyse désormais un large éventail de propriétés des sites web, en plus de la vitesse (comme le référencement naturel, l'accessibilité, les PWA et les bonnes pratiques). Outre les tests mentionnés ci-dessus, Lighthouse vérifie désormais :

• Premier affichage de contenu (First Contentful Paint). Cette métrique est mesurée par le chargement d'un site web par un navigateur réel. Lors d'un test Lighthouse, un navigateur réel accède à votre site, le charge et analyse ses performances. Le Premier affichage de contenu indique le temps nécessaire à l'affichage de tout type de contenu après le début du chargement de la page. Il peut s'agir d'une image, d'une couleur de fond, etc. Ce temps est mesuré en secondes. Cette métrique est précieuse car elle correspond au premier signe, pour l'utilisateur, que le chargement du site web est en cours.
• Indice de vitesse. Cet indicateur provient d'un ancien outil d'analyse des performances web appelé WebPageTest. Disponible depuis 2012, il est très efficace pour déterminer la vitesse de chargement du contenu d'un site web. Son fonctionnement repose sur la prise de captures d'écran du site toutes les 0,5 secondes pendant son chargement. À partir de ces captures, il calcule le pourcentage de contenu chargé par page de 0,5 seconde et attribue un score de vitesse global. Plus le score est bas, plus le site semble rapide à charger pour l'utilisateur. L'objectif de ce test est de comprendre précisément la vitesse d'affichage du contenu pour l'utilisateur et de détecter d'éventuels éléments qui ralentissent l'affichage du contenu.
• Délai d'interaction. Un autre indicateur important est la rapidité avec laquelle l'utilisateur peut interagir avec la page. Par exemple, cliquer sur un bouton ou faire défiler la page. C'est particulièrement important sur mobile, où l'utilisateur touche directement l'é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 en raison du fonctionnement des navigateurs.
• Premier temps d'inactivité du processeur. Cette métrique est étroitement liée au délai d'interaction, car elle indique la vitesse à laquelle tout le contenu et les ressources initiaux du site web sont chargés et le processeur de l'appareil passe en état d'inactivité (sans aucune tâche). Ce délai est indiqué afin que les développeurs privilégient le chargement initial d'un minimum de contenu. En envoyant une petite quantité de données, le processeur traitera tout le code et atteindra plus rapidement un état d'inactivité.
• Latence d'entrée estimée. La dernière métrique fournie par Lighthouse n'a aucun lien avec les performances de chargement initiales de votre site web. Elle vous indique plutôt, en millisecondes, le temps de réponse de votre site aux interactions tactiles (clics, touchers, etc.). L'idée est que plus votre site répond rapidement, le plus les utilisateurs le trouveront performant et moins ils seront susceptibles de le quitter.

Après avoir effectué ces tests, Lighthouse vous fournira des recommandations priorisées pour améliorer votre score de vitesse global. Ces recommandations apparaissent dans la seconde partie de la page et détaillent les actions possibles ainsi que leurs avantages.

Ce que fait Guesty

Guesty a optimisé les sites Internet créés sur notre plateforme pour obtenir d'excellents résultats, notamment au test Google PageSpeed. Cela signifie que nous avons analysé les tests répertoriés ci-dessus et optimisé nos sites Internet en conséquence. Voici un aperçu de la manière dont nous avons traité chaque vérification :

• Évitez les redirections de page d'atterrissage. La plupart des sites Internet Guesty réussissent ce contrôle à 100 %. Guesty n'a cependant pas un contrôle total sur ce point, car nous autorisons les redirections d'URL vers d'autres pages. Nous vous recommandons donc de ne pas envoyer à vos clients, partenaires, etc., de liens qui ne pointent pas vers une page réelle de votre site web.
• Éliminez les scripts JavaScript et CSS bloquant l'affichage du contenu visible au chargement de la page. Lors de la publication de sites Internet, Guesty optimise ses sites Internet pour respecter cette recommandation. Pour ce faire : (1) nous calculons le CSS « critique ». Cela signifie que nous analysons le site web afin d'identifier les styles CSS nécessaires à son affichage. Nous intégrons ensuite ce contenu directement dans le code HTML pour qu'il se charge en premier. (2) Nous déplaçons ensuite tous les scripts en bas de page, afin que le contenu principal se charge en premier.
• Activer 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 configure des en-têtes de cache pour tous les fichiers chargés. Ainsi, les navigateurs qui téléchargent ces fichiers (CSS, JS, images) savent comment les stocker temporairement dans leur cache. La prochaine fois que le navigateur aura besoin d'accéder à ce fichier, il sera disponible localement sur votre ordinateur, sans avoir à le télécharger à nouveau depuis le site web.
• Minification des fichiers CSS, JS et HTML. Dans le cadre du processus de publication de Guesty, nous minifions la grande majorité des ressources CSS. Cela garantit leur taille minimale lors du téléchargement. Il est important de noter que les ressources externes, bien que généralement diffusé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 de compression et de redimensionnement complet afin d'obtenir le meilleur rendu possible. Voici les étapes que nous appliquons :
  
  • Nous commençons par appliquer une compression sans perte à l'image, puis nous l'enregistrons sur notre CDN. Cela réduit la taille de base de l'image.
  • Nous redimensionnons ensuite l'image en cinq versions différentes.
  • Après redimensionnement, toutes les images sont compressées avec perte. Cela altère légèrement la qualité, mais permet de réduire considérablement leur taille. Dans la grande majorité des cas, la perte de qualité est imperceptible à l'œil nu.
  • Après la compression avec perte, nous soumettons l'image à une dernière compression sans perte afin de garantir qu'elle soit de la taille la plus petite possible.
• Privilégiez le contenu visible. Chez Guesty, la structure de chaque site web est conçue selon cette recommandation par défaut. Cela signifie que le contenu de l'en-tête est placé en premier, suivi du contenu principal de la page.
• Réduisez le temps de réponse de votre serveur. Ce contrôle vise principalement à garantir que votre site web n'est pas trop lent, plutôt que suffisamment rapide. Puisque Guesty héberge tous les sites Internet sur sa plateforme, nous pouvons assurer un hébergement rapide à chacun des sites Internet. Nous utilisons Amazon Web Services, leader du secteur, ce qui nous permet de maintenir ces standards.

Que faire si votre site obtient de mauvais résultats aux contrôles techniques ?

Bien que Guesty souhaite que tous les sites web que nous gérons obtiennent systématiquement un excellent classement, nous ne pouvons le garantir. En effet, nos clients peuvent ajouter leur propre code, contenu et design au site, ce qui nous limite dans notre contrôle. C'est pourquoi, dans certains cas, les sites Internet de Guesty n'atteignent pas les 90 %. Voici une liste des erreurs et problèmes que Google PageSpeed nous signale, en fonction de la conception du site :

• Éliminez le JavaScript et le CSS bloquant le rendu dans le contenu visible au chargement de la page :
  • Élément de carte visible sans défilement. Si vous placez un élément de carte en haut de votre site web, cela aura souvent un impact négatif sur votre classement PageSpeed. Pour corriger cela, déplacez l'élément de carte en bas de page.
  • Vitrine visible sans défilement. Si vous placez votre boutique en haut de page, ce message d'avertissement peut s'afficher. Guesty travaille à la résolution de ce problème, mais pour l'instant, la seule solution consiste à déplacer le contenu plus bas sur la page. Une solution possible est d'ajouter une image et un texte explicatif au-dessus de l'élément « boutique », afin que la boutique ne soit pas visible sans défilement.
  • Code/script personnalisé dans l'en-tête. Si vous avez placé du code personnalisé dans la section <head> de votre site web, Google peut signaler une erreur indiquant que cela ralentit l'affichage de la page. Deux solutions s'offrent à vous : (1) Placez le code dans la balise <body> plutôt que dans l'en-tête. Le code sera ainsi déplacé en bas de page et se chargera plus tard. (2) Assurez-vous que le script intégré est chargé de manière asynchrone. Cela signifie que le navigateur le chargera en arrière-plan tout en continuant à charger le reste du contenu du site. Pour activer le chargement asynchrone des scripts, modifiez le code comme suit :
    • Ancien code :

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

    • Nouveau code asynchrone :

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

  • Vous noterez que le code ci-dessus indique au navigateur de charger ce code de manière asynchrone, ce qui devrait permettre de réussir le test Google PageSpeed.
  • Intégration d'une iframe. Si vous intégrez une iframe personnalisée dans la partie supérieure d'une page 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.
• Optimisation des images : Actuellement, l’optimisation d’images de Guesty fonctionne uniquement avec les formats JPG et PNG. Si vous importez un fichier TIFF, GIF ou un autre format d’image, Guesty risque de ne pas pouvoir l’optimiser, ce qui pourrait expliquer cet avertissement. Nous vous recommandons d’utiliser un service d’optimisation d’images tel que EzGif, Compressor.io ou TinyPNG. Google vérifie également que vous n’utilisez pas d’images volumineuses redimensionnées pour des emplacements plus petits. Guesty tente de résoudre ce problème en plaçant les images plus petites dans les colonnes de taille réduite, mais ce processus n’est pas infaillible. Il peut arriver que vous deviez télécharger une image, la redimensionner précisément à la largeur de colonne souhaitée, puis la réimporter. Ce cas est toutefois assez rare.
• Redimensionnement des images : Bien que Guesty optimise les images pour réduire leur taille, Guesty ne les redimensionne pas automatiquement sur la version bureau de votre site. Par exemple, si vous utilisez une image de 3 000 x 3 000 pixels et que vous la définissez à 300 pixels à l’aide de la fonction glisser-déposer de l’éditeur, l’image entière de 3 000 x 3 000 pixels est toujours chargée. Cela peut impacter négativement votre score PageSpeed. Pour résoudre ce problème, redimensionnez l’image avec l’éditeur d’images intégré ou avec un logiciel de retouche photo, puis téléchargez-la à nouveau.
• Exploitez la mise en cache du navigateur : si vous intégrez du code personnalisé à votre site web, celui-ci sera souvent chargé depuis un site tiers. Si ce site n'active pas la mise en cache, Google le détectera et vous recommandera de l'activer. Vous devrez alors contacter le fournisseur de ce service tiers pour qu'il mette en œuvre cette modification sur son serveur.
• Votre page est peut-être trop volumineuse : si elle contient beaucoup d'éléments, la page peut rester volumineuse même après l’exécution de notre outil d’optimisation. Pensez à réduire le nombre d’images ou à répartir votre contenu sur d'autres pages.
• Problèmes non résolus actuellement : Veuillez noter qu’il s’agit de problèmes de vitesse de chargement des pages signalés par Google qui ne peuvent pas être résolus par vos soins et qui doivent être traités comme des demandes de fonctionnalités pour Guesty:
  • Exploiter la mise en cache du navigateur
  • Minifier HTML / CSS / JS
  • Optimisation de la diffusion CSS

Cas où Guesty n'optimise pas le site

Il arrive que Guesty ne tente pas d'optimiser le site web lors de sa publication. Si vous avez intégré du code personnalisé qui utilise

 jQuery (($('#ex'))

ou l' API JS :

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

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