Archive de la catégorie ‘Liens’

Sélection de liens #webperf n°6

Soasta liste 22 statistiques à propos des performances web sur mobile (principalement pour les USA et le monde), on apprend par exemple qu’entre 2014 et 2015 les visites via mobile ont augmenté de 40% à 75% et le mobile représente près de 11% des transactions sur les sites e-commerce.

Et pour continuer sur le mobile, le New York Times nous présente l’impact des publicités sur la bande passante et le temps de chargement des pages des médias en ligne (principalement américains). Une page du boston.com, par exemple, coûte 0,32$ de forfait data 3G alors que son contenu ne coûte que 4 fois moins (0,08$) !

Ce qui nous amène à The Financial Times qui crée une nouvelle version de son site et a souhaité connaître l’impact des temps de chargement sur le comportement de ses lecteurs. Ses conclusions sont simples :

  • quelque soit le délai supplémentaire, la vitesse du site agit négativement sur la profondeur de la session d’un utilisateur,
  • un site lent réduit le nombre d’articles lus,
  • plus globalement, plus un site est lent, plus l’effet est important.

Vous saurez tout sur les CDN avec GlobalDots, de son historique aux bénéfices en passant par la liste des acteurs clés, un article très complet !

Allez plus loin avec le lazy loading de vos images et affichez des miniatures colorées aux couleurs dominantes des images originales. La technique de Manuel Wieser est disponible en PHP et Node.js mais il explique suffisamment le fonctionnement pour l’adapter sous un autre langage.

Encore une conférence très intéressante et complète sur HTTP/2, cette fois-ci c’est Clay Smith qui la présente au Forward4Web Submit (les slides sont disponibles).

Vous pensiez intégrer vos WebFonts en base64 dans le code HTML de vos pages pour éviter les FOIT et FOUT ? Bonne idée mais c’est mauvais pour les performances… sauf si vous ne chargez que les caractères nécessaires au rendu critique ! Et c’est ce que nous explique Zach Leatherman dans son article qui présente les gains de son « Data URI Critical FOFT ».

 

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°5

Fasterize nous propose plusieurs articles cette semaine : une étude à propos du format AMP publiée sur le Journal du Net, une présentation de la métrique Speed Index et comment intégrer la webperf lors d’une refonte.

Steve Workman de Yell nous explique comment la transition à HTTPS a été compliquée pour leur société, d’un point vue technique mais aussi en abordant les différents challenges qu’il a rencontré.

Estelle Weyl a partagé les slides de sa conférence sur les impacts d’un design responsive sur les performances d’un site.

Sitepoint nous présente les nouveautés de jQuery 3 (toujours en béta), au menu (entre autres) des amélioration des performances pour les fonctions show() et hide() et l’utilisation de l’API requestAnimationFrame.

Une petite étude très claire de Nicolas Hoizey sur le (gros) impact des raccourcisseurs d’Url sur le temps de chargement d’une page (et certains services en abusent un peu trop).

Smashing Magazine fait le point sur l’optimisation des performances sur mobile. Un article complet et précis avec des exemples côté client et serveur.

Comment Google fait-il pour assurer une haute disponibilité de ses services ? C’est ce que nous explique Cade Metz de Wired, le secret c’est de confier son infrastructure à des développeurs (d’où le terme DevOps) qui n’hésiteront pas à écrire du code pour automatiser les tâches ennuyeuses et à prévoir un temps d’erreur car l’utilisateur final ne fait pas la différence entre un uptime de 100% et de 99.999%.
Toujours avec Google, créez votre première application Web progressive ou comment utiliser le meilleur de Chrome (et surtout les service workers) pour obtenir un site mobile performant.

Colt McAnis nous explique comment fonctionne la compression au format PNG, ce qui nous amène à un petit comparatif vidéo entre les formats FLIF, WebP, BPG et JPEG quand on compresse 500 fois la même image.
Si vous voulez compresser facilement et de manière automatique vos images, le service fasterImage choisit la compression la plus efficace tout en gardant la qualité de votre photo.

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°4

Metroize nous parle de la mort à petits coûts de la performance d’une page web et plus précisément des scripts Javascript avec quelques conseils pour les améliorer.

Le Journal du Net (via le baromètre Radware) présente le classement  WebPerf des géants du e-commerce pour Février 2016 et c’est sans surprise qu’Amazon prend la tête. A noter que près de 35% des sites analysés n’optimisent pas leurs images (note F avec l’outil WebPageTest), c’est vraiment dommage quand on sait qu’en moyenne 60% des ressources d’un site sont des images (50% chez Amazon), le gain serait énorme !

Au sujet de l’Ad Blocking, Dareboost analyse le top 100 des médias français et fait le point sur le gain en performance avec un plugin Adblock. Ils ont même, pour l’occasion, créé une infographie qui résume bien la situation.
Dans la même veine, mais de manière plus sommaire, Tuxicoman étudie l’impact de la pub sur le temps de chargement des pages web et arrive à un constat bien plus alarmant que Dareboost.

