Magento 2 – Melhorias de Performance

magento 2

Por que a velocidade é importante?

Um dos principais fatores para uma boa taxa de conversão e baixo abandono de carrinho é a velocidade de carregamento das páginas. Uma regra prática: se uma página levar mais de três segundos para ser carregada, haverá uma perda no tráfego, resultando em uma alta taxa de abandono. A velocidade de carregamento também é um fator importante de classificação de SEO.

Abaixo alguns números estatísticos levantados para e-commerces:

  • Mais de 80% dos usuários esperam que uma loja seja carregada em três segundos.
  • 40% dos clientes saem da página se o tempo de carregamento for maior que 3 segundos.
  • Um visitante comum está disposto a esperar no máximo 2,078 segundos para uma página carregar.
  • Cerca de 47% dos usuários esperam que uma página seja carregada em 2 segundos ou menos.
  • Se a página for carregada entre 1 e 2 segundos, o número de visitantes aumentará em 2%.
  • Um aumento de 1 segundo na velocidade da página provavelmente levará a um aumento de 7% na conversão.
  • Um segundo de atraso na carga geraria perdas à Amazon de US$ 1,6 bilhão em vendas por ano.
  • O Wal-Mart mostrou um aumento de 2% nas conversões para cada 1 segundo de melhoria na velocidade de sua página.
  • BBC mediu que perdem 10% dos usuários para cada segundo adicional que leva para o seu site para carregar.

Introdução

O Magento tem fama de ter problemas de velocidade. Consultando o repoitório do Magento 2 no Github pode-se encontrar muitas questões com a palavra-chave “lento” https://github.com/. No entanto, o Magento não é lento por si só. Há diversos fatores, parâmetros e variáveis que, quando não bem configurados, degradam a performance.

Este post irá focar no Magento 2 Community Edition e listará os recursos e truques mais importantes para acelerar a sua loja. Os itens apontados são frutos de testes e experimentos que nossa equipe depurou em nossos projetos mais recentes.

Hardware

Em nossa experiência, o Magento 2 usa muitos recursos de servidor, então uma boa configuração de hardware é o primeiro item a se preocupar. Há muitos provedores de hospedagem, então escolha aquele que tenha boas avaliações e suporte. Jamais utilize servidores compartilhados, portanto fuja de provedores que ofereçam pré-instalações de lojas virtuais. Para lojas de pequeno e médio porte (até 20 mil produtos), recomendamos processadores com 8 núcleos e 16 GB de RAM. Preferencialmente com armazenamento SSD.

Por fim, mas não menos importante, separe o banco de dados do servidor web onde ficará hospedado o Magento. Evitando, portanto, a concorrência entre os dois serviços.

Software

Do lado do software, recomendamos trabalhar com PHP 7; Nginx com protocolo HTTP2 e configurado com as chaves de criptografia SSL (“offloading”); Cache de página com Varnish 4; Servidor de aplicação web Apache; e por fim controle de sessão com Redis; O banco de dados varia muito, mas se possível utilize o MariaDB;

Configurações

1. Habilitando o Cache

Isso é bem básico. Primeiro verificamos o status do cache na administração ou na linha de comando digitando as seguintes instruções:

php bin/magento cache:status

Caso necessário, habilite o cache com o seguinte comando:

php bin/magento cache:enable

2. Habilitando a Compressão GZIP

Pode não parecer, mas em nossa experiência verificamos problemas em várias lojas que tiveram uma sensível melhora ativando a compressão.

3. Manter Atualizado a Versão do Magneto

Mantenha sempre a versão do Magento atualizada para a mais recente (sempre versões estáveis). As novas versões corrigem problemas de segurança, adicionam novos recursos e muitas vezes corrigem bugs relatados e problemas de desempenho.

4. Coloque o Magento no Modo de Produção

O Magento 2 possui três modos de implementação diferentes (padrão, desenvolvedor, produção). O modo de produção acelera todo o aplicativo, pois está servindo arquivos DI e estáticos pré-compilados.

Para verificar em qual modo a loja se encontra, digite o seguinte comando:

php bin/magento deploy:mode:show

e para mudar:

php bin/magento deploy:mode:set production

Depois de compilar o Magento, deve-se criar um arquivo de autoload do composer. Isso é muito importante porque reduzirá bastante o carregamento do IO – o composer terá um mapa de classes pré-gerado em vez de procurá-las em um disco toda vez que for carregá-las. Para fazer isso, execute:

composer dump-autoload -o

5. Ative e Configure o Varnish para o Cache de Página Inteira

O Magento 2 pode usar o Varnish (uma das soluções de armazenamento em cache mais populares para oferecer conteúdo dinâmico) para armazenamento em cache de página inteira. O Varnish é um proxy HTTP reverso ou em outras palavras, um acelerador da web. O aplicativo Varnish armazena em memória arquivos HTML ou outros arquivos ou fragmentos para que eles possam ser retornados com extrema rapidez.

