Au cours de ces 3 dernières semaines, vous avez été près de 600 à participer à notre Quiz sur la performance et la qualité web. Nous vous proposons aujourd’hui d’en découvrir un corrigé détaillé, pour vous permettre d’identifier vos erreurs et surtout de progresser grâce aux explications et à différents articles complémentaires.
Si vous n’aviez pas vu passer notre Quiz, vous pouvez toujours vous y essayer avant de découvrir le corrigé : Quiz performance et qualité web.
Cependant, il est évidemment trop tard pour tenter de gagner l’un des lots !
A ce propos, nous annoncerons prochainement la liste des gagnants, après les avoir contactés individuellement par e-mail dans le courant de la semaine.
Merci encore aux généreux partenaires qui nous ont permis de vous proposer de superbes lots pour ce concours : Mozilla, AlsaCréations, Codepen, Opquast, ImageRecycle, Tuto.com, Alexandra Martin et Mathieu Chartier.
Commençons sans plus attendre avec la première partie de ce Quiz, la plus facile.
Compresser une image permet de
- réduire son poids pour la charger plus vite
- améliorer sa qualité
- la redimensionner
Peu de doute ici, la compression d’une image permet de réduire le poids du fichier, dans le but d’accélérer son téléchargement et donc son affichage sur la page web. On notera qu’il existe des compressions avec perte de qualité et d’autres qui n’impactent pas le rendu visuel !
Le HTTPS permet
- d’accélérer les pages web
- d’offrir davantage de sécurité
- rien de particulier, c’est juste le pluriel de HTTP
Nous avons parlé régulièrement sur ce blog de l’importance du HTTPS. Il s’agit bel et bien de la version sécurisée du protocole. HTTPS permet d’encrypter la communication entre le serveur web et le navigateur de l’internaute. Avec HTTP les données circulent en clair sur le réseau, n’importe quel acteur ayant accès au canal de communication peut donc en lire le contenu.
Le temps de chargement d’un site e-commerce peut-il impacter le panier moyen ?
Si vous ne vous savez pas, c’est sans doute une bonne occasion pour visiter cette page : https://www.dareboost.com/fr/webperf-impacts
- oui
- non
On ne pourra pas nous reprocher d’avoir été trop sévères sur cette question, la réponse se trouve sur la page indiquée. Plus globalement vous pourrez y découvrir que le temps de chargement peut impacter la plupart des indicateurs de performance commerciale d’un site web.
Les commentaires alternatifs sur les images (alt= » ») sont utiles uniquement pour le SEO
- vrai
- faux
Vous êtes prêt de 10% à vous êtes trompés ici : l’attribut alt a également un rôle majeur en matière d’accessibilité.
Les alternatives textuelles peuvent en effet être utiles à tout public qui n’afficherait pas ces dernières, par exemple les outils de synthèse vocale, ou encore les internautes qui désactivent les images pour limiter la bande passante utilisée.
Si vous voulez en savoir plus c’est une excellente occasion de découvrir la check-list Opquast qui vous apportera des informations détaillées à ce sujet.
Minifier des fichiers CSS, c’est
- rendre les fichiers plus légers, en supprimant des éléments comme les espaces ou les commentaires
- écrire le code plus petit
La minification d’un fichier CSS est un traitement automatisé qui permet de supprimer tout caractère inutile pour l’interprétation du code par un navigateur web. Les espaces, tabulations ou autres sauts de ligne, tout comme les commentaires, sont en effet utiles uniquement pour les développeurs. Pour un site en production, supprimer ces caractères, et préférer les syntaxes raccourcies va permettre d’alléger les fichiers CSS et donc d’accélérer le chargement des pages concernées. Si vous voulez en savoir plus, notamment sur les gains obtenus, vous pouvez consulter notre article : la minification CSS, tout ce que vous vouliez savoir.
Une politique de cache permet de
- masquer les éléments d’une page
- limiter la bande passante consommée
Un politique de cache consiste à faire envoyer par votre serveur web un certain nombre d’en-têtes HTTP qui vont permettre d’établir la durée de validité des ressources envoyées, ainsi que des politiques d’invalidation.
Ainsi, un visiteur qui a téléchargé une ressource, peut éventuellement la conserver plusieurs jours, et éviter de la télécharger à chaque visite, ce qui d’une part va limiter la bande passante utilisée, mais aussi accélérer le chargement des pages.
On notera également qu’en l’absence d’une politique de cache, des problèmes fonctionnels importants peuvent se poser en cas de mise à jour, car les navigateurs vont par défaut stocker la ressource quelques temps, et sans aucune politique d’invalidation maîtrisée.
Le Gzip permet de
- compresser des contenus
- sécuriser une page web
Le Gzip, permet de compresser les contenus côté serveur, qui seront ensuite décompressés par le navigateur web. Résultat : les contenus textuels qui transitent sur le réseau seront beaucoup plus légers ! Très simple à mettre en oeuvre, ce type de compression est un impératif. D’autres algorithmes de compression sont en train de voir le jour peu à peu. Nous pouvons par exemple citer Brotli qui est déjà supporté par Chrome.
Lequel de ces noms ne désigne pas un CMS :
- WordPress
- Magento
- Apache
- Prestashop
Apache n’est pas un CMS (Content Manager System), mais le nom d’une fondation, qui édite notamment le serveur web éponyme.
Jusque là la majorité d’entre vous ont assuré le sans faute. Nous allons maintenant passer au niveau intermédiaire, avec des résultats plus mitigés !
Lequel de ces indicateurs de performance a nécessairement la valeur la plus faible sur une page donnée ?
- Speed Index
- Délai avant début d’affichage (Start Render)
- Délai avant premier octet (Time To First Byte)
- Temps de chargement total
Voici ce qu’on observe dans la majorité des cas :
Délai avant premier octet < Délai avant début d’affichage < Speed Index < Temps de chargement total
Le délai avant premier octet marque le début de la réponse serveur. Avant cela, le navigateur ne dispose d’aucune donnée. C’est donc nécessairement le délai le plus faible. Ensuite le Start Render marque le début de l’affichage, qui peut-être plus au moins lent car il peut nécessiter le télécharger des fichiers supplémentaires (CSS, etc).
Le Speed Index quant à lui est nécessairement supérieur au Start Render, puisque c’est en résumé le délai moyen d’affichage des pixels de la page web.
Enfin le temps de chargement total correspond au moment ou la page est complètement chargée. Vous aurez peut-être noté que le Speed Index peut donc être supérieur au temps de chargement total, si le délai d’affichage mesuré par le Speed Index est fortement freiné par des comportements Javascript par exemple.
En complément nous vous invitons à lire cet article : Mesure de vitesse de vos pages : Start Render, Visually Complete et SpeedIndex.
Le budget de performance désigne
- une méthodologie pour prendre en compte la performance web
- le coût total d’un chantier d’optimisation pour mon site web
Si vous n’en aviez jamais entendu parlé, il est fort probable que cette question vous ait posé problème. Erreur ou pas, c’est une très bonne occasion pour découvrir le budget de performance. Une méthodologie qui vous permettra de faire de l’optimisation du temps de chargement de votre site une priorité, et d’impliquer tous les acteurs de vos projets vers cet objectif commun.
Lequel de ces codes HTTP correspond à une redirection :
- 200
- 403
- 302
- 418
Le code 302 doit être utilisé pour une redirection temporaire, alors que le code 301 est réservé aux redirections permanentes. Le code 200 est le code le plus courant, puisqu’il indique le succès de la requête. Le code 403 indique que l’accès a été refusé.
Les plus joueurs d’entre vous auront apprécié le 418, qui correspond au message “I’m a teapot” dont les spécifications datent du 1er avril 1998, et dont vous devriez savourer la lecture !
Pour une expérience utilisateur de qualité, le Speedindex devrait être :
- le plus grand possible
- le plus faible possible
- peu importe
Nous l’avons évoqué plus tôt, le Speed Index est le délai moyen d’affichage des pixels de la page (en considérant l’état final de la page, et uniquement la partie au dessus de la ligne de flottaison, c’est à dire la partie visible à l’écran sans avoir besoin de scroller).
Ce délai doit donc être le plus faible possible !
On notera que le Speed Index est généralement exprimé en millisecondes (même si l’unité est parfois implicite) et que Google recommande que la zone au dessus de la ligne de flottaison soit chargée en moins d’une seconde, ce qui implique un Speed Index inférieur à 1000.
Lequel de ces éléments n’impactera en aucun cas le temps de chargement d’une page web ?
- Le temps de réponse du serveur web
- La localisation géographique de l’internaute
- La connexion de l’utilisateur
- Le poids de la page
- Tous ces éléments peuvent avoir un impact
Vous êtes environ 10% à avoir oublié le rôle de la localisation géographique de l’internaute. En effet, la localisation de l’internaute par rapport à celle du serveur web peut avoir un impact très négatif sur le temps de chargement, à cause de la latence.
C’est notamment pour répondre à cette problématique que de nombreux sites web utilisent des CDN (Content Delivery Network) qui visent à “rapprocher” les contenus des internautes.
Google recommande un temps de réponse serveur :
- supérieur à 500ms
- inférieur à 20ms
- inférieur à 200ms
- supérieur à 300ms
Il est peu probable que Google recommande une valeur supérieure à un seuil donné, puisque l’intérêt du moteur de recherche qui crawl vos pages, est bien qu’elles soient les plus rapides possible. Vous êtes nombreux à avoir répondu 20 millisecondes. Evidemment, ce serait l’idéal, mais cela reste irréalisable pour de nombreux sites. Google recommande ainsi un temps de réponse serveur inférieur à 200ms (en excluant la latence et en s’intéressant donc bien uniquement à la durée des traitements sur le serveur).
N’oubliez pas de tirer profit d’un système de cache serveur quand c’est possible !
Laquelle de ces extensions ne correspond pas un format d’image :
- webp
- png
- jpg
- dotm
- svg
Le format dotm est un format apporté par Microsoft Word, et n’a donc rien à voir avec le web et les images. le format WebP est un format d’image récent, généralement très intéressant en remplacement du JPEG ou du PNG, car très performant et offrant la possibilité d’utiliser de la transparence. Son utilisation est compatible avec Chrome et Opera.
Le SVG, plus connu, est lui un format basé sur le XML pour les images vectorielles.
Attaquons maintenant le niveau expert de ce Quiz, pour lequel nous n’avons eu aucun sans faute.
Laquelle de ces bonnes pratiques devient contre-productive en HTTP/2 ?
- Le Domain Sharding
- La minification
- La compression gzip
- Les 3
Le Domain Sharding permettait de s’affranchir d’une limite en HTTP/1. En effet sur ce protocole, les navigateurs peuvent établir des connexions en parallèle avec un serveur pour accélérer le chargement de la page, mais de manière limitée (généralement 6 connexions par domaine) afin de ne pas surcharger les serveurs. Le Domain Sharding vise à s’affranchir de cette limite, en utilisant plusieurs domaines différents pour les ressources d’un site.
HTTP/2 n’utilise plus qu’une seule connexion quelque soit le nombre de ressources, elles pourront être téléchargées en parallèle sur une seule et même socket. Le Domain Sharding est donc contre-productif : il n’apporte aucun gain de performance et va demander l’établissement de plusieurs connexions réseaux (ce qui est coûteux) et autant de résolutions DNS en amont.
La minification et la compression Gzip, qui permettent de réduire le volume de données qui transitent sur le réseau, restent quant à elles des bonnes pratiques tout à fait valables.
A noter que d’autres pratiques deviennent contre-productives en HTTP/2.
Une protection contre le « clickjacking » peut être assurée grâce à
- HTTPS
- le header HTTP X-Frame-Options
- le header HTTP X-XSS-Protection
Le clickjacking, ou détournement de clics, consiste à faire cliquer un internaute sur des pages apparemment sûres, en en détournant les effets.
Une technique simple consiste à créer une page utilisant un site connu de l’internaute dans une iframe. L’internaute pensera alors être sur le site de confiance.
L’en-tête X-Frame-Options permet à une page d’interdire son utilisation au sein d’une frame, ou de l’autoriser uniquement pour certaines origines, et donc d’éviter ce type d’attaques.
L’en-tête X-XSS-Protection permet d’activer les filtres anti-xss offerts par certains navigateurs web. Il est également intéressant d’en profiter, mais pas particulièrement dans le cadre du clickjacking.
Lequel de ces points ne désigne pas une amélioration apportée par HTTP/2 ?
- Server Push
- Compression des headers
- SPDY
- Multiplexing
- Aucun
Server Push, compression des headers et multiplexing sont tous les 3 apportés par HTTP/2.
Il fallait donc bien répondre SPDY, un protocole aujourd’hui déprécié, mais qui a servi de base aux spécifications HTTP/2. Question piège donc : SPDY n’est pas une amélioration apportée par HTTP/2, c’est en quelque sorte son ancêtre.
L’attribut sandbox peut être utilisé sur laquelle de ces balises HTML ?
- <img>
- <object>
- <iframe>
- cet attribut n’existe que dans la spécification HTML6
Les lecteurs assidus de notre blog s’en rappelleront, nous en avions parlé il y a un peu plus d’un an : Sécuriser une iframe avec l’attribut sandbox.
L’attribut sandbox permet d’interdire par défaut la plupart des actions sensibles au sein d’une iframe, et d’apporter une granularité supplémentaire sur son contrôle grâce à un système de privilèges. Une bonne solution pour se protéger des effets des contenus de tierces parties intégrés via des iframes.
Lequel de ces éléments n’impactera en aucun cas le SpeedIndex ?
- l’utilisation d’animations sur la page
- la résolution d’écran utilisée
- le débit utilisé
- le temps de réponse du serveur
- tous ces éléments peuvent avoir un impact
Avec les réponses aux questions précédentes, vous n’avez plus de doute : le débit utilisé et le temps de réponse ont définitivement un impact.
L’utilisation d’animations, va affecter le rendu intermédiaire de la page, et potentiellement perturber son état final (si l’animation boucle), le Speed Index est donc bien impacté ici aussi.
Concernant la résolution d’écran, rappelons que le Speed Index s’intéresse au contenu situé au dessus de la ligne de flottaison. Or, cette ligne de flottaison est dépendante de la résolution. On va donc considérer plus au moins de contenus comme pouvant impacter le Speed Index, et c’est encore plus marqué sur les sites Responsive qui peuvent ne pas afficher certains éléments du tout sur les faibles résolutions par exemple.
Lesquelles de ces valeurs sont acceptables pour un en-tête Cache-Control dans une requête HTTP ?
- no-cache
- max-age=3600
- must-revalidate
- only-if-cached
Pour la dernière question de ce Quiz, nous y sommes allé un peu fort ! il fallait bien un peu de challenge pour ceux qui s’en étaient sortis sans casse jusqu’à présent.
Premier point à noter : le pluriel, puisqu’il s’agissait de la seule question de ce Quiz qui acceptait plusieurs réponses.
Le deuxième piège, c’est qu’il est bien question d’une requête : les valeurs acceptées par cet en-tête HTTP sont en effet différentes selon qu’on soit dans un contexte de réponse ou de requête. must-revalidate étant valide uniquement pour une réponse HTTP, elle est à éliminer.
Beaucoup ont pensé, à raison, aux valeurs no-cache et max-age=3600, courantes pour l’en-tête Cache-Control. Mais il fallait y ajouter only-if-cached.
only-if-cached
In some cases, such as times of extremely poor network connectivity, a client may want a cache to return only those responses that it currently has stored, and not to reload or revalidate with the origin server. To do this, the client may include the only-if-cached directive in a request. If it receives this directive, a cache SHOULD either respond using a cached entry that is consistent with the other constraints of the request, or respond with a 504 (Gateway Timeout) status. However, if a group of caches is being operated as a unified system with good internal connectivity, such a request MAY be forwarded within that group of caches.
On ne vous en voudra pas de l’avoir raté, puisque nous sommes nous-mêmes passés par la lecture de la RFC 2616 pour le découvrir et vous préparer cette question qui fait rater le sans faute à une dizaine de participants.
Nous espérons que ce Quiz vous aura plus, et qu’il vous aura permis des découvertes intéressantes à travers ce corrigé. N’hésitez pas à vous abonner à notre newsletter pour recevoir chaque mois l’actualité de la performance et de la qualité web, ainsi que nos articles sur les dernière bonnes pratiques et nos études.
Et n’oubliez pas d’utiliser régulièrement notre outil dareboost.com pour analyser vos pages web, nous mettons à jour nos tests automatisés plusieurs fois par an !