Otimizar o seu site do CMS Hub para desempenho

É mais fácil criar partindo de uma base sólida, que foi construída com o desempenho em mente, do que tentar corrigir problemas de desempenho mais tarde. Uma metáfora para isso seria: é mais fácil construir um carro veloz do zero do que comprar um carro lento e tentar torná-lo veloz.

O HubSpot CMS Boilerplate foi desenvolvido para ser rápido e incentivar as práticas recomendadas. Consulte o LEIAME do GitHub para ver as pontuações atuais no lighthouse e no website grader.

Ao construir a partir do boilerplate, você sabe que, tirando o código adicionado por você, ele sempre atingirá essas pontuações. Isso significa que você pode focar sua atenção no código que adicionou com base no boilerplate. 

A maioria das técnicas e práticas recomendadas de otimização do desempenho da web não são específicas da HubSpot. Isso porque a maioria dos gargalos de desempenho do site não são específicos da HubSpot. 

A maioria dos problemas de desempenho se enquadra em duas categorias: renderização e carregamento.

• O desempenho de carregamento é a eficiência com que todos os arquivos necessários são transferidos da página web para o navegador do usuário.
• O desempenho de renderização é a eficiência com que o navegador consegue pegar tudo o que baixou e exibir o resultado final para o usuário.

O desempenho de carregamento é um pouco mais fácil de compreender — a quantidade de arquivos, o tamanho dos arquivos e a velocidade de entrega desses arquivos determina o desempenho de carregamento. Já o desempenho de renderização é mais complicado. Folhas de estilo em cascata (CSS), JavaScript (JS), imagens, vídeos, o dispositivo que o visitante está usando, o navegador web que está sendo usado etc. são fatores significativos. O CSS pode causar bloqueio de renderização. Um CSS mal escrito pode causar mudança cumulativa de layout (CLS) durante a renderização da página. As imagens podem causar CLS e sobrecarregar a RAM. Os reprodutores de vídeo podem causar CLS; alguns formatos de arquivo exigem mais trabalho de processamento. O JS pode manipular o Modelo de Objeto de Documento (DOM ) e o Modelo de Objeto de Folhas de Estilo em Cascata (CSSOM ) de uma página, causando qualquer um desses problemas. O JS também pode fazer uso intensivo de recursos. Todos estes fatores precisam de ser equilibrados e as práticas recomendadas precisam ser seguidas para garantir uma experiência rápida para todos os visitantes.

As imagens são predominantes em quase todas as páginas da web. As imagens geralmente são os maiores arquivos de uma página. Quanto mais imagens você tiver, e quanto maiores elas forem, mais tempo sua página levará para carregar. Imagens animadas, como gifs e webps animados, também ocupam mais espaço do que imagens não animadas do mesmo tamanho. Alguns formatos de imagem também são mais eficientes do que outros — e melhores para determinados cenários.

1. A coisa mais importante que você pode fazer é otimizar suas imagens para a web. A otimização de imagens é uma responsabilidade compartilhada entre os desenvolvedores e criadores de conteúdo.
2. Use menos imagens por página.
3. Use o formato de imagem adequado para o caso de uso.
4. Use Scalable Vector Graphics (SVGs) sempre que possível. Os SVGs podem ser redimensionados infinitamente sem perder a qualidade. Colocar os SVGs em linha faz sentido ao trabalhar com animações. Em gráficos estáticos, a criação de uma sprite sheet SVG, ou simplesmente tratá-la como um elemento img normal ou imagem de fundo, otimiza o desempenho.
5. Use o carregamento lento de imagens de forma inteligente.
6. Certifique-se de que os elementos img contenham atributos HTML de altura e largura. Isso facilita a navegação nos navegadores durante o tempo de renderização e também faz com que o HubSpot possa adicionar de forma inteligente um srcset para você. O HubSpot não só ajuda a optimizar, como também os navegadores web podem otimizar de forma inteligente a mudança cumulativa de layout quando você fornece uma largura e altura. 
7. Use a propriedade CSS aspect-ratio para reservar espaço quando as dimensões das imagens podem mudar.
8. Use resize_image_url para forçar o redimensionamento das imagens para uma determinada resolução.
9. Para imagens de fundo, use consultas de mídia em combinação com resize_image_url para fornecer imagens em tamanhos que façam sentido para o dispositivo.
10. Para grandes hero images, você pode pré-carregá-las usando <link rel="preload" as="image" href="http://example.com/img_url.jpg"> dentro de uma tag require_head. Use essa técnica com moderação; o uso excessivo pode prejudicar o desempenho.

