Google propose un score de performance web via son outil gratuit Page Speed Insight. Pour comprendre le calcul de ce score, nous vous invitons à consulter notre dossier complet sur le sujet.

Dans les sections Opportunities et Diagnostic, vous trouverez des recommandations d’actions pour réduire vos temps de chargement. Si certaines sont pertinentes et peuvent s’appliquer à votre site, gardez en mémoire qu’un avis expert reste nécessaire pour une application intelligente et efficace des optimisations.

Voici un exemple de recommendations : différer le CSS inutilisé pourrait faire gagner 0,45 secondes au temps de chargement de cette page

Voyons quelles sont les recommandations les plus courantes dans ces sections, et comment s’en occuper. Nous détaillons dans quelle mesure Fasterize peut solutionner le point.

• La page n'utilise pas le protocole HTTPS
• Ne redirige pas le trafic HTTP vers HTTPS
• La page n'utilise pas le protocole HTTP/2 pour toutes ses ressources
• Le chargement de la page n'est pas suffisamment rapide sur les réseaux mobiles
• Réduire le temps de réponse serveur (TTFB)
• Diffusez des éléments statiques grâce à des règles de cache efficaces
• Préchargez les demandes clés
• Connectez-vous à l'avance aux origines souhaitées
• Éliminez les ressources qui bloquent le rendu
• Réduire le temps d’exécution Javascript
• Réduisez la taille des ressources JavaScript
• Supprimez les ressources JavaScript inutilisées
• Réduisez la taille des ressources CSS
• Supprimer les ressources CSS inutilisées
• Diffusez des images aux formats nouvelle génération
• Encodez les images de manière efficace
• Dimensionnez correctement les images
• Utilisez des formats vidéo pour le contenu animé
• Différez le chargement des images hors écran
• Activez la compression de texte
• Évitez une taille excessive de DOM
• Réduisez la profondeur des demandes critiques
• Assurez-vous que le texte reste visible pendant le chargement des polices Web
• Évitez des poids de ressources trop lourdes
• La page n'utilise pas d'écouteurs d'événements passifs pour améliorer les performances de défilement
• Le fichier robots.txt n'est pas valide

La page n'utilise pas le protocole HTTPS

Selon Lighthouse, tous les sites doivent être protégés par le protocole HTTPS, même ceux qui ne traitent pas de données sensibles. Le protocole HTTPS empêche les intrus de détourner ou d’écouter passivement les communications entre votre application et les utilisateurs. Il constitue également une condition préalable à l'utilisation de HTTP/2 et de nombreuses nouvelles API de plates-formes Web.

Corrigé par Fasterize : OUI

Fasterize offre un support d’HTTPS optimisé. Celui-ci nécessite l’installation d’un certificat. Vous pouvez nous fournir votre propre certificat SSL via une procédure sécurisée, ou nous demander de générer un certificat LetsEncrypt pour vous. L’utilisation d’un certificat LetsEncrypt présente l’avantage de simplifier grandement la maintenance puisque le renouvellement est automatique. Vous trouverez plus de détails dans notre dossier sur la migration HTTPS

Ne redirige pas le trafic HTTP vers HTTPS

Si vous avez déjà configuré le protocole HTTPS, veillez à rediriger tout le trafic HTTP vers HTTPS afin de proposer des fonctionnalités Web sûres à tous vos utilisateurs.

Corrigé par Fasterize : OUI

Fasterize gère la redirection 301 HTTP vers HTTPS dans la partie Redirection du Dashboard.

La page n'utilise pas le protocole HTTP/2 pour toutes ses ressources

La recommendation Lighthouse précise que le protocole HTTP/2 offre de nombreux avantages par rapport à HTTP/1.1, comme les en-têtes binaires, le multiplexage et la fonctionnalité Push des serveurs.

Corrigé par Fasterize : OUI

Fasterize propose le protocole HTTP/2 par défaut pour toutes connexions HTTPS.

Le chargement de la page n'est pas suffisamment rapide sur les réseaux mobiles

Selon Lighthouse, votre page se charge trop lentement. L'utilisateur ne peut pas interagir avec en moins de 10 secondes.

Corrigé par Fasterize : A DETERMINER

Contactez-nous pour diagnostiquer les causes des lenteurs et déterminer ce que nous pouvons améliorer. Fasterize sera, par exemple, capable d’intervenir sur le chargement bloquant de certains scripts.

Réduire le temps de réponse serveur

Fasterize offre une solution complète de cache HTTP. Le Smart Cache et le Cookieless cache permettent de cacher de façon intelligente les pages dynamique, et de réduire ainsi le temps de réponse serveur. Par ailleurs, les Early Hints permettent également de réduire le TTFB en envoyant rapidement les premières informations de téléchargement au navigateur.

