Articles avec l'étiquette ‘sélection’

Sélection de liens #webperf n°17

Lubos Kmetko de Xfive a analysé les performances des 30 gagnants des Awwwards en juin 2016 et a sélectionné un top 10 dont les 3 premiers sont Google Play Redesign, Seedlip et Waaark. Comme quoi on peut faire un site classe et performant !

L’Arcep a sorti son observatoire des marchés des communications électroniques en France pour le 1er trimestre 2016. Ce rapport renseigne, entre autres, sur l’évolution des usages des internautes français et la vitesse de leur connexion à Internet, en fixe et mobile.

Jean-Pierre Vincent et Gaël Métais ont sorti chacun un script sur le thème des performances Web. Le premier propose un script JS qui analyse la charge CPU utilisée par chaque domaine tiers d’une page web. Le second offre un script JS baptisé UXFirst qui permet de détecter les utilisateurs disposant d’une connexion lente afin de modifier l’interface et enlever les éléments non importants.

Un retour d’expérience d’Artur Bergman, fondateur et CEO du CDN Fastly, sur une attaque par déni de service (DDoS) ciblée sur leur infrastructure. Sa présentation revient notamment sur le côté psychologique et les émotions ressenties lors de ce genre situation très stressante.

10 choses que vous ne savez pas forcément sur Webpagetest par Dean Hume sur son blog. Et si vous ne connaissez pas cet outil de test de Patrick Meenan, je ne peux que vous le conseiller !

Facebook permet depuis quelques mois de publier une vidéo live depuis son smartphone. Quelle est l’infrastructure derrière cette fonctionnalité et, surtout, comment gérer 800 000 spectateurs simultanés, c’est ce que nous présente High Scalability.

Si vous souhaitez diffuser des ressources pré-compressées avec Brotli via Varnish, voici un article qui explique comment configurer vos VCLs.

Selon l’analyse de Konbini du rapport Akamai qui évalue l’évolution des infrastructures de connexion à Internet dans le monde, la France serait mauvaise élève et se place à la 45e place mondiale avec une vitesse moyenne de 9,9Mps.

Colt McAnlis montre les méta-données en XML enregistrées par Photoshop dans vos images PNG et JPEG qui augmentent leur poids. Même si vous utilisez la fonction « Enregistrer pour le Web », il vous faut un autre outil pour optimiser le poids de vos images.

Non seulement les scripts tiers peuvent grandement pénaliser les performances de vos sites Web, mais ils peuvent aussi causer des problèmes de sécurité et de vie privée. CSS Tricks énumère les dangers de ces scripts tiers.
Billy Hoffman a présenté une conférence au Velocity de Santa Clara sur ce thème et explique comment analyser et contrôler les scripts tiers sur votre site.

Antoine Fauchié présente 4 bonnes raisons de faire du web hors connexion. Meilleurs performances, consommation des appareils réduite, vie privée, … de bonnes raisons pour nous tourner vers le Offline First.

Ariya Hidayat a migré son site utilisant WordPress vers un site statique géré par Hugo et nous présente les avantages de ce changement.

Les avantages de créer un site directement avec AMP par Paul Bakaus, il explique qu’AMP supporte très bien les media queries et est mobile-first par défaut. A l’origine, les ingénieurs d’AMP recommandaient de créer une version alternative de vos pages en AMP mais seulement parce que la technologie n’était pas encore assez développée.

Par où commencer pour optimiser les performance de votre site Web ? Matt Shull explique quelques notions fondamentales pour bien comprendre comment mesurer les performance et appliquer des optimisations.

Et, pour terminer, un nouvel outil perf-tool en JS de Devbridge pour analyser les performances de vos pages Web qui fait la synthèse de 3 outils : w3cjs (erreurs HTML, …), Google PageSpeed Insights (recommandations webperf) et dev-perf (erreurs 404, balises img sans dimensions, …).

 

Vous êtes de plus en plus nombreux à lire cette sélection de liens, n’hésitez pas à me faire un retour autant sur le fond que sur la forme pour que je puisse l’améliorer ! Je serai ravi d’en discuter avec vous par twittermail ou juste après via un commentaire.

Sélection de liens #webperf n°16

