Com um histórico de publicações 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 recebe mais de 450 milhões de visitas mensais às propriedades digitais. Para melhorar a experiência do usuário e acelerar os negócios na Web, Nikkei lançou um Progressive Web App (PWA) em novembro de 2017, o link https://r.nikkei.com. Agora, eles estão vendo resultados incríveis com a nova plataforma.
Ganhos de desempenho - Índice de velocidade 2X melhor - Tempo para interação 14 segundos mais rápido - Carregamento 75% mais rápido com pré-busca
Impacto nos negócios: 2,3X mais tráfego orgânico - 58% mais conversões (assinaturas) - 49% mais usuários ativos por dia - 2X mais visualizações de página por sessão
Faça o download do estudo de caso em PDF
Visão geral da empresa
Desafio
A Nikkei observou um aumento rápido no tráfego de dispositivos móveis para o site legado, já que os smartphones se tornaram o principal ponto de entrada na Web para muitos usuários. No entanto, ao usar o Lighthouse, uma ferramenta de auditoria que analisa uma página da Web e fornece recomendações sobre como melhorar em várias categorias, a empresa percebeu que o site não estava totalmente otimizado para dispositivos móveis em várias áreas e que o carregamento era muito lento.
O site levou cerca de 20 segundos para se tornar interativo de forma consistente, e a média foi de 10 segundos no índice de velocidade. Sabendo que 53% dos usuários de dispositivos móveis abandonam uma experiência quando ela leva mais de três segundos para carregar, 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 no caso das notícias financeiras. Transformamos a velocidade em uma das nossas principais métricas, e nossos clientes adoraram essa mudança.
Taihei Shigemori, gerente de estratégia digital
Resultados
Nikkei teve ganhos de desempenho impressionantes. A pontuação do Lighthouse aumentou de 23 para 82. A medição do tempo para interação da empresa melhorou em 14 segundos. O tráfego orgânico, a velocidade, a taxa de conversão e os usuários diários ativos 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, criado com o Vanilla JavaScript. 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 um bom desempenho para os negócios. Estamos totalmente comprometidos em continuar nossa jornada para trazer um novo nível de qualidade para a Web.
Hiroyuki Higashi. Gerente de produtos, Nikkei
Solução
Nikkei criou e lançou um Progressive Web App usando design responsivo, JavaScript baunilha e uma arquitetura de várias páginas. A equipe se concentrou em criar uma experiência agradável para os usuários. Ao adicionar um service worker, eles conseguiram fornecer um 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 armazenamento em cache. A empresa adicionou um manifesto de 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. E 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 modernas da Web, compactação e práticas de otimização de código.
- Melhore a UX progressivamente adicionando recursos de PWA, como suporte off-line e adição à tela inicial.
- Transforme orçamentos de performance em estratégias de performance.
Aprofundamento técnico
A velocidade é um fator importante
A velocidade é mais importante do que nunca. À medida que os smartphones se tornaram o principal dispositivo de navegação para muitos usuários, Nikkei observou um aumento rápido no 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, com um índice de velocidade com uma média de 10 segundos, carregamento inicial muito lento e um pacote grande de JavaScript. Era hora de Nikkei reconstruir o site e adaptar as práticas recomendadas de desempenho da Web. Aqui estão os resultados e as principais otimizações de desempenho no novo PWA.
Aproveitar as APIs da Web e práticas recomendadas para acelerar o carregamento
Pré-carregar solicitações principais
É importante priorizar o carregamento do caminho crítico. Com o envio push de servidor HTTP/2, a empresa consegue priorizar pacotes críticos de JavaScript e CSS de que o usuário precisa.
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. O cliente usou
<link rel=preconnect>
para resolver previamente o handshake de DNS/TCP/SSL e a negociação dessas principais origens
de terceiros.
Fazer a pré-busca dinâmica da próxima página
Quando os usuários estavam seguros de que o usuário acessaria uma determinada página, eles
não apenas esperaram a navegação acontecer. Nikkei adiciona
<link rel=prefetch>
de maneira dinâmica à <head> e pré-busca a próxima página antes de o usuário clicar
no link. Isso permite a navegação instantânea nas páginas.
CSS de caminho crítico inline
Reduzir o CSS que bloqueia a renderização é uma das práticas recomendadas de carregamento rápido. O site insere todos os CSS essenciais inline com 0 folhas de estilo de bloqueio de renderização. Essa otimização reduziu a primeira exibição significativa em mais de 1 segundo.
Pacotes de JavaScript do Optimize
Na experiência anterior, os pacotes JavaScript de Nikkei estavam cheios, pesando mais de 300 KB no total. Com uma reescrita do JavaScript básico e otimizações de agrupamento modernas, como agrupamento baseado em rota e tree shaking, foi possível eliminar essa sobrecarga. Ela reduziu o tamanho do pacote JavaScript em 80%, caindo para 60 KB com o RollUp.
Outras práticas recomendadas implementadas
- Compactação: todos os recursos compactáveis Gzip/Brotli usando o Fastly CDN
- Armazenamento em cache: ative o armazenamento em cache HTTP, o armazenamento em cache do lado da borda
- Otimização de imagens: use o imgix (em inglês) para otimização e detecção do formato da imagem.
- Recursos não essenciais de carregamento lento: use a API Cross observer para carregar fragmentos abaixo da dobra
- Tenha uma estratégia de carregamento de fontes na Web: priorize o uso de fontes do sistema.
- Otimizar a primeira exibição significativa: renderiza o lado do servidor de conteúdo.
- Adotar orçamentos de performance: manter os tempos de transmissão e análise/compilação do JavaScript baixos
Como otimizar o JavaScript de terceiros
Embora não seja tão fácil otimizar JavaScripts de terceiros em comparação com seus próprios scripts, Nikkei minificou e agrupou 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 ao anúncio geralmente fornecem um snippet para iniciar e carregar outros scripts necessários, que geralmente bloqueiam a renderização da página e também exigem um tempo extra de resposta da rede para cada um dos scripts salvos. 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).
- Carrega de forma assíncrona o script empacotado para não bloquear a renderização da página.
- Anexar o banner de anúncio calculado ao Shadow DOM (em vez do iframe)
- Carregar anúncios progressivamente na rolagem do usuário com a API Intersection Observer
Aprimorar o site progressivamente
Além dessas otimizações básicas, Nikkei aproveitou o Manifesto do app da Web e os service workers para tornar o site instalável e até mesmo funcionar off-line. Usando a estratégia que prioriza o cache no service worker, todos os principais recursos e artigos principais são armazenados no armazenamento em cache e reutilizados mesmo em situações de contingência, como uma rede lenta ou off-line, fornecendo desempenho consistente e otimizado.
Invade o Nikkei
Uma empresa de jornal diário tradicional com mais de 140 anos de história acelerou a digitalização com o poder da Web e do PWA. Os engenheiros front-end de Nikkei provaram que uma ótima UX gera um forte desempenho de negócios. A empresa continuará sua jornada para levar um novo nível de qualidade para a Web.