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.

Sécurisez vos cookies (instructions Secure et HttpOnly)

Les cookies sont omniprésents sur le web et permettent aux éditeurs de stocker un certain nombre d’informations directement sur le navigateur de l’internaute. Notamment utilisés pour identifier la session de l’utilisateur et permettre au serveur de reconnaître celui-ci tout au long de sa navigation, les cookies contiennent souvent des informations personnelles et/ou sensibles. Il convient donc de les protéger en conséquence. Continuer la lecture de Sécurisez vos cookies (instructions Secure et HttpOnly)

HTTP/2 : la transition est en marche ! Quels changements pour le développeur front-end ?

Nous l’avons annoncé il y a quelques semaines : notre outil de test de performance est maintenant pleinement compatible HTTP/2 et notre référentiel de bonnes pratiques de performance a été adapté pour prendre en compte les particularités de ce protocole. Je vous propose aujourd’hui de revenir en détail sur ce qui a motivé la naissance de HTTP/2, les changements majeurs apportés, mais aussi les différentes bonnes pratiques HTTP/1 dont nous allons devoir nous défaire ! Continuer la lecture de HTTP/2 : la transition est en marche ! Quels changements pour le développeur front-end ?

Eviter l’utilisation de document.write, surtout pour l’injection de scripts externes

Déjà pointée du doigt par les outils historiques d’audit de la performance front-end comme Google Page Speed (et évidemment Dareboost plus récemment), l’utilisation de l’instruction document.write pour injecter un script pose des problèmes importants pour le temps de chargement des sites web. A l’occasion d’une mise à jour de Chrome, qui fait revenir ce sujet dans l’actualité du moment, penchons nous sur les problèmes posés et les alternatives à envisager.

Continuer la lecture de Eviter l’utilisation de document.write, surtout pour l’injection de scripts externes

Performance et qualité web : le corrigé du Quiz Dareboost 2016

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. Continuer la lecture de Performance et qualité web : le corrigé du Quiz Dareboost 2016

Content Security Policy : sécurité pour votre site, mais pas seulement

La politique de sécurité des contenus vous permet de protéger votre site web des effets de nombreuses vulnérabilités en lien avec l’injection de contenus. Découvrons pourquoi et comment utiliser ce simple en-tête HTTP, pourtant très puissant, et aujourd’hui largement supporté par les navigateurs web. Continuer la lecture de Content Security Policy : sécurité pour votre site, mais pas seulement

Single Point of Failure : votre site web indisponible à cause des scripts externes ?

Vous avez peut-être déjà entendu parlé de SPOF (Single Point Of Failure), que l’on pourrait traduire par “point unique de défaillance”. Mais saviez-vous que cette notion, qu’on applique souvent aux infrastructures réseaux, est également présente en matière de développement front-end ? Imaginez-vous que votre site puisse être dépendant du bon fonctionnement de Twitter ou encore de Facebook ?

Continuer la lecture de Single Point of Failure : votre site web indisponible à cause des scripts externes ?

Passer au HTTPs est nécessaire, et pas uniquement pour le SEO

(article mis à jour le 18/08/2017)

En avril 2015, je vous avais proposé un article (Chrome, Firefox et recherches Google : passage en force du HTTPS) sur l’accélération à venir des migrations vers HTTPs, en détaillant les annonces de géants du web qui poussent pour l’adoption de la version sécurisée du protocole.
Depuis, en un peu moins d’un an, la proportion de requêtes utilisant HTTPs est passée de 15% à 25% (source HttpArchive).

Je vous propose aujourd’hui de faire un point sur les différentes motivations pour passer au HTTPs, dont certains aspects peu connus, car outre l’apport évident en matière de sécurité pour les internautes, c’est en passe de devenir une nécessité pour le bon fonctionnement de votre site web! Continuer la lecture de Passer au HTTPs est nécessaire, et pas uniquement pour le SEO

Content Performance Policy : une étape supplémentaire pour un web plus rapide ?

Cet article est un peu particulier, car je vais aujourd’hui vous parler d’une proposition qui pourrait devenir une norme, et non pas d’une bonne pratique déjà existante.

Nous vous recommandons depuis plus d’un an dans nos rapports d’audit web l’utilisation de Content Security Policy pour sécuriser davantage vos sites web, notamment vis-à-vis d’attaques XSS.
L’idée de CSP est de permettre aux éditeurs de sites web de mettre en place une politique de sécurité, qui sera ensuite appliquée par le navigateur web. Cela permet notamment d’interdire l’utilisation de fichiers JavaScripts non autorisés par l’éditeur du site, ou encore de forcer l’utilisation du HTTPs pour les ressources de la page.

Tim Kaldec et Yoav Weiss se sont donc inspirés de ce mécanisme, pour le transposer au sujet de la performance web, en proposant un nouvel en-tête HTTP (Content Performance Policy) permettant de déclarer précisément le degré de compatibilité d’une page avec certaines bonnes pratiques de performance web. À la charge ensuite du navigateur web, de forcer l’application des bonnes pratiques annoncées qui ne seraient pas respectées par l’éditeur. Continuer la lecture de Content Performance Policy : une étape supplémentaire pour un web plus rapide ?

Les conseils de PayPlug pour votre tunnel d’achat