Pour commencer, Stephen Ludin d’Akamai explique les désillusions qu’apporte parfois HTTP/2 et les facteurs à prendre en compte avant de migrer sur cette nouvelle version.

Une proposition intéressante de Patrick McManus pour inclure une directive immutable dans l’entête Cache-Control. Déjà présent dans la version 49 de Firefox et limité aux requêtes HTTPS, Facebook annonce que cette fonctionnalité permettrait d’améliorer 20% des requêtes sur des ressources statiques en évitant une réponse 304 Not Modified.

Etes-vous sûr de tout connaître sur la balise <script /> ? Zack Bloom de Eager fait le point sur les fonctionnalités que vous pouvez utiliser, tels que le nouvel attribut integrity pour protéger le contenu des fichiers ainsi que async et defer pour contrôler l’exécution des scripts.

Si vous utilisez le framework CSS Foundation, Zurb propose quelques techniques pour optimiser votre site et améliorer les temps de chargement.

Pour connaître la qualité des connexions sur le territoire français, l’Arcep procède à 600 000 mesures annuelles dans 1 000 lieux différents pour compléter et vérifier les informations des opérateurs. Sur 2016, l’indicateur du temps acceptable de chargement d’une page web est passé de 30 à 10 secondes.
C’est toujours mieux mais on peut facilement imaginer la réaction des utilisateurs lorsqu’une page met près de 10 secondes à se charger, surtout sur le rythme cardiaque.

Vous avez besoin d’exemples et d’études de cas pour prouver l’impact de l’optimisation des performances sur l’expérience utilisateur ? WPO Stats centralise vidéos de conférences et articles sur ce sujet.

Une étude de Dynatrace classe les plateformes marchandes françaises parmi les très bons élèves en termes de temps de réponse moyen. Il semblerait que les acteurs français aient pris en considération l’importance des performances car ce temps de réponse moyen à diminué de 20% au cours des 12 derniers mois, permettant d’approcher du seuil psychologique de 3 secondes après lequel 46% des visiteurs quittent le site.
Au sein de ces acteurs français, Fasterize sort son classement de mai des ténors du e-commerce français (qui passe de 20 à 40 sites évalués) où 6 nouveaux entrants détrônent Leroy Merlin avec de très bonnes performances.

 

Vous êtes de plus en plus nombreux à lire cette sélection de liens, n’hésitez pas à me faire un retour autant sur le fond que sur la forme pour que je puisse l’améliorer ! Je serai ravi d’en discuter avec vous par twittermail ou juste après via un commentaire.

Sélection de liens #webperf n°15

Pour commencer, un retour d’expérience de Chris Flannagan qui a optimisé son site WordPress ce qui lui a permis de diminuer de 20% son taux de rebond et de doubler ses ventes.

Un peu perdu entre les preconnect, preload, prerender et prefetch ? Addy Osmani à créé un cheat-sheet simple mais efficace pour vous y retrouver rapidement. Et, pour aller plus loin, retrouvez les slides de Ilya Griforik sur ce thème ainsi qu’un article sur preload de Smashing Magazine.

Damien Jubeau de Dareboost est intervenu sur le Journal du Net pour nous expliquer comment surveiller la performance web de son site Internet.

Pour Dion Almaer, nous avons un problème d’obésité sur le Web et cela continue à empirer. Des régimes existent mais ce qui est primordial c’est d’encourager et de soutenir toutes les initiatives, c’est un travail de longue haleine et de tous les jours.

Stefan Zager a fais quelques tests avec les nouveaux passive event listeners (sorti dans la version 51 de Chrome), ils permettent de ne pas bloquer le scroll lorsque le navigateur attend le résultat des fonctions attachés à l’événement et, pour lui, c’est très efficace (et déjà en développement sur Firefox) !

Et si vous souhaitez améliorer le framerate de vos pages, Freddy Harris a donné une conférence très intéressante sur la performance des animations Web lors du Best of Web 2016, les slides sont disponibles.
Sarah Dresner a aussi donné une conférence sur le même thème mais plus axée sur les animations SVG lors de la Smashing Conf NY.

Sam Affron fait un point sur l’algorithme de compression Brotli (le nouveau Pied Piper ?) et ses avantages. Pour lui, les résultats sont très prometteurs mais sa mise en place est complexe (HTTPS nécessaire, limité à Chrome et Firefox, peu de paquets officiels, …).

