Avec plus de 140 ans d'histoire dans l'édition, Nikkei est l'une des entreprises de médias les plus influentes du Japon. En plus de leur journal papier, leurs propriétés numériques enregistrent plus de 450 millions de visites par mois. Pour améliorer l'expérience utilisateur et accélérer son activité sur le Web, Nikkei a lancé avec succès une progressive web app (PWA) : https://r.nikkei.com en novembre 2017. Ils obtiennent désormais d'excellents résultats grâce à la nouvelle plate-forme.
Gains de performances - Index de vitesse deux fois meilleur - Délai avant interactivité réduit de 14 secondes - Temps de chargement 75 % plus rapide avec la prélecture
Impact sur l'activité - Trafic naturel multiplié par 2,3 - 58 % de conversions en plus (abonnements) - 49 % d'utilisateurs actifs par jour en plus - Pages vues par session multipliées par 2
Télécharger l'étude de cas au format PDF
Présentation de l'entreprise
Défi
Nikkei a constaté une augmentation rapide du trafic mobile vers son ancien site Web, car les smartphones sont devenus le principal point d'entrée sur le Web pour de nombreux utilisateurs. Toutefois, grâce à Lighthouse, un outil d'audit qui analyse une page Web et fournit des recommandations pour l'améliorer dans plusieurs catégories, ils ont compris que leur site n'était pas entièrement optimisé pour les mobiles dans plusieurs domaines et qu'il était très lent à charger.
Il fallait environ 20 secondes pour que leur site Web devienne interactif de manière constante, et l'indice de vitesse moyen était de 10 secondes. Sachant que 53 % des utilisateurs mobiles abandonnent une expérience si elle met plus de trois secondes à se charger, Nikkei souhaitait réduire son temps de chargement pour offrir une meilleure expérience et accélérer son activité sur le Web.
La rapidité est un atout indéniable, en particulier pour les informations financières. Nous avons fait de la vitesse l'une de nos métriques clés, et nos clients ont apprécié ce changement.
Taihei Shigemori, Responsable de la stratégie numérique
Résultats
Nikkei a enregistré des gains de performances impressionnants. Leur score Lighthouse est passé de 23 à 82. Leur mesure du délai avant interactivité s'est améliorée de 14 secondes. Le trafic naturel, la vitesse, le taux de conversion et le nombre d'utilisateurs actifs par jour ont également augmenté.
La PWA est une application multipage (MPA) qui réduit la complexité du frontend et qui est conçue avec Vanilla JavaScript. Cinq ingénieurs front-end ont travaillé pendant un an pour atteindre ce niveau de performances.
Les ingénieurs front-end de Nikkei ont prouvé qu'une excellente UX permet d'améliorer les performances commerciales. Nous sommes pleinement engagés à poursuivre notre mission : offrir un nouveau niveau de qualité sur le Web.
Hiroyuki Higashi. Product Manager, Nikkei
Solution
Nikkei a créé et lancé une application Web progressive en utilisant une conception responsive, du JavaScript vanilla et une architecture multipage. L'entreprise s'est concentrée sur la création d'une expérience utilisateur agréable. En ajoutant un service worker, ils ont pu fournir des performances prévisibles, quel que soit le réseau. Cela garantit également que les articles les plus populaires sont toujours disponibles et chargés presque immédiatement, car ils sont stockés à l'aide de Cache Storage. Ils ont ajouté un fichier manifeste d'application Web, qui, associé à leur service worker, permet aux utilisateurs d'installer la PWA et d'y accéder facilement. Pour s'assurer que les performances étaient entièrement sous leur contrôle, ils ont optimisé leur JavaScript tiers.
Bonnes pratiques
- Améliorez la vitesse de chargement et l'interactivité en utilisant des API Web modernes, la compression et des pratiques d'optimisation du code.
- Améliorez progressivement l'expérience utilisateur en ajoutant des fonctionnalités de PWA telles que la prise en charge hors connexion et l'ajout à l'écran d'accueil.
- Intégrez des budgets de performances à votre stratégie de performances.
Détails techniques
La vitesse est importante
La vitesse est plus importante que jamais. Les smartphones étant devenus l'appareil de navigation principal pour de nombreux utilisateurs, Nikkei a constaté une augmentation rapide du trafic mobile sur son service. Mais en utilisant Lighthouse, ils se sont rendu compte que leur ancien site Web n'était pas entièrement optimisé pour les mobiles, avec un index de vitesse moyen de 10 secondes, un chargement initial très lent et un grand bundle JavaScript. Il était temps pour Nikkei de reconstruire son site Web et d'adapter les bonnes pratiques en matière de performances Web. Voici les résultats et les principales optimisations des performances dans la nouvelle PWA.
Utiliser les API Web et les bonnes pratiques pour accélérer le chargement
Demandes de préchargement de clés
Il est important de hiérarchiser le chargement du chemin critique. Grâce à HTTP/2 Server Push, ils peuvent hiérarchiser les bundles JavaScript et CSS critiques dont ils savent qu'un utilisateur aura besoin.
Éviter les allers-retours multiples et coûteux vers n'importe quelle origine
Le site Web devait charger des ressources tierces pour le suivi, les annonces et de nombreux autres cas d'utilisation. Ils ont utilisé <link rel=preconnect> pour pré-résoudre le handshake et la négociation DNS/TCP/SSL pour ces origines tierces clés.
Préchargement dynamique de la page suivante
Lorsqu'ils étaient certains que l'utilisateur allait accéder à une page spécifique, ils ne se contentaient pas d'attendre que la navigation ait lieu. Nikkei ajoute dynamiquement <link rel=prefetch> à <head> et précharge la page suivante avant que l'utilisateur ne clique sur le lien. Cela permet une navigation instantanée sur les pages.
Intégrer les fichiers CSS du chemin critique
Réduire le CSS bloquant le rendu est l'une des bonnes pratiques pour accélérer le chargement. Le site Web intègre tout le code CSS essentiel avec 0 feuille de style bloquant l'affichage. Cette optimisation a permis de réduire le temps First Meaningful Paint de plus d'une seconde.
Optimiser les bundles JavaScript
Dans leur expérience précédente, les bundles JavaScript de Nikkei étaient volumineux, pesant plus de 300 Ko au total. Grâce à une réécriture en JavaScript vanilla et à des optimisations de regroupement modernes, telles que le chunking basé sur les routes et le tree-shaking, ils ont pu réduire ce gonflement. Ils ont réduit la taille de leur bundle JavaScript de 80 %, la ramenant à 60 Ko avec RollUp.
Autres bonnes pratiques mises en œuvre
- Compression : compresser toutes les ressources compressibles avec Gzip/Brotli à l'aide de Fastly CDN
- Mise en cache : activez la mise en cache HTTP et la mise en cache côté périphérie.
- Optimisation des images : utilisez imgix pour l'optimisation et la détection du format d'image.
- Charger en différé les ressources non critiques : utilisez l'API Intersection Observer pour charger les fragments sous la ligne de flottaison.
- Adoptez une stratégie de chargement des polices Web : Privilégiez l'utilisation de la police système.
- Optimiser le First Meaningful Paint : Effectuer le rendu du contenu côté serveur
- Adoptez des budgets de performances : Réduisez les temps de transmission, d'analyse et de compilation de JavaScript.
Optimiser le code JavaScript tiers
Bien qu'il soit plus difficile d'optimiser les scripts JavaScript tiers que les vôtres, Nikkei a réussi à minimiser et à regrouper tous les scripts liés aux annonces, qui sont désormais diffusés depuis son propre réseau de diffusion de contenu (CDN). Les balises liées aux annonces fournissent généralement un extrait pour lancer et charger d'autres scripts requis, qui bloquent souvent le rendu de la page et nécessitent également un délai de réponse réseau supplémentaire pour chacun des scripts téléchargés. Nikkei a adopté l'approche suivante, ce qui lui a permis d'améliorer le temps d'initialisation de 100 ms et de réduire la taille du fichier JS de 30 % :
- Regroupez tous les scripts requis à l'aide d'un bundler JS (par exemple, Webpack)
- Chargez le script groupé de manière asynchrone afin qu'il ne bloque pas le rendu de la page.
- Associer la bannière publicitaire calculée au Shadow DOM (par rapport à l'iframe)
- Charger progressivement les annonces lorsque l'utilisateur fait défiler la page avec l'API Intersection Observer
Améliorer progressivement le site Web
En plus de ces optimisations de base, Nikkei a tiré parti du fichier manifeste de l'application Web et des service workers pour rendre son site Web installable et même utilisable hors connexion. En utilisant la stratégie cache-first dans leur service worker, toutes les ressources principales et les articles les plus consultés sont stockés dans le cache et réutilisés même en cas de problème, comme un réseau instable ou hors connexion. Cela permet d'offrir des performances cohérentes et optimisées.
Hack the Nikkei
Une entreprise de presse quotidienne traditionnelle, forte de plus de 140 ans d'expérience, a réussi à accélérer sa digitalisation grâce à la puissance du Web et des PWA. Les ingénieurs frontend de Nikkei ont prouvé qu'une excellente UX permet d'améliorer les performances commerciales. L'entreprise continuera à améliorer la qualité du Web.