Corrigé par Fasterize : OUI, pour toutes les pages cachables ou partiellement cachables.

Voici un exemple de configuration du cache de Fasterize :

Diffusez des éléments statiques grâce à des règles de cache efficaces

Une longue durée de vie du cache peut accélérer les visites répétées sur votre page.

Corrigé par Fasterize : OUI

Par défault, avec Fasterize, les ressources statiques des pages sont versionnées et mises en cache pour une durée d'un an. Cette valeur est configurable dans la section cache des configurations.

Préchargez les demandes clés

Lighthouse recommande d'envisager d'utiliser `<link rel=preload>` pour hiérarchiser la récupération des ressources actuellement requises pour le chargement ultérieur de la page.

Corrigé par Fasterize : MANUELLEMENT

Fasterize précharge les ressources critiques JS, CSS, FONT via la fonctionnalité de Early Hints. 

Il est aussi possible d'injecter des balises dans le Tag Manager de Fasterize après la balise `<head>`.

Connectez-vous à l'avance aux origines souhaitées

La recommandation signale d'envisager d'ajouter les indices de ressources `preconnect` ou `dns-prefetch` pour établir les premières connexions avec des origines tierces importantes.

Corrigé par Fasterize : MANUELLEMENT

Il est aussi possible d'injecter des balises dans le Tag Manager de Fasterize après la balise `<head>`.

Fasterize automatise la préconnexion vers Google Font en activant l'optimisation dans la section règle : 

Éliminez les ressources qui bloquent le rendu

Des ressources bloquent  la première visualisation (first paint) de votre page. Envisagez de diffuser des feuilles JS/CSS essentielles inline et de différer la diffusion de toutes les feuilles JS/de style non essentielles.

Corrigé par Fasterize : PARTIELLEMENT

Le Defer JS permet de différer l'exécution du JS. De plus, Fasterize place les feuilles de style en haut de page. Cependant, Fasterize ne supprime pas le CSS non critique ou non utilisé dans la page.

Réduire le temps d’exécution JavaScript

Lighthouse suggère de considérer la réduction du temps passé sur l’analyse et l’exécution du JS. Charger des JavaScript plus petits peut aider.

Corrigé par Fasterize : NON

Fasterize permet de mitiger l'impact de l'exécution du JavaScript en le faisant exécuter aux moments les moins impactants pour l'expérience utilisateur.  Cependant, le temps d'exécution du Javascript reste inchangé.

Réduisez la taille des ressources JavaScript

La minification des fichiers JavaScript peut réduire la consommation de bande passante et la durée d'analyse des scripts.

Corrigé par Fasterize : OUI

Activez la minification JS depuis votre Dashboard. Le minificateur supporte le Javascript et l'ES6.

Supprimez les ressources JavaScript inutilisées

Supprimez les ressources JavaScript inutilisées pour réduire la quantité d'octets consommés par l'activité réseau.

Corrigé par Fasterize : NON

Fasterize ne supprime pas de code Javascript dans la page. Il peut cependant le charger de façon à réduire au maximum l’impact sur l’expérience utilisateur.

La réduction des ressources Javascript passe par un audit des fonctionnalités et des scripts tiers pour évaluer leur intérêt.

Réduisez la taille des ressources CSS

La réduction des fichiers CSS peut réduire la bande passante consommée.

Corrigé par Fasterize : OUI

Il vous suffit d'activer la minification CSS depuis la partie règle du Dashboard.

Supprimer les ressources CSS inutilisées

Selon Lighthouse, penser à supprimer les règles inutilisées des feuilles de style, et différez le chargement des ressources CSS non utilisées pour le contenu au-dessus de la ligne de flottaison, afin de réduire la quantité d'octets consommés inutilement par l'activité réseau.

Corrigé par Fasterize : NON

Cette technique fait référence à la technique du Critical CSS. Fasterize n'offre pas cette technique qui est complexe à automatiser puisque le CSS critique pour l'affichage de la page peut dépendre de la résolution de l'écran dans le cadre des sites responsive.

Diffusez des images aux formats nouvelle génération

Les formats d'image comme JPEG 2000, JPEG XR et WebP proposent souvent une meilleure compression que les formats PNG ou JPEG. Par conséquent, les téléchargements sont plus rapides et la consommation de données est réduite.

Corrigé par Fasterize : OUI

Fasterize modifie le format de vos images. Le moteur permet de les transformer en WebP ou en AVIF. Dans la pratique, le gain du passage de JPEG à WebP est moindre que celui annoncé par Lighthouse.