Fundos de vídeo e vídeos com reprodução automática podem ser um diferencial em um site. Mas infelizmente, eles têm um custo. Os fundos de vídeo são frequentemente utilizados no cabeçalho dos sites. Quando um vídeo é reproduzido automaticamente, isso significa que o navegador precisa começar a carregar o vídeo de imediato. Isso pode ser especialmente problemático para usuários com conexões mais lentas ou que usam dados móveis.

1. Evite usar o vídeo com reprodução automática. Se o que você está mostrando é uma animação de fundo, considere usar animações em CSS ou javascript. Se você precisa exibir um vídeo com reprodução automática:
2. Escolha uma resolução razoável para o vídeo com base no seu caso de uso, e aplique um efeito sobre o vídeo para tornar uma resolução mais baixa menos perceptível.
3. Certifique-se de que a qualidade do vídeo seja ajustada com base no dispositivo e na conexão. A melhor maneira de fazer isso é usando um serviço de compartilhamento/hospedagem de vídeo, como YouTube, Vidyard ou Vimeo.
4. Desative a reprodução automática em dispositivos móveis; exiba uma imagem de fallback em vez disso.

O JavaScript (JS) é útil para adicionar interatividade ao seu site. O carregamento de muito código JS, em geral, aumenta o tamanho dos arquivos JS e o tempo que o navegador leva para renderizar os elementos interativos. Carregar JS no <head> também pode ser um problema, pois trata-se de um recurso de bloqueio de renderização por padrão. Além disso, o JS é executado no dispositivo dos visitantes, o que significa que está limitado aos recursos do próprio dispositivo.

1. Quando o CMS do HubSpot foi lançado, o jQuery era carregado por padrão em <head> . Você pode removê-lo totalmente em Configurações > Site > Páginas, ou atualize para a versão mais recente do jQuery. Tenha cuidado ao alterar essas configurações em sites mais antigos desenvolvidos por terceiros. Eles podem ter sido construídos com base em jQuery ou com base no carregamento de jQuery no cabeçalho.
2. Certifique-se de que o javascript seja carregado antes de </body> para evitar o bloqueio da renderização. Você pode usar require_js para carregar js para módulos ou modelos somente quando necessário e sem carregar acidentalmente o javascript várias vezes para várias instâncias de um módulo.
3. Considere em reescrever seu JS para ser mais eficiente. Use menos plugins JS; use HTML semântico quando possível. Por exemplo, para menus suspenso, use <details> e <summary>. Para os modais, use <dialog>.
4. Se você tiver uma biblioteca JS gigantesca, mas usar apenas alguns pequenos recursos, considere usar o vanilla JS ou carregar um subconjunto da biblioteca, se possível.
5. Use o require_js para carregar o JS somente quando necessário e apenas uma vez por página. Ao usar require_js, use atributos async ou defer para melhorar o desempenho da página.
6. Para controlar onde e quando o JavaScript de um módulo é carregado, use js_render_options no arquivo meta.json do módulo.
7. Ao carregar recursos externos, use comandos  preconnect e dns-prefetch apropriadamente para proporcionar uma experiência mais rápida.
8. Limite o número de scripts de rastreamento em uso. Os scripts de rastreamento tentam compreender todas as ações que um usuário está realizando em uma página para fornecer insights. É muito código para analisar o que o usuário está fazendo. Cada scripts de rastreamento amplifica isso.

A maioria das práticas recomendadas de desempenho/velocidade não são específicas do HubSpot. O CMS do HubSpot trata automaticamente de muitos problemas de desempenho comuns para você. Essas otimizações incluem:

• CDN com otimização de imagem e conversão automática de WebP
• HTTP2
• Minificação de Javascript e CSS
• Cache de navegador e servidor
• Pré-renderização
• Reescrita de domínio
• Compressão Brotli (com fallback para compressão GZIP)
• Posts de blog da HubSpot suportam AMP

Ao incluir CSS em um módulo personalizado, o HubSpot carrega o module.css de forma inteligente apenas quando um módulo é usado em uma página, e só o carrega uma vez, independentemente do número de instâncias do módulo que existem na página. Por padrão, module.css não carrega de forma assíncrona, mas você pode alterar isso incluindo css_render_options no arquivo meta.json do módulo.

Há muita coisa que pode ser feita para otimizar um site para velocidade e muitos dos tópicos exigem mais detalhes. Compilamos alguns recursos fantásticos e incentivamos você a consultá-los ao trabalhar na otimização do seu site.