Sur ce blog, nos avons à cœur de vous parler des techniques d’optimisation de vos pages web pour les accélérer et améliorer la conversion.

Nous sortons un peu de l’ordinaire avec cet article, nous accueillons en effet la startup PayPlug (éditrice d’une solution de paiement), qui vous propose ici un rappel de l’essentiel à ne pas oublier dans vos tunnels d’achat.
Continuer la lecture de Les conseils de PayPlug pour votre tunnel d’achat

Comment utiliser les fontes de caractères efficacement ?

Les fontes de caractères permettent de personnaliser vos pages web. Leur utilisation peut cependant engendrer des problèmes en termes d’expérience utilisateur. Ces fichiers sont en effet nécessaires à l’affichage de vos contenus textuels, et leur chargement présente plusieurs enjeux que nous allons ici évoquer.

Continuer la lecture de Comment utiliser les fontes de caractères efficacement ?

Sécuriser une iframe avec l’attribut sandbox

Au fil du temps, nous intégrons de plus en plus de contenus, provenant parfois de partis tiers (widgets pour les réseaux sociaux, publicités, etc). Deux conséquences en découlent : les pages web ne cessent de s’alourdir, et nous affichons aux internautes des contenus que nous ne pouvons pas maîtriser complètement.

Certains de ces contenus externes sont intégrés par l’intermédiaire de la balise <iframe>, et doivent faire l’objet d’une attention particulière en terme de sécurité. Pour limiter les risques, le W3C a ainsi ajouté l’attribut sandbox dans sa spécification du HTML5, qui permet de restreindre les actions possibles dans l’iframe sur les principaux navigateurs récents.

la sandbox protège vos iframes

Continuer la lecture de Sécuriser une iframe avec l’attribut sandbox

Comment choisir son hébergeur : performance et qualité de service

L’hébergement est un élément clé à la réussite d’un site. Non seulement c’est un paramètre qui peut influencer significativement le temps de chargement de votre site web et donc votre succès commercial, mais un hébergeur est aussi un partenaire sur lequel vous devez pouvoir compter en cas de crise ! Continuer la lecture de Comment choisir son hébergeur : performance et qualité de service

Mesure de vitesse de vos pages : Start Render, Visually Complete et SpeedIndex

Il y a quelques jours, nous évoquions sur ce blog les différentes mesures auxquelles l’API Performance Timing permet d’accéder.

Je vous propose aujourd’hui de découvrir d’autres données essentielles pour évaluer la performance web, davantage centrées sur le ressenti utilisateur plutôt que sur la couche technique.
Continuer la lecture de Mesure de vitesse de vos pages : Start Render, Visually Complete et SpeedIndex

Mesurer le temps de chargement des pages web avec les Performance Timings

Il y a quelques semaines, nous apprenions le retour du support de l’API Navigation Timing par Safari. Cette API, accessible en JavaScript et aujourd’hui disponible sur les principaux navigateurs web, implémente une recommandation du W3C. Elle permet de consulter des métriques indispensables à la compréhension des différents temps forts du chargement de vos pages, notamment via les Performance Timings.

Continuer la lecture de Mesurer le temps de chargement des pages web avec les Performance Timings

Chrome, Firefox et recherches Google : passage en force du HTTPS

Pour rappel, le HTTPS (HTTP Secure) est, comme son nom l’indique, la version sécurisée du protocole HTTP. Le HTTPS vise à garantir la confidentialité et la sécurité des échanges : la communication étant chiffrée le protocole protège des écoutes clandestines, mais aussi d’une altération des données. Depuis quelques années, son utilisation se démocratise (en avril 2015, 7 fois plus de requêtes qu’en 2011 se font via HTTPS). 

Mais d’ici la fin de l’année, on devrait connaître une intensification massive de cette tendance.
Continuer la lecture de Chrome, Firefox et recherches Google : passage en force du HTTPS

Définir un budget de performance web

Update : nous avons depuis ce billet publié un article complet sur les budgets de performance


Il y a quelques mois je suis tombé sur l’article de Tim Kadlec, que j’avais trouvé très pertinent. Tim a très gentiment accepté que nous le traduisions ici, pour contribuer au développement de la culture de la performance web auprès du public francophone.
L’article original : Setting a Performance Budget (janvier 2013)
Continuer la lecture de Définir un budget de performance web

Single Page Apps : un risque de boulimie (AngularJS)

Un chargement initial qui devient coûteux.

AngularJS

Le concept de Single Page Application, dont la mise en oeuvre est l’un des usages les plus classiques d’AngularJS, présente rapidement un défaut majeur. En effet, dès lors qu’on développe une application un minimum conséquente, la quantité de Javascript et éventuellement de CSS nécessaire au premier chargement devient un frein majeur. On se retrouve donc à pénaliser fortement la première expérience de l’internaute.

Continuer la lecture de Single Page Apps : un risque de boulimie (AngularJS)

La minification CSS, tout ce que vous vouliez savoir

Une optimisation web souvent simple à mettre en place porte sur les fichiers CSS. En effet, il est généralement possible de réduire le poids de votre site web en minifiant vos “Cascading Style Sheets”.

L’article suivant a pour objectif de vous présenter le principe de la minification et introduit quelques outils populaires pour mettre en place cette technique sur votre site.

Continuer la lecture de La minification CSS, tout ce que vous vouliez savoir