Com um histórico editorial de mais de 140 anos, a Nikkei é uma das empresas de mídia mais confiáveis do Japão. Além do jornal impresso, a empresa tem mais de 450 milhões de visitas mensais às suas propriedades digitais. Para oferecer uma experiência melhor ao usuário e acelerar os negócios na Web, a Nikkei lançou um Progressive Web App (PWA) - https://r.nikkei.com - em novembro de 2017. Agora eles estão tendo resultados incríveis com a nova plataforma.
Melhorias de desempenho: - Índice de velocidade duas vezes melhor - Tempo de carregamento até a interação 14 segundos mais rápido - Carregamento 75% mais rápido com pré-carregamento
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
Faça o download do PDF do estudo de caso
Visão geral da empresa
Desafio
A Nikkei viu um rápido aumento 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 verifica uma página da Web e oferece recomendações sobre como melhorar 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 estava demorando cerca de 20 segundos para ficar consistentemente interativo e 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 é incontestável, especialmente para notícias financeiras. A velocidade foi uma das nossas principais métricas, e nossos clientes gostaram da mudança.
Taihei Shigemori, gerente de estratégia digital
Resultados
A Nikkei alcançou ganhos de performance impressionantes. A pontuação deles no Lighthouse subiu de 23 para 82. O tempo de carregamento 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.
A PWA é um app de várias páginas (MPA, na sigla em inglês) que reduz a complexidade do front-end, criado com o JavaScript vanilla. Cinco engenheiros de front-end principais trabalharam por um ano para alcançar esse desempenho.
Os engenheiros de front-end da Nikkei provaram que uma ótima UX traz uma boa performance para os negócios. 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 Progressive Web App usando design responsivo, JavaScript vanilla e uma arquitetura de várias páginas, com foco em criar uma experiência do usuário incrível. Ao adicionar um service worker, eles conseguiram oferecer desempenho previsível, independentemente da rede. Isso também garante que os principais artigos estejam sempre disponíveis e 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 que ele seja facilmente acessível. Para garantir que o desempenho 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, compressão e práticas de otimização de código.
- Melhore a UX progressivamente 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. Como os smartphones se tornaram o principal dispositivo de navegação de muitos usuários, a Nikkei observou um aumento rápido do tráfego de dispositivos móveis no serviço. No entanto, usando o Lighthouse, a empresa percebeu que o site legado não estava totalmente otimizado para dispositivos móveis: o índice de velocidade durava em média 10 segundos, carregamento inicial muito lento e um grande pacote de JavaScript. Era hora de a Nikkei reconstruir o site e adaptar as práticas recomendadas de desempenho da Web. Confira os resultados e as principais otimizações de desempenho na nova PWA.
Como usar APIs da Web e práticas recomendadas para acelerar o carregamento
Pré-carregar as principais solicitações
É importante priorizar o carregamento do caminho crítico. Com o push do servidor HTTP/2, eles podem priorizar pacotes JavaScript e CSS essenciais que sabem que um usuário vai precisar.
Evite 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. Ela usou <link rel=preconnect> para pré-resolver o handshake de DNS/TCP/SSL e a negociação dessas origens de terceiros importantes.
Fazer prefetched dinâmico da próxima página
Quando estava confiante de que o usuário navegará até uma determinada página, não
esperava apenas a navegação. O Nikkei adiciona dinamicamente
<link rel=prefetch>
ao <head> e faz a busca antecipada da próxima página antes que o usuário clique
no link. Isso permite a navegação instantânea entre páginas.
CSS de caminho crítico em linha
Reduzir o CSS que bloqueia a renderização é uma das práticas recomendadas para acelerar o carregamento. O site inclui todos os CSS críticos com 0 folha de estilos de bloqueio de renderização. Essa otimização reduziu a First Meaningful Paint em mais de um segundo.
Otimizar pacotes JavaScript
Na experiência anterior, os pacotes JavaScript do Nikkei estavam grandes, pesando mais de 300 KB no total. Com uma reescrita para o JavaScript vanilla e otimizações modernas de agrupamento, como o agrupamento baseado em rotas e o desempacotamento de árvores, foi possível reduzir esse inchaço. O tamanho do pacote de JavaScript foi reduzido em 80%, caindo para 60 KB com o RollUp.
Outras práticas recomendadas implementadas
- Compactação: todos os recursos compactáveis do Gzip/Brotli usando o Fastly CDN
- Armazenamento em cache: ative o armazenamento em cache HTTP e o armazenamento em cache do lado do cliente.
- Otimização de imagens: use o imgix para otimização e detecção de formato de imagem.
- Carregamento lento de recursos não críticos: use a API Intersection Observer para carregar fragmentos abaixo da dobra.
- Ter uma estratégia de carregamento de fontes da Web: priorize o uso da fonte do sistema.
- Otimizar a primeira pintura significativa: renderize o conteúdo do lado do servidor.
- Adotar orçamentos de performance: manter os tempos de transmissão e análise/compilação do JavaScript baixos
Otimização do JavaScript de terceiros
Embora não seja tão fácil otimizar JavaScripts de terceiros em comparação com seus próprios scripts, o Nikkei minimizou e empacoitou todos os scripts relacionados a anúncios, que agora são veiculados pela própria rede de fornecimento de conteúdo (CDN). As tags relacionadas a anúncios geralmente fornecem um snippet para iniciar e carregar outros scripts necessários, que muitas vezes bloqueiam a renderização da página e também exigem mais tempo de resposta da rede para cada um dos scripts transferidos por download. A Nikkei adotou a seguinte abordagem e melhorou o tempo de inicialização em 100ms, além de reduzir o tamanho do JS em 30%:
- Junte todos os scripts necessários usando um bundler de JS (por exemplo, Webpack)
- Carregamento assíncrono do script empacotado para que ele não bloqueie a renderização da página.
- Anexar o banner de anúncio calculado ao Shadow DOM (em vez do iframe)
- Carregar anúncios progressivamente ao rolar a página com a API IntersectionObserver
Melhorar progressivamente o site
Além dessas otimizações básicas, a Nikkei usou 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 armazenamento em cache e reutilizados, mesmo em situações de contingência, como uma rede instável ou off-line, proporcionando desempenho consistente e otimizado.
Hack the Nikkei
Uma empresa tradicional de jornal diário com um histórico de mais de 140 anos acelerou a digitalização com o poder da Web e do PWA. Os engenheiros de front-end da Nikkei provaram que uma ótima UX gera uma boa performance de negócios. A empresa vai continuar sua jornada para trazer um novo nível de qualidade para a Web.