Archives de catégorie : Bonnes pratiques

Qu’elles soient automatisées ou non sur DareBoost.com, retrouvez en détail les bonnes pratiques de performance et de qualité web. Cet espace est aussi le vôtre, n’hésitez pas à nous proposer votre article, ou un sujet que vous souhaiteriez nous voir traiter.

Cumulative Layout Shift, l’indicateur de stabilité de la mise en page

Avez-vous déjà commencé à lire un article d’actualité passionnant, puis perdu votre ligne parce que tout le texte s’est déplacé vers le bas ? Cela m’arrive souvent, surtout à cause des publicités qui se chargent au-dessus du contenu.
Ce type d’expérience utilisateur peut être frustrant, mais jusqu’à présent, nous avons eu du mal à la mesurer quantitativement. Le Cumulative Layout Shift relève ce défi.

Continuer la lecture de Cumulative Layout Shift, l’indicateur de stabilité de la mise en page

Comment optimiser les performance de vos parties tierces

Intégrer des librairies ou services existants de parties tierces permet de gagner en productivité, mais a souvent un coût sur la performance ressentie. Dès lors que vous intégrez du code externe, comment vous assurer que ce code ne viendra pas nuire au rendu et à l’interactivité de votre site ? Explications et propositions pour un code tiers plus performant.

Continuer la lecture de Comment optimiser les performance de vos parties tierces

Preload, Prefetch et Preconnect : accélerez votre site avec les Resource Hints

Pour charger une page web complète, il faut un ensemble de ressources qui, collectivement, permettent l’affichage et l’interaction avec la page. Pour que l’utilisateur ait une impression de vitesse, il peut être nécessaire d’influencer l’ordre de récupération et d’exécution de ces ressources. C’est là que preload et les Resource Hints entrent en jeu.

Continuer la lecture de Preload, Prefetch et Preconnect : accélerez votre site avec les Resource Hints

First Contentful Paint (FCP), Start Render, First Paint. Comment bien mesurer la performance du début d’affichage ?

Comment mesurer correctement la vitesse à laquelle une page Web commence à afficher son contenu ? Plusieurs indicateurs de performance Web existent pour répondre à cette question, dont le First Paint, le Start Render et, plus récemment, le First Contentful Paint (FCP). Comment le FCP se démarque-t-il, quelles sont ses limites ? Découvrons ensemble les mesures du début d’affichage des pages Web par le navigateur.

Continuer la lecture de First Contentful Paint (FCP), Start Render, First Paint. Comment bien mesurer la performance du début d’affichage ?

TTI : Time To (consistently) Interactive pour mesurer l’interactivité des pages

L’objectif de la mesure de la Performance Web est de déterminer le moment à partir duquel une personne visitant la page peut accomplir son objectif efficacement. Cela implique qu’elle puisse consulter le contenu qu’elle cherchait et qu’elle soit en mesure d’interagir avec la page de manière satisfaisante. Certains indicateurs mesurent les étapes du rendu par le navigateur, d’autre la progression de ce rendu par le biais de vidéos. Mais quand il s’agit de mesurer efficacement l’interactivité, le mystère reste entier.

Depuis quelques années maintenant, Google met en avant un indicateur ambigu : le Time To Interactive. De quoi s’agit-il ? C’est ce que nous allons définir, avant d’expliquer comment et quand l’utiliser (ou non).

Continuer la lecture de TTI : Time To (consistently) Interactive pour mesurer l’interactivité des pages

Lazy Loading, des pages web plus rapides sans risque SEO

Les images sont au cœur de votre site web ? Si vous prenez la performance de votre site au sérieux, vous les avez probablement optimisées. Mais avez-vous pensé à les charger en Lazy Load ? Le Lazy Load des images améliore l’expérience utilisateur en libérant de la bande passante pour le contenu important.

Certains rejettent la technique pour des questions de SEO. Mais un Lazy Load de vos images ne les empêche pas d’être indexées. Voyons pourquoi vous devriez implémenter un Lazy Load d’images et comment vous assurer qu’il soit compatible avec votre SEO.

Continuer la lecture de Lazy Loading, des pages web plus rapides sans risque SEO

Content Encoding: pourquoi utiliser la balise meta charset et l’en-tête Content-Type

Améliorer la vitesse à laquelle une page Web est affichée implique souvent de rendre la vie du navigateur aussi facile que possible. Lorsque le navigateur reçoit une réponse HTTP, il reçoit en fait du texte encodé en octets, où chaque octet ou séquence d’octets représente un caractère donné. Si le navigateur ne sait pas clairement quel encodage utiliser, il perdra du temps à essayer de le deviner et sera susceptible d’échouer dans certains cas.

Continuer la lecture de Content Encoding: pourquoi utiliser la balise meta charset et l’en-tête Content-Type

Tag manager & performance web chapitre 2 : une question de rigueur (et de coopération)