O Varnish é um impulsionador de desempenho que o Magento até declara em sua documentação como não recomendado que não se opere a loja sem ele. É extremamente importante configurar o Varnish corretamente para que possa aproveitar ao máximo essa solução. Para mais informações sobre como configurar o Varnish: http://devdocs.magento.com/guides.

Para configurar o Varnish no Magento, acesse: Lojas -> Configuração -> Avançado -> Sistema -> Cache de Página Inteira -> Varnish Cache

6. Habilitar o OpCache e Configurar para Magento 2

Outra parte muito importante é o OpCache, mas não basta apenas instalá-lo. O Magento tem muitos arquivos e isso torna a configuração padrão do OpCache quase inútil. Abaixo, as opções mais importantes que são necessárias:

opcache.enable=1
opcache.enable_cli=1
opcache.memory_consumption=512
opcache.max_accelerated_files=100000
opcache.revalidate_freq=300
opcache.save_comments=1

Isso habilita o OpCache para o servidor web e CLI, aumenta a memória e o número máximo de arquivos para lidar com a enorme base de código do Magento. A frequência de revalidação especifica por quanto tempo (em segundos) deve armazenar em cache arquivos PHP. Salvar comentários permite que os comentários do PHPDoc sejam armazenados em cache, porque eles são usados internamente pelo Magento.

Também deve-se verificar se possui 2 arquivos de configuração – um para o servidor da Web e outro para o cliente. É importante mantê-los em sincronia para evitar problemas.

7. Redis para armazenamento de sessão e cache de backend

Fora da caixa, o Magento usa o sistema de arquivos para o cache de backend, que pode ser lento em alguns casos. Sugerimos que seja trocado pelo Redis. Mais informações: http://devdocs.magento.com/guides

A configuração padrão do Redis contém diretivas de salvamento, que descarregam o cache para o disco a cada x requests/sets ou após um determinado período de tempo. No processo de salvamento, ele pode ficar lento ou travar. Como perder o cache não é crítico, sugerimos que esta diretiva de salvamento seja comentada.

#save 900 1
#save 300 10
#save 60 10000

8. Mesclar e comprimir arquivos JS, CSS e HTML

O Magento, por padrão, serve todos os arquivos CSS e JS separadamente. No caso de um grande número de arquivos, leva mais tempo para carregar cada arquivo, o que aumenta o carregamento final da página. No entanto, com a fusão, o Magento compila o CSS e JS em um arquivo.

A minimização é um processo de remoção de espaços em branco, comentários e outros caracteres desnecessários para reduzir o tamanho dos arquivos exibidos no navegador. Essa minimização é realizada antes das solicitações e armazenada em cache para que os arquivos minimizados estejam disponíveis para todas as solicitações do site.

O Magento usa mecanismos de minimização padrão do setor, como jShrink para Javascript e cssmin para CSS. No entanto, é importante ter cuidado na configuração e NÃO definer “Ativar pacote de Javascript” para sim. Mesmo agrupando arquivos JS em conjunto para diminuir o número de solicitações HTTP, acabando sendo inútil se estiver configurado com HTTP2. Além disso, em muitos casos, o tamanho do arquivo JS supera facilmente os 10MB.

Encontre a configuração em: Lojas > Configuração > Avançada > Desenvolvedor > Configurações de Javascript:

Magento JS CSS
Magento JS CSS

e CSS:

Screenshot CSS
Screenshot CSS

Da mesma podemos acelerar diminuindo o HTML e diminuindo o tamanho da página. Acessando em: Lojas > Configuração > Avançado > Desenvolvedor > Configurações do Modelo > Minify HTML

Screenshot HTML
Screenshot HTML

9. Categoria e produto de catálogo simples

As operações de leitura do banco de dados são uma das principais razões para o desempenho mais lento do Magento. O Magento utiliza uma estrutura EAV para categorias, preços de produtos, atributos, etc. Uma das coisas que deve-se fazer para acelerar q loja é habilitar o Flat Catalog. Para acessar a configuração em: Loja > Configuração > Catálogo > Catálogo > Frente de Loja e definir “Usar categoria de catálogo simples” e “Usar produto de catálogo simples” como SIM.

screenshot Catálogo
screenshot Catálogo

10. Otimizar pedidos do Ajax

Ao trabalhar no frontend do Magento 2 frequentemente se encontrará uma situação onde será preciso executar códigos Javascript quando os dados do cliente (minicart, lista de desejos, comparar itens, etc.) forem atualizados e/ou exibidos. Sempre que isso ocorrer, poder-se-á conectar o código ao evento “ajaxComplete”. Isso porque deve-se verificar quantas vezes esse evento é acionado por carregamento de página em diferentes cenários (por exemplo, carrinho vazio/lista de desejos/comparação, usuário logado/desconectado) usando algo nos seguintes termos:

