Como equilibrar velocidades de carregamento de página da web com conteúdo rico

O tempo de carregamento rápido da página e o conteúdo rico e interativo são essenciais para o sucesso de um website, mas encontrar um equilíbrio entre os dois pode ser um desafio.

Não é nenhum segredo que os tempos de carregamento da página são extremamente importantes para o sucesso de um site. Os algoritmos de pesquisa do Google favorecem tempos de carregamento rápidos e também há muitas pesquisas que mostram que um pequeno aumento no tempo de carregamento da página pode ter um impacto negativo nas conversões. O gerente de marketing digital da Hallam, Tom Whiley, escreveu uma excelente postagem no blog sobre como melhorar a velocidade de carregamento de sua página no ano passado. Enquanto nossos parceiros de hospedagem, WP Engine, produziram um ótimo infográfico sobre a velocidade de carregamento da página.

Os sites também precisam ser ricos em conteúdo, imagens e interatividade para encorajar conversões. Isso inevitavelmente leva a páginas maiores, o que naturalmente diminui o tempo de carregamento da página.

O conflito entre a necessidade de velocidade e a demanda por conteúdo rico pode paralisar os projetos de design. Portanto, é fundamental encontrar um equilíbrio que satisfaça os dois requisitos.

Neste blog, compartilharei com você uma abordagem que o ajudará a equilibrar esses dois desafios contraditórios.

Relacione a velocidade de uma página com sua finalidade

Não é possível prever os tempos de carregamento até que um site seja desenvolvido em um estágio razoavelmente maduro, então é melhor adotar uma abordagem iterativa para medir e melhorar a velocidade.

O principal ponto de partida é identificar as páginas de destino de SEO do site e suas páginas de conteúdo rico. Você pode então se concentrar em reduzir o tamanho da página e a velocidade de carregamento das páginas SEO tanto quanto possível.

Da mesma forma, as páginas de destino ricas podem ter um pouco mais de espaço para interação do usuário.

Este é um processo básico que pode ser aplicado:

1. Identifique as páginas de destino principais que serão o alvo para velocidades de carregamento reduzidas.
2. Projete com base nas melhores práticas para tempos de carregamento baixos.
3. Decida os recursos em torno das melhores práticas para tempos de carregamento baixos.
4. Desenvolva a (s) página (s).
5. Avalie e procure oportunidades para economizar tempo de carregamento.
6. Repita 4-5 conforme apropriado.

Isso cobre apenas a primeira parte da história. As principais páginas de SEO precisam ser monitoradas continuamente para tempos de carregamento de página para garantir que ainda tenham o desempenho esperado, especialmente ao usar um sistema de gerenciamento de conteúdo que permite que qualquer pessoa edite as páginas.

Portanto, após o lançamento do site, existem duas etapas simples que podem ser seguidas:

1. Configure uma verificação mensal das principais páginas-chave de destino para garantir que ainda estejam funcionando.
2. Use uma ferramenta de monitoramento de velocidade da página que é acionada quando o desempenho da página está abaixo de um nível acordado.

Considerações de projeto para otimizar as velocidades de carga

O design do site desempenha um papel fundamental na determinação do quanto é possível otimizar os tempos de carregamento da página. Quando se trata de páginas da web, o tamanho realmente importa. O objetivo é manter o tempo de carregamento da página abaixo de 500k, idealmente, mas certamente abaixo de 1 MB no máximo.

Aqui estão algumas etapas a serem seguidas para minimizar os tempos de carregamento:

1. Minimize o uso de imagens nas principais páginas de destino o máximo possível. É muito fácil usar imagens para fazer uma página parecer rica quando o uso sutil de iconografia e design pode ter o mesmo efeito.
2. Onde imagens são usadas, elas devem ser otimizadas, garantindo que não haja degradação inaceitável da qualidade.
3. Use páginas de destino enxutas otimizadas para pesquisa orgânica e mantenha qualquer conteúdo rico em páginas mais profundas que não estão sendo direcionadas para pesquisa orgânica.
4. Evite muitos layouts exclusivos e complexos em vários modelos. Quanto mais simples for a marcação HTML, menores serão os arquivos.
5. Evite elementos interativos complexos que dependem de bibliotecas Javascript pesadas. Pode parecer legal ver algo se mover pela tela, mas é realmente necessário?

Considerações técnicas durante a implementação

E, finalmente, podemos abordar alguns dos aspectos mais técnicos da velocidade de carregamento da página que precisam ser considerados como parte da escolha de hospedagem:

1. Remova a dependência de scripts de terceiros sempre que possível. Isso causa problemas porque não apenas você depende dos scripts que carregam antes de a página carregar, mas às vezes eles também estão sob carga alta e mais lenta do que o normal. Isso pode levar a tempos de carregamento “irregulares”.
2. Empregue técnicas de carregamento lento para garantir que as imagens que não aparecem acima da dobra sejam carregadas quando o usuário rolar para a visualização.
3. Faça melhor uso de imagens responsivas. Houve alguns avanços em como as imagens responsivas são tratadas pelos navegadores, o que significa que não precisamos fornecer uma única imagem grande que funcione em todas as portas de visualização e pode oferecer uma imagem melhor para resoluções específicas.
4. Certifique-se de que os vídeos incorporados sejam carregados após o carregamento da página, e não como parte do carregamento da página. Isso significa que os usuários verão uma imagem de visualização de um vídeo e, em seguida, verão o vídeo real após clicar no link.
5. Evite grandes arquivos htaccess para redirecionamentos 301 e combine regras em redirecionamentos de categoria em massa, em vez de redirecionamentos individuais de página a página.
6. Use um CDN para imagens. Isso precisará ser medido, pois os CDNs podem ser prejudiciais ao desempenho, se a base de usuários do site for particularmente localizada.
7. Minimize os arquivos CSS e Javascript. Você já deve estar fazendo isso na maioria dos casos, mas pode haver outras oportunidades para reduzir alguns dos arquivos nas páginas principais. Esta é uma parte central para a tomada de decisão sobre a instalação de novos plug-ins.
8. Abandone o suporte para navegadores mais antigos. Navegadores mais antigos exigem que arquivos CSS e JS específicos sejam criados e carregados no site condicionalmente. Se pudermos removê-los completamente, será um pedido a menos a ser feito.
9. Minimize o número de plug-ins usados ​​em seu site. Nós regularmente herdamos sites que sofrem com o excesso de plug-ins. Não é um problema novo ao trabalhar com um CMS, mas ainda é um grande problema.
10. Remova qualquer dependência de requisitos de hospedagem não essenciais, como hospedagem de imagens para assinaturas de e-mail
11. Execute consultas de otimização de banco de dados. Se o seu site já existe há algum tempo, existem várias técnicas de banco de dados que podem ser usadas para otimizar o tempo de execução das consultas.

Em resumo, a criação de um site altamente otimizado é um equilíbrio entre especificação, design e implementação. O fator chave para mim é diferenciar as páginas SEO altamente otimizadas de outras páginas, sempre que possível, e focar em otimizá-las o máximo possível.

Se precisar de ajuda com seu Desenvolvimento Web, não hesite em nos contatar.