L’utilisation d’un tag manager n’est pas sans effet sur la vitesse de chargement de vos pages web. Dans un précédent article, nous avons démontré que cet impact ne se limite pas au chargement asynchrone des scripts qui sont embarqués par cet outil de gestion des balises. Et que les risques de voir le tag manager devenir une source de problèmes – sérieux – pour la performance de votre site web existent bel et bien. Il est donc temps maintenant d’explorer quelques pistes pour gérer au mieux cet outil afin qu’il remplisse ses objectifs marketing sans mettre trop lourdement en péril la vitesse de vos pages. Avec notamment d’intéressantes réflexions délivrées par le Digital Ad Tech Manager de L’Oréal et plusieurs consultants spécialistes du sujet. Continuer la lecture de Tag manager & performance web chapitre 2 : une question de rigueur (et de coopération)

Optimisation de vos pages web : le Top 2018 des conseils Dareboost

Quels sont, parmi les nombreux conseils délivrés nos rapports d’analyse, ceux qui interpellent le plus celles et ceux qui ont testé leurs pages web ? Nous avons examiné les résultats de plus de 270.000 audits sur Dareboost et la manière dont les rapports générés par notre outil ont été consultés. Pour en ressortir un focus sur les bonnes pratiques les plus “cliquées” du moment. Continuer la lecture de Optimisation de vos pages web : le Top 2018 des conseils Dareboost

[Use Case] Quand Dareboost utilise les Custom Timings pour son propre site web

Bien que nous soyons des spécialistes de la performance Web, cela ne nous donne aucun super-pouvoir. Nous avons, nous aussi, besoin d’outils pour analyser nos sites et applications. Alors quand nous avons finalisé notre nouvelle fonctionnalité de Custom Timings, nous nous sommes bien sûr empressés de la tester sur Dareboost.com… Pour y trouver un intérêt immédiat. Continuer la lecture de [Use Case] Quand Dareboost utilise les Custom Timings pour son propre site web

Tag managers : quelle incidence sur la performance web ?

L’utilisation d’un système de Tag Management – comme Google Tag Manager ou TagCommander – pour gérer des fonctionnalités/scripts externes présents sur vos pages web revêt de multiples intérêts, notamment pour les services marketing. Côté performance web, l’impact de ces outils n’est pas neutre. Explications. Continuer la lecture de Tag managers : quelle incidence sur la performance web ?

Déployer CSP : une approche en 5 étapes

Peut-être avez-vous vu ce conseil chez Dareboost vous encourageant à mettre en place une politique de sécurité sur la provenance de vos ressources. Mais peut-être n’avez-vous pas encore franchi le cap. Pour vous aider à sauter le pas, je vous propose quelques conseils sur son déploiement, tirés de mon expérience.

Continuer la lecture de Déployer CSP : une approche en 5 étapes

API User Timing : la mesure de la performance plus pertinente que jamais avec les Custom Timings

Vous en avez peut-être rêvé : pouvoir mesurer exactement à quel instant une image s’affiche ou à quel moment un script en particulier s’exécute, et suivre cette mesure avec vos outils favoris. C’est possible, grâce à l’API User Timing, en positionnant des marqueurs partout où vous en avez besoin sur vos pages web ! Une fonctionnalité supportée par tous les navigateurs récents, et que Dareboost vous permettra bientôt d’exploiter à une tout autre échelle. Continuer la lecture de API User Timing : la mesure de la performance plus pertinente que jamais avec les Custom Timings

Meilleure UX et performances : JAMStack, la nouvelle donne du web statique

Générateurs de sites statiques, CMS « headless », plateformes d’intégration continue et de déploiement… depuis plusieurs années, une nouvelle gamme de solutions émerge dans le paysage des technologies web. Ces solutions contribuent à une tendance globale qui ressemble à un retour aux sources du Web. On parle de « La mouvance statique » ou de la « JAMStack » mais aucun de ces noms ne caractérise vraiment ce qui n’est pas moins qu’une nouvelle façon d’architecturer des applications web.

Continuer la lecture de Meilleure UX et performances : JAMStack, la nouvelle donne du web statique

Speed Index : tout savoir sur cet indicateur majeur de la performance web

C’est un credo chez Dareboost : pour rendre compte de la performance globale de vos pages web, il est nécessaire de s’appuyer sur plusieurs indicateurs. Toutefois, certains se montrent plus synthétiques et révélateurs que d’autres. Et à ce jour, nous considérons le Speed Index comme l’un des indicateurs les plus importants à analyser. Revenons sur les raisons qui font du Speed Index une mesure essentielle : que retranscrit cet indice ? Comment le calcule-t-on ? Comment interpréter correctement les valeurs obtenues ? Continuer la lecture de Speed Index : tout savoir sur cet indicateur majeur de la performance web

Différer les scripts pour accélérer le rendu

