Otimização de velocidade Magento 2: maneiras fáceis + avançadas

Você sabe o que fazer, a velocidade da página afeta muito o sucesso de uma loja, pois as lojas com desempenho lento tendem a ter taxas de conversão mais baixas e, como resultado, perder para seus concorrentes. E como fazemos regularmente otimização de velocidade para nossos clientes, sentimos que é de nossa competência fornecer técnicas atualizadas de otimização de velocidade no Magento 2.

Otimização de velocidade e por que é difícil acertar

Obviamente, se a otimização de velocidade nos sites Magento 2 fosse simplesmente instalar e habilitar extensões, você não estaria lutando com a otimização de desempenho. É muito mais complicado do que isso.

Muitas variáveis

Você precisa levar em conta as várias variáveis ​​envolvidas na medição da velocidade da página. Pode ser que a velocidade da sua página seja realmente fantástica na condição ideal - isto é, se o dispositivo do usuário for capaz de renderizar tudo o que você joga nele. Ou pode ser que a velocidade da sua página não seja tão ruim, mas o desempenho percebido pelo usuário seja terrível devido à mudança de layout cumulativa ruim.

Há muitas variáveis ​​a serem levadas em consideração ao otimizar o desempenho de sua loja, e é por isso que você deve sempre identificar os problemas específicos primeiro.

Prioridade

E mesmo que você tenha feito sua lição de casa e identificado todos os problemas de execução que sua loja tem atualmente, ainda não seria uma boa ideia tentar corrigir todos eles. Em nossa experiência, as micro otimizações não fazem quase nada para melhorar o desempenho no mundo real, e você deve trabalhar apenas na otimização dos problemas que considera os principais obstáculos que impedem sua loja de gerar o tipo de experiência de compra que você deseja.

Troca

Quando você realmente entra nisso, a otimização de velocidade é uma troca constante entre funcionalidade e desempenho - você sempre precisa sacrificar algo para obter melhor desempenho. Às vezes, é um tema atraente do Magento, às vezes é uma extensão útil que prejudica o desempenho da sua loja.

Técnicas gerais de otimização

Essas técnicas gerais de otimização são indolores e não exigem muito conhecimento técnico para serem implementadas.

1. Verifique sua versão atual de hospedagem e Magento

A hospedagem desempenha um papel crucial na velocidade do site, pois quanto melhor for um plano de hospedagem, mais capaz sua loja pode permanecer rápida, apesar do aumento do tráfego ou de grandes catálogos.

É ainda mais importante para um site Magento ter uma hospedagem decente para facilitar sua estrutura robusta e complexa. Embora a hospedagem Magento exija pelo menos 2 GB de RAM para funcionar, o plano de hospedagem adequado depende da escala do site.

Assim, se o seu site Magento atual for lento e você estiver executando com hospedagem de baixo custo, é hora de atualizar para uma melhoria significativa da velocidade.

>> Veja mais: 12 melhores provedores de hospedagem Magento

2. Use um serviço CDN

(Photo/WPbeginner.com)

Na cadeia de suprimentos logística, os itens são enviados mais rapidamente se houver um depósito localizado próximo ao local do comprador. Da mesma forma, a CDN (rede de entrega de conteúdo) ajuda a entregar conteúdo mais rapidamente armazenando conteúdo em cache em um servidor de borda próximo à geolocalização de seus usuários.

A CDN é melhor para grandes lojas com visitantes internacionais, bem como para sites com muito conteúdo dinâmico em computadores e dispositivos móveis. Por essas razões, é um ajuste completo com muitos sites Magento.

Embora muitos provedores de hospedagem ofereçam serviços de CDN, você também pode escolher seus próprios provedores de CDN, como Fastly ou Stackpath. Depois de configurar o serviço, você precisa configurar o CDN em seu back-end Magento antes de ver as alterações.

3. Imagens de carregamento lento

