Como melhorar sua análise no Google PageSpeed Insights



  • Olá pessoal, segue o meu vídeo para sanar algumas dúvidas básicas sobre Google PageSpeed Insights, onde ele mostra alguns pontos de como melhorar a sua pontuação, pois isso ajuda na sua navegação (mobile e desktop) e consiga mais clientes em sua visita na loja virtual.

    Link do YOUTUBE: https://www.youtube.com/watch?v=wPOCWsdnHgY



  • Chales, uma das recomendações é: "Adie imagens fora da tela".
    É o maior ponto de economia de carregamento do meu site, como posso resolver isso?



  • Olá @Amanda-Vieira, quando o google PageSpeed fala sobre isso: "Adie imagens fora da tela", está relacionado aos carrosséis dos produtos, ou seja, quando a imagem está oculta, vc aperta a seta do carrossel e aparecem mais produtos, traduzindo.... as imagens estão fora da tela ou da margem. Para resolver isso terá que criar um script por meio da API, que reduza esse tempo, ele funciona da seguinte maneira: Tá lá o carrossel de produtos e quando clicar na seta do carrossel, em vez de exibir os produtos já carregados, irá exibir o produto com um time para ser carregado e ser exibido, reduzindo o tempo de carregamento da página.



  • boas dicas, só faltou ensinar a resolver o principal:
    0_1551109137410_servidor-xtech-lento.png



  • Olá @andeoliveira, bem essa parte não tem como, pois alguns desses arquivos na lista de erro, não temos acesso, pois é do sistema e não fica no código do front-end da loja (na qual acessamos). Para dar uma melhorada básica, é vc pegar o código CSS da loja e minificar, ou seja, enxutar o código para acelerar um pouco o recarregamento da página.
    OBS: Não minifique o código JS (application.js), pois esse arquivo possui códigos que não podem ser minificados.



  • @charles , tem como mostrar o passo a passo de como minificar o CSS? Quer dizer que o JS não podemos minificar? E o HTML posso minificar????



  • Olá @warley, segue o tutorial e print que fiz:

    1 - Copie o código CSS na loja:

    0_1555364377447_screenshot-teste-xtech-intercom.xtechcommerce.com-2019.04.15-18-25-12.png

    2 - Acesse o site https://cssminifier.com/ e siga o passo pelo print abaixo:

    0_1555364403641_screenshot-cssminifier.com-2019.04.15-18-27-32 (1).png

    3 - Último passo é adicionar o arquivo minificado a loja e alterar o código para o arquivo ser usado na loja, o print abaixo explica os detalhes:

    0_1555364454632_screenshot-teste-xtech-intercom.xtechcommerce.com-2019.04.15-18-33-33.png