Velocidade do site melhorada por profissionais

Como medimos a velocidade da página?

Utilizamos ferramentas especializadas para testar a velocidade de sites e lojas online em dispositivos desktop e também em dispositivos móveis.

Utilizamos as seguintes ferramentas para medir a velocidade da página: PageSpeed ​​Insights e GTmetrix.

PageSpeed Insights

O PageSpeed ​​​​Insights oferece a possibilidade de testar a velocidade da página não só em dispositivos desktop, mas também em dispositivos móveis - gratuitamente. No entanto, os resultados dos testes do PageSpeed ​​​​Insights podem variar. A ferramenta testa nos Estados Unidos, pelo que o tempo de carregamento medido pode ser pior se o servidor do seu website estiver localizado fora dos Estados Unidos. Isto é chamado de latência.

O PageSpeed ​​​​Insights é uma ferramenta desenvolvida pela Google. Desde abril de 2020 que a Google tem um novo tipo de sinal de qualidade que será utilizado como fator de classificação para o seu motor de busca: o Core Web Vitals. Estão a planear usar estes sinais na classificação em junho de 2021.

GTmetrix

O GTmetrix oferece testes gratuitos da velocidade da página dos seus sites e loja online, com a opção de escolher entre os locais onde os testes serão realizados. Têm muito mais opções além disso. A desvantagem do GTmetrix é que testar a velocidade da página num dispositivo móvel não é gratuito e precisa de uma conta (que é gratuita) para poder utilizar opções como testar a partir de um local diferente.

Notamos que os resultados dos testes do GTmetrix são mais estáveis. O GTmetrix oferece uma visão geral clara de muitas possibilidades diferentes para otimizar a velocidade da página do seu website ou loja online. O GTmetrix também oferece a capacidade de tirar instantâneos com tiras de filme e até mesmo um vídeo da ferramenta carregando uma página web do seu website ou loja online.

O GTmetrix também mantém um histórico de todos os seus testes, para que possa comparar os resultados dos testes mais antigos com os mais recentes.

O que causa o tempo de carregamento?

Procurar servidor e enviar uma solicitação

Se introduzir o endereço (URL) de um website ou clicar num link, o seu navegador descobrirá primeiro para que servidor precisa de enviar um pedido para receber uma página web como resposta. Este processo faz parte do Sistema de Nomes de Domínio (DNS).

Pode basicamente comparar isto a uma lista de contactos da internet: não pode simplesmente digitar Maria como um número de telefone para ligar, porque o seu telefone precisa de um número de telefone. No entanto, ligou a Maria a um número de telefone, pois ela está na sua lista de contactos.

Funciona da mesma forma para URLs (endereços de sites) – um nome reconhecível é convertido num endereço que o seu browser compreende. O seu navegador navegará pela lista de contactos e ligará para o número quando encontrar o número correto.

O seu navegador fará o pedido chamando o servidor correto.

Parece um processo demorado, mas demora apenas entre 20 e 120 milissegundos (0,02 - 0,12 segundos).

Aguarda uma resposta

Assim que o servidor do site receber o seu pedido, gerará uma resposta. A espera por uma resposta de um servidor demora, em média, entre 200 e 500 milissegundos (0,2 - 0,5 segundos). Isto depende de quão ocupado está o servidor, de quão poderoso é, da configuração do servidor e se o servidor utiliza ou não cache.

Utilizamos o LiteSpeed ​​Cache para os sites WordPress dos nossos clientes, que é a ferramenta de cache mais avançada disponível para o WordPress.

O Web browser recebe um pacote incompleto

O servidor envia um ficheiro HTML para o seu browser como resposta. Este ficheiro contém o conteúdo da página com referências a todos os ficheiros que o browser necessita para estilizar o conteúdo básico e fornecer funcionalidades adicionais.

O web browser descarrega os ficheiros necessários

Os ficheiros CSS são responsáveis ​​pelo estilo dos sites/lojas online. Os ficheiros JavaScript oferecem funcionalidades adicionais, como um menu expansível para dispositivos móveis. Além destes ficheiros, existem imagens, que também são ficheiros, que precisam de ser descarregadas pelo seu browser para que possam ser exibidas. Se o tamanho do ficheiro de imagens não for otimizado, o tempo de carregamento da página web poderá aumentar rapidamente. Se uma página web requer muitos ficheiros, o navegador gastará mais tempo para os descarregar.

O seu browser envia uma solicitação ao servidor para cada ficheiro. Isto não terá um grande impacto quando se trata de um ficheiro, mas quando se trata de enviar 50 pedidos separados para um servidor e aguardar uma resposta para cada um deles, levará muito mais tempo.

O browser irá desenhar para si

O seu browser possui agora o conteúdo da página e todos os ficheiros, que quando reunidos determinarão o aspeto da página.

O seu browser utiliza os ficheiros CSS para estilizar o conteúdo simples do ficheiro HTML: o browser irá agora desenhar a página para si.

Os ficheiros CSS contêm consultas para elementos como parágrafos, títulos, ligações e botões. Cada consulta tem também uma descrição de qual o estilo que será aplicado aos elementos que se encontram na consulta. Quando escrito de forma compreensível, por exemplo:

Procure todos os links, sublinhe-os e deixe-os em azul escuro.

Se o visitante passar o rato sobre este elemento, remova o sublinhado temporariamente.

Isto não é literalmente o que está escrito nestes ficheiros CSS, pois é uma tradução do código para algo compreensível.

Se um ficheiro CSS contiver muitas consultas com muitas alterações em muitos elementos ao mesmo tempo, isso custará ao seu browser mais tempo para conseguir desenhar a página web para si. Os ficheiros CSS por si só geralmente não causam um grande impacto no tempo de carregamento da página.

É aqui que o JavaScript está bem, tornando as páginas mais lentas. O JavaScript pode fazer alterações no ficheiro HTML, que contém todos os elementos que serão estilizados utilizando os ficheiros CSS. Algumas alterações alterarão o resultado dos estilos, porque certas consultas serão aplicadas a novos elementos ou elementos que, subitamente, ganharam um novo nome de classe devido à execução de um determinado ficheiro JavaScript.

Os ficheiros CSS fazem referência a nomes de classes nas suas consultas, pelo que, se os nomes de classes forem removidos ou adicionados a elementos no ficheiro HTML, o browser terá de redesenhar a página, porque o browser não sabe exatamente quais as alterações que afetarão cada parte da página. Também não é uma boa ideia para o browser descobrir de alguma forma que parte da página web redesenhar, porque isso seria sensível a erros, bugs, por isso seria melhor para o browser apenas redesenhar toda a página web.. obrigado JavaScript..