De todos os tipos de recursos solicitados por sites populares, as imagens são o tipo de recurso mais solicitado cujo número de solicitações, em média, chega a 35,6% (desktop) do total de solicitações feitas pela página. Em termos de peso da página, os recursos de imagem ocupam em média 46,6% do peso médio da página, o que o torna o fruto mais fácil na otimização de velocidade que produz resultados impressionantes quando você faz isso corretamente.

O carregamento lento é uma maneira eficaz de melhorar o desempenho de sua loja, pois elimina a necessidade de carregar todas as imagens de uma só vez. Com o carregamento lento, as imagens são carregadas posteriormente, quando o usuário precisar, reduzindo efetivamente o tempo necessário para carregar uma página sem prejudicar a experiência do usuário.

No Magento 2, você pode implementar imagens de carregamento lento em seu site Magento com extensões como Lazy Loading para Magento 2. Existem várias outras extensões como essa que estão disponíveis no mercado Magento gratuitamente.

4. Use o WebP

Muitas vezes sendo comparado como o canivete suíço de formatos de imagem, o WebP é um formato de imagem novo e flexível que está ganhando popularidade rapidamente e espera-se que seja o substituto para PNG, JPEG e GIF. Em comparação com imagens PNG e JPG, as imagens WebP são geralmente 25 a 35% menores, com perda próxima de zero na qualidade da imagem.

Como este ainda é um formato de imagem relativamente novo, o WebP não é suportado por padrão no Magento 2, e você precisará instalar extensões de terceiros como o Magento 2 WebP Images Extension para habilitar a conversão automática de imagem para WebP.

5. Use temas leves

Apenas a partir de impressões, você pode dizer quando um tema pesado diminui significativamente a velocidade da sua loja, e os usuários com conexão lenta à Internet e/ou recursos de hardware desatualizados serão ainda mais impactados por isso.

Para contornar isso, você precisará escolher seletivamente seus temas Magento com um foco mais voltado para o desempenho. No entanto, entendemos que é difícil determinar com precisão se um tema é realmente leve, e é por isso que você geralmente deve verificar se a versão demo do tema parece rápida para você, leia mais comentários de usuários e se quiser ter certeza sobre use o PageSpeed ​​Insights para testar o tema completamente.

6. Desative os catálogos planos

Antigamente, habilitar o catálogo Flat era o caminho a seguir se você desejasse reduzir o tempo necessário para fazer consultas SQL. No entanto, a partir do Magento 2.1 e superior, isso não é mais uma prática recomendada e você deve evitar usar qualquer extensão que envolva o uso do catálogo Flat, pois esse recurso é conhecido por causar degradação de desempenho e outros problemas de indexação.

Para desabilitar catálogos simples, certifique-se de definir Usar categoria de catálogo simples/Usar produto de catálogo simples como Não em Lojas > Configurações > Configuração > Catálogo.

7. Reduza as extensões desnecessárias de terceiros

Como sempre, empilhar extensões de terceiros nem sempre é uma boa ideia, e extensões de terceiros podem causar ainda mais problemas se baixadas/compradas de fontes não confiáveis. Para eliminar possíveis problemas, as práticas recomendadas são manter o número de extensões em uma quantidade essencial, atualizá-las regularmente e apenas baixar/comprar extensões de terceiros de fontes confiáveis.

8. Desative o Agrupamento de Javascript

O Javascript Bundling agrupa muitos de seus arquivos Javascript em um bundle. Como resultado, o servidor precisa solicitar menos arquivos Javascript, portanto, leva menos tempo para fazê-lo. Isso, em teoria, deve ajudar no desempenho.

No entanto, na realidade, a ferramenta básica JS Bundling construída no Magento não atende a essa expectativa, mas geralmente resulta em menor velocidade de carregamento. De acordo com um teste feito por um membro da troca de pilha do Magento, o tempo médio de carregamento de sua página da web aumenta de 5s para 15s depois de habilitar o JS Bundling.

O JS Bundling está desativado por padrão. No entanto, você pode verificar se ele foi ativado antes e desativá-lo novamente navegando até

