Alguns meses atrás eu tive a honra de ministrar um curso sobre a plataforma Wake Commerce e uma das coisas mais importantes que frisei durante as aulas foi sobre o carregamento das páginas. Vender online já não é nenhum mistério nos dias atuais, mas saber como montar as páginas é um dos segredos mais importantes que devem ser apreendidos e dominados.

Pensando nisso resolvi escrever esse pequeno texto para falar sobre PageSpeed e a sua importância na construção de páginas web.

O que é PageSpeed?

Resumindo bem, PageSpeed é uma métrica que refere-se à velocidade de carregamento do conteúdo de uma página web.

Imagine que seus clientes estejam navegando na sua loja online e as imagens dos seus produtos demorem minutos para serem carregadas. Isso vai fazer com que eles saiam do seu site e procurem pelo seu concorrente para realizar a compra. Pense só no tamanho do prejuízo!

Vale lembrar que o PageSpeed não é apenas uma questão de paciência do visitante do site ou loja online, mas um fator extremamente importante para a otimização do seu conteúdo para os motores de busca. O Google vai dar preferência para páginas que carregam mais rapidamente e está aí o pulo do gato.

Na próxima vez que você for criar ou otimizar uma loja virtual, lembre-se do PageSpeed para entregar uma experiência rica para seus visitantes.

O PageSpeed não é apenas sobre velocidade de carregamento, mas, também, sobre a experiência do usuário. Quanto mais rápido a página carrega, mais ágil e agradável fica a navegação.

E a Wake Commerce? Onde entra nisso tudo?

O pessoal da Wake Commerce, que tive o privilégio de conhecer quando produzi o curso, lançou recentemente uma documentação oficial da plataforma para falar exclusivamente sobre PageSpeed.

Essas informações ficaram tão profissionais que resolvi compartilhar com vocês leitores do iMasters.

Para quem não conhece, a Wake Commerce é uma das principais plataformas de comércio eletrônico do Brasil e tem especial carinho pelos desenvolvedores disponibilizando uma documentação profissional para quem deseja trabalhar com a sua plataforma.

Mas chega de papo e vamos ver um pouco de código!

PageSpeed: como deixar sua loja online mais eficaz!

A ideia do PageSpeed como já falado é otimizar suas páginas para que tenham o carregamento mais rápido possível e, com isso, ganhar as melhores notas no PageSpeed Insights, que é uma ferramenta gratuita do Google que analisa o desempenho do seu site através da velocidade de carregamento das páginas e seus conteúdos, como imagens e vídeos.

E como você já deve imaginar, o carregamento de imagens é um dos principais fatores que afetam a sua pontuação na ferramenta do maior buscador do mundo.

Nos templates que você utiliza para criar a sua loja na Wake Commerce é possível otimizar o tamanho das suas imagens passando parâmetros na query da URL do arquivo. Isso permitirá a redução do tamanho das imagens trafegadas na rede, sem a necessidade de redimensionamento pelo navegador.

E trabalhando com a API do Storefront, os campos com a URL das imagens também possibilitam o envio dos parâmetros para que a URL retornada já contenha a query string otimizada.

Quer ver um pequeno exemplo em GraphQL? Olha só:

query ProductPage($productId: Long!, $selections: [AttributeFilterInput]){

product(productId:$productId) {

id

productId

productName

productVariantId

alias

sku

ean

images(width:600, height:600) {

url

}

}

}

Agora é só incluir os atributos de width e height nas tags de imagem.

Claro que isso é apenas um exemplo, tem muito mais informações na documentação oficial sobre PageSpeed da Wake Commerce que você confere nesse link: https://wakecommerce.readme.io/docs/page-speed

Espero que tenham gostado dessas informações sobre PageSpeed e se acharem que vale um artigo com mais exemplos de uso, é só pedir 🙂

Nos vemos por aí!

Reinaldo Silotto