Nikkei logra un nuevo nivel de calidad y rendimiento con su AWP de varias páginas

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 confiables de Japón. Junto con su periódico impreso, reciben 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 pueden ver resultados increíbles de la nueva plataforma.

Incrementos de rendimiento - 2 veces mejor índice de velocidad - Tiempo de interacción 14 segundos más rápido - Carga con carga previa un 75% más rápida

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 vistas de página por sesión

Descargar PDF del caso de éxito

Información general de la empresa

Desafío

Nikkei experimentó un aumento rápido en el tráfico desde dispositivos móviles hacia 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 da recomendaciones sobre cómo mejorar en varias categorías, comprendieron que su sitio no estaba completamente optimizado para dispositivos móviles en varias áreas y que se cargaba muy lento.

Su sitio web tardaba alrededor de 20 segundos en volverse interactivo de forma constante y promediaron 10 segundos en el Índice de velocidad. Con la información que sabía que el 53% de los usuarios de dispositivos móviles abandonarían una experiencia si tarda más de 3 segundos en cargarse, Nikkei quería reducir su 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

Ejecución de auditoría en el sitio anterior en abril de 2018
Ejecución de auditoría en abril de 2018 en un sitio antiguo alojado en mw.nikkei.com

Nikkei obtuvo mejoras de rendimiento impresionantes. Su puntuación de Lighthouse se subió de 23 a 82. Su medición interactiva se mejoró en 14 segundos. También aumentaron el tráfico orgánico, la velocidad, el porcentaje de conversiones y los usuarios diarios activos.

La AWP es una app de varias páginas (MPA) que reduce la complejidad del frontend, compilada con Vanilla JavaScript. Cinco ingenieros de frontend principales trabajaron durante un año para lograr este rendimiento.

Los ingenieros front-end de Nikkei demostraron que una buena UX aporta un buen rendimiento empresarial. Estamos completamente comprometidos con continuar nuestro viaje de traer 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 básico y una arquitectura de varias páginas. Se enfocaron en crear una experiencia del usuario agradable. Al agregar un service worker, pudieron proporcionar un rendimiento predecible, sin importar 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é. Agregó un manifiesto de aplicación web y, junto con su service worker, permite que los usuarios instalen la AWP para que sea de fácil acceso. 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 a través de APIs web modernas, compresión y prácticas de optimización de código.
  • Mejora progresivamente la UX con funciones de la AWP, como el soporte sin conexión y la opción Agregar a la pantalla principal.
  • Incorporar 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 de muchos usuarios, Nikkei experimentó un aumento rápido en el tráfico de dispositivos móviles en su servicio. Sin embargo, con Lighthouse, notaron 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 gran paquete de JavaScript. Fue hora de que Nikkei reconstruiera su sitio web y adaptara las prácticas recomendadas de rendimiento en la Web. Estos son los resultados y las optimizaciones clave de rendimiento de la nueva AWP.

Cómo aprovechar las APIs web y las prácticas recomendadas para acelerar la carga

Precarga las solicitudes de claves

Precarga las solicitudes de claves

Es importante priorizar la carga de la ruta crítica. Con el servidor push HTTP/2, pueden priorizar los paquetes críticos de JavaScript y CSS que saben que el usuario necesitará.

Evita múltiples viajes de ida y vuelta costosos a cualquier origen

Cargando recursos de terceros.

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 de DNS/TCP/SSL y la negociación de estos orígenes clave de terceros.

Realizar una carga previa dinámica de la página siguiente

Carga previa dinámica
Carga previa dinámica
Carga previa dinámica

Cuando estaban seguros de que el usuario navegaría a una página determinada, no esperó a que se llevara a cabo la navegación. Nikkei agrega dinámicamente <link rel=prefetch> a <head> y precarga la página siguiente antes de que el usuario haga clic en el vínculo. Esto permite la navegación instantánea de páginas.

CSS de ruta crítica intercalada

CSS de ruta crítica intercalada

Reducir el código CSS que bloquea la renderización es una de las prácticas recomendadas para la carga rápida. El sitio web intercala todas las versiones críticas de CSS sin 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

Cómo optimizar los paquetes de JavaScript

En su experiencia anterior, los paquetes de JavaScript de Nikkei estaban inflados: pesaban más de 300 KB en total. Gracias a una reescritura de JavaScript normal y optimizaciones de paquetes modernas, como la fragmentación basada en rutas y la eliminación de código no utilizado, pudo eliminar este sobredimensionamiento. Con RollUp, redujeron el tamaño de su paquete de JavaScript en un 80% y lo disminuyeron a 60 KB.

Otras prácticas recomendadas implementadas

Optimización de JavaScript de terceros

Si bien no es tan fácil optimizar los códigos JavaScript de terceros en comparación con las secuencias de comandos propias, Nikkei redujo y agrupó con éxito todas las secuencias de comandos relacionadas con anuncios, que ahora se publican desde su propia red de distribución de contenidos (CDN). Por lo general, las etiquetas relacionadas con los anuncios proporcionan 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 la red adicional para cada una de las secuencias de comandos descargadas. Nikkei adoptó el siguiente enfoque y mejoró el tiempo de inicialización en 100 ms y redujo el tamaño del JS en un 30%:

  • Agrupa todas las secuencias de comandos necesarias con un agrupador de JS (p.ej., Webpack)
  • Carga la secuencia de comandos empaquetada de forma asíncrona para que no bloquee la renderización de la página.
  • Adjuntar el banner del anuncio calculado a Shadow DOM (en comparación con iframe)
  • Carga anuncios de forma progresiva cuando el usuario se desplaza con la API de Intersection Observer

Mejorar el sitio web de forma progresiva

Además de estas optimizaciones básicas, Nikkei aprovechó el manifiesto de apps web y los service workers para que su sitio web se pueda instalar y hasta funcionar sin conexión. Cuando se usa la estrategia de prioridad en 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 inestable o sin conexión, lo que proporciona un rendimiento coherente y optimizado.

Hackea los Nikkei

Una empresa de periódicos tradicionales con una historia de más de 140 años aceleró con éxito su digitalización a través del poder de la Web y la AWP. Los ingenieros front-end 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.

Lecturas adicionales