Google PageSpeed

IONOS a optimisé les sites Web publiés sur la plateforme 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 qui permettent 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 ?

Chez IONOS, 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 à chacun 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 d'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 vis-à-vis de chacun de ces critères pour obtenir un score total (sur 100), qui reflète 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 effectué par Google. Il consiste à examiner le code de votre site Web et à vérifier 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 force le navigateur à 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 du corps situé le plus en haut 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 compressiez les images et que vous fassiez en sorte que la taille des fichiers soit la plus petite possible 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 traiter à 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 immense (de 5 000 pixels de côté, par exemple) à un navigateur mobile ; pensez donc à la redimensionner.
• Donner la priorité au contenu visible : ce contrôle permet de vérifier que vous placez le contenu en haut du HTML du site Web. Essayez de ne pas charger de contenu superflu, qui n'est pas nécessaire 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/5 de seconde) pour récupérer le contenu/HTML de votre serveur.

Depuis l'introduction du projet open-source Lighthouse en novembre 2018, le test PageSpeed de Google prend désormais en compte, outre la vitesse, un large éventail de propriétés des sites Web (comme le SEO, l'accessibilité, la fonctionnalité d'application Web progressive PWA et les bonnes pratiques). En plus des tests ci-dessus, Lighthouse vérifie les critères suivants :

• Premier contenu affiché : cette mesure est générée par un véritable navigateur, qui vient charger le site Web. Lorsque vous effectuez un test Lighthouse sur votre site Web, un véritable navigateur va visiter ce dernier, le charger et en contrôler les performances. L'indicateur « First Contentful Paint » 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. Le temps nécessaire à l'affichage du premier contenu est mesuré en secondes. Cette mesure est intéressante, car dès qu'un utilisateur voit le premier élément graphique s'afficher sur le site Web, il sait que ce dernier est en train de se charger.
• Indice de vitesse : cet indicateur provient d'un outil classique de mesure des performances du Web, WebPageTest. Disponible depuis 2012, cet outil détermine avec efficacité la vitesse à laquelle un site Web charge son contenu. Il fonctionne en prenant toutes les 0,5 secondes des captures d'écran d'un site Web en train de se charger. À l'aide de ces captures d'écran, il calcule le pourcentage de contenu chargé sur la page Web par incréments de 0,5 seconde et émet un score de vitesse global. Plus ce score est bas, plus le site Web s'affiche rapidement. L'objectif de ce test est de comprendre à quelle vitesse l'utilisateur voit le contenu, et de repérer tout problème qui empêche le site Web d'afficher le contenu à une vitesse optimale.
• Délai d'interactivité : un autre critère important est la vitesse à laquelle l'utilisateur est en mesure d'interagir avec la page. Imaginons par exemple que l'utilisateur veuille cliquer sur un bouton ou faire défiler la page. C'est souvent le cas sur les téléphones portables, où l'utilisateur touche directement l'écran pour interagir avec la page. L'objectif principal des développeurs Web devrait être de rendre toute page interactive dès qu'elle présente du contenu. C'est un défi très difficile à relever en raison du mode de fonctionnement des navigateurs.
• Première inactivité du processeur : .Cette mesure est étroitement liée au délai d'interactivité, car elle indique le moment où tous les contenus et ressources initiaux du site Web sont chargés, et où le processeur de l'appareil entre en état de veille. Il est alors inactif. Il est intéressant de repérer cet instant, car les développeurs devraient se concentrer en priorité sur le chargement d'une quantité minime de contenu. Si l'on envoie une quantité limitée de contenu, le processeur de l'appareil traite tout le code et passe à l'état inactif plus vite.
• Estimation de la latence d'entrée : la dernière mesure enregistrée par Lighthouse n'a rien à voir avec les performances de votre site Web au premier chargement. Elle tente plutôt de mesurer le temps, en millisecondes, que met votre site Web pour réagir à un clic de souris ou à un appui du doigt. Dans l'idée, plus votre site Web est réactif, plus les utilisateurs le trouveront rapide et moins ils seront tentés de le quitter.

Au terme des tests, Lighthouse donnera également des recommandations classées par ordre de priorité pour vous aider à améliorer le score de vitesse général. Affichés sur la seconde moitié de la page, ces conseils comportent des détails très techniques sur les initiatives possibles et sur les avantages qu'elles pourraient apporter.

La mission d'IONOS

