Otimizando a velocidade da página: métricas, ferramentas e como melhorar – Best of Whiteboard Friday

A velocidade da página sempre foi uma parte crucial do trabalho de SEO e, à medida que mais empresas mudam para operações on-line, a otimização se torna mais importante do que nunca. No entanto, é um assunto complexo que tende a ser muito técnico. Quais são as coisas mais importantes que você precisa entender sobre a velocidade da página do seu site e como pode começar a melhorá-lo? Para ajudá-lo a responder a essas perguntas, compartilhamos esse popular episódio do Whiteboard Friday (lançado originalmente em fevereiro de 2019), no qual Britney Muller analisa o que você precisa saber para começar.

Clique na imagem do quadro acima para abrir uma versão de alta resolução em uma nova guia!

Transcrição de vídeo

Olá fãs do Moz. Bem-vindo a outra edição do Whiteboard Friday. Hoje, revisaremos tudo relacionado à velocidade da página e entenderemos realmente por que é tão importante pensar e trabalhar enquanto faz seu trabalho.

No nível fundamental, explicarei brevemente como uma página da web é carregada. Dessa forma, podemos entender por que tudo isso é importante.

Como carregar uma página da web

Um usuário acessa um navegador, entra no site e há uma solicitação de DNS. Isso aponta para o seu provedor de nomes de domínio, talvez o GoDaddy, e para o servidor onde seus arquivos estão localizados, e é aí que fica interessante. Assim, o DOM começa a carregar todo o seu HTML, CSS e JavaScript. Mas, muito raramente, extrai todos os scripts necessários ou o código necessário para renderizar ou carregar uma página da web.

Normalmente, o DOM precisará solicitar recursos adicionais do seu servidor para que tudo aconteça, e é aí que as coisas realmente começam a desacelerar o site. Espero que esse tipo de conhecimento prévio nos ajude a avaliar alguns desses problemas.

Problemas que podem estar tornando o site mais lento

Quais são alguns dos culpados mais comuns?

1. A primeira e mais importante são as imagens. Imagens grandes são o maior culpado pelo carregamento lento de páginas da web.
2. A acomodação pode causar problemas.
3. Plugins, aplicativos e widgets, basicamente qualquer script de terceiros também podem diminuir o tempo de carregamento.
4. Seu tema e quaisquer arquivos grandes além disso também podem tornar as coisas mais lentas.
5. Redirecionar, a quantidade de saltos necessários para acessar uma página da web diminuirá a velocidade.
6. Em seguida, JavaScript, que abordaremos em um segundo.

Mas todas essas coisas podem ser culpadas. Então, vamos examinar alguns recursos, algumas das métricas e o que elas significam e, em seguida, quais são algumas das maneiras pelas quais você pode melhorar a velocidade da sua página hoje.

Ferramentas e recursos de velocidade da página

Os principais recursos que listei aqui são ferramentas e idéias do Google sugeridas pelo Google. Acho que o mais interessante é que podemos ver quais são suas preocupações com a velocidade da página e realmente começar a ver a mudança em relação ao usuário. Deveríamos estar pensando sobre isso de qualquer maneira. Mas, primeiro, como isso afeta as pessoas que visitam seu site e, em segundo lugar, como podemos obter o duplo benefício de ser percebido pelo Google como sendo de qualidade superior?

Sabemos que o Google sugere um site para carregar entre dois a três segundos. Quanto mais rápido, melhor, obviamente. Mas é aí que está o alcance. Sugiro também que você tenha uma visão competitiva disso. Coloque seus concorrentes em algumas dessas ferramentas e compare suas metas de velocidade com o que é competitivo em seu setor. Eu acho que é uma ótima maneira de entrar nisso.

Relatório de experiência do usuário do Chrome

Essa é a métrica real do usuário do Chrome. Infelizmente, ele está disponível apenas para sites maiores e mais populares, mas você obtém alguns dados muito bons. Ele está hospedado no BigQuery *, portanto, é necessário algum conhecimento básico de SQL.

* Nota do Editor: Editamos esta transcrição para fins de precisão. No vídeo, Britney disse “BigML”, mas ela pretendia dizer BigQuery. É difícil filmar um Whiteboard com tema avançado de uma só vez! 🙂

Farol

O Lighthouse, um dos meus favoritos, está disponível no Chrome Dev Tools. Se você estiver em uma página da web e clicar em Inspecionar item e abrir as Ferramentas de desenvolvimento do Chrome, na guia à direita onde diz Auditoria, é possível executar um relatório Lighthouse diretamente no seu navegador.

O que eu amo é que ele fornece exemplos e soluções muito específicos que você pode fazer. Um fato interessante é que ele será automaticamente simulado em 3G rápido e observe que eles estão focados nos usuários móveis 3G. Eu gosto de mudar isso para 3G aplicado rapidamente, porque o Lighthouse faz uma execução real dessa carga. Demora um pouco mais, mas parece ser um pouco mais preciso. Bom saber.

Page Speed ​​Insights