$(document).on('ajaxComplete',console.log('atualizado')).

Outro conselho: ao solicitar determinados dados do servidor, deve-se buscar retornar o máximo de dados que o usuário possa precisar. Por exemplo, ao pegar o SKU de exibição de um produto selecionado. Em vez de chamar o controlador AJAX sempre que o usuário seleciona uma variação do produto, localizando e retornando o SKU, é possível chamar o controlador uma vez e fazer com que ele retorne uma matriz de IDs e SKUs de opções: {“1″:”PROD 1″,”2″:”PROD 2″,”3″:”PROD 3”}. Isso significa que só precisa chamar o controlador uma vez e exibir a SKU apropriada da matriz.

11. extensões de terceiros verificadas

Como em qualquer outro desenvolvimento, deve-se seguir algumas diretrizes básicas. Um dos mais importantes é que se use o mínimo possível de extensões e dependências de terceiros. Quando usado extensões personalizadas, deve-se verificar no código por bugs e somente comprar de fornecedores conhecidos. Não menos importante, ficar atento as revisões, o período de suporte, a política de reembolso e o registro de alterações da extensão.

12. Tema personalizado da Luma

Não compre temas, porque provavelmente levará mais tempo para desabilitar todos os recursos desnecessários e depurar todos os problemas. Nosso recomendação é partir para a personalização do tema padrão Luma. Mais informações de como fazer isso nos documentos de desenvolvimento do Magento: http://devdocs.magento.com/guides

13. PHP 7

O Magento 2 é construído para suportar o PHP 7, então recomendamos fortemente o uso da versão 7.1.x do PHP. Houve alguns pequenos problemas com o Magento 2.1 e o PHP 7.1, mas eles foram corrigidos na versão 2.2.

14. Armazenável em cache

A flag “cacheable=false” tem a função de impedir que o bloqueio seja armazenado em cache. Isso é necessário para o desenvolvimento, pois não será necessário esvaziar o cache toda vez que for feita uma alteração no modelo. Por exemplo, cacheable=”false” permitirá que se faça alterações em foobar.phtml e as mostre imediatamente no frontend após recarregar. O problema é que sempre que um bloco aparece com cacheable=”false”, a página inteira não é armazenada em cache no Cache de Página Completa. Portanto, é necessário que sempre se pesquise no código por esses e se encontrados, remove-los antes de implantar em produção, pois isso diminuirá significativamente o tempo de carregamento da loja. Atenção para deixar de fora algumas páginas que não podem ter o cache habilitado: Comparação de Produtos, Carrinho e Checkout.

Cronjobs

Um problema que deve ser dada atenção em ambiente de produção do Magento 2 é com relação ao crescimento da tabela cron_schedule. Resumindo com o tempo são criados vários jobs desnecessários que acabam por impactar a performance no longo prazo. Nossa recomendação é que se crie um script para manter sempre limpo a fila de jobs:

use Magento\Framework\App\Bootstrap;
$rootDirectory = *Magento root directory*;
require $rootDirectory . '/app/bootstrap.php';
$params = $_SERVER;
$bootstrap = Bootstrap::create(BP, $params);
$objectManager = $bootstrap->getObjectManager();
$resource = $objectManager->get('Magento\Framework\App\ResourceConnection');
$connection = $resource->getConnection();
$tableName = $resource->getTableName('cron_schedule');
$sql = "DELETE FROM " . $tableName . " WHERE created_at < DATE_SUB(NOW(), INTERVAL 1 DAY)";
try{
    $result = $connection->query($sql);
}catch(Exception $ex){
    print_r($ex);
} 

Este script pode ser programado para rodar uma vez por dia.

CDN

O uso de uma rede de entrega de conteúdo (CDN) armazenará em cache os recursos estáticos (como imagens, CSS e Javascript) e preferencialmente com recursos programados para servir arquivos aos usuários a partir de um nó geograficamente mais próximo deles. Existem vários provedores de CDN, sendo que alguns dos principais players são Cloudflare, Amazon AWS CloudFront, BunnyCDN e Fastly.

PWA

O PWA é um aplicativo da Web que faz uso das mais recentes tecnologias da Web com a intenção de fazer com que um aplicativo desenvolvido para web funcione dentro de um app de celular e tenha realmente a aparência e comportamento de um aplicativo. A Optiweb fez uma parceria com o Divante em um projeto que leva a PWA ao Magento. Essa tecnologia pode permitir que uma loja seja processada em milissegundos e imune a sobrecargas de tráfego. Considere usar esta tecnologia.

*** A OctalMind é uma empresa especializada no desenvolvimento de sistemas de alta tecnologia.