Avec une histoire de plus de 140 ans, Nikkei est l'une des entreprises de médias les plus influentes au Japon. En plus de son journal papier, il enregistre plus de 450 millions de visites mensuelles sur ses propriétés numériques. Pour offrir une meilleure expérience utilisateur et accélérer son activité sur le Web, Nikkei a lancé avec succès une application Web progressive (PWA) à l'adresse https://r.nikkei.com en novembre 2017. Elle constate aujourd'hui d'excellents résultats sur la nouvelle plate-forme.
Amélioration des performances - Amélioration de l'indice de vitesse de 2 fois - Amélioration du délai d'interactivité de 14 secondes - Amélioration du chargement de 75 % avec le préchargement
Impact sur l'activité - Augmentation de 2,3 fois du trafic généré par les résultats naturels - Augmentation de 58 % du nombre de conversions (abonnements) - Augmentation de 49 % du nombre d'utilisateurs actifs par jour - Doublement du nombre de pages vues par session
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, en utilisant Lighthouse, un outil d'audit qui analyse une page Web et fournit des recommandations pour l'améliorer dans plusieurs catégories, il a compris que son site n'était pas entièrement optimisé pour les mobiles dans plusieurs domaines et qu'il se chargeait très lentement.
Son site Web a mis environ 20 secondes pour devenir systématiquement interactif, avec une moyenne de 10 secondes pour l'indice de vitesse. Sachant que 53% des mobinautes abandonnent une expérience si celle-ci met plus de trois secondes à se charger, Nikkei souhaitait réduire le temps de chargement afin d'offrir une meilleure expérience et de développer son activité sur le Web.
L'intérêt de la vitesse est incontestable, en particulier dans le domaine de la finance. Nous avons fait de la rapidité l'une de nos métriques principales, et nos clients ont apprécié ce changement.
Taihei Shigemori, responsable, stratégie numérique
Résultats
Nikkei a enregistré des gains de performances impressionnants. Son score Lighthouse est passé de 23 à 82. La mesure du temps de chargement a augmenté de 14 secondes. Le trafic généré par les résultats naturels, 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 front-end, créée avec Vanilla JavaScript. Cinq ingénieurs principaux du front-end ont travaillé pendant un an pour obtenir ces performances.
Les ingénieurs front-end de Nikkei ont prouvé qu'une bonne expérience utilisateur génère de bonnes performances commerciales. Nous mettons tout en œuvre pour continuer à apporter un niveau de qualité supérieur au Web.
Hiroyuki Higashi. Responsable produit, Nikkei
Solution
Nikkei a créé et lancé une application Web progressive, en utilisant le design responsif, JavaScript standard et une architecture multipage. L'objectif était de créer 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 du stockage en cache. Il a ajouté un fichier manifeste d'application Web. Avec son service worker, cela permet aux utilisateurs d'installer la PWA, ce qui la rend facilement accessible. Pour s'assurer que les performances étaient entièrement sous leur contrôle, ils ont optimisé leur code 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.
Présentation technique détaillée
La vitesse est importante
La rapidité est plus importante que jamais. Alors que les smartphones sont devenus le principal appareil de navigation pour de nombreux utilisateurs, Nikkei a constaté une augmentation rapide du trafic mobile sur son service. Mais en utilisant Lighthouse, il s'est rendu compte que son ancien site Web n'était pas entièrement optimisé pour les mobiles, avec un indice de vitesse moyen de 10 secondes, un chargement initial très lent et un grand groupe JavaScript. Il était temps que Nikkei reconstruise son site Web et applique les bonnes pratiques en matière de performances Web. Voici les résultats et les principales optimisations des performances de la nouvelle PWA.
Exploiter les API Web et les bonnes pratiques pour accélérer le chargement
Précharger les requêtes de clé
Il est important de prioriser le chargement du chemin critique. Grâce à HTTP/2 Server Push, ils peuvent prioriser les bundles JavaScript et CSS critiques dont ils savent qu'un utilisateur aura besoin.
Éviter les multiples allers-retours 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 l'handshake DNS/TCP/SSL et la négociation pour ces origines tierces clés.
Précharger dynamiquement la page suivante
Lorsqu'il était sûr que l'utilisateur accéderait à une certaine page, il n'a pas simplement attendu que la navigation ait lieu. Nikkei ajoute dynamiquement <link rel=prefetch> à <head> et précharge la page suivante avant que l'utilisateur ne clique réellement sur le lien. Cela permet une navigation instantanée sur les pages.
CSS intégré au chemin critique
Réduire le CSS bloquant le rendu est l'une des bonnes pratiques de chargement rapide. Le site Web intègre zéro feuille de style bloquant l'affichage de tous les CSS critiques. Cette optimisation a réduit de plus d'une seconde le nombre de first significatifs de peinture.
Optimiser les bundles JavaScript
Dans leur expérience précédente, les bundles JavaScript de Nikkei étaient gonflés et pesaient plus de 300 Ko au total. Grâce à une réécriture en JavaScript standard et à des optimisations de regroupement modernes, telles que le découpage basé sur les itinéraires et le tree-shaking, ils ont pu réduire cette inflation. Ils ont réduit la taille de leur bundle JavaScript de 80 %, la ramenant à 60 Ko avec RollUp.
Autres bonnes pratiques implémentées
- Compression: toutes les ressources compressibles Gzip/Brotli à l'aide de Fastly CDN
- Mise en cache : activez la mise en cache HTTP et la mise en cache côté edge.
- Optimisation des images : utilisez imgix pour optimiser et détecter les formats d'image.
- Chargement différé des ressources non critiques : utilisez l'API intersection observer pour charger les fragments en dessous de la ligne de flottaison.
- Avoir une stratégie de chargement de polices Web : privilégiez l'utilisation de la police du système.
- Optimiser le First Meaningful Paint : affichez le contenu côté serveur.
- Adoptez des budgets de performances : limitez les temps de transmission et d'analyse/compilation JavaScript.
Optimiser le code JavaScript tiers
Bien qu'il ne soit pas aussi facile d'optimiser les JavaScript tiers que vos propres scripts, Nikkei a réussi à réduire et à regrouper tous les scripts liés aux annonces, qui sont désormais diffusés à partir de son propre réseau de diffusion de contenu (CDN). Les tags associés aux annonces fournissent généralement un extrait pour lancer et charger d'autres scripts requis, ce qui bloque souvent l'affichage de la page et nécessite un temps d'exécution plus long du réseau pour chacun des scripts téléchargés. Nikkei a suivi l'approche suivante et a amélioré le temps d'initialisation de 100 ms, tout en réduisant la taille du code JavaScript de 30 % :
- Groupez tous les scripts requis à l'aide d'un outil de regroupement JS (par exemple, Webpack)
- Chargez de manière asynchrone le script groupé afin qu'il ne bloque pas l'affichage de la page
- Associer la bannière publicitaire calculée au Shadow DOM (par rapport à l'iFrame)
- Charger progressivement des 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 utilisé le fichier manifeste d'application Web et les service workers pour rendre son site Web installable et même le faire fonctionner hors connexion. En utilisant la stratégie cache first dans son service worker, toutes les ressources de base et les articles les plus populaires sont stockés dans le cache de stockage et réutilisés même en cas de situation de crise, comme un réseau instable ou hors connexion, ce qui offre des performances cohérentes et optimisées.
Piratez le Nikkei
Une entreprise de presse quotidienne traditionnelle, vieille de plus de 140 ans, a réussi à accélérer sa numérisation grâce à la puissance du Web et des PWA. Les ingénieurs front-end de Nikkei ont prouvé qu'une expérience utilisateur de qualité générait d'excellentes performances commerciales. L'entreprise continuera de proposer un nouveau niveau de qualité sur le Web.