Pelo título desse conteúdo acredito que você tem problemas em acelerar a velocidade do seu site Magento. O conhecido problema com desempenho Magento.
É muito comum essa dificuldade, por ser uma plataforma robusta ela deve ser trabalhada ao máximo para evitar o alto consumo de memória e CPU do seu servidor.
E o Magento 2 já incorpora funcionalidades novas e aprimoradas como check-out simplificado e novo processamento de pagamentos.
Ele conta também com melhorias significativas de desempenho, tanto na versão Magento Community Edition quanto na Enterprise Edition, com atualizações tanto para a arquitetura do servidor e do cliente, como o Varnish 4, cache de página inteira e uso de jQuery e RequireJS para melhor gerenciamento de JavaScript.
Acredito que você já tenha passado por todos aqueles checklists para acelerar o Magento, como limpeza de cache, otimização de códigos e banco de dados, etc.
Pois bem, além disso, quero te mostrar algumas técnicas para você melhorar a sua pontuação (FCP e DCL) na ferramenta de análise gratuita de site do Google, o PageSpeed Insight.
Ferramenta gratuita para medir a velocidade do seu site
Antes de explicar o que é e pra serve as métricas de FCP e DCL, precisamos acessar o Google PageSpeed Insight e analisar seu Magento.
Em seguida informe a URL do seu site Magento e o resultado da análise será gerado.
Na parte superior temos as duas categorias, Mobile e Desktop, nela você tem os relatórios para cada dispositivo.
Os primeiros resultados que temos são Velocidade de Página e Otimização.
Velocidade
Esse é o ponto chave que quero abordar, a velocidade no relatório de desempenho do Google PageSpeed Insights. Como ele é calculado?
Como PSI trabalha. Ele utiliza dados do relatório de experiência do usuário do Chrome para fazer a análise de desempenho da sua página. Nesse relatório de velocidade, o PSI informa duas métricas, a FCP e a DCL – vou abordá-las no próximo tópico.
Otimização
A pontuação de Otimização é categorizada como Boa, Média ou Ruim.
Boa: a maioria das práticas recomendadas de desempenho foram aplicada. A pontuação da página é 80 pontos ou mais.
Média: algumas otimizações comuns de desempenho não foram aplicadas. A pontuação da página fica entre 60 e 79 pontos.
Ruim: a página não foi otimizada e há muitas otimizações a serem feitas. A pontuação da página fica entre 0 e 59 pontos.
Só vale deixar bem claro, que sua página pode ser rápida com a pontuação de otimização alta, porque pode conter um número alto de recursos bloqueados e lentos de renderização.
Alguns pontos que fazem a diferença:
- Seu site possui HTTPS/HTTP2?
- Seu site possui CDN?
- As imagens são otimizadas (arquivos com menos de 1MB)?
- Qual a versão do PHP?
Abaixo temos o relatório de distribuição de carregamento da página que é o foco desse conteúdo.
Caso não saiba, o Google anunciou em Janeiro de 2018 uma atualização na ferramenta PageSpeed Insights. A atualização começou a utilizar dados reais de usuários do Google Chrome para calcular a velocidade das páginas.
PageSpeed Insights will use data from the Chrome User Experience Report to make better recommendations for developers and the optimization score has been tuned to be more aligned with the real-world data.
Surgindo aí as duas métricas (temas desse post), First Contentful Paint (FCP) e DOM Content Loaded (DCL).
FCP
O que é?
O Paint Timing API define duas métricas: primeira exibição (FP) e primeira exibição de conteúdo (FCP). Essas métricas são definidas quando o navegador renderiza pixels para a tela.
A principal diferença entre as duas métricas é que a FP marca o ponto em que o navegador renderiza algo visualmente diferente do que estava na tela antes da navegação. E a FCP é o ponto em que o navegador processa o primeiro bit do conteúdo do DOM, que pode ser texto, uma imagem, SVG ou até mesmo um elemento HTML.
Então a FCP – First Contentful Paint ou Primeira exibição de conteúdo é métrica que calcula quanto tempo demora para algum elemento ser carregado no seu site, podendo ser texto, imagem ou renderização de tela.
Com pontuação mais rápida de FCP há mais chances de manter os usuários envolvidos.
DCL
O que é?
O DOMContentLoaded – carregamento do conteúdo DOM informa a hora em que o documento HTML inicial foi completamente carregado e analisado.
Porém acredito que o Google esteja considerando mais as métricas para a experiência do usuário.
Quanto mais rápido for a DCL menor serão as taxas de rejeição.
Mais informações da DCL em Mozilla.org.
Como acelerar velocidade do Magento
O mais importante se você quer ter bons resultados nas métricas de FCP e DCL, siga as práticas recomendadas do Google PageSpeed Insights. Consulte um desenvolvedor e resolva as sugestões de otimização fornecidas pelos relatórios do PSI e do Google Lighthouse.
HTTP2
O HTTP / 2 é uma grande atualização para o protocolo HTTP, desatualizada à mais de 15 anos. O HTTP / 1.1 não foi projetado e nem suporta os sites atuais, com milhares de requisições.
O HTTP / 2 é otimizado, acelerando seu website sem alterações no código.
CDN
Um CDN é muito útil, pois armazena em cache seu conteúdo estático, como CSS, Javascript, arquivos de imagem, fontes, etc. Dessa forma, o tempo de resposta do seu site será mais rápido.
Hospedagem de Sites
Utilize uma Hospedagem de Sites preparada para Magento. Na SAN as aplicações são otimizadas para obter o melhor desempenho da plataforma.
Ativar compactação
Procure seu desenvolvedor para ativar a compactação gzip. A regra é acionada quando o PageSpeed Insights detecta que os recursos compactáveis foram veiculados sem a compactação.
Consulte a documentação de casa servidor web sobre como ativar a compactação:
Apache: use mod_deflate.
Nginx: use ngx_http_gzip_module.
IIS: configure a compactação HTTP.
Melhorar o tempo de resposta do servidor
Se o tempo de resposta do servidor for maior que 200 ms, o PageSpeed Insights notificará sobre essa otimização.
O tempo de resposta do servidor mede quanto tempo ele leva para carregar o HTML necessário para começar a processar a página de seu servidor, subtraindo o tempo de latência de rede entre o Google e seu servidor.
Recursos de redução
Essa otimização é ativada quando seus arquivos estão grandes, como HTML, Javascript e CSS.
Para reduzir arquivos HTML use o HTMLMinifier.
Para reduzir JavaScript use o UglifyJS.
Para reduzir arquivos CSS use o CSSNano.
Outros
Existem outros itens para otimizações no PSI como Aproveitar o cache do navegador, otimizar as imagens ou remover JavaScript de bloqueio de renderização.
Veja todos em Recursos dos PageSpeed Insights.
Perguntas Frequentes
Por que as pontuações de velocidade e de otimização não mudaram?
Os dados de velocidade exibidos no relatório do PSI não são atualizados em tempo real. As métricas informadas refletem a experiência do usuário durante os últimos trinta dias e são atualizadas semanalmente.
Por que o PSI usa as métricas FCP e DCL? Qual delas é a mais importante?
A métrica primeira exibição de conteúdo (FCP, na sigla em inglês) mede quando um usuário vê uma resposta visual da página. A métrica Carregamento do conteúdo DOM (DCL, na sigla em inglês) mede quando o documento HTML foi carregado e analisados.
Devo implementar todas as recomendações de otimização?
Como o PageSpeed é uma ferramenta de otimização de desempenho, as recomendações exibidas favorecem a velocidade.
Avalie o custo das alterações em relação ao benefício para sua página ou site. O objetivo é simplesmente indicar os problemas que você deve considerar corrigir.
Conclusão
Acredito que agora você consiga melhorar a velocidade da sua página, assim como ter mais clareza com os erros comuns do PSI ao seu desenvolvedor.
Gostou? Compartilhe com seus amigos para que mais pessoas saibam o que é FCP e DCL e como melhorar o desempenho do Magento.
A SAN não está só preocupada com os sites hospedados e gerenciados, mas com a satisfação e segurança dos seus clientes.
Fonte: Developers Google, Google PageSpeed Insights, developer.mozilla.org e Blog Webmasters Google.