Apple a lancé son Safari Technology Preview. Comme Google Chrome avec son Canary, vous allez pouvoir tester les dernières fonctionnalités du moteur WebKit dont notamment ECMAScript 6, des versions améliorées d’IndexedDB et du Shadow DOM, et même du copier/coller! Techcrunch apporte quelques précisions sur ce lancement.

Pedro Kostelec de la société Sentinel raconte comment ils ont profité de la refonte de leur site pour se fixer un objectif d’au moins 85/100 en score sur Page Speed Insights. Ils ont atteint les 98 et leur site s’affiche en moins de 3 secondes grâce aux nombreuses techniques d’optimisation : cache navigateur, combine/minify des js & css, rendu above-the-fold, compression des images, … C’est la base mais ça marche à tous les coups !

Pour Chris Thoburn, Chrome sur mobile est le nouveau IE et explique quelques techniques pour être sûr de faire fonctionner votre application mobile JS sur ce navigateur.

Chez Instagram, deux ingénieurs nous expliquent comment ils ont baissé de 30% les erreurs liées à un dépassement de mémoire sur leur application Android et comment ils ont boosté de nombreux indicateurs, simplement en réduisant le nombre de commentaires dans les données téléchargées pour chaque photo.

« These trends continued over time, confirming that good performance brings users back. »

Les commentaires natifs de WordPress sont plus lents que Disqus. En tout cas, c’est ce que nous démontre Brian Jackson de Woorkup.

Sélection de liens #webperf n°3

Yoav Weiss pour Smashing Magazine revient sur la nouvelle déclarative preload qui sera publiée sur Chrome mi-Avril et explique les différences qu’elle apporte par rapport aux prefetch et subresource.

Les slides de la présentation de Patrick Hamann sur HTTP2 lors de la Smashing Conference, un très bon résumé de la nouvelle version du protocole HTTP.

Trois liens à propos du projet AMP de Google, tout d’abord des questions de Matt Shull sur l’égalité des différents sites respectant ce standard et les réponses de Malte Ubl, ingénieur chez Google, qui apporte quelques précisions. Aussi, Olivier Duffez de WebRankInfo a rédigé un article sur les outils de validation des pages AMP.

Instartlogic donne quelques astuces pour optimiser vos images et améliorer les temps de chargement. Ou vous pouvez aussi utiliser fasterImage pour le faire de manière automatisée !

Dareboost étoffe les tests de son outil d’analyse en ajoutant des contrôles sur la qualité du code CSS, la sécurité et l’accessibilité.

Les slides de la présentation d’Andy Davies sur l’outil WebPageTest au London Web Standards avec quelques exemples avancés pour scripter les tests, gérer l’authentification, tester l’indisponibilité de third-parties, etc…

Et pour terminer, fasterImage a dépassé les 3 Téra-octets de bande passante économisée par nos utilisateurs ! C’est énorme !

Sélection de liens #webperf n°2

Une étude d’Ericsson sur le stress occasionné par les lenteurs de temps de chargement sur mobile a montré que le rythme cardiaque augmentait de 38% lorsque le temps d’accès à une vidéo était retardé. Le niveau de stress est comparable au visionnage d’un film d’horreur !

Une extension Chrome pour lancer des audits directement dans la console Developer Tools, « à la Yslow ». Elle ajoute aussi des recommandations sur l’accessibilité des éléments dans le DOM.

Parce que les performances Web c’est aussi gérer les requêtes en erreur, Ire Aderinokun nous présente une technique pour styler en CSS les images qui ne s’affichent pas. C’est malheureusement incompatible avec les navigateurs Safari, iOS et Opera Mini.

Evitez le FOIT et chargez vos polices Web de manière progressive avec les Font Events, un exemple bien détaillé avec les scripts qui vont bien chez Filament Group.

Sélection de liens #webperf

Le MIT présente Polaris et Scout qui permettent d’accélérer de 34% le temps de chargement des ressources d’un site Web en créant des graphes de dépendances.
Polaris s’exécute côté navigateur en Javascript (l’idéal étant qu’il soit inclus directement dans le logiciel) et suit les indications de Scout installé sur le serveur pour télécharger les ressources nécessaires sans avoir à faire des allers-retours coûteux. On obtient une approche plus intelligente du multiplexage de Spdy/HTTP2.
Le papier de la thèse qui explique en détail leurs travaux.

Dareboost ajoute un serveur de test à Londres et permet donc des analyses britanniques. Speed matters!

Un petit audit de performances Web sur la version mobile de Imgur. A retenir : attention à l’exécution des scripts JS sur vos pages, elle peut bloquer l’affichage de votre contenu principal (dans ce cas l’image publiée par un membre de Imgur). Décalez son chargement sur l’événement onload ou découpez son exécution par blocs de 100ms.

Comprendre et analyser votre Waterfall avec Fasterize, une explication claire et détaillée pour maîtriser cet outil indispensable.

Envie de créer un site statique ? Frank Taillandier nous présente la mouvance statique et donne de bonnes pistes pour démarrer.

Et pour terminer, optimisez facilement les images de votre site grâce à fasterImage et bénéficiez d’un mois offert avec le code 1MOISOFFERT si le forfait gratuit ne vous suffit pas!