Reduzindo o tamanho da página para acelerar o carregamento

Acelere o tempo de carregamento da página.

Ultima atualização 22 de Agosto de 2024

O Squarespace toma várias medidas para garantir carregamentos rápidos; porém, o conteúdo adicionado ao site afeta a rapidez com que ele carrega. Páginas com excesso de imagens, por exemplo, podem demorar para carregar, principalmente na versão móvel e em conexões mais lentas.

Sempre que possível, mantenha cada página do seu site com até 5 MB.

Use este guia para conferir o tamanho de cada página e para deixar a página com o tamanho dentro do intervalo ideal. Isso acelera o carregamento do seu site. Saiba mais sobre problemas comuns relacionados ao tempo de carregamento do site em Meu site está lento para carregar.

Confira a velocidade de carregamento da página

Para ter uma ideia do tempo de carregamento do seu site, use ferramentas como Pingdom, GTmetrix, PageSpeed Insights do Google ou a ferramenta de inspeção integrada do seu navegador. Por exemplo, você pode usar as seguintes etapas com o Google Chrome:

  1. Abra as Ferramentas do Desenvolvedor.
  2. Clique na aba Rede.
  3. Atualize a página para mostrar o tempo de carregamento.

Lembre-se de que essas ferramentas são ideais para sites codificados do zero, em vez de sites criados usando um CMS. Como os sites do Squarespace usam um CMS, algumas ferramentas podem retornar falsos negativos. Se você encontrar um erro ou velocidades mais lentas do que a média ao usar essas ferramentas, isso não significa necessariamente que há um problema com seu site.

Confira o tamanho da sua página

Se uma página demorar mais para carregar do que você gostaria, confira o tamanho da página.

Uma forma de fazer isso é com as Ferramentas para Desenvolvedores do Chrome:

  1. Abra o Google Chrome. Se você estiver logado no Squarespace, saia ou abra uma janela privada no browser.
  2. Abra uma nova aba.
  3. Abra as Ferramentas para Desenvolvedores do Chrome. Atalhos:
  • Mac - + Opção + J
  • Windows - Ctrl + Shift + J
  1. Na mesma aba, abra a página que você deseja conferir. Mantenha as ferramentas para desenvolvedores abertas.
  2. Em Ferramentas para Desenvolvedores, clique na aba Rede. Se as informações não aparecerem nessa aba, atualize a página.
  3. Confira o tamanho total da página na parte inferior da tela. No exemplo abaixo, ele aparece como "1,0 MB transferido".
  4. Clique na coluna Tamanho para ordenar o conteúdo da página por tamanho. Assim, aparecem as partes da página que ocupam mais memória e estão potencialmente diminuindo a velocidade, principalmente na versão móvel. O conteúdo maior provavelmente será de imagens. Clique no nome do arquivo para ver a imagem.

Procure páginas com até 5 MB de tamanho. 1 MB é o tamanho mais seguro para conexões por celular. Se o tamanho da página for maior, confira as dicas abaixo para reduzir o tamanho da página.

Chrome_Dev.png

Reduza o tamanho da página

Como o conteúdo na maioria das páginas é carregado simultaneamente, páginas com muito conteúdo demoram mais para carregar. Se uma página tiver mais de 5 MB, exclua o conteúdo ou reduza o tamanho das imagens para que ela carregue mais rapidamente.

Para reduzir o conteúdo em uma página:

  • Veja se não há mais de 60 blocos por página. Para excluir um bloco da página, confira Apagando um bloco.
  • Se a página tiver mais de um tópico, divida-a em várias páginas. Essa ação também pode facilitar para os visitantes acharem as informações e melhorar a SEO do seu site.
  • Reduza o número de vídeos. Conteúdo incorporado como vídeos do YouTube ou do Vimeo pode aumentar o tempo de carregamento, principalmente na versão móvel. Em vez disso, separe os vídeos em várias páginas e use links para os visitantes navegarem de uma página a outra.
  • Se a página de destino do blog demorar para carregar, use trechos do blog para adicionar teasers para cada publicação em vez de mostrar a íntegra do texto dela. Você também pode ativar o recurso Páginas Móveis Aceleradas para acelerar o carregamento das publicações na versão móvel.
  • Se o seu site usar páginas de índice empilhadas (versão 7.0), reduza o número de seções, principalmente as com galerias.

Faça as imagens carregarem com rapidez

Imagens grandes e páginas com excesso de imagens podem demorar muito para carregar. Com algumas práticas recomendadas, você pode acelerar páginas com excesso de imagens.

Reduzir o tamanho da imagem

Mantenha as imagens abaixo de 500 KB e com 1.500 px a 2.500 px de largura. Para fazer upload de um arquivo de imagem menor, use um software externo de edição de imagem e ajuste o tamanho do arquivo antes de carregá-lo. Um compressor de imagem como o JPEGmini pode reduzir o tamanho do arquivo sem abrir mão da qualidade. Confira outras dicas sobre imagens em Formatando uma imagem para exibição na web.

Dica

otimize o tamanho das imagens conectando a extensão TinyIMG . A TinyIMG substitui imagens superdimensionadas por versões compactadas, garantindo um carregamento mais rápido da página e mantendo a qualidade da imagem. Embora trabalhemos com serviços de terceiros para garantir que as Squarespace Extensions funcionem corretamente, elas estão fora do nosso escopo de suporte. Podemos ajudar a conectar ou desconectar suas extensões. Para todas as outras dúvidas, entre em contato diretamente com o provedor de extensões .

Não sobrecarregue as galerias

Fixe um limite de 50 imagens para cada galeria. Pense nas seções de galeria, nos blocos de galeria e nas páginas de galeria como uma vitrine, em vez do inventário total.

Use somente imagens .jpg

Sempre que possível, use de imagens em .jpg. Limite os .gifs e as animações.

Ative o carregamento Ajax (versão 7.0)

Na versão 7.0, dependendo do template, você pode ativar o carregamento Ajax. O Ajax faz parecer que o carregamento da página é mais rápido e contínuo. Ele é ideal para páginas com excesso de conteúdo, como o blog e as páginas de galeria.

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.

Reduzindo o tamanho da página para acelerar o carregamento