Fasterize a sorti un nouveau livre blanc Décrypter et améliorer sa webperf, c’est un bon document pour bien comprendre toute l’importance des performances Web sur votre site et quels sont les leviers qui permettent de l’optimiser.

 

Vous êtes de plus en plus nombreux à lire cette sélection de liens, n’hésitez pas à me faire un retour autant sur le fond que sur la forme pour que je puisse l’améliorer ! Je serai ravi d’en discuter avec vous par twittermail ou juste après via un commentaire.

Sélection de liens #webperf n°14

Optimisez vos données JSON en les tournant de 90°, c’est ce que conseille Malc Hollingsworth pour réduire le volume à transférer lors d’appels à une API. Sur ses données d’exemple et en ajoutant une compression GZIP, il parvient à réduire la taille de 90%.

Rudy Viard nous explique pourquoi améliorer la vitesse de son site en montrant son retour d’expérience en utilisant l’outil Fasterize. Concrètement, sans optimisation, il perd 25% de pages vues et ses utilisateurs restent moins longtemps sur son site, et donc il fait moins de ventes.

Pour garantir de bonnes performances, il faut éviter au maximum les Single Point of Failure, notamment lorsqu’ils sont liés à des scripts externes. Dareboost fait le point sur cette problématique, reprend quelques précédents et indique comment les éviter.
Toujours chez Dareboost, quelques nouveautés apparues ces dernières semaines : améliorations de la liste des rapports enregistrés, suivi des contenus par type et finalisation d’une sonde de test en Chine.

Nous allons peut-être bientôt pouvoir utiliser Chrome en mode headless, c’est à dire sans interface graphique (comme PhantomJS).

Dans la série des vidéos Google Developers, Colt McAnlis présente un très bon rappel sur toutes les techniques pour réduire la taille de vos ressources. Et si vous souhaitez réduire la taille de vos images, fasterImage le fera pour vous simplement et automatiquement.

La nouvelle version de jQuery est là ! La v3.0 propose une version slim qui sera allégée des fonctions Ajax, les effets et le code déprécié. Cette version fait 6ko de moins (donc 23,6ko au final, merci pour la correction Gaël!) avec une compression Gzip.

Gaël Métais a créé deux scripts utilisant les Service Worker pour  accéder aux entêtes des requêtes de la page (pratique si vous monitorez votre site en JS) et pour supprimer les cookies de certaines ressources.  Il précise bien que ces scripts sont encore au stade expérimental, mais ils démontrent bien la puissance de ces Service Worker.

Chaque mois, pour le Journal du Net, Fasterize classe par rapidité les sites e-commerce les plus visités en France et ils ont sorti un classement général pour la saison 2015-2016. Les trois premiers sont Ikea, La Redoute et Leroy Merlin (qui a trusté la première place toute l’année).

 

Vous êtes de plus en plus nombreux à lire cette sélection de liens, n’hésitez pas à me faire un retour autant sur le fond que sur la forme pour que je puisse l’améliorer ! Je serai ravi d’en discuter avec vous par twittermail ou juste après via un commentaire.

Sélection de liens #webperf n°13

Fasterize lance son extension chrome après un premier Hackathon interne. Il permet d’avoir des informations sur une page si elle optimisée par leur service, utile si vous êtes client chez eux !
Ils ont aussi publié un nouveau livre blanc sur les impacts de la webperf sur les stratégies digitales.

Il fallait s’y attendre, les utilisateurs d’iPhone pourront dès maintenant profiter de la technologie AMP sur l’application Google pour iOS et auront donc un accès quasi-instantané aux pages optimisées.

Google a aussi lancé un nouvel outil pour tester les performances d’une page Web, en réunissant un résumé du PageSpeed Insights et le test de compatibilité mobile. Mais il semblerait qu’il ne suive pas ses propres recommandations car son outil affiche un mauvais score sur son propre test (mais cela a été corrigé rapidement depuis, l’honneur de Google est sauf…).
Et, selon un tweet de Gary Illyes, la prochaine mise à jour de l’algorithme de Google prendrait en compte le PageSpeed comme critère de ranking. On savait déjà que Google s’intéressait de près aux performances des sites crawlés, ça devient maintenant un point crucial pour bien positionner son site dans les résultats de recherche.