Store >> Configuration >> Advanced >> Developer >> JavaScript Settings e defina Enable JavaScript Bundling como No .

9. Otimize o registro de dados do Magento

Os arquivos de log do seu site Magento listam todas as alterações feitas no banco de dados. Com o tempo, eles podem acumular alguns GB, o que diminui o desempenho do seu site.

A remoção de grandes logs antigos que não são mais relevantes para a atividade atual do seu site é uma etapa necessária para manter um bom desempenho de velocidade.

Além disso, o Magento gera automaticamente e frequentemente novos arquivos de log, portanto, remover os antigos não deve causar problemas.

Para comerciantes não técnicos, você pode navegar para Store >> Configuration >> Advanced >> MySQL Message Queue Cleanup .

A limpeza removerá automaticamente os arquivos de log antigos após um período de tempo específico.

O Magento definiu valores padrão para esses atributos acima, mas você pode alterá-los conforme achar melhor.

Indo um pouco mais avançado

10. Use o cache de página inteira do Varnish

O Varnish Cache é um acelerador de aplicativos da Web de código aberto que, dependendo da sua arquitetura, pode acelerar a entrega de conteúdo com um fator de 300 a 1000x. É por isso que o próprio Magento recomenda fortemente o Varnish, pois é uma opção muito melhor do que o cache de página inteira integrado. Além disso, como o Varnish foi projetado para acelerar o tráfego HTTP, você pode ter um tempo de resposta do servidor e um consumo de largura de banda de rede substancialmente menores em solicitações repetidas.

Para configurar e usar o Varnish, siga o guia passo a passo detalhado para fazer seu site Magento 2 voar.

Desenvolvido por Varnish, Fastly ajuda você a alcançar mais por um custo

Para Magento Commerce Cloud especificamente, Fastly é necessário para uso em ambientes de preparo e produção. Comparado ao uso do Varnish sozinho, é uma abordagem mais repleta de recursos, pois além dos recursos de cache rápido fornecidos pelo Varnish, ele também fornece uma CDN e aprimoramentos de segurança para seu site Magento 2 e infraestrutura em nuvem.

Os comerciantes do Magento Open Source podem usar o Fastly, mas você ainda deve observar que, ao contrário do Varnish, o Fastly não é uma solução gratuita e tem taxas baseadas na largura de banda e no uso da solicitação por região.

Para configurar o Fastly, consulte o guia oficial no Magento DevDocs.

11. Configurar Memcached/Redis

O cache é conhecido por ser uma solução eficaz para otimizar a velocidade e reduzir drasticamente o tempo de carregamento.

Enquanto o Varnish é uma solução de cache para o front-end, o Memcached e o Redis ajudam com o cache do back-end, que é altamente recomendado para aplicativos da Web de grande escala com bancos de dados dinâmicos.

O Redis é mais poderoso e flexível que o Memcached e pode fazer tudo o que o Memcached pode. Assim, é uma escolha mais popular entre os desenvolvedores. No entanto, o Memcached é mais simples de configurar e usar, podendo ser mais vantajoso que o Redis em casos específicos.

É recomendável ir mais fundo para descobrir qual funciona melhor para o ambiente do seu site antes de tentar configurar o Memcached, Redis ou ambos.

12. Mover para HTTP/2

Lançado em fevereiro de 2015, o HTTP/2 é uma nova melhoria feita no protocolo HTTP existente. Ele agora é usado por 49,9% de todos os sites e só verá mais adoções a partir de agora, especialmente porque os testes mostraram que o HTTP/2 oferece até 14% de melhoria no carregamento da página e outros benefícios.

Por exemplo, na demonstração em vídeo abaixo, você pode ver como o HTTP/2 permite maior desempenho quando levado ao limite:

Neste vídeo, temos cada imagem dividida em 379 pequenos blocos, exigindo assim que sejam feitas 379 conexões separadas com o servidor. Este é um cenário altamente improvável, mas nos fornece informações sobre como a multiplexação HTTP/2 funciona e como ela pode trazer um desempenho muito mais rápido quando comparado ao HTTP/1.

Para habilitar HTTP/2 para seu site Magento, você precisa configurá-lo através de seu CDN (por exemplo, Fastly) ou através de seus servidores web (Apache). Por exemplo, veja como fazer isso no Apache e no Nginx.

13. Minificação

Minificação, como o próprio nome sugere, é um método para reduzir o código da sua página. No processo de minificação, todas as partes desnecessárias em seus arquivos HTML, JavaScript ou CSS serão removidas, garantindo que os recursos de sua página sejam mantidos o mais enxutos possível. A minificação é uma prática padrão hoje em dia e todo site deve aplicá-la em sua infraestrutura, pois é essencialmente um aumento de desempenho gratuito.

Para habilitar a minificação para o seu site Magento, você pode confiar em extensões prontamente disponíveis, como Minify HTML CSS JS, ou habilitar a minificação CSS e JavaScript diretamente pelo back-end do Magento. Com o último método, você precisará:

• Defina sua loja Magento 2 para o modo de produção
• Em seguida, vá para Lojas > Configuração > Avançado > Desenvolvedor
• Defina Minify HTML/minify CSS Files/minify JavaScript Files para Yes
• Lembre-se de liberar o cache posteriormente via Sistema > Gerenciamento de Cache

14. Fique sem cabeça com uma vitrine PWA

Como a maioria dos sites Magento que temos no momento ainda são baseados na arquitetura tradicional, você está mais limitado pela infraestrutura em uso, pois a própria arquitetura tradicional é rígida, conservadora e propensa a lentidão ao longo do tempo. A arquitetura headless resolve mais ou menos esse problema, pois é uma abordagem que busca trazer mais flexibilidade, mais escalabilidade e mais melhorias de desempenho para as vitrines.

É por isso que você vê que as marcas estão optando por vitrines PWA (que é uma vitrine sem cabeça) como uma maneira de trazer mais melhorias de desempenho, e realmente é um dorminhoco que só ganhará mais reconhecimento em um futuro próximo.

Como ficar sem cabeça geralmente envolve grandes mudanças na infraestrutura do seu site, sugerimos que você confie apenas em um provedor de soluções Magento PWA confiável para realizar todo o processo para você.

 Leitura recomendada: Benefícios do PWA para o seu negócio

15. Remova fontes não utilizadas

É comum experimentar fontes diferentes antes de decidir qual delas fica melhor em seu site e, em seguida, esquecê-las. No entanto, essas fontes ainda são adicionadas ao seu “default_head_blocks.xml” e ainda estão sendo baixadas.

Se você deseja otimizar a velocidade do seu site Magento, é necessário excluir todas as fontes não utilizadas.

Da mesma forma, se você usar uma fonte personalizada, você deve remover outras fontes padrão do seu tema (por exemplo, Open Sans, Helvetica, etc).

Você pode corrigir isso substituindo o _typography.less em seu tema.

Basta deslocar o

 /vendor/magento/theme-frontend-blank/web/css/source/_typography.less

Para

 /app/design/frontend/Vendor/Theme/web/css/source/_typography.less

Em seguida, exclua quaisquer fontes desnecessárias nos novos arquivos _typography.less.

Além disso, você precisará remover as fontes no arquivo default_head_blocks.xml para que ele não seja mais baixado.

 <cabeça>
...
<remove src="fonts/helvetica/regular/helvetica-400.woff2"/> 
<remove src="fonts/helvetica/bold/helvetica-700.woff2"/> 
...

16. Use o pacote avançado de Javascript

Na etapa 8, sugerimos desativar o pacote JS nativo do Magento por sua falta de eficiência. No entanto, o JS Bundling ainda é uma prática eficaz para obter uma melhor velocidade do Magento 2 se souber como personalizá-lo.

Mas primeiro, vamos falar sobre como o pacote padrão do Magento JS difere dos avançados:

Para o pacote básico de JS do Magento, você pode agrupar ou mesclar todos os arquivos JS em apenas um pacote jumbo. Como resultado, quando uma página é necessária, o navegador precisa carregar esse grande e pesado pacote JS, o que inevitavelmente aumenta o tempo de carregamento.

Enquanto isso, com o pacote JS avançado, você pode personalizar seus próprios pacotes para que o navegador só precise baixar um pacote que seja relevante para o conteúdo de cada página. Como esses pacotes são menores e mais leves, eles não causarão mais problemas de velocidade.

Com flexibilidade, você pode criar pacotes para cada tipo de página ou para diferentes propósitos.

Por exemplo, personalize um pacote para páginas de categoria e outro para páginas de checkout.

Quanto às instruções detalhadas, você pode confiar no guia oficial do Magento para o pacote JS avançado.

17. Use adiar o carregamento de JS

Quando um navegador carrega uma página, ele carrega todos os arquivos Javascript, HTML e CSS da página localizados de cima para baixo. Os arquivos Javascript, que geralmente ficam no topo, são carregados primeiro. Depois que o Javascript é carregado, o navegador continua a renderizar arquivos HTML e CSS.

No entanto, Javascript é uma linguagem mais complicada, que geralmente leva mais tempo para carregar do que HTML. Assim, para otimizar a velocidade do Magento 2, é recomendável mover o Javascript para baixo para que ele seja carregado somente após a renderização dos arquivos HTML e CSS.

Você pode fazer isso seguindo o guia oficial do Magento ou usando uma extensão JS defer para Magento 2.

18. Ative o caminho crítico do CSS

É uma prática comum para codificadores armazenar CSS em um arquivo externo. No entanto, de acordo com o Magento, todos os estilos CSS de fontes externas bloquearão a renderização. Em outras palavras, sua página não exibirá nada se todos esses arquivos não forem carregados.

Como resultado, ele aumenta a métrica Primeira pintura significativa no insight de velocidade da página do Google e torna o carregamento da página mais lento.

O caminho crítico do CSS permite a seleção do CSS crítico ao adiar todos os estilos não importantes. Esses estilos CSS críticos são então reduzidos e montados inline em <head> .

Assim, ajuda a melhorar o tempo necessário para renderizar uma página na primeira vez. Magento experimentou uma queda no First Meaningful Paint de 3,5s para 2,3s ao habilitar esta função, e você pode descobrir como eles fazem isso seguindo seu guia de caminho crítico CSS.

19. Verifique se está no modo de produção

Magento tem três modos de operação: modos padrão, desenvolvedor e produção.

O modo de produção, que é otimizado para desempenho, permitindo cache de página inteira, pacotes JS e muito mais, é mais recomendado para todos os sites ativos do Magento. É o modo Magento mais rápido, que é 20%-30% mais rápido que o modo de desenvolvedor.

Verifique seu modo atual executando o comando:

 bin/magento deploy:mode:show

Você receberá uma mensagem como esta:

Modo de aplicativo atual: {mode}. (Observação: as variáveis ​​de ambiente podem substituir esse valor.)

Se o modo atual não for produção, você pode mudar para o modo de produção executando o comando:

 bin/magento deploy:mode:set {mode} [-s|--skip-compilation]

Conclusão

Com todas essas técnicas, agora você pode trabalhar para tornar seu Magento mais rápido e, assim, obter uma melhor vantagem competitiva sobre seus concorrentes. No entanto, você deve observar que a otimização de desempenho nem sempre vale a pena ir até o fim, pois as micro otimizações são na maioria das vezes um esforço desperdiçado e permanecem imperceptíveis no uso do mundo real. A melhor estratégia, em nossa experiência, é identificar primeiro os problemas impactantes e focar apenas neles até que você tenha os resultados desejados.

Para os comerciantes Magento que estão lutando com o desempenho, aqui no SimiCart oferecemos uma ampla gama de serviços, incluindo otimização de velocidade para o seu negócio. Comece a explorar suas opções agora e obtenha um desempenho de loja líder do setor.