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
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
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
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
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
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
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
- Compresión: Todos los recursos que se pueden comprimir con Gzip y Brotli con Fastly CDN
- Almacenamiento en caché: Habilita el almacenamiento en caché de HTTP y el almacenamiento en caché perimetral.
- Optimización de la imagen: Usa imgix para la optimización y la detección del formato de imagen.
- Recursos no críticos de carga diferida: Usa la API de Intersection Observer para cargar fragmentos de la mitad inferior de la página.
- Ten una estrategia de carga de fuentes web: Prioriza el uso de la fuente del sistema.
- Optimiza el primer procesamiento de imagen significativo: renderiza el lado del servidor de contenido.
- Adopta presupuestos de rendimiento: Mantiene bajos los tiempos de transmisión, análisis y compilación de JavaScript.
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.