Sur son site bitsofcode, Ire Aderinokun nous montre en vidéo comment mettre en place un Service Worker et profiter d’un cache basique.

La célèbre conférence Velocity qui se déroulera début Novembre à Amsterdam va bientôt ouvrir son service de réservation. Enregistrez-vous sur leur site pour recevoir une offre spéciale et être notifié dès l’ouverture.

Mark Nottingham fait le point sur le protocole HTTP, les versions 1.1 et 2, et son possible avenir le « HTTP/next » (avec UDP).

Andrew Neilson a présenté au récent LDNWebPerf comment les « PerfOps » ont révolutionné les performances du site Mark & Spencer (avec les slides). Il revient sur l’origine de cette équipe et comment ils testent et surveillent en temps réel les performances du site (et voient l’impact des services tiers, des mailings et des éclipses solaires !).

 

Vous êtes de plus en plus nombreux à lire cette sélection de liens, n’hésitez pas à me faire un retour autant sur le fond que sur la forme pour que je puisse l’améliorer ! Je serai ravi d’en discuter avec vous par twittermail ou juste après via un commentaire.

Sélection de liens #webperf n°12

Comment et pourquoi compresser ses ressources avec Brotli, le nouvel algorithme créé par deux ingénieurs de chez Google. Wonderfall nous illustre les avantages par rapport à deflate (gzip) et nous explique comment l’installer sur un serveur nginx.

Microsoft a lancé le développement des Services Workers au sein d’Edge ! Déjà présents sur Firefox, Chrome et Opera, cette technologie apporte des possibilités très intéressantes pour améliorer les performances et gérer le mode offline.
Une infographie de Salvador de la Puente González présente son fonctionnement et les différentes étapes de son cycle de vie.

Mettez votre site au régime et suivez ses calories avec l’extension Chrome de Browser Diet qui permet de définir un budget de performance puis de calculer les gains et pertes.

Des nouvelles fonctionnalités sont apparues sur le projet AMP dont notamment la possibilité de créer un menu qui s’ouvre sur le côté de l’écran (<amp-sidebar>), de classer le contenu en parties avec un accordéon (<amp-accordion>) et des boutons de partage vers les réseaux sociaux (<amp-social-share>). Il y a de nombreuses fonctionnalités en cours de test si vous avez envie de voir de quoi sera capable ce projet dans le futur.

Un document de Kenji Baheux et Takashi Toyoshima fait le point sur le comportement de Chrome lors des rechargements via une action de l’utilisateurs ou via une instruction Javascript, et c’est n’est pas si simple !

Réduisez la taille de vos fichiers CSS et guérissez de la CSSitis avec l’aide de CSS Purge. Ce site contient un grand panel de chiffres et données sur le poids et nombre d’instructions présents sur les différents sites et frameworks CSS.

Vous êtes de plus en plus nombreux à lire cette sélection de liens, n’hésitez pas à me faire un retour autant sur le fond que sur la forme pour que je puisse l’améliorer ! Je serai ravi d’en discuter avec vous par twittermail ou juste après via un commentaire.

Sélection de liens #webperf n°11

Le Journal du Net (en partenariat avec Fasterize) sort le classement webperf du e-commerce en France pour le mois d’avril. Leroy Merlin est toujours en tête, Zalando arrive second et fait une grosse progression en améliorant de près de 500 ms son Start Render.

C’était la Google I/O 2016 la semaine dernière et, comme toujours, l’occasion de retrouver de nombreuses présentations de qualité. Paul Irish et Sam Saccone ont fais une démo de deux audits de performance sur une page web en utilisant principalement les outils disponibles dans Chrome.

Dareboost se lance en Inde ! Vous pouvez dès à présent lancer vos tests de performances avec leur outil depuis Chennai. Et on se rend vite compte de l’importance d’optimiser les performances pour les pays en voie de développement car, en particulier en Inde, charger 15 pages web leur coûte 1 heure de salaire, 17 heures pour 500Mo.

Quel intérêt de prendre en charge les navigateurs n’exécutant pas JavaScript, tout le monde a JavaScript, pas vrai ? Stuart Langridge nous démontre qu’il y a de nombreux cas où vos scripts JavaScript ne sont pas disponibles et vous invite à utiliser l’amélioration progressive.

