Como acelerar seu site Tilda

O carregamento de sites recebe atenção especial na Internet. É por isso que trabalhar com a velocidade de carregamento de páginas da Web se tornou rotina para nós. Implementamos novas tecnologias e otimizamos os processos técnicos. Algumas das atualizações são visíveis para os usuários, enquanto outras não. É um processo contínuo, e já estamos orgulhosos do progresso que fizemos.

Neste artigo, forneceremos uma breve lista de verificação sobre como aumentar a velocidade de carregamento do seu site usando as ferramentas existentes do Tilda e modificando as configurações. Examinaremos cada ponto em detalhes para que você possa ajustar as configurações do seu site por conta própria e torná-lo ainda mais rápido.

Antes de detalhar cada ponto, vamos ver como você pode avaliar a velocidade de carregamento da página.

Muitos usuários do Tilda verificam a velocidade de carregamento da página em seus sites usando o PageSpeed Insights do Google. Esse serviço simula o carregamento de sites em dispositivos móveis e desktops, atribuindo-lhes uma classificação de eficiência.

Trata-se de uma ferramenta técnica convencional que nem sempre reflete a velocidade real de carregamento. Em nossa experiência, os dados que o Chrome coleta e mostra no painel do desenvolvedor são muito melhores do que os obtidos por meio da simulação do PageSpeed Insights. É por isso que não recomendamos confiar totalmente no PSI - considere-o como uma ferramenta analítica suplementar ou indireta.

Monitorar a velocidade real de carregamento da página do site é uma opção melhor. Você pode fazer isso nas Ferramentas do desenvolvedor no Chrome: abra o console (Option + Ctrl + I / Alt + Cmd + I) e vá para a barra de ferramentas Alternar dispositivo → guia Rede → recarregue a página que deseja avaliar. Os parâmetros mais importantes são DOMContentLoaded, que mostra o tempo que leva para a estrutura da página ser carregada, e Load, que mostra o tempo que leva para a página com todas as tabelas e estilos ser carregada.

Esse método também não é perfeito: a simulação rápida de 3G da barra de ferramentas não simula clara e corretamente o carregamento do site em dispositivos móveis, portanto, você precisará verificar a velocidade de carregamento em dispositivos reais e tirar conclusões com base nos dados.

Tilda tem um grande número de otimizações implementadas para acelerar o carregamento da página. Sites básicos sem código ou scripts de terceiros são carregados rapidamente. Você pode ver por si mesmo: escolha um modeloTilda e veja a velocidade de carregamento da página usando o PageSpeed Insights.

Vamos verificar isso em um site real: Escolhemos um dos modelos da biblioteca de modelosTilda e criamos um site para a personal stylist Annie a partir do modelo. Vamos estimar sua velocidade de carregamento usando o PageSpeed Insights.

Obviamente, a velocidade de carregamento depende da complexidade do site, da presença de blocos específicos e do fato de termos conectado widgets, contadores, estatísticas e outros complementos de terceiros que podem tornar o carregamento do site mais lento.

Escrevemos este artigo para que você possa entender o problema e aprender a identificar as configurações que o ajudarão a criar um site de carregamento rápido. Mas você precisa tomar uma decisão importante: a aplicação de todas as dicas da lista de verificação afetará não apenas a velocidade de carregamento do site, mas também seu design.

O Lazy Load permite que as imagens sejam carregadas gradualmente à medida que o visualizador rola a página para baixo, e não todas de uma vez. Essa configuração é ativada por padrão, afetando diretamente o desempenho do site.

Muitas vezes, vemos designers que criam sites personalizados desativarem o Lazy Load por algum motivo - não é recomendável fazer isso, pois isso torna o site mais lento.

Certifique-se de que o Lazy Load esteja ativado em seu site. Para isso, vá para Configurações do site → Mais e, em seguida, certifique-se de que a caixa "Desativar Lazy Load para imagens" esteja desmarcada. Além disso, verifique se o recurso não está desativado nas configurações de Imagem e Forma em Zero Block.

O Lazy Load e a otimização manual de imagens são as duas coisas mais importantes que você pode otimizar. As imagens são o elemento mais pesado do site, portanto, 70% da velocidade de carregamento da página depende delas.

Tilda tem um recurso exclusivo: AdaptiveImage Loading. Essa é uma tecnologia especial de processamento de imagens que as dimensiona para o tamanho do contêiner no site, dependendo do dispositivo do usuário. Ele também converte imagens em WebP, o formato de última geração que comprime a imagem sem perda de qualidade, para que o site carregue mais rapidamente. A conversão ocorre automaticamente, sem a necessidade de executar nenhuma ação adicional.

Em certos casos, a otimização automática "on the fly" não se compara à compactação manual de imagens. Se a velocidade de carregamento da página for crucial para você, recomendamos otimizar as imagens usando o TinyPNG, um serviço on-line gratuito que usa uma tecnologia de compactação de dados sem perdas para compactar imagens sem perda visível de qualidade.

Outra solução é adicionar blocos diferentes para as versões desktop e móvel do site e carregar imagens de tamanhos e pesos diferentes. Por exemplo, você pode fazer isso para a página de capa do seu site.

O algoritmo em Tilda será o seguinte: quando a página for carregada, ele otimizará a imagem "on the fly" e, se a imagem otimizada ocupar menos espaço do que a imagem original, ela será exibida automaticamente. Isso pode acontecer quando o cache estiver se aquecendo e o sistema ainda estiver reunindo estatísticas de tráfego para preparar as imagens de resolução necessárias com antecedência. A otimização manual não causará nenhum dano aqui e, em alguns casos, pode até ajudar a otimizar as imagens e aumentar a velocidade de carregamento da página.

