Con una historia de publicación de más de 140 años, Nikkei es una de las empresas de medios de comunicación más autorizadas de Japón. Además de su periódico impreso, tienen más de 450 millones de visitas mensuales a sus propiedades digitales. Para proporcionar una mejor experiencia del usuario y acelerar su negocio en la Web, Nikkei lanzó con éxito una app web progresiva (AWP) https://r.nikkei.com en noviembre de 2017. Ahora están viendo resultados increíbles en la plataforma nueva.
Mejoras en el rendimiento - Índice de velocidad 2 veces mejor - Tiempo de carga interactivo 14 segundos más rápido - Carga un 75% más rápida con el precargamiento
Impacto en la empresa - 2.3 veces más tráfico orgánico - 58% más de conversiones (suscripciones) - 49% más de usuarios activos por día - 2 veces más vistas de página por sesión
Descargar el caso de éxito en PDF
Información general de la empresa
Desafío
Nikkei observó un rápido aumento en el tráfico móvil a su sitio web heredado, ya que los smartphones se convirtieron en el principal punto de entrada a la Web para muchos usuarios. Sin embargo, con Lighthouse, una herramienta de auditoría que analiza una página web y brinda recomendaciones para mejorar en varias categorías, comprendió que su sitio no estaba completamente optimizado para dispositivos móviles en varias áreas y que era muy lento de cargar.
Su sitio web tardaba alrededor de 20 segundos en ser interactivo de forma coherente y tenía un promedio de 10 segundos en el Índice de velocidad. Sabiendo que el 53% de los usuarios de dispositivos móviles abandonará una experiencia si tarda más de 3 segundos en cargarse, Nikkei quería reducir el tiempo de carga para proporcionar una mejor experiencia y acelerar su negocio en la Web.
El valor de la velocidad es indiscutible, especialmente en el caso de las noticias financieras. Hicimos que la velocidad sea una de nuestras métricas principales y nuestros clientes aprecian el cambio.
Taihei Shigemori, gerente de Estrategia Digital
Resultados
Nikkei logró mejoras impresionantes en el rendimiento. Su puntuación de Lighthouse aumentó de 23 a 82. Su medición del tiempo de interacción mejoró en 14 segundos. El tráfico orgánico, la velocidad, el porcentaje de conversiones y los usuarios activos por día también aumentaron.
La AWP es una app de varias páginas (MPA) que reduce la complejidad del frontend y se compila con Vanilla JavaScript. Cinco ingenieros de frontend principales trabajaron durante un año para lograr este rendimiento.
Los ingenieros de frontend de Nikkei demostraron que una gran UX genera un buen rendimiento empresarial. Estamos totalmente dedicados a continuar nuestro recorrido para llevar un nuevo nivel de calidad a la Web.
Hiroyuki Higashi. Gerente de producto, Nikkei
Solución
Nikkei creó y lanzó una app web progresiva con diseño responsivo, JavaScript sin modificaciones y una arquitectura de varias páginas. Se enfocaron en crear una experiencia del usuario encantadora. Cuando agregaron un service worker, pudieron proporcionar un rendimiento predecible, independientemente de la red. Esto también garantiza que los artículos principales siempre estén disponibles y se carguen casi de inmediato, ya que se almacenan con el almacenamiento en caché. Agregaron un manifiesto de app web y, junto con su service worker, esto permite a los usuarios instalar la AWP para que se pueda acceder a ella fácilmente. Para garantizar que el rendimiento estuviera completamente bajo su control, optimizaron el código JavaScript de terceros.
Prácticas recomendadas
- Mejora la velocidad de carga y la interactividad con las APIs web modernas, la compresión y las prácticas de optimización de código.
- Agrega funciones de la AWP, como la compatibilidad sin conexión y la opción Agregar a la pantalla principal, para mejorar la UX de forma progresiva.
- Incluye presupuestos de rendimiento en la estrategia de rendimiento.
Análisis técnico detallado
La velocidad es importante
La velocidad es más importante que nunca. A medida que los smartphones se convirtieron en el principal dispositivo de navegación para muchos usuarios, Nikkei observó un rápido aumento del tráfico móvil en su servicio. Sin embargo, cuando usaron Lighthouse, se dieron cuenta de que su sitio web heredado no estaba completamente optimizado para dispositivos móviles, ya que el índice de velocidad tenía un promedio de 10 segundos, una carga inicial muy lenta y un paquete de JavaScript grande. Era hora de que Nikkei volviera a crear su sitio web y adaptara las prácticas recomendadas de rendimiento web. Estos son los resultados y las optimizaciones clave de rendimiento de la nueva AWP.
Aprovecha las APIs web y las prácticas recomendadas para acelerar la carga
Precarga las solicitudes de claves
Es importante priorizar la carga de la ruta crítica. Con el envío del servidor HTTP/2, pueden priorizar los paquetes de JavaScript y CSS críticos que saben que un usuario necesitará.
Evitar varios viajes de ida y vuelta costosos a cualquier origen
El sitio web necesitaba cargar recursos de terceros para el seguimiento, los anuncios y muchos otros casos de uso. Usaron <link rel=preconnect> para resolver previamente el protocolo de enlace y la negociación de DNS/TCP/SSL para estos orígenes externos clave.
Cómo recuperar de forma previa la siguiente página de forma dinámica
Cuando tenían la certeza de que el usuario navegaría a una página determinada, no solo esperaron a que se produjera la navegación. Nikkei agrega de forma dinámica <link rel=prefetch> a <head> y recupera previamente la siguiente página antes de que el usuario haga clic en el vínculo. Esto permite la navegación instantánea de la página.
Integrar CSS de ruta crítica
Reducir el CSS que bloquea la renderización es una de las prácticas recomendadas para la carga rápida. El sitio web intercala todas las CSS críticas con 0 hojas de estilo que bloquean la renderización. Esta optimización redujo el primer procesamiento de imagen significativo en más de 1 segundo.
Optimiza los paquetes de JavaScript
En su experiencia anterior, los paquetes de JavaScript de Nikkei estaban sobrecargados y pesaban más de 300 KB en total. A través de una reescritura a JavaScript puro y optimizaciones de paquetes modernas, como el fragmentación basada en rutas y el árbol de reducción, pudieron reducir este aumento de tamaño. Redujeron el tamaño del paquete de JavaScript en un 80%, lo que lo redujo a 60 KB con RollUp.
Otras prácticas recomendadas implementadas
- Compresión: Gzip/Brotli para todos los recursos comprimibles con la CDN de Fastly
- Almacenamiento en caché: Habilita el almacenamiento en caché HTTP y el almacenamiento en caché del perímetro.
- Optimización de imágenes: Usa imgix para la optimización y la detección de formatos de imagen.
- Recursos no críticos de carga diferida: Usa la API de Intersección observador para cargar fragmentos de la mitad inferior de la página.
- Tener una estrategia de carga de fuentes web: Prioriza el uso de la fuente del sistema.
- Optimiza el primer procesamiento de imagen significativa: Representación del contenido del servidor
- Adopta presupuestos de rendimiento: Mantén los tiempos de transmisión, análisis y compilación de JavaScript bajos.
Cómo optimizar JavaScript de terceros
Si bien no es tan fácil optimizar los JavaScripts de terceros en comparación con tus propias secuencias de comandos, Nikkei redujo y agrupó correctamente todas las secuencias de comandos relacionadas con los anuncios, que ahora se publican desde su propia red de distribución de contenido (CDN). Las etiquetas relacionadas con anuncios suelen proporcionar un fragmento para iniciar y cargar otras secuencias de comandos requeridas, que a menudo bloquean la renderización de la página y también requieren un tiempo de respuesta de red extra para cada una de las secuencias de comandos descargadas. Nikkei adoptó el siguiente enfoque y mejoró el tiempo de inicialización en 100 ms, además de reducir el tamaño de JS en un 30%:
- Empaquetar todas las secuencias de comandos necesarias mediante un agrupador de JS (p.ej., Webpack)
- Carga de forma asíncrona la secuencia de comandos empaquetada para que no bloquee la renderización de la página
- Adjunta el banner de anuncio calculado a Shadow DOM (en comparación con el iframe).
- Carga anuncios de forma progresiva cuando el usuario se desplaza con la API de Intersection Observer
Mejora progresiva del sitio web
Además de estas optimizaciones básicas, Nikkei aprovechó el manifiesto de la app web y los service workers para que su sitio web fuera instalable y hasta funcionara sin conexión. Cuando se usa la estrategia de prioridad en la caché en su service worker, todos los recursos principales y artículos principales se almacenan en el almacenamiento en caché y se reutilizan incluso en situaciones de contingencia, como una red sin conexión o inestable, lo que proporciona un rendimiento coherente y optimizado.
Hackean el Nikkei
Una empresa tradicional de periódicos diarios con más de 140 años de historia aceleró con éxito su digitalización gracias al poder de la Web y las AWP. Los ingenieros de frontend de Nikkei demostraron que una buena UX ofrece un rendimiento comercial sólido. La empresa continuará su recorrido para traer un nuevo nivel de calidad a la Web.