Vous avez mis en place un outil d’A/B Testing pour améliorer votre taux de conversion ? Bonne idée ! Mais saviez-vous que, si le script est installé côté client, vous pouvez dégrader vos performances et en théorie diminuer votre taux de conversion

Une étude de Secret Media a montré que les contenus publicitaires, en France, représentent 70% du temps de chargement des pages et 39% de la bande passante sur les top 25 des sites médias. On comprend mieux l’engouement pour les ad-blockers !

Une extension pour Chrome pour obtenir rapidement un aperçu des performances d’une page Web. Il est basé sur l’API Navigation Timing et affiche une barre de couleur en bas de la fenêtre de Chrome avec les principaux temps de chargement.

Dropbox est passé à HTTP/2 et nous livre leurs observations : une bande passante réduite grâce à une compression efficace des entêtes mais une latence plus élevée sur les requêtes POST (ce qui semble venir d’une implémentation spécifique à Nginx). Ils ont utilisé des outils  proposés par Cloudflare pour étudier et déboguer les problèmes ainsi que l’outil net-internals de Chrome.

MaxCDN a invité Peter Hedenskog (le créateur de l’excellent sitespeed.io) et Tobias Lidskog a présenter leur nouvelle alternative à YSlow : The Coach. C’est un outil en ligne de commande qui propose une liste de règles et recommandations pour optimiser une page Web avec un audit détaillé.

 

Vous êtes de plus en plus nombreux à lire cette sélection de liens, n’hésitez pas à me faire un retour autant sur le fond que sur la forme pour que je puisse l’améliorer ! Je serai ravi d’en discuter avec vous par twittermail ou juste après via un commentaire.

Sélection de liens #webperf n°10

Microsoft a sorti son Windows Performance Toolkit qui permet d’enregistrer et d’analyser le comportement d’une application (pour ne pas dire Edge) en termes de performances (CPU, GPU, IO, …) et aller plus loin qu’avec les Developer Tools. Des exemples de pages avec des problèmes de performance sont proposés pour se faire la main avec l’outil et vous pouvez revoir la présentation de Todd Reifsteck qui le présente au Edge Web Summit.

Les personnes qui s’intéressent au SEO savent très bien que les performances d’une page ont un impact positif sur le ranking chez Google (et sûrement sur les autres moteurs). Sylvain Deaure nous explique ce qu’est le TTFB, comment le mesurer (sous Linux, Windows, avec PHP et dans les logs) et donne quelques petites pistes pour l’optimiser.

L’API PerformanceObserver fait son entrée dans Chrome Canary et permet d’obtenir des notifications dès l’enregistrement de nouvelles données de performances plutôt que d’utiliser le polling.

Personne ne s’intéresse à la vitesse de votre site ! La perception de sa vitesse par contre est primordiale pour vos utilisateurs, et c’est ce que nous montre Paul Bakaus dans sa conférence au Fronteers.

La prochaine fois que vous écrirez des sélecteurs CSS, pensez à cette explication de Raymon Schouwenaar qui montre que les navigateurs lisent vos styles de droite à gauche. Il propose d’utiliser la technique BEM (Block, Element, Modifier) pour améliorer les temps de recherche de sélecteurs dans les pages.

Colt McAnlis continue de nous expliquer les entrailles des différents formats d’image. Cette fois-ci, son article nous propose de réduire la taille de vos fichiers JPG avec différentes techniques. Si vous souhaitez le faire de manière automatique, fasterImage est le service qu’il vous faut !

Une sélection de liens #webperf sans parler de HTTP/2, c’est comme de faire une requête sans envoyer d’entêtes, alors retrouvez l’article de Pete Campbell qui nous explique pourquoi nous devons passer à ce nouveau protocole et comment le faire.

 

Vous êtes de plus en plus nombreux à lire cette sélection de liens, n’hésitez pas à me faire un retour autant sur le fond que sur la forme pour que je puisse l’améliorer ! Je serai ravi d’en discuter avec vous par twittermail ou juste après via un commentaire.

Sélection de liens #webperf n°9

