Como acelerar um site de diretório ou mercado criado com HivePress

Hoje em dia, a velocidade de carregamento do site e o desempenho geral são cruciais para uma boa experiência do usuário e classificações nos mecanismos de pesquisa. Recentemente, o Google anunciou que começará a medir os Core Web Vitals, como pontuações de estabilidade visual e tempos de carregamento de páginas, para que os sites determinem se eles se qualificarão para um aumento no sinal de classificação. Além disso, páginas com um tempo de carregamento mais longo tendem a ter taxas de rejeição mais altas e menor tempo médio na página.

Neste tutorial, explicaremos como aumentar o desempenho do seu site configurando o cache, otimizando estilos e scripts, bem como otimizando o conteúdo de mídia. Usaremos o plug-in LiteSpeed ​​Cache, uma solução completa de aceleração de sites com várias ferramentas e recursos para tornar seu site extremamente rápido.

Para fins de teste, usaremos um site de diretório WordPress construído com HivePress e algumas extensões junto com seu tema ListingHive padrão. No entanto, se o seu site não for criado com o plug-in HivePress, você poderá seguir as mesmas etapas para qualquer outro site com WordPress.

Então, vamos começar com a instalação do LiteSpeed ​​Cache.

Instalando o LiteSpeed ​​Cache

Primeiro de tudo, você precisa instalar o plugin LiteSpeed ​​Cache. Você pode fazer isso facilmente diretamente do seu painel do WordPress acessando a seção Plugins > Adicionar Novo . Encontre-o através da barra de pesquisa e prossiga instalando-o. Quando a instalação estiver concluída, basta clicar no botão “Ativar” para habilitar o plugin.

Depois de instalado e ativado, você pode começar a otimizar seu site. Vamos passar primeiro pelas configurações básicas de cache.

Otimização de cache

Para ajustar as configurações básicas de cache, navegue até a página LiteSpeed ​​Cache > Cache . Há muitas seções diferentes nesta página, mas abordaremos apenas as configurações mais importantes.

Configurações de cache

Aqui, é altamente recomendável desabilitar o cache para usuários conectados e solicitações de API REST. Isso é necessário para que o plugin HivePress funcione corretamente. Depois de ativar ou desativar qualquer opção, não se esqueça de salvar as alterações.

Cache de Objetos

Em seguida, vamos habilitar o Object Cache . Navegue até a seção Objeto e verifique se o cache do objeto está disponível em seu site. O teste de conexão deve ser exibido como "aprovado". Nesse caso, você pode habilitar o cache de objetos, e isso melhorará drasticamente o desempenho do site armazenando em cache consultas de banco de dados duplicadas.

Não deve haver problemas para passar no teste de conexão se o seu site for baseado no servidor OpenLiteSpeed ​​ou se seu provedor de hospedagem suportar cache de objetos.

Cache do navegador

Por fim, navegue até a seção Cache do navegador e verifique se ela está ativada. Isso armazenará em cache todo o conteúdo estático, como estilos, scripts e imagens no navegador do usuário.

Otimização de página

Seu próximo passo é navegar até a seção LiteSpeed ​​Cache > Page Optimization para otimizar os estilos, scripts e fontes.

Otimização de CSS

Vamos começar com a seção Configurações de CSS . Aqui recomendamos ativar as configurações CSS Minify e CSS Combine .

• CSS Minify – Se você habilitar esta opção, todos os caracteres de espaço em branco extras, caracteres de nova linha e outros dados desnecessários ou redundantes serão removidos automaticamente dos arquivos CSS sem afetar os estilos do site.
• CSS Combine – Ao habilitar este, todos os arquivos CSS individuais serão mesclados em um único arquivo CSS. Dessa forma, o navegador envia uma única solicitação de arquivo em vez de solicitar cada arquivo CSS separadamente, reduzindo o número de solicitações HTTP.

Otimização de fonte

Se o seu site usa o Google Fonts, existem algumas opções para otimizar o carregamento da fonte. Na mesma seção Configurações de CSS , você pode rolar para baixo e definir a opção Otimização de exibição de fonte como Trocar para que a fonte substituta seja usada para exibir o texto até que a fonte personalizada seja totalmente baixada.

Depois de definir a opção Trocar , vá para a seção Otimização na mesma página e ative a opção Carregar Google Fonts de forma assíncrona para carregar Google Fonts em segundo plano enquanto a página está sendo renderizada.

Otimização de JS

Agora vamos para a seção JS Settings para otimizar os arquivos JavaScript. Aqui, recomendamos seguir as mesmas etapas das configurações de CSS. Basta habilitar as opções JS Minify e JS Combine para que os arquivos JS também sejam reduzidos e mesclados em um único arquivo.

Há também a opção Load JS Deferred que pode realmente fazer a diferença. Depois de habilitar essa configuração, os scripts serão carregados em segundo plano enquanto o navegador renderiza o layout e os estilos da página. Os scripts geralmente são “mais pesados” que o HTML, portanto, o carregamento e a execução de scripts que não são necessários para a renderização inicial da página podem ser adiados e carregados posteriormente. Ele permite que os visitantes usem o site quase que imediatamente.

Depois de marcar esta opção, certifique-se de que o front-end do site não esteja quebrado, pois alguns scripts podem exigir o carregamento antes que a página seja renderizada.

Otimização de mídia

Por fim, você precisa otimizar seu conteúdo de mídia. Como as imagens geralmente representam cerca de metade do tamanho do conteúdo de uma página da Web, converter todas as imagens para o formato WebP (que é em média 30% menor que outros formatos) pode melhorar significativamente a velocidade de carregamento da página.

Na seção LiteSpeed ​​Cache > Otimização de imagem > Configurações , você pode converter as imagens do seu site para o formato WebP ativando as configurações Criar versões WebP e Substituição de imagem WebP .

Depois de verificar essas opções, navegue até a seção Resumo de otimização de imagem para obter a chave de domínio e otimizar imagens clicando no botão "Enviar solicitação de otimização" até que a pontuação de otimização de imagem atinja 100%.

Além disso, se houver incorporações em seu site (por exemplo, vídeos do YouTube, postagens do Instagram ou Tweets), é melhor carregar o conteúdo incorporado apenas quando os usuários rolarem para baixo, não durante a renderização da página inicial. Isso fará com que a primeira página seja renderizada muito mais rápido e reduza o uso de memória do navegador.

Navegue até a seção LiteSpeed ​​Cache > Otimização de página > Configurações de mídia e ative a opção Lazy Load Iframes .

Empacotando

Abaixo está a captura de tela dos resultados do Google PageSpeed ​​em dispositivos móveis e desktop depois que otimizamos o desempenho do site seguindo as etapas deste tutorial.

É isso! Se você construiu seu diretório ou site de mercado com HivePress (ou qualquer outra solução baseada em WordPress) , você pode seguir as mesmas etapas para configurar o cache, otimizar estilos, scripts e fontes, bem como o conteúdo de mídia, como imagens ou incorporações. Como resultado, você obterá uma pontuação alta no Google PageSpeed ​​(aumentando assim seus rankings de SEO) e melhorará a experiência geral do usuário do seu site.

Além disso, sinta-se à vontade para verificar os seguintes artigos:

• Melhores plugins de diretório do WordPress
• Temas populares de diretórios do WordPress
• Erros ao criar um site de listagem WordPress