Nikkei atteint un niveau inédit en termes de qualité et de performances grâce à sa PWA de plusieurs pages

Avec plus de 140 ans d'histoire, Nikkei est l'un des médias les plus fiables du Japon. Avec leur journal papier, l'entreprise enregistre plus de 450 millions de visites par mois 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 progressive web app (PWA) en novembre 2017 : https://r.nikkei.com. Ils obtiennent maintenant des résultats incroyables de la nouvelle plateforme.

Gains de performances - Indice de vitesse multiplié par deux - Délai d'interaction réduit de 14 secondes - Chargement 75% plus rapide avec le préchargement

Impact sur l'entreprise - Trafic généré par les résultats naturels multiplié par 2,3 - Augmentation de 58% du nombre de conversions (abonnements) - Augmentation de 49% du nombre d'utilisateurs actifs par jour - Pages vues par deux fois plus nombreuses

Télécharger l'étude de cas au format PDF

Présentation de l'entreprise

Challenge

Nikkei a constaté une augmentation rapide du trafic mobile sur son ancien site Web, les smartphones étant devenus le principal point d'entrée sur le Web pour de nombreux utilisateurs. Toutefois, à l'aide de Lighthouse, un outil d'audit qui analyse une page Web et fournit des recommandations pour l'améliorer dans plusieurs catégories, l'entreprise a compris que son site n'était pas totalement optimisé pour les mobiles dans plusieurs domaines et que son chargement était très lent.

Il a fallu environ 20 secondes à son site Web pour devenir toujours interactif, et la moyenne de l'indice de vitesse a été de 10 secondes. Sachant que 53% des mobinautes abandonneraient une expérience si son chargement prend plus de trois secondes, Nikkei souhaitait réduire le temps de chargement afin d'offrir une meilleure expérience et d'accélérer son activité sur le Web.

L'importance de la rapidité est incontestable, en particulier pour les actualités financières. La vitesse est 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

Audit exécuté en avril 2018 sur l'ancien site
Audit effectué en avril 2018 sur l'ancien site hébergé à l'adresse mw.nikkei.com

Nikkei a enregistré des gains de performances impressionnants. Son score Lighthouse est passé de 23 à 82. Les mesures du délai avant interactivité ont augmenté de 14 secondes. Le trafic généré par les résultats naturels, la vitesse, le taux de conversion et les utilisateurs quotidiens actifs ont également augmenté.

La PWA est une application multipage (MPA) qui réduit la complexité de l'interface, créée avec Vanilla JavaScript. Cinq ingénieurs front-end principaux ont travaillé pendant un an pour atteindre ces performances.

Les ingénieurs front-end de Nikkei ont prouvé qu'une expérience utilisateur de qualité apporte de bonnes performances sur l'entreprise. Nous sommes déterminés à continuer d'offrir un niveau de qualité supérieur au Web.

Hiroyuki Higashi. Responsable produit, Nikkei

Solution

Nikkei a créé et lancé une progressive web app à l'aide d'un responsive design, de JavaScript vanilla et d'une architecture multipage. L'objectif était de créer une expérience utilisateur agréable. En ajoutant un service worker, il a pu fournir des performances prévisibles, quel que soit le réseau. Cela garantit également que les meilleurs articles sont toujours disponibles et chargés presque immédiatement, car ils sont stockés à l'aide du stockage du cache. Il a ajouté un fichier manifeste d'application Web. Avec son service worker, les utilisateurs peuvent ainsi installer la PWA afin qu'elle soit facilement accessible. Afin de s'assurer que les performances étaient entièrement sous son contrôle, elle a optimisé son code JavaScript tiers.

Bonnes pratiques

  • Améliorez la vitesse de chargement et l'interactivité à l'aide d'API Web modernes, de pratiques de compression et d'optimisation du code.
  • Améliorez progressivement l'expérience utilisateur en ajoutant des fonctionnalités PWA telles que le fonctionnement hors connexion et l'option "Ajouter à l'écran d'accueil".
  • Intégrer des budgets de performance dans la stratégie de performances.

Présentation technique détaillée

