Articles avec l'étiquette ‘webperf’

Sélection de liens #webperf n°7

Ronan Cremin revient sur ses prévisions de juillet 2015 et constate qu’après avoir fais la taille du jeu Wolfenstein en 2011 et Sim City 2000 en 2012, les pages web dépassent maintenant, en moyenne, la taille du jeu DOOM.
Il évoque aussi deux points : le top 10 des sites classés par Alexa sont plus légers que le reste et le Web en général devient de plus en plus lourd, de manière constante.

Sur son blog, Bram Stein liste les différentes manières de charger des polices Web en utilisant la librairie Font Face Observer.

Le Journal du Net (en partenariat avec Fasterize) présente le classement webperf des ténors du e-commerce en France sur le mois de Mars. Des améliorations du côté de La Redoute et de Groupon qui ont réussi à limiter le nombre de requêtes, et Leroy Merlin toujours en tête qui évoque une volonté de basculer vers le HTTPS.

Tobias Baldauf explique comment améliorer le Speed Index de vos pages en utilisant HTTP2 pour charger les images, sans oublier des les optimiser avant !

Let’s Encrypt sort enfin de sa Beta et fait le point sur les 8 mois de développement et les 1,7 million de certificats émis.

No-cache, no-store, max-age, ETags, ces termes vous paraissent encore obscurs ? Revoyez les fondamentaux du cache HTTP avec Google et abusez-en car la requête HTTP la plus rapide est celle qui n’est pas faîte !

Rigor a mis à jour son top 10 des comptes les plus actifs dans la communauté webperf sur Twitter. Je vous conseille vivement de les suivre !

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

Faites chauffer votre cache

tl;dr⇒

Lors de la récente refonte de www.touteslespoitrines.com, j’ai eu la chance d’avoir du temps pour approfondir certaines optimisations de performances côté Front. Quand on a un client e-commerçant qui a compris l’importance du temps de chargement pour son taux de conversion, et qui, en plus, alloue du budget pour ça, c’est vraiment précieux !

J’ai pu donc utiliser les tags ESI avec Varnish pour tirer parti au mieux de la mise en cache des pages. Je ne rentrerai pas dans le détail de leur implémentation dans cet article, vous pourrez retrouver quelques articles pour aller plus loin.
Une fois les vcl bien configurés et les ESI en place, c’est redoutablement efficace ! On a pu ainsi (avec d’autres techniques d’optimisations), diminuer de moitié les temps de chargement.

Mais, nous avons vite remarqué que les performances ne sont optimales que quand la page est chargée dans le cache de Varnish. Les temps de traitement serveur dans le cas contraire sont raisonnables, mais tant qu’à faire autant avoir le meilleur temps possible ! Pour cela, j’ai eu l’idée de pré-charger l’ensemble du site en utilisant un robot qui utiliserait un sitemap pour parcourir les pages à intervalles régulières.

Après quelques recherches, je suis tombé sur Optimus Cache Prime, c’est une application écrite en Go, compatible Windows et Linux, et qui consomme un sitemap XML pour faire des requêtes HTTP. Il dispose de plusieurs options et possède même un mode compatible avec les modules WP Super Cache et W3 Total Cache de WordPress qui permet de vérifier l’existence du cache avant de faire la requête.

Installation et configuration d’Optimus Cache Prime

Pour l’utiliser sur un serveur Linux, téléchargez et décompressez l’archive :

wget https://cdn.pmylund.com/files/tools/ocp2/linux/ocp-2.7-amd64.tar.gz
tar -xzvf ocp-2.7-amd64.tar.gz

Pour lancer le robot, donnez lui l’url de votre sitemap en dernier paramètre :

./ocp -c 4 -ua "Chauffeur de cache" -v http://www.monsite.com/sitemap.xml

Les options :

  • -ua définit le User-Agent utilisé par le robot,
  • -c définit le nombre de requêtes simultanées, prenez un peu de temps pour tester cette dernière valeur, ça serait dommage de faire tomber votre site si vous êtes sur un hébergement peu puissant,
  • -v demande d’afficher les urls en traitement,
  • le dernier paramètre sera donc le sitemap, il peut très bien être situé en local ou en distant sur une url.

Si vous souhaitez le lancer à intervalles réguliers, insérez cette ligne dans votre crontab :

0 */2 * * * /chemin/vers/ocp/ocp -c 4 -ua "Chauffeur de cache" -v http://www.monsite.com/sitemap.xml > /chemin/vers/les/logs/ocp.log 2>&1

L’instruction 0 */2 * * * indique au crontab d’exécuter le script toutes les 2 heures, ce n’est qu’un exemple et adaptez le à votre configuration !

 

Pour l’anecdote, voici à quoi ressemble la courbe de la moyenne des temps de chargement lorsqu’on lance le script toutes les 2 heures (chaque creux correspond à l’exécution du script) :

Stats avec OCP

Bien sûr, il n’est pas possible de pré-charger tout le site. Toute la partie de recherche avec filtres reste « froide » et l’utilisateur aura forcément un temps de traitement serveur lorsqu’il utilise plusieurs filtres. Mais en analysant un peu vos statistiques, vous pouvez essayer d’anticiper le comportement de vos visiteurs et insérer dans le sitemap par exemple :

  • les recherches par mot-clé les plus courantes,
  • les recherches avec un filtre marque et dont les produits sont en promotion,
  • la recherche par taille, dans le cas de toutes les poitrines, cela ne fait que 20 bonnets x 15 tailles hauts + 14 tailles bas = 314 pages.

 

Bonus

Pour savoir, sous Chrome, si la page que vous visitez vient directement du cache Varnish (HIT) ou non (MISS), je vous conseille l’extension Cache Hit or Miss. Il faut configurer Varnish pour renvoyer les entêtes d’information :

sub vcl_deliver {
    if (obj.hits > 0) {
        set resp.http.X-Cache = "HIT";
        set resp.http.X-Cache-Hits = obj.hits;
    } else {
        set resp.http.X-Cache = "MISS";
    }
}