Les artistes ne sont pas les seuls à redouter les pages blanches, les internautes aussi. Leur frustration peut les pousser à abandonner votre site plus tôt qu’ils ou elles ne l’auraient voulu. Pour éviter ça, plusieurs techniques d’optimisation du rendu existent. Comme différer l’analyse et l’exécution des fichiers JavaScript. Continuer la lecture de Différer les scripts pour accélérer le rendu

Webmarketing & vitesse de chargement : (re)prenez le contrôle avec Dareboost

La vitesse de chargement est un critère essentiel au succès global de tout site web. À ce titre, le sujet concerne tous ses acteurs et a fortiori vous qui êtes en charge du webmarketing. Dans le 2e volet de ce billet, voilà 3 nouveaux arguments démontrant ce que Dareboost peut vous apporter sur la question. Continuer la lecture de Webmarketing & vitesse de chargement : (re)prenez le contrôle avec Dareboost

Le temps de chargement est mort !

Trop souvent le temps de chargement est source de discussions et de débats entre clients et prestataires, entre décideurs et équipes techniques.
S’il ne fait aucun doute de la nécessité de faire de la vitesse de chargement un sujet stratégique et d’y impliquer tous les acteurs de la chaîne de valeur d’un projet web, il est absolument nécessaire de choisir des indicateurs pertinents et stables. On ne peut améliorer que ce que l’on mesure, et cette mesure doit être fiable. Continuer la lecture de Le temps de chargement est mort !

Optimiser les images et réduire leur poids : formats, outils et RWD

« Réduisez le poids de la page » : voici l’un des conseils les plus couramment délivrés dans les rapports Dareboost. Selon les tendances mesurées par HTTP Archive, les images représentent 53 % du poids moyen des pages web, qu’elles soient consultées sur ordinateurs de bureau ou périphériques mobiles. Lorsque vous cherchez à réduire le poids de votre page Web, l’optimisation des images remonte donc logiquement dans le top de vos priorités.

Continuer la lecture de Optimiser les images et réduire leur poids : formats, outils et RWD

Webmarketing : (re)prendre le contrôle sur la vitesse de votre site web avec Dareboost

La vitesse de chargement est un critère essentiel au succès global de tout site web. Le sujet concerne tous ses acteurs et a fortiori vous qui êtes en charge du webmarketing. En quoi la solution Dareboost peut-elle vous aider dans votre quête de meilleurs résultats ? Réponse en six points essentiels et en deux épisodes. Voici le premier.

Continuer la lecture de Webmarketing : (re)prendre le contrôle sur la vitesse de votre site web avec Dareboost

Fiabiliser les connexions sécurisées avec HSTS (HTTP Strict Transport Security)

Si vous fréquentez notre blog, il ne vous aura pas échappé qu’il est urgent de passer au HTTPS. L’échéance est d’autant plus forte que les géants du Web ont déjà tiré leurs coups de semonce en affichant des alertes sur certaines pages en HTTP dans Google Chrome et Mozilla Firefox. Bientôt, ce seront tous les formulaires qui seront concernés.

Cela étant dit, avoir un site accessible en HTTPS ne suffit pas à basculer l’ensemble de son trafic automatiquement vers cette nouvelle version. Continuer la lecture de Fiabiliser les connexions sécurisées avec HSTS (HTTP Strict Transport Security)

Sécurisation des cookies : passez au niveau supérieur avec l’attribut SameSite

Après avoir lu notre précédent billet dédié à la sécurisation des cookies, vous utilisez peut-être déjà les instructions Secure et HttpOnly. Pour rappel, la première permet d’empêcher l’envoi d’un cookie sur une page non sécurisée (http simple) alors que la seconde empêche l’utilisation du cookie côté client (eg: Javascript).
Passons maintenant à l’étape supérieure de la sécurisation de vos cookies avec une nouvelle instruction : SameSite, qui permet de mitiger les risques liés aux attaques de type CSRF (Cross-Site Request Forgery) et XSSI (Cross-Site Script Inclusion). Continuer la lecture de Sécurisation des cookies : passez au niveau supérieur avec l’attribut SameSite

Sécurité et performance de vos liens target=_blank avec rel=noopener

Il y a un an presque jour pour jour, nous annoncions une mise à jour du référentiel de bonnes pratiques de notre service d’analyse de sites web. Cette mise à jour intégrait un point de contrôle sur les attributs des liens hypertextes visant à provoquer l’ouverture du lien dans une nouvelle fenêtre ou onglet (target="_blank").

La dernière version de Firefox a désormais rejoint Google Chrome en supportant l’attribut rel="noopener", l’une des solutions que nous fournissions. Prenons donc le temps de revenir sur cette recommandation, que nous avons apportée pour des objectifs de sécurité mais qui répond également à des enjeux de performance. Continuer la lecture de Sécurité et performance de vos liens target=_blank avec rel=noopener