Page Speed

Como otimizar seu template para obter melhores notas no Page Speed Insights

Imagens

Um dos principais fatores que afetam a pontuação do PageSpeed são as imagens exibidas na página.

Otimizar o tamanho

Conforme descrito na documentação sobre FbitsStatic, é possível otimizar o tamanho das imagens passando parâmetros na query string da URL da imagem. Isso permite a redução do tamanho das imagens trafegadas na rede, sem a necessidade de redimensionamento excessivo pelo navegador.

Em consultas à API do Storefront, os campos de URL de imagem também possibilitam o envio desses parâmetros para que a URL retornada já contenha a query string otimizada. Veja um exemplo:

GraphQL

query ProductPage($productId: Long!, $selections: [AttributeFilterInput]){
  product(productId:$productId) {
    id
    productId
    productName
    productVariantId
    alias
    sku
    ean
    images(width:600, height:600) {
        url
    }
  }
}

Além disso, é recomendado incluir os atributos de width e height nas tags de imagem.

Utilizar lazyload em imagens fora da view e priority nas principais

Imagens que não são visíveis durante o carregamento inicial da página devem utilizar a propriedade loading="lazy". Por exemplo, imagens no rodapé ou em páginas subsequentes de um carrossel. Já imagens que são principais, como a primeira página de um carrossel numa home, podem ser carregadas com prioridade utilizando a propriedade fetchpriority="high".

Utilizar o elemento picture para imagens em dimensões diferentes

Em designs responsivos, muitas vezes é necessário carregar imagens com dimensões diferentes de acordo com o tamanho do dispositivo utilizado. Caso elementos <img> sejam utilizados, todas as imagens serão baixadas pelo navegador, mesmo que não estejam visíveis para determinado dispositivo.

Para solucionar esse problema, recomenda-se o uso do elemento picture. A Awake utiliza esse elemento no componente de carrossel de banner da home, é possível ver como as imagens de outras dimensões são carregadas apenas caso o threshold de largura seja passado.

Utilizar formatos convencionais de imagens

Formatos de arquivo como jpg e png oferecem um melhor desempenho, uma vez que podem ser convertidos para webp. Não é recomendado o uso de gifs, pois eles não permitem uma compactação eficaz, resultando em arquivos grandes.

Utilizar o FbitsStatic - Apenas lojas de migração

Lojas existentes que estejam migrando para o Storefront possuem arquivos estáticos no Recursos. Ao começar a migração para o Storefront, algumas entidades serão migradas (conforme documentação), mas outros arquivos, especialmente aqueles localizados no explorador de arquivos do SE, não serão migrados.. O Recursos dessas lojas não será desativado, mas, para obter melhor desempenho, é recomendado o uso do FbitsStatic, migrando apenas os arquivos estáticos necessários para o template do Storefront no Git.

Scripts

Não adicionar scripts com dependências grandes

Ao adicionar um script JS à página, é importante considerar as dependências que esse script traz consigo. Um exemplo claro disso são as bibliotecas de carrossel que requerem o jQuery para funcionar.

No template padrão, procuramos utilizar bibliotecas com o mínimo de dependências possível.

Atrasar o carregamento de scripts não necessários

Scripts que não afetam a parte visual da página não precisam ser carregados imediatamente. É possível adicionar um atraso (delay) para minimizar seu impacto inicial.

Layout / Scriban

Responsividade sem duplicação

Recomenda-se adotar uma estrutura HTML unificada para as versões móvel e desktop de um template, enquanto utiliza o CSS para adaptar a aparência. Replicar o HTML para criar variantes do site para dispositivos móveis e desktop resulta em páginas mais pesadas e elementos redundantes, impactando negativamente a pontuação de desempenho.