Con una historia de publicación de más de 140 años, Nikkei es uno de los medios de comunicación más autorizados de Japón. Además de su periódico impreso, reciben más de 450 millones de visitas mensuales a sus propiedades digitales. Para brindar una mejor experiencia del usuario y acelerar su negocio en la Web, Nikkei lanzó con éxito una aplicación web progresiva (AWP) en noviembre de 2017: https://r.nikkei.com. Ahora obtienen resultados increíbles con la nueva plataforma.
Mejoras en el rendimiento - Índice de velocidad 2 veces mejor - Tiempo de carga 14 segundos más rápido - Carga un 75% más rápida con la recuperación previa
Impacto en la empresa - 2.3 veces más tráfico orgánico - 58% más conversiones (suscripciones) - 49% más usuarios activos por día - 2 veces más páginas vistas 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 a medida 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 mejorarla en varias categorías, comprendieron que su sitio no estaba completamente optimizado para dispositivos móviles en varias áreas y que tardaba mucho en cargarse.
Su sitio web tardaba alrededor de 20 segundos en volverse interactivo de forma constante y tenía un promedio de 10 segundos en el Speed Index. 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 su tiempo de carga para brindar una mejor experiencia y acelerar su negocio en la Web.
El valor de la velocidad es indiscutible, especialmente para las noticias financieras. La velocidad se convirtió en una de nuestras métricas principales, y nuestros clientes agradecieron el cambio.
Taihei Shigemori, gerente de Estrategia Digital
Resultados
Nikkei logró impresionantes mejoras en el rendimiento. Su puntuación de Lighthouse aumentó de 23 a 82. Su medición del tiempo hasta la interactividad mejoró en 14 segundos. El tráfico orgánico, la velocidad, la tasa de conversión y los usuarios activos por día también aumentaron.
La PWA es una app de varias páginas (MPA) que reduce la complejidad del frontend y se compiló con JavaScript Vanilla. Cinco ingenieros de desarrollo de front-end principales trabajaron durante un año para lograr este rendimiento.
Los ingenieros de frontend de Nikkei demostraron que una excelente UX genera un buen rendimiento comercial. Estamos totalmente comprometidos con continuar nuestro viaje para llevar la calidad de la Web a un nuevo nivel.
Hiroyuki Higashi. Administrador de productos, Nikkei
Solución
Nikkei creó y lanzó una app web progresiva con diseño responsivo, JavaScript simple y una arquitectura de varias páginas. Se enfocó en crear una experiencia del usuario agradable. Cuando agregaron un service worker, pudieron proporcionar un rendimiento predecible, independientemente de la red. Esto también garantiza que los artículos principales estén siempre disponibles y se carguen casi de inmediato porque se almacenan con Cache Storage. Agregaron un manifiesto de la app web y, junto con su service worker, esto permite que los usuarios instalen la PWA para que sea de fácil acceso. Además, para asegurarse de que el rendimiento estuviera completamente bajo su control, optimizaron su JavaScript de terceros.
Prácticas recomendadas
- Mejora la velocidad de carga y la interactividad con las prácticas de optimización de código, compresión y las APIs web modernas.
- Mejora la UX de forma progresiva agregando funciones de PWA, como compatibilidad sin conexión y la opción Agregar a la pantalla principal.
- Incorpora 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, con Lighthouse, se dieron cuenta de que su sitio web heredado no estaba completamente optimizado para dispositivos móviles, ya que el índice de velocidad promediaba 10 segundos, la carga inicial era muy lenta y el paquete de JavaScript era grande. Era hora de que Nikkei reconstruyera su sitio web y adaptara las prácticas recomendadas de rendimiento web. Estos son los resultados y las optimizaciones clave del rendimiento en la nueva PWA.
Aprovechamiento de las APIs web y las prácticas recomendadas para acelerar la carga
Carga previa de solicitudes clave
Es importante priorizar la carga de la ruta crítica. Con la función HTTP/2 Server Push, pueden priorizar los paquetes críticos de JavaScript y CSS que saben que un usuario necesitará.
Evita viajes de ida y vuelta costosos y múltiples 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 clave de terceros.
Prefetch dinámicamente la página siguiente
Cuando tenían la certeza de que el usuario navegaría a una página determinada, no solo esperaban a que se produjera la navegación. Nikkei agrega de forma dinámica <link rel=prefetch> a <head> y recupera previamente la página siguiente antes de que el usuario haga clic en el vínculo. Esto permite la navegación instantánea por las páginas.
CSS de ruta de acceso crítico intercalado
Reducir el CSS que bloquea la renderización es una de las prácticas recomendadas para acelerar la carga. El sitio web inserta todo el CSS crítico con 0 hojas de estilo que bloquean la renderización. Esta optimización redujo el tiempo del 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 eran voluminosos y pesaban más de 300 KB en total. Gracias a una reescritura en JavaScript simple y a optimizaciones de paquetes modernas, como la división en fragmentos basada en rutas y la eliminación de código no utilizado, pudieron reducir este exceso. Redujeron el tamaño de su paquete de JavaScript en un 80%, lo que lo dejó en 60 KB con RollUp.
Otras prácticas recomendadas implementadas
- Compresión: Comprime todos los recursos con Gzip/Brotli usando la CDN de Fastly.
- Almacenamiento en caché: Habilita el almacenamiento en caché de HTTP y el almacenamiento en caché del borde.
- Optimización de imágenes: Usa imgix para la optimización y la detección del formato de imagen
- Carga de forma diferida los recursos no críticos: Usa la API de Intersection Observer para cargar fragmentos en la mitad inferior de la página.
- Ten una estrategia de carga de fuentes web: Prioriza el uso de la fuente del sistema
- Optimiza la primera pintura significativa: Renderiza el contenido del servidor
- Adopta presupuestos de rendimiento: Mantén bajos los tiempos de transmisión y análisis/compilación de JavaScript
Cómo optimizar JavaScript de terceros
Si bien no es tan fácil optimizar los códigos JavaScript de terceros en comparación con tus propios códigos, Nikkei logró minimizar y agrupar todos los códigos relacionados 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 otros lenguajes de secuencias de comandos necesarios, que a menudo bloquean la renderización de la página y también requieren un tiempo de respuesta adicional de la red para cada uno de los lenguajes de secuencias de comandos descargados. Nikkei adoptó el siguiente enfoque y mejoró el tiempo de inicialización en 100 ms, además de reducir el tamaño del JS en un 30%:
- Agrupa todos los secuencias de comandos necesarios con un bundler de JS (p.ej., Webpack)
- Carga de forma asíncrona la secuencia de comandos agrupada para que no bloquee el procesamiento de la página.
- Adjunta el banner de anuncio calculado al DOM secundario (en lugar de un 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 se pudiera instalar y funcionara sin conexión. Con la estrategia cache-first en su service worker, todos los recursos principales y los artículos más populares se almacenan en el almacenamiento de caché y se reutilizan incluso en situaciones de contingencia, como una red inestable o sin conexión, lo que proporciona un rendimiento coherente y optimizado.
Hack the 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 PWA. Los ingenieros de frontend de Nikkei demostraron que una excelente UX ofrece un sólido rendimiento comercial. La empresa continuará su camino para llevar un nuevo nivel de calidad a la Web.