Com uma história de publicação de mais de 140 anos, o Nikkei é uma das empresas de mídia mais confiáveis do Japão. Além do jornal impresso, eles têm mais de 450 milhões de visitas mensais às propriedades digitais. Para oferecer uma experiência melhor aos usuários e acelerar os negócios na Web, a Nikkei lançou um App Web Progressivo (PWA) - https://r.nikkei.com - em novembro de 2017. Agora, eles estão tendo resultados incríveis com a nova plataforma.
Melhorias de performance - Índice de velocidade duas vezes melhor - Tempo até a interação 14 segundos mais rápido - Carregamento 75% mais rápido com pré-busca
Impacto nos negócios - 2,3 vezes mais tráfego orgânico - 58% mais conversões (assinaturas) - 49% mais usuários ativos por dia - 2 vezes mais visualizações de página por sessão
Baixar o estudo de caso em PDF
Visão geral da empresa
Desafio
A Nikkei registrou um aumento rápido no tráfego de dispositivos móveis para o site legado à medida que os smartphones se tornaram o principal ponto de entrada na Web para muitos usuários. No entanto, usando o Lighthouse, uma ferramenta de auditoria que analisa uma página da Web e dá recomendações de melhoria em várias categorias, eles entenderam que o site não estava totalmente otimizado para dispositivos móveis em várias áreas e era muito lento para carregar.
O site deles levava cerca de 20 segundos para ficar consistentemente interativo e tinha uma média de 10 segundos no Índice de velocidade. Sabendo que 53% dos usuários de dispositivos móveis abandonam uma experiência se ela leva mais de três segundos para carregar, a Nikkei queria reduzir o tempo de carregamento para oferecer uma experiência melhor e acelerar os negócios na Web.
O valor da velocidade é indiscutível, especialmente para notícias financeiras. Fizemos da velocidade uma das nossas principais métricas, e os clientes gostaram da mudança.
Taihei Shigemori, gerente de estratégia digital
Resultados
A Nikkei alcançou ganhos de performance impressionantes. A pontuação do Lighthouse aumentou de 23 para 82. O tempo até a interação melhorou em 14 segundos. O tráfego orgânico, a velocidade, a taxa de conversão e os usuários ativos por dia também aumentaram.
O PWA é um app de várias páginas (MPA, na sigla em inglês) que reduz a complexidade do front-end e foi criado com JavaScript Vanilla. Cinco engenheiros de front-end trabalharam por um ano para alcançar esse desempenho.
Os engenheiros de front-end da Nikkei provaram que uma ótima experiência do usuário traz um bom desempenho comercial. Estamos totalmente comprometidos em continuar nossa jornada de trazer um novo nível de qualidade para a Web.
Hiroyuki Higashi. Gerente de produtos, Nikkei
Solução
A Nikkei criou e lançou um PWA usando design responsivo, JavaScript puro e uma arquitetura de várias páginas. O foco foi criar uma experiência do usuário agradável. Ao adicionar um service worker, eles conseguiram oferecer um desempenho previsível, independente da rede. Isso também garante que os principais artigos estejam sempre disponíveis e sejam carregados quase imediatamente porque são armazenados usando o Cache Storage. Eles adicionaram um manifesto do app da Web e, junto com o service worker, isso permite que os usuários instalem o PWA para facilitar o acesso. Para garantir que a performance estivesse totalmente sob controle, eles otimizaram o JavaScript de terceiros.
Práticas recomendadas
- Melhore a velocidade de carregamento e a interatividade usando APIs da Web modernas, compactação e práticas de otimização de código.
- Melhore progressivamente a UX adicionando recursos de PWA, como suporte off-line e "Adicionar à tela inicial".
- Crie orçamentos de performance na estratégia de performance.
Aprofundamento técnico
A velocidade é importante
A velocidade é mais importante do que nunca. Com o aumento do uso de smartphones como principal dispositivo de navegação, a Nikkei percebeu um rápido aumento no tráfego móvel no serviço. No entanto, usando o Lighthouse, eles perceberam que o site legado não estava totalmente otimizado para dispositivos móveis. O índice de velocidade tinha uma média de 10 segundos, o carregamento inicial era muito lento e havia um pacote JavaScript grande. Era hora de a Nikkei reconstruir o site e adaptar as práticas recomendadas de desempenho na Web. Confira os resultados e as principais otimizações de desempenho no novo PWA.
Como usar APIs da Web e práticas recomendadas para acelerar o carregamento
Solicitações de pré-carregamento de chaves
É importante priorizar o carregamento do caminho crítico. Usando o HTTP/2 Server Push, eles podem priorizar pacotes JavaScript e CSS essenciais que um usuário vai precisar.
Evite várias viagens de ida e volta caras para qualquer origem
O site precisava carregar recursos de terceiros para rastreamento, anúncios e muitos
outros casos de uso. Eles usaram
<link rel=preconnect>
para pré-resolver o handshake e a negociação de DNS/TCP/SSL para essas origens principais de terceiros.
Pré-busca dinâmica da próxima página
Quando tinham certeza de que o usuário navegaria para uma determinada página, eles não esperavam que a navegação acontecesse. O Nikkei adiciona dinamicamente
<link rel=prefetch>
ao <head> e busca previamente a próxima página antes que o usuário clique
no link. Isso permite a navegação instantânea na página.
CSS in-line do caminho crítico
Reduzir o CSS de bloqueio de renderização é uma das práticas recomendadas de carregamento rápido. O site inclui todos os CSS críticos com 0 folhas de estilo de bloqueio de renderização. Essa otimização reduziu o First Meaningful Paint em mais de um segundo.
Otimizar pacotes JavaScript
Na experiência anterior, os pacotes JavaScript da Nikkei eram grandes, pesando mais de 300 KB no total. Com uma reescrita para JavaScript simples e otimizações de agrupamento modernas, como divisão baseada em rotas e eliminação de código não utilizado, foi possível reduzir esse excesso. Eles reduziram o tamanho do pacote JavaScript em 80%, diminuindo para 60 KB com o RollUp.
Outras práticas recomendadas implementadas
- Compactação: Gzip/Brotli todos os recursos compactáveis usando a CDN Fastly.
- Armazenamento em cache: ative o armazenamento em cache HTTP e o armazenamento em cache do lado da borda.
- Otimização de imagens: use o imgix para otimização e detecção de formato de imagem.
- Carregamento lento de recursos não essenciais: use a API Intersection Observer para carregar fragmentos abaixo da dobra.
- Tenha uma estratégia de carregamento de fontes da Web: priorize o uso da fonte do sistema.
- Otimize a primeira renderização significativa: renderize o conteúdo no lado do servidor.
- Adote orçamentos de performance: mantenha baixos os tempos de transmissão e análise/compilação do JavaScript.
Otimizar JavaScript de terceiros
Embora não seja tão fácil otimizar JavaScripts de terceiros em comparação com seus próprios scripts, a Nikkei conseguiu minimizar e agrupar todos os scripts relacionados a anúncios, que agora são veiculados na própria rede de distribuição de conteúdo (CDN, na sigla em inglês). As tags relacionadas a anúncios geralmente fornecem um snippet para iniciar e carregar outros scripts necessários, o que muitas vezes bloqueia a renderização da página e também exige um tempo extra de retorno da rede para cada um dos scripts baixados. A Nikkei adotou a seguinte abordagem e melhorou o tempo de inicialização em 100 ms, além de reduzir o tamanho do JS em 30%:
- Agrupe todos os scripts necessários usando um bundler JS (por exemplo, Webpack)
- Carregue o script agrupado de forma assíncrona para que ele não bloqueie a renderização da página.
- Anexar o banner de anúncio calculado ao shadow DOM (em vez de iframe)
- Carregar anúncios progressivamente na rolagem do usuário com a API Intersection Observer
Aprimoramento progressivo do site
Além dessas otimizações básicas, a Nikkei aproveitou o manifesto do app da Web e os service workers para tornar o site instalável e até mesmo funcionar off-line. Ao usar a estratégia cache-first no service worker, todos os recursos principais e os principais artigos são armazenados no Cache Storage e reutilizados mesmo em situações de contingência, como uma rede instável ou off-line, oferecendo desempenho consistente e otimizado.
Hack the Nikkei
Uma empresa tradicional de jornal diário com mais de 140 anos de história acelerou com sucesso a digitalização com o poder da Web e do PWA. Os engenheiros de front-end da Nikkei provaram que uma ótima experiência do usuário gera um bom desempenho comercial. A empresa vai continuar a jornada de trazer um novo nível de qualidade para a Web.