IONOS a optimisé les sites Web créés sur la plateforme 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 : La plupart des sites Web IONOS passent ce test haut la main. Cependant, cet aspect n'est pas entièrement sous le contrôle d'IONOS puisque nous laissons les utilisateurs rediriger l'utilisateur vers d'autres pages grâce à notre option de redirection d'URL. 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, IONOS optimise la structure des sites 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 : IONOS autorise 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 : IONOS définit 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 et ne doive pas être téléchargé à nouveau depuis le site Web.
• Réduire la taille des ressources CSS, JS et HTML : dans le cadre du processus de publication d'IONOS, 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 : IONOS traite chaque image jpg ou png que vous téléchargez en suivant un processus de compression et de redimensionnement exhaustif 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 traitons toutes les images avec 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 grande 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.

• Donner la priorité au contenu visible : dans le cadre de la conception de chaque site Web par IONOS, 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. Étant donné qu'IONOS héberge les sites Web sur notre plateforme, nous pouvons nous assurer que tous les sites hébergés chez nous réagissent rapidement. Nous utilisons la plateforme 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 exécuté par IONOS obtienne d'excellents résultats, nous ne pouvons pas faire une telle promesse. En effet, nos clients peuvent utiliser leurs propres code, contenu et conception dans leur site Web ; par conséquent, nous ne contrôlons pas totalement ce qu'ils peuvent ajouter, ni ce qu'ils ne peuvent pas ajouter à leur site. Pour cette raison, dans certaines situations, les sites Web IONOS n'obtiendront pas un score de 90 ou plus. Voici une liste d'erreurs et 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 :
  • Élé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. IONOS travaille actuellement sur un correctif, mais pour l'heure, notre seule recommandation 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, il n'est pas rare que des messages d'erreur de Google vous signalent un ralentissement de 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. Le code sera déplacé vers le bas, ce qui l'oblige à se charger plus tard. (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 : à l'heure actuelle, le processus d'optimisation d'IONOS fonctionne uniquement sur les images JPG et PNG. Si vous téléchargez une image au format TIFF, GIF ou autre, il est possible qu'IONOS ne puisse pas l'optimiser, ce peut justifier l'avertissement. Nous vous recommandons de traiter l'image via un service d'optimisation comme EzGif, Compressor.io ou TinyPNG. Une autre vérification effectuée par Google consiste à vérifier que des images volumineuses ne sont pas redimensionnées pour s'adapter à de petits emplacements. IONOS essaie 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 sans faille. 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 charger à nouveau. C'est un cas assez rare.
• Redimensionner les images : Même si IONOS optimise les images de façon à ce qu'elles soient compressées et ramenées à une taille plus petite, IONOS ne redimensionne pas réellement votre image à votre place dans la version pour ordinateur de bureau de votre site. Par exemple, si vous utilisez une image de 3000x3000 pixels sur une page et que vous la redimensionnez à 300 pixels de côté à l'aide de la fonction de glisser-déposer, la page chargera toujours l'image à 3000x3000 pixels. Cela peut avoir un effet négatif sur votre score PageSpeed. Vous pouvez régler ce problème en redimensionnant l'image à l'aide de l'éditeur d'images intégré, ou en la redimensionnant dans un logiciel de retouche photo avant de la charger à nouveau.
• Exploiter la mise en cache dans le navigateur : si vous incluez du code personnalisé à 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.
• Il se peut que votre page soit trop volumineuse : si vous avez beaucoup de contenu sur une page, celle-ci peut être encore trop volumineuse, même après que nous ayons lancé l'outil d'optimisation sur votre site. Envisagez d'utiliser moins d'images, ou de les répartir sur les autres pages.
• Problèmes impossibles à résoudre : il s'agit de problèmes de vitesse signalés par Google sur votre page, que vous ne pouvez pas résoudre vous-même et qui doivent être traités comme des demandes de fonctionnalités par IONOS :
  • Exploitation de la mise en cache dans le navigateur
  • Réduction de la taille des ressources HTML/CSS/JS
  • Optimisation de la livraison du CSS

Cas où IONOS n'optimise pas le site 

Dans certains cas, IONOS n'essaie pas d'optimiser le site lors de la publication, notamment si vous avez placé un code personnalisé qui utilise jQuery (($ ('# ex')) ou l'API JS dmAPI.runOnReady(‘code’,function(){}) dans l'en-tête du site. Nous procédons de la sorte car ce code nécessite souvent jQuery ou une fonction dmAPI ; or, comme notre processus d'optimisation déplace ce code plus bas sur la page, il cesse de fonctionner.