Essa categoria de otimizações vem em segundo lugar em termos de peso e importância. As fontes do sistema, como Arial ou Georgia, estão disponíveis em qualquer computador. Há também fontes conectáveis, como Ubuntu e Roboto.

Se você quiser acelerar seu site o máximo possível, não recomendamos o uso de fontes personalizadas, mas a seleção de uma das fontes do sistema. Dessa forma, você pode economizar de 100 a 400 KB, o que é significativo quando se trata de carregamento de páginas.

Se você precisar usar uma marca ou identidade corporativa, poderá usar nosso novo recurso - renderização instantânea de conteúdo. A configuração permite que você mostre o conteúdo no site independentemente de a fonte da sua marca ter sido carregada ou não. O site exibirá primeiro a fonte do sistema e, após alguns segundos, quando a fonte tiver sido carregada, o texto será renderizado novamente, dessa vez na fonte da sua marca.

Esse recurso não está ativado por padrão. Se você valoriza mais a velocidade de carregamento do que a suavidade do carregamento ou o aspecto visual, talvez queira ativar esse recurso em Site Settings → Fonts and Colors → Advanced.

Verifique se você tem algum script ou código de terceiros, como chats ou um contador, conectado. Em Tilda, você pode conectá-los por meio do bloco T123. Portanto, verifique se você tem esse bloco na página ou no cabeçalho de seu site.

De acordo com nossas observações, em 95% dos casos, o código adicionado ao site não é otimizado para a estratégia de carregamento e pode tornar a renderização da página muito lenta. Por isso, recomendamos que você evite usar scripts de terceiros ou use-os com a conexão correta.

Se você não puder dispensar o código de terceiros, atrase o carregamento e a inicialização do script. Os primeiros segundos da renderização da página são muito importantes, portanto, seria melhor se nada desnecessário estivesse sendo carregado. Por exemplo, suponha que você adicione um widget Intercom. Nesse caso, talvez você queira conectar e inicializar o script 3 segundos depois que o conteúdo principal tiver sido renderizado (os eventos "DOMContentLoaded" ou "document ready"). Essa etapa ajudará a evitar o bloqueio do fluxo de carregamento principal para que a página seja renderizada mais rapidamente.

Por exemplo, em Tilda, os contadores são carregados com um atraso de 2 segundos por padrão. Você pode saber mais sobre isso no próximo parágrafo.

A inicialização atrasada do contador é um novo recurso que recentemente se tornou disponível para todos os usuários do site Tilda . Para que o contador da página se conecte, o navegador precisa carregar um script, analisar o código e executá-lo. Os arquivos do Google Analytics são bastante pesados e, portanto, reduzirão a velocidade de exibição da página se todos forem carregados ao mesmo tempo. É por isso que, por padrão, conectamos esses contadores 2 segundos após o carregamento da página.

Você pode se certificar de que essa configuração não esteja desativada em Site Settings → Analytics.

A questão parece óbvia, mas funciona: quanto menos informações houver na página, mais rápido ela será carregada. Analise seu site com um olhar crítico: é tão necessário ter todas as informações e imagens na página ou elas podem ser reduzidas? Por exemplo, se você tiver uma página muito longa (mais de 20 telas), mova parte do conteúdo para outra página para aumentar a velocidade de carregamento. Isso é algo que você pode influenciar e ajustar diretamente.

Às vezes, os usuários colocam uma foto de capa grande na primeira tela, juntamente com quatro fotos menores no bloco seguinte. Nesse caso, o navegador precisa fazer download de cinco imagens em vez de uma. Isso obstrui o tráfego, especialmente quando se trata de Internet móvel, e é por isso que não recomendamos colocar muitas imagens na parte superior da página.

Certifique-se de que seu site não seja exportado ou sincronizado por meio de uma API - em outras palavras, certifique-se de que seu site esteja nos servidores do Tilda. Caso ele seja exportado, certifique-se de que seu servidor da Web esteja configurado de forma ideal.

Tilda construiu uma infraestrutura interna de qualidade, que continuamos a aprimorar e desenvolver. Cuidamos de vários aspectos: servidores confiáveis e rápidos, CDN para acelerar a entrega de imagens, proteção contra ataques DDoS e vários outros ajustes técnicos que visam maximizar a velocidade de carregamento dos sites Tilda .

Quanto à hospedagem de terceiros, não podemos controlar a quantidade ou a qualidade do trabalho dos administradores de sistemas. No entanto, podemos dar algumas dicas sobre o que você pode fazer para tornar o carregamento do seu site mais rápido, caso o tenha exportado:
- Conecte a CDN e exiba imagens por meio de uma rede distribuída de fornecimento de conteúdo.
- Ative os cabeçalhos de cache CSS/JS/HTML nas configurações do servidor da Web para que o navegador não faça o download todas as vezes, mas os obtenha do cache.
- Ative a compactação Gzip ou Brotli para arquivos CSS, JS e HTML.
- Nas configurações, ative a compactação de arquivos de texto: CSS, JS, HTML.
- Adicione um atributo "async" aos scripts JS de terceiros para que o carregamento deles não torne o carregamento da página mais lento.
- Adicione widgets de terceiros somente quando necessário, providencie um atraso na inicialização de 2 a 3 segundos para que o conteúdo da página tenha tempo suficiente para ser renderizado.

Tilda Os sites da Web carregam muito rapidamente por padrão. Se você quiser acelerar ainda mais o seu site, use nossas recomendações da lista de verificação. Elas o ajudarão a criar um site ultrarrápido, mas você terá de fazer algumas concessões em termos de design e visual. Sempre deixamos essas decisões e prioridades para o usuário.

De nossa parte, estamos constantemente trabalhando para otimizar a plataforma e implementar novas soluções que tornarão seu site ainda mais rápido.