• Velocidade e desempenho do site: o que você pode fazer, e como o HubSpot ajuda
• Como melhoramos a velocidade da página no HubSpot.com
• Quinze dicas para acelerar o seu site
• Cinco maneiras fáceis de ajudar a reduzir o tempo de carregamento da sua página da web
• Guia de oito passos para alcançar 100% de velocidade de página do Google
• Otimização do site - HubSpot Academy
• Web.dev
• Como otimizamos o HubSpot CMS - Jeff Boulter
• O humilde elemento img e os Core Web Vitals - Smashing Magazine

Existem muitas ferramentas que podem ser usadas para melhorar o desempenho e testá-lo. É útil compreender o que são essas ferramentas e como usá-las. Esta lista não é exaustiva e foi fornecida pela nossa comunidade de desenvolvedores.

Otimizar suas imagens para a web antes de carregá-las e exibi-las ajuda a garantir que você não apresentará uma imagem superdimensionada na tela e para um caso de uso específico. 

Ferramentas populares de otimização de imagens:

• ImageOptim
• Adobe Photoshop
• Adobe Illustrator
• Optimizilla

O teste de desempenho e a otimização devem ser processos separados da criação de um site. Há uma infinidade de ferramentas disponíveis para testar a velocidade de um site. É importante compreender essas ferramentas e como elas funcionam, para que você possa tomar decisões informadas sobre melhorias de desempenho.

Algumas ferramentas medem de forma rigorosa, outras classificam. É importante compreender como isso realmente funciona.

Ferramentas que medem geralmente testam o tempo de carregamento, o tempo de execução de scripts, o tempo até a primeira exibição de conteúdo, o tempo de rede para download de ativos etc. Essas ferramentas geralmente fornecem resultados que declaram tempos específicos para cada uma dessas métricas. Se você testar novamente, as medidas mudarão ligeiramente porque nem todas as páginas são exatamente idênticas. 

Ferramentas que classificam fazem mais do que medir velocidades, elas informa se seu desempenho é bom ou ruim, muitas vezes usando uma porcentagem ou escala de letras. Essa escala deve ser usada como uma ferramenta para motivar os desenvolvedores e profissionais de marketing a melhorar. Há tantas métricas e aspectos diferentes de desempenho que precisam ser levados em consideração. Você não pode simplesmente basear o seu desempenho geral em uma métrica, além de que algumas métricas podem ter diferentes níveis de efeito sobre o desempenho percebido. Portanto, estas ferramentas ponderam as métricas de forma diferente para calcular o desempenho global. Não existe um padrão do setor para ponderar as métricas. Com o tempo, essa ponderação pode mudar, como ocorreu com o Google Page Speed. Também não há nenhum padrão do setor aceito para o que é considerado o valor mínimo ou máximo ideal para métricas individuais. Algumas ferramentas se baseiam em um percentil de sites que foram testados. O que significa que os seus resultados são comparados com outros sites que foram testados. O resultado é que a faixa de velocidade "bom/excelente" se torna cada vez mais difícil de ser alcançada com o tempo. Algumas ferramentas usam a experiência do usuário, a retenção de visitantes e a pesquisa baseada em ROI para determinar qual deve ser o limiar para uma boa pontuação. Tenha em mente também que nem todas as ferramentas consideram o desempenho de carregamento de página subsequente. Por exemplo, o sistema de módulos do HubSpot separa o css e o JS para módulos individuais, e só carrega esses ativos quando o módulo é realmente colocado na página. Isso pode resultar em vários arquivos css menores, que podem ser sinalizados pelo Google Page Speed Insights. A realidade, no entanto, é que você não precisará baixar nenhum css ou js para nenhum módulo que se repita na próxima página, eles serão armazenados no cache. Em vez disso, você só precisará baixar os arquivos para os módulos que ainda não exibiu, e isso representa kilobytes, em vez de um arquivo monolítico.

Com relação às ferramentas de avaliação, você deve usar várias delas e esforçar-se para obter a melhor pontuação possível em cada uma delas. Porém, saiba que elas avaliarão as coisas de forma diferente. Esforços que podem melhorar uma pontuação em uma ferramenta podem não melhorá-la em outras.

Ferramentas de teste de desempenho populares:

• Website Grader
• GTMetrix
• Google Page Speed Insights e outras ferramentas de desempenho do Google.
• Pingdom
• WebPageTest

Documentos relacionados:

• Como funciona a pontuação de desempenho do Lighthouse
• Roteiro de otimização de sites (Core Web Vitals) | Mark Ryba