Importance de la vitesse

La rapidité n'a jamais été aussi importante. 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 à l'aide de Lighthouse, l'entreprise a réalisé que son ancien site Web n'était pas entièrement optimisé pour les mobiles, avec une moyenne de 10 secondes dans l'index de vitesse, un chargement initial très lent et un groupe JavaScript volumineux. Le moment était venu 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 de performances de la nouvelle PWA.

Exploiter les API Web et les bonnes pratiques pour accélérer le chargement

Précharger les requêtes clés

Précharger les requêtes clés

Il est important de prioriser le chargement du chemin critique. Le service HTTP/2 Server Push lui permet de donner la priorité aux bundles JavaScript et CSS essentiels dont l'utilisateur a besoin.

Évitez les allers-retours multiples et coûteux vers n'importe quel point de départ

Chargement des ressources tierces...

Le site Web devait charger des ressources tierces pour le suivi, les annonces et de nombreux autres cas d'utilisation. Elle a utilisé <link rel=preconnect> pour pré-résoudre le handshake et la négociation DNS/TCP/SSL pour ces origines tierces clés.

Précharger dynamiquement la page suivante

Préchargement dynamique
Préchargement dynamique
Préchargement dynamique

Lorsqu'il était sûr que l'utilisateur accéderait à une certaine page, il n'a pas seulement 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 sur le lien. Cela permet la navigation instantanée sur les pages.

Code CSS intégré au chemin critique

Code CSS intégré au chemin critique

La réduction du code CSS qui bloque l'affichage est l'une des bonnes pratiques de chargement rapide. Le site Web intègre tous les CSS essentiels sans aucune feuille de style bloquant l'affichage. Cette optimisation a réduit la première peinture significative de plus d'une seconde.

Optimiser les groupes JavaScript

Optimiser les bundles JavaScript

Dans son expérience précédente, les bundles JavaScript de Nikkei étaient surchargés, pesant plus de 300 Ko au total. Grâce à une réécriture en JavaScript vanilla et à des optimisations de regroupement modernes telles que la fragmentation basée sur les routes et le tree shaking, l'organisation a pu remédier à cette surcharge. L'entreprise a réduit la taille de son bundle JavaScript de 80%, pour passer à 60 Ko avec la propriété de consolidation.

Autres bonnes pratiques appliquées

Optimiser les composants JavaScript tiers

Bien qu'il ne soit pas aussi facile d'optimiser des scripts JavaScript tiers que pour ses propres scripts, Nikkei a réussi à minimiser 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 balises liées 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 délai supplémentaire sur le réseau pour chacun des scripts téléchargés. Nikkei a adopté l'approche suivante et réduit le temps d'initialisation de 100 ms, tout en réduisant la taille du code JS de 30%:

  • Regroupez tous les scripts requis à l'aide d'un bundler JS (par exemple, Webpack)
  • Chargement asynchrone du script groupé, afin qu'il ne bloque pas l'affichage de la page
  • Associer la bannière publicitaire calculée à Shadow DOM (et non à iFrame)
  • Chargez progressivement les annonces lorsque l'utilisateur fait défiler l'écran avec l'API Intersection Observer

Améliorer progressivement le site Web

En plus de ces optimisations de base, Nikkei a exploité le fichier Web App Manifest et les service workers pour rendre son site Web installable et même fonctionner hors connexion. En utilisant la stratégie privilégiant le cache dans son service worker, toutes les ressources principales et tous les articles les plus populaires sont stockés dans le stockage du cache et réutilisés même dans des situations d'urgence, telles qu'un réseau irrégulier ou hors connexion, ce qui offre des performances constantes et optimisées.

Pirater le Nikkei

Une entreprise de journaux quotidiens traditionnels établie depuis plus de 140 ans a accéléré sa numérisation grâce à la puissance du Web et des PWA. Les ingénieurs en première ligne de Nikkei ont prouvé qu'une expérience utilisateur de qualité pouvait générer d'excellentes performances commerciales. L'entreprise poursuivra son processus visant à offrir un niveau de qualité inédit au Web.

Complément d'informations