Encodez les images de manière efficace

Les images optimisées se chargent plus rapidement et consomment moins de données mobiles.

Corrigé par Fasterize : OUI

Fasterize optimiser les images JPEG, PNG, GIF et SVG. Il encode les images JPEG de façon à maintenir une qualité visuelle équivalente à l'origine. Attention, Lighthouse propose d'optimiser des images déjà optimisées car il ne tient pas compte de la qualité perçue et utilise systématiquement un facteur qualité à 80.

Dimensionnez correctement les images

Diffusez des images de taille appropriée afin d'économiser des données mobiles et de réduire le temps de chargement.

Corrigé par Fasterize : OUI, MANUELLEMENT

Fasterize supporte des paramètres de redimensionnement des images. Ces paramètres ne sont pas ajoutés automatiquement par le moteur mais doivent être introduits dans le code HTML.

La page de documentation se trouve ici.

Utilisez des formats vidéo pour le contenu animé

Les images GIF lourdes  sont inappropriées pour diffuser du contenu animé. Envisagez d'utiliser des vidéos MPEG4/WebM pour les animations et PNG/WebP pour les images statiques au lieu d'images GIF afin d'économiser des octets réseau.

Corrigé par Fasterize : NON

Fasterize ne permet pas encore de transformer les GIF animés en vidéo. Ce point est cependant à l’étude.

Différez le chargement des images hors écran

Envisagez de charger des images masquées ou hors écran après le chargement de toutes les ressources essentielles afin de réduire le délai avant interactivité.

Corrigé par Fasterize : OUI

Fasterize propose un lazyloader d’images. Seules les images visibles sont chargées dès le début. Les images restantes sont chargées lorsqu’on commence à scroller. Notre script n’est pas appliqué sur les premières images de la page pour tirer parti du pre-scanner des navigateurs. Cependant, si les images sont affichées via du Javascript, le lazyloader de Fasterize ne peut pas modifier leur chargement.Il ne prend pas en compte le chargement des images background.

Activez la compression de texte

Les ressources textuelles doivent être diffusées compressées (Gzip, Deflate ou Brotli) pour réduire le nombre total d'octets du réseau.

Corrigé par Fasterize : OUI

Fasterize supporte la compression Gzip et Brotli. La compression Brotli est active sur les fichiers optimisés JS et CSS ainsi que les pages provenant du cache Fasterize.

Évitez une taille excessive de DOM

Les éléments DOM sont tous les tags sur une page (comme DIV, HTML, BODY, etc.).

D’après le guide des développeurs web de Google, un arbre de DOM optimal inclut les caractéristiques suivantes : 

• Moins de 1500 noeuds au total.
• Une profondeur maximale de 32 noeuds. 
• N’a pas de noeud parent avec plus de 60 noeuds enfants

Corrigé par Fasterize : NON

Fasterize n'est pas en capacité de réduire la taille du DOM. La seule façon de réduire le DOM serait de supprimer des éléments de la page. Nous ne proposons pas ce type de fonctionnalités.

Réduisez la profondeur des demandes critiques

Les chaînes de demandes critiques ci-dessous montrent quelles ressources sont chargées avec une priorité élevée. Envisagez de réduire la longueur des chaînes et la taille de téléchargement des ressources ou de reporter le téléchargement de ressources inutiles afin d'améliorer le chargement des pages.

Corrigé par Fasterize : OUI

Fasterize agit sur deux aspects : le CSS est placé en haut de page ; l’exécution des fichiers JavaScript est différée pour ne pas bloquer le premier rendu de la page.

Assurez-vous que le texte reste visible pendant le chargement des polices Web

Utilisez la fonction d'affichage de la police CSS afin que le texte soit visible par l'utilisateur pendant le chargement des polices Web.

Corrigé par Fasterize : OUI

Fasterize propose d’activer l'option "font-display" dans la partie Optimisation des fonts de votre Dashboard.

Évitez des poids de ressources trop lourdes

La bande passante est coûteuse pour les utilisateurs, et elle fortement liée aux temps de chargement interminables.

Corrigé par Fasterize : OUI

Activez la minification HTML, CSS et JS depuis votre Dashboard.

La page n'utilise pas d'écouteurs d'événements passifs pour améliorer les performances de défilement

Lighthouse propose d'envisager de marquer vos écouteurs d'événements tactiles et à la molette comme `passive` pour améliorer les performances de défilement de votre page.

Corrigé par Fasterize : NON

Fasterize ne modifie pas la sémantique de votre code JS.