Félicitations pour avoir passé la Speed Week. La semaine dernière, Cloudflare a : décrit la manière dont notre réseau mondial accélère Internet, lancé un modèle de hiérarchisation HTTP/2 visant à améliorer les expériences Web sur tous les navigateurs, lancé un service de redimensionnement des images qui fournira une image optimale à chaque appareil, optimisé la diffusion vidéo en direct, expliqué comment diffuser des images progressives pour un rendu deux fois plus rapide, en utilisant la flexibilité de notre nouveau modèle de hiérarchisation HTTP/2 et, enfin, mis au point le prototype d’un nouveau format over-the-wire pour JavaScript qui pourrait améliorer les performances de démarrage des applications, en particulier sur les appareils mobiles. En prime, nous proposons également une nouvelle fonctionnalité : « TCP Turbo » choisit automatiquement les paramètres TCP pour accélérer davantage votre site Web.
En tant qu'entreprise, nous souhaitons aider chacun de nos clients à améliorer leurs expériences sur Internet. La croissance de Cloudflare et l’augmentation du nombre de fonctionnalités ont souvent rendu difficiles les questions simples :
- Quelle est la vitesse de mon site web ?
- Comment dois-je envisager les fonctionnalités de performance ?
- Quelle serait la vitesse du site si je devais activer une fonctionnalité particulière?
Cet article décrit les changements intéressants que nous avons apportés à la page Speed du tableau de bord Cloudflare, afin de permettre à nos clients de comprendre les performances de leurs sites Web et comment les rendre encore plus rapides. La nouvelle page Speed comprend :
- Une comparaison visuelle du chargement de votre site Web sur Cloudflare, avec la mise en cache activée, par rapport à la connexion directe à la source.
- L'amélioration mesurée attendue si une fonctionnalité de performance est activée.
- Un rapport décrivant la vitesse de votre site Web sur les ordinateurs de bureau et appareils mobiles.
Nous voulons simplifier l’expérience Web et donner le contrôle à nos clients. Jetez un coup d’œil. Nous espérons que cela vous plaira.
Pourquoi est-il nécessaire d’avoir un Web rapide ?
Expérience-client : Personne n'aime le service lent. Imaginez : si vous allez au restaurant et que le service est lent, surtout quand il s’agit de votre première expérience. Il est peu probable que vous y retourniez ou que vous le recommandiez à vos amis. Il s'avère que le Web fonctionne de la même manière et que les clients Internet sont encore plus exigeants. Près de 79 % des clients « insatisfaits » des performances d’un site Web sont moins susceptibles d’acheter à nouveau sur ce site.
Engagement et chiffre d'affaires : De nombreuses études expliquent comment la vitesse affecte l’intérêt des clients, les taux de rebond et les revenus.
Réputation : Il faut également tenir compte de la notoriété de la marque lorsque les clients associent une expérience en ligne à celle-ci. Une étude a révélé que, pour 66 % de clients, la performance du site Web influence l’image qu’ils ont de la société.
Diversité : Le trafic mobile est devenu plus important que le trafic de bureau au cours des dernières années. Les attentes des clients mobiles sont de plus en plus élevées et ils exigent un accès Internet transparent, quel que soit leur emplacement.
Le réseau mobile fournit un nouvel ensemble de défis comprenant la diversité des caractéristiques des appareils. Lors des essais, sachez qu’un périphérique mobile moyen est nettement moins capable qu’un modèle haut de gamme. Par exemple, il peut exister une différence de plusieurs ordres de grandeur dans le temps nécessaire à divers appareils mobiles pour exécuter JavaScript. Les clients passant d’un réseau de bureau solide et de haute qualité à des réseaux mobiles de vitesses (3G/5G) et de qualité différentes lors de la même session de navigation, la variance constitue un autre défi.
Nouvelle page de Speed
Il existe des preuves convaincantes qu'une expérience Web plus rapide est importante pour quiconque en ligne. La plupart des grandes études concernent les plus grandes entreprises de technologie disposant d'équipes entières chargées de mesurer et améliorer les expériences Web pour leurs propres services. Chez Cloudflare, notre mission est d'aider à construire un Internet meilleur et plus rapide pour tous. Et pas seulement pour certaines personnes triées sur le volet.
Rendre Internet plus rapide n'est pas une mince affaire. C'est clair.
Savoir ce qu'il faut envoyer et à quel moment nécessite une compréhension approfondie de chaque couche de la pile, du réglage TCP à la hiérarchisation des protocoles, en passant par les modes de distributions de contenu et les mécanismes complexes de réponse d'un navigateur. Vous aurez également besoin d'un réseau mondial qui se devra d'être à moins de 10 ms de chaque utilisateur Internet. La valeur intrinsèque d'un tel réseau devrait être claire pour tout le monde. Cloudflare dispose de ce réseau, mais il offre également de nombreuses fonctionnalités de performance supplémentaires.
Avec la refonte de la page Speed, nous soulignons les avantages en termes de performances de l’utilisation de Cloudflare et les améliorations supplémentaires possibles grâce à nos fonctionnalités.
La norme de fait pour mesurer les performances d'un site Web a été WebPageTest. Le fait d'avoir son créateur en interne chez Cloudflare nous a encouragé à l'utiliser comme base de mesure de la performance d'un site Web. Alors, quel est le moyen le plus simple de comprendre le chargement d’une page Web ? Une liste de statistiques ne fournit pas une image complète de l'expérience utilisateur réelle. L'une des fonctionnalités intéressantes de WebPageTest est qu'il peut générer une copie d’écran pris lors du chargement d'une page Web, ce qui nous permet de quantifier le mode de chargement visuel d'une page. Cette vue facilite considérablement la détermination du temps pendant lequel la page est vide et du temps nécessaire au rendu du contenu le plus important. Être capable de considérer les résultats de cette manière, donne la possibilité de faire preuve d'empathie envers l'utilisateur.
À quelle vitesse sur Cloudflare ?
Après avoir déplacé votre site Web vers Cloudflare, vous vous êtes peut-être demandé : À quelle vitesse mon site Web a-t-il acquis suite à cette décision ? Eh bien, désormais nous avons la réponse :
Outre l’augmentation de la vitesse, nous fournissons des bandes de film d’avant et d’après, de sorte qu’il est facile de comparer et de comprendre en quoi un utilisateur expérimentera le site Web sous un nouvel angle. Si nos tests ne parviennent pas à votre source et que vous êtes déjà configuré sur Cloudflare, nous testons avec le mode de développement activé, ce qui désactive la mise en cache et la réduction.
Statistiques sur le rendement du site
Comment pouvons-nous mesurer l'expérience utilisateur d'un site Web ?
Il fut un temps, le chargement de page était la métrique applicable. Le chargement de page est une mesure technique utilisée par les fournisseurs de navigateurs qui n’a aucune incidence sur la présentation ou la convivialité d’une page. La métrique indique le temps nécessaire non seulement pour charger le contenu important, mais également tout le contenu de tiers (widgets de réseaux sociaux, publicité, scripts de suivi, etc.). Il est bien possible que l’utilisateur ne voit rien avant que tout le contenu de la page ne soit chargé. Il peut aussi être en mesure d'interagir avec une page immédiatement pendant que le contenu continue à se charger.
Un utilisateur ne décidera pas si une page est rapide d'une seule mesure ou en un seul essai. Un utilisateur ne pourra déterminer la vitesse d’un site qu’en combinant un certain nombre de facteurs :
- quand il voit une réponse
- quand il voit le contenu qu'il attend
- quand il peut interagir avec la page
- quand il peut effectuer la tâche de son choix
L'expérience a montré que, si vous vous concentrez sur une mesure, ce sera probablement au détriment des autres.
Importance de la réponse visuelle
Si un utilisateur impatient se connecte à votre site et ne voit aucun contenu pendant plusieurs secondes ou aucun contenu précieux, il risque d’être déçu et de partir. La spécification de chronométrage de la trace rémanente définit un ensemble de métriques de la trace rémanente, lorsque le contenu apparaît sur une page, afin de mesurer les moments clés de la perception des performances par l'utilisateur.
La première trace rémanente de contenu (FCP) est le moment où le navigateur restitue un contenu du DOM.
La première trace rémanente significative (FMP) est le moment où le contenu « principal » de la page s’affiche à l’écran. Cette métrique doit correspondre à ce que l'utilisateur vient sur le site pour consulter et est conçue comme le moment où se produit le changement de mise en page visible le plus important.
L'indice de vitesse tente de quantifier la valeur de la bande de film plutôt que d'utiliser un seul moment de trace rémanente. L'indice de vitesse mesure la vitesse à laquelle le contenu est affiché, essentiellement la zone située au-dessus de la courbe. Dans le tableau ci-dessous de notre fonctionnalité d’image progressive, vous pouvez constater que 80 % est atteint beaucoup plus tôt par la charge parallélisée (rouge) que par la charge régulière (bleue).
Importance de l'interactivité
Le même utilisateur impatient est maintenant heureux de voir s’afficher le contenu qu’il souhaite voir. Ils seront toujours frustrés s’ils ne peuvent pas interagir avec le site.
Le temps d’interaction est le temps nécessaire pour que le contenu s’affiche et que la page soit prête à recevoir les commentaires de l'utilisateur. Techniquement, cela est défini comme le moment pendant lequel la principale filière de traitement du navigateur a été inactif pendant plusieurs secondes après la première trace rémanente significative.
L'onglet Vitesse affiche ces métriques clés pour appareil mobile et bureau.
Quelle rapidité sur Cloudflare ?
Le tableau de bord Cloudflare fournit une liste de caractéristiques de performance qui, certes, peuvent être à la fois déroutantes et décourageantes. Quel serait l’avantage d’activer Rocket Loader et sur quels indicateurs de performance aura-t-il le plus d’impact ? Si vous effectuez une mise à niveau vers Pro, quelle sera la valeur de la hiérarchisation améliorée HTTP/2 ? La section optimisation répond à ces questions.
Les tests sont exécutés avec chaque caractéristique de performance activée et désactivée. Les valeurs des tests pour les indicateurs de performance appropriés sont affichées, ainsi que l'amélioration. Vous pouvez activer ou mettre à niveau la fonctionnalité à partir de cette vue. Voici quelques exemples :
Si Rocket Loader était activé pour ce site Web, le JavaScript bloquant le rendu serait différé, ce qui ferait passer le temps de première trace rémanente de 1,25 sec à 0,81 sec, soit une amélioration de 32 % sur le bureau.
Les sites présentant une image lourde ne fonctionnent pas correctement avec les connexions mobiles lentes. Si vous activez Mirage, vos clients utilisant des connexions 3G verront un contenu important une seconde plus tôt, soit une amélioration de 29,4%.
Alors, qu'en est-il de nos nouvelles fonctionnalités ?
Nous avons testé la fonctionnalité améliorée de hiérarchisation HTTP/2 sur un navigateur périphérique placé sur le bureau et constaté un affichage de contenu important deux secondes plus tôt, soit une amélioration de 64 %.
Ceci est un résultat plus intéressant tiré de l'exemple de blog utilisé pour illustrer la diffusion progressive d'images. À première vue, l'amélioration de 29 % de l'indice de vitesse est bonne. La comparaison des clichés montre une différence plus importante. Dans ce cas, la page n’affichant aucune image est déjà visuellement complète à 43 % pour les deux scénarios après 1,5 seconde. À 2,5 secondes, la différence est de 77 % par rapport à 50 %.
C'est un excellent exemple de la façon dont les métriques ne fournissent pas toutes les informations. Elles ne peuvent pas remplacer complètement l'affichage du flux de chargement de la page et la compréhension de ce qui est utile pour votre site.
Comment essayer ?
Ceci est notre première version de la nouvelle page Speed et nous sommes impatients de connaître vos retours. Nous allons la déployer pour les clients bêta qui souhaitent voir comment leurs sites fonctionnent. Pour être ajouté à la file d'attente en vue de l'activation de la nouvelle page Speed, veuillez cliquer sur la bannière de la page d'accès
ou cliquez sur la bannière de la page Speed existante.