On commence par une bonne nouvelle sur WordPress : pour ceux qui utilisent beaucoup la partie administration, la version 4.6 prévoit de ne plus utiliser la police Open Sans en faveur des polices systèmes. Cette police était chargée depuis les serveurs de Google. Ce changement aura un léger impact sur les performances mais, si on considère que WordPress représente près du quart des sites dans le monde, imaginez l’économie en bande passante que cela représente !

Pour rester sur le sujet des WebFonts, Nate Berkopec nous explique  comment il a rendu le site rubygems.com 10 fois plus rapide en réduisant le nombre de polices utilisées et en passant par le CDN de Google.

Nik Molnar de Gooroo nous montre comment une simple astuce peut augmenter les performances de votre site Web. Il conseille simplement d’activer le protocole TLS (ou anciennement SSL) pour profiter de toutes les améliorations liées à HTTP/2 (qui dépend de TLS,  même si ce n’est théoriquement pas obligatoire).
Si vous souhaitez aller plus loin avec HTTP/2, Kinsta a sorti son « guide ultime » qui reprend tous les aspects de ce protocole.

Les performances web sont intimement liées au ressenti des utilisateurs et il est essentiel de pouvoir afficher des interfaces fluides. Val Head présente sur son blog que les temps de réponse des animations entre 200ms et 500ms sont idéaux selon le nombre d’éléments en interaction.

Et comment améliorer la fluidité de ces animations ? Rick Byers a enregistré une vidéo pour débugger ce type de problème sur Chrome. Les outils proposés par ce navigateur sont très pratiques pour ce genre de tâche !

Deux nouveaux outils pratiques pour la webperf : un visualisateur de waterfall HAR en SVG (un rappel sur ce qu’est un waterfall) et un widget créé par les labs du Financial Times pour afficher des audits de performances, de sécurité et d’accessibilité sur une page.

 

Vous êtes de plus en plus nombreux à lire cette sélection de liens, n’hésitez pas à me faire un retour autant sur le fond que sur la forme pour que je puisse l’améliorer ! Je serai ravi d’en discuter avec vous par twittermail ou juste après via un commentaire.

Sélection de liens #webperf n°8

Un menu hamburger servi en 60fps ? Gokul Krishh nous fournit le script JS et un exemple simple pour l’utiliser sur votre site Web.

Le protocole HTTP/2 est un sujet chaud en ce moment, Voxxed revient sur les bénéfices techniques et les risques de mettre en place cette technologie. Aussi, Cloudflare annonce le support du Server Push pour tous ses clients (70% des sites utilisant HTTP/2 passent par leurs services). Si vous ne savez pas ce qu’est le Server Push, Shimmer Cat fait le tour de cette technique.

Clark Gredoña d’Instagram explique, dans sa conférence au F8, comment les performances pilotent l’utilisation de leur application et explique (entre autres) qu’après la mise en place de HTTP/2, la latence a chuté de 27% et a augmenté l’activité quotidienne de 0.3%.

Et pour terminer sur HTTP/2, isthewebhttp2yet.com permet de visualiser la taux d’adoption de ce nouveau protocole et de suivre l’évolution des 2 premiers millions de sites sur Alexa. Le vôtre est peut-être dedans ?

De quoi parle-t-on quand on parle de performances web ? Les slides de la présentation de Patty Toland à la Smashing Conference de San Francisco. Un très bon résumé de la situation des webperfs aujourd’hui.

Jeremy Wagner nous explique comment tirer parti du format WebP et l’utiliser avec vos images. Sur le même sujet, Colt McAnlis revient sur le format JPEG et nous présente son fonctionnement.
Si vous souhaitez optimiser facilement vos images (et gérer automatiquement le format WebP), vous pouvez utiliser le service fasterImage qui propose un forfait gratuit de 100Mo par mois.

fasterImage a d’ailleurs dépassé les 4To de bande passante économisée par ses utilisateurs !

Enfin, saviez-vous que votre navigateur, les serveurs Web et votre cache ont souvent des discussions passionnantes pour économiser votre bande passante ? C’est ce que met en scène Jake Archibald pour expliquer les bonnes pratiques et pièges du cache et du max-age.

 

Vous êtes de plus en plus nombreux à lire cette sélection de liens, n’hésitez pas à me faire un retour autant sur le fond que sur la forme pour que je puisse l’améliorer ! Je serai ravi d’en discuter avec vous par twittermail ou juste après via un commentaire.