O Page Speed ​​Insights é realmente interessante. Agora eles incorporaram o Relatório de experiência do usuário do Chrome. Mas se você não é um desses grandes sites, ele nem vai medir a velocidade real da sua página. Você verá como o seu site está configurado e fornecerá comentários de acordo e a avaliará. Apenas uma coisa boa a ter em mente. Ainda oferece um bom valor.

Teste a velocidade e o desempenho do seu site para celular

Não sei qual é o título disso. Se sim, comente abaixo. Mas pode ser encontrado em testmysite.thinkwithgoogle.com. Isso é muito legal porque testa a velocidade móvel do seu site. Se você rolar para baixo, ele será vinculado diretamente ao ROI da sua empresa ou do seu site. Vimos que o Google tira proveito das métricas do mundo real, vinculando-a à porcentagem de pessoas que estão perdendo porque seu site é muito lento. É uma maneira brilhante de ter todos nós a bordo e lutar por algumas dessas melhorias.

Pingdom e GTmetrix são produtos que não são do Google ou ferramentas que não são do Google, mas também são muito úteis.

Métricas de velocidade do site

Quais são algumas das métricas?

Qual é a primeira pintura?

A primeira pintura é a primeira pintura que não está em branco na tela. Pode ser apenas a primeira alteração de pixel. Essa mudança inicial é considerada a primeira pintura.

Qual é a primeira pintura feliz?

A primeira pintura feliz é quando o primeiro conteúdo aparece. Isso pode fazer parte do navegador ou da barra de pesquisa ou qualquer outra coisa. – Essa é a primeira pintura feliz.

Qual é a primeira pintura significativa?

A primeira pintura significativa é quando o conteúdo principal é visível. Quando você obtém a reação “Ah sim, foi para isso que vim a esta página”, essa é a primeira pintura significativa.

Qual é o tempo para interagir?

O momento de interagir é quando é visualmente utilizável e atraente. Então, todos nós acessamos uma página da Web e ela parece estar pronta, mas ainda não podemos usá-la. É aí que entra essa métrica. Então, quando pode ser usado pelo usuário? Mais uma vez, observe como essas métricas são centradas no usuário. Muito, muito arrumado.

Conteúdo do DOM carregado

Conteúdo do DOM carregado, é quando o HTML é totalmente carregado e analisado. Portanto, alguns muito bons para observar e ter em mente em geral.

Maneiras de melhorar a velocidade da sua página

HTTP / 2

O HTTP / 2 pode definitivamente acelerar as coisas. Quanto à distância, você precisa pesquisar e provar isso.

Pré-conexão, pré-busca, pré-carga

Pré-conexão, pré-busca e pré-carregamento são realmente interessantes e importantes para acelerar um site. Vemos o Google fazendo isso em seus SERPs. Ao inspecionar um item, você pode ver que o Google busca previamente alguns dos URLs para que você possa obtê-lo mais rapidamente se clicar em algum desses resultados. Da mesma forma, você pode fazer isso no seu site. Ajuda a carregar e acelerar esse processo.

Habilitar o cache e usar uma rede de entrega de conteúdo (CDN)

O armazenamento em cache é muito, muito importante. Definitivamente, faça sua pesquisa e verifique se ela está configurada corretamente. O mesmo com a CDN, tão valiosa para acelerar um site, mas você deseja garantir que sua CDN esteja configurada corretamente.

Comprimir imagens

A maneira mais fácil e provavelmente mais rápida de acelerar seu site hoje é comprimir essas imagens. É uma coisa tão fácil de fazer. Existem todos os tipos de ferramentas gratuitas disponíveis para você compactar. Optimizilla é um deles. Você pode até usar ferramentas gratuitas no seu computador, salvar na Web e compactar corretamente.

Minimizar recursos

Você também pode minificar recursos. Portanto, é muito bom estar ciente do que a minificação, o agrupamento e a compactação fazem para que você possa ter algumas dessas conversas mais técnicas com os desenvolvedores ou com qualquer outra pessoa trabalhando no site.

Portanto, esse é um resumo de alto nível da velocidade da página. Há muito mais para cobrir, mas eu adoraria ouvir seus pensamentos, suas perguntas e comentários abaixo na seção de comentários.

Eu realmente aprecio que você dê uma olhada nesta edição do Whiteboard Friday e nos vemos em breve. Muito obrigado. Nos vemos.

Transcrição de vídeo por Speechpad.com

Saiba mais sobre SEO no MozCon Virtual em julho deste ano

Não perca insights, dicas, fluxos de trabalho e dicas exclusivas de Britney e de nossos outros grandes palestrantes deste ano. MozCon Virtual! Cheio da liderança de pensamento mais importante do setor de SEO, pela primeira vez a MozCon será totalmente amigável ao controle remoto. É como mais de 20 das sextas-feiras favoritas do quadro branco de vitaminas e dobrou de tamanho, além de perguntas e respostas interativas, rede virtual e acesso total ao pacote de vídeo:

Salve meu lugar na MozCon Virtual!

Mal podemos esperar para vê-lo lá!