5 maneiras de melhorar a velocidade móvel do Magento 2

Este é um post de convidado de Konstantin Gerasimov. Konstantin é um desenvolvedor certificado Magento com Goivvy.com. Ele é especialista em otimização de desempenho e desenvolvimento de back-end.

Magento 2 (M2) é uma plataforma de comércio eletrônico complexa e rica em recursos. Pode-se usá-lo para implementar qualquer tipo de experiência de venda online.

O outro lado da moeda é que com a flexibilidade vem um problema – baixo desempenho. Uma loja com Magento-2 pode ser lenta, especialmente em dispositivos móveis onde a capacidade da rede dificulta o download de arquivos grandes.

Durante meu trabalho com o M2, adquiri alguns truques que me ajudaram a melhorar a velocidade do celular. Eu vou compartilhá-los com você. Eles são todos comprovados em campo para que você possa ter certeza de que eles funcionam.

5 dicas para acelerar o Magento 2 para usuários móveis

1. Carregue o conteúdo acima da dobra primeiro.
2. Faça com que o tamanho da página seja o menor possível.
3. Utilize HTTP/2.
4. Não use o pacote JS.
5. Otimize o tempo para o primeiro byte.

1. Carregue o conteúdo acima da dobra primeiro

O conteúdo acima da dobra (ou conteúdo visível) é uma parte de uma página da Web que você vê antes de rolar para baixo. Os usuários o veem primeiro, por isso é importante carregá-lo e renderizá-lo rapidamente.

Como fazemos isso? Existem algumas técnicas:

1.1. Adiar análise de Javascript

Bcasicamente significa que você adia o carregamento e a execução do código JS. Isso é feito para que o conteúdo apareça na tela mais rapidamente.

Para adiar, basta mover todo o Javascript para o final de uma página. Existem certas extensões do Magento 2 que o ajudariam a fazer isso.

1.2. Carregar CSS crítico primeiro

CSS crítico é um conjunto de folhas de estilo usadas para renderizar o conteúdo acima da dobra. Normalmente, é apenas uma pequena parte do CSS do site. Seria melhor isolá-lo e carregá-lo primeiro. Isso faria com que o conteúdo visível fosse renderizado mais rapidamente.

Existem ferramentas online que supostamente extraem o CSS crítico automaticamente. Eu tentei a maioria deles, e eles não parecem ser precisos com base na minha experiência.

Eu recomendo compor manualmente um conjunto de CSS crítico para diferentes páginas: página inicial, categoria, produto, carrinho, páginas de checkout . Você pode então inline-lo diretamente na seção principal da página.

2. Reduza ao máximo o tamanho da página

As redes móveis oferecem menor velocidade de download em comparação com as conexões de banda larga de desktop.

oque aquilo significa para nós? Isso significa que o peso da página agora é um fator de desempenho mais importante. Quanto maior o tamanho da página, mais lenta a velocidade móvel do Magento 2.

Como tornar uma página mais leve? Vou te dar três maneiras de fazer isso:

2.1. Usar compactação Gzip

Gzip é uma tecnologia especial que permite diminuir o tamanho de uma página em até 70%! Ele também pode compactar scripts externos como CSS, Javascript, scripts de fonte etc.

Entre em contato com sua equipe de suporte de hospedagem e peça para habilitar o Gzip para seu site. Não deve demorar muito, pois é apenas uma pequena alteração na configuração.

Você pode usar a ferramenta online Google PageSpeed ​​Insights para verificar se o Gzip está ativado em sua loja.

2.2. Usar minificação CSS/JS

O Magento 2 (ao contrário do Magento 1) vem com o recurso de minificação JS/CSS. Você deve aproveitá-lo para diminuir o peso da página.

Vá para o menu de back-end Stores > Configuration > Advanced > Developer (no M2.2+ esse menu só é visível no modo de desenvolvedor) e habilite a minificação:

Uma coisa a lembrar – a minificação só funciona no modo de produção .

Você pode perguntar - quais são esses modos?

O Magento 2 possui três modos de execução: padrão, desenvolvedor e produção . A produção é a mais rápida.

Para alternar entre os modos, você deve executar o seguinte comando no terminal SSH dentro da pasta raiz do Magento (por exemplo, vamos definir o modo de produção):

 php bin/magento deploy:mode:set production

Para descobrir o modo atual:

 php bin/magento deploy:mode:show

2.3. Otimizar imagens

Se você administra um site de comércio eletrônico, com certeza tem muitas imagens de produtos. É importante mantê-los otimizados e compactados para ter o menor peso de página possível.

Existem várias ferramentas online que podem ajudá-lo a comprimir suas imagens. A maioria das CDNs (redes de entrega de conteúdo) oferece suporte à otimização de imagem. Se você não se importa de gastar algum $$$ eu recomendo se inscrever com um deles.

Caso você esteja com orçamento limitado, experimente o módulo de servidor de velocidade de página do Google. Ele comprime imagens em tempo real. Além disso, ele faz outros truques de otimização de velocidade. Você pode pedir ao administrador do sistema ou à equipe de suporte de hospedagem para ajudá-lo a configurar a extensão de velocidade de página.

3. Utilize o poder do HTTP/2

HTTP ver.2 é a próxima geração de protocolo de hipertexto. Destina-se a tornar a navegação na web segura e mais rápida. Mais sobre seus benefícios de desempenho você pode ler aqui.

O Magento 2 pode funcionar com HTTP/2 pronto para uso. Existem apenas dois requisitos:

1. Todas as páginas devem ser veiculadas por meio de SSL.
2. O servidor deve suportar HTTP/2.

Você pode consultar sua equipe de suporte de hospedagem para obter ajuda na configuração.

Uma outra coisa - o servidor envia arquivos . É um recurso especial do HTTP/2 que permite que você faça o download de recursos do navegador antes mesmo de serem necessários. Ele acelera a navegação na web enormemente. Existem algumas extensões que introduzem o servidor push para o M2 – basta pesquisar no Google para encontrar o melhor para você.

4. Não use o pacote JS

Magento 2 pode agrupar arquivos JavaScript.

Isso significa que ele pode agrupar recursos JS para diminuir o número de solicitações HTTP que um navegador deve fazer para exibir uma página. Você encontra sua página de configuração no menu de backend Stores > Configuration > Advanced > Developer :

Claro que não faz sentido se você usar HTTP/2. O número de solicitações http não afeta o desempenho nesse caso. Mas você não deve habilitar o pacote JS mesmo se você ainda usar http/1 e eu explicarei o porquê.

A implementação do pacote Magento 2 compõe todo o JavaScript em um arquivo. Mesmo se você não utilizar certas partes ainda está lá. Isso deixa você com um arquivo de 5Mb-13Mb, que é um porco de desempenho em redes móveis lentas.

Aqui está um relatório de bug explicando em detalhes. É um bug, mas o M2.2.2 está por aí e ainda não foi corrigido. Então é melhor você manter o pacote JS desabilitado .

5. Otimize o tempo até o primeiro byte (TTFB)

TTFB ou tempo de resposta do servidor é quanto tempo um navegador precisa esperar antes de obter resposta do servidor de um site. Um bom tempo para o primeiro byte deve ser em torno de 500 ms.

O Magento 2 tem uma funcionalidade de cache de página completa integrada, desde que uma página seja visitada mais de 1 vez, o tempo de resposta do servidor deve estar OK. Mas existem páginas como páginas de checkout, carrinho e área do cliente que não podem ser armazenadas em cache de página inteira. Se eles forem lentos, deve-se considerar fazer alguma otimização TTFB.

Mostrarei três maneiras de otimizar o tempo de resposta do servidor:

5.1. Auditoria de módulos de terceiros

A razão número um para o mau desempenho do Magento 2 é um número excessivo de extensões personalizadas usadas. Eu vou explicar o porquê.

Os arquivos principais M2 são codificados por especialistas em programação. Há pouco ou nada para melhorar e é por isso que uma nova instalação do M2 com o tema Luma é bastante rápida. Por outro lado, alguns módulos de terceiros são escritos por programadores médios, no máximo, sem apreciação por benchmarks de desempenho. Eles podem desacelerar a loja significativamente.

Para realizar uma auditoria de módulos de terceiros, primeiro obtenha uma lista de todas as extensões personalizadas instaladas. Você pode fazer isso executando este comando SSH:

 módulos php bin/magento:statu

Pule aqueles que começam com Magento_ – esses são plugins principais.

Com outros faça o seguinte: remova-os um por um e avalie a velocidade dos sites. Para remover uma extensão, simplesmente exclua-a da pasta app/code e execute:

 php bin/magento configuração: atualizaçãoDepois de encontrar um plug-in lento, entre em contato com o fornecedor e informe o problema. Peça um patch ou encontre uma extensão alternativa.
 5.2 Plano de Hospedagem de Upgrade
 Em alguns casos, o poder do servidor de hospedagem simplesmente não é suficiente para executar uma loja complexa do Magento 2. Você precisaria obter mais CPU e RAM então.
 Como você descobriria se o seu servidor está OK? Execute este teste simples: instale uma nova cópia do M2 da mesma versão no mesmo servidor. Compare sua velocidade com o seu site ao vivo. Se o novo M2 for significativamente mais rápido - seu plano de hospedagem está bom e o problema está no próprio site ao vivo. Se a nova cópia for tão lenta quanto o site ao vivo – é hora de atualizar um servidor de hospedagem.
 5.3 Execute o Magento 2 Profiler
 Se você quiser se aprofundar nos internos do Magento 2 e descobrir a causa raiz do TTFB ruim, você pode usar um criador de perfil. Um criador de perfil é um programa especial que informa quais blocos de código demoram a ser executados.
 O criador de perfil nativo do Magento 2 pode ser desativado adicionando a seguinte linha no topo do arquivo pub/index.php :
 $_SERVER['MAGE_PROFILER'] = '1';
 Você verá um rastreamento na parte inferior de cada página: 
 Procure blocos de código com os maiores valores de tempo e inspecione-os.
 Existem outros perfis que você pode usar. Acho o xhprof o melhor entre os gratuitos.
 Resultado final
 Portanto, como você pode ver, existem algumas maneiras eficazes de melhorar o desempenho do Magento 2 em dispositivos móveis.
 Se você conhece algumas maneiras extras de como fazê-lo, sinta-se à vontade para compartilhá-lo na seção de comentários abaixo.