Otimização da velocidade de página: métricas, ferramentas e como melhorar (Atualizado: 2022)
A velocidade da página sempre foi uma parte crucial do trabalho de SEO e, à medida que mais empresas migram para as operações online, 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 para entender sobre a velocidade da página do seu site e como você pode começar a melhorar? Para ajudá-lo a responder a essas perguntas, estamos compartilhando este episódio popular de Whiteboard Friday (publicado originalmente em fevereiro de 2019), onde Britney Muller explica o que você precisa saber para começar.
Clique na imagem do quadro branco acima para abrir uma versão em alta resolução em uma nova guia!
Transcrição de Vídeo
Ei, fãs de Moz. Bem-vindo a mais uma edição do Whiteboard Friday. Hoje vamos examinar todas as coisas sobre a velocidade da página e realmente entender por que é tão importante para você pensar e trabalhar enquanto faz seu trabalho.
No nível mais fundamental, vou explicar brevemente como uma página da web é carregada. Assim, podemos entender por que tudo isso é importante.
Como uma página da web é carregada
Um usuário acessa um navegador, insere seu site e há uma solicitação DNS. Isso aponta para o seu provedor de nome de domínio, então talvez GoDaddy, e isso aponta para o seu 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 este puxa todos os scripts ou códigos necessários para renderizar ou carregar uma página da web.
Normalmente, o DOM precisará solicitar recursos adicionais do seu servidor para fazer tudo acontecer, e é aí que as coisas começam a realmente tornar o seu site mais lento. Ter esse tipo de conhecimento prévio, espero, nos ajude a sermos capazes de fazer a triagem de alguns desses problemas.
Problemas que podem estar deixando seu site mais lento
Quais são alguns dos culpados mais comuns?
- Em primeiro lugar, são as imagens. Imagens grandes são os maiores culpados de páginas da web de carregamento lento.
- A hospedagem pode causar problemas.
- Plugins, aplicativos e widgets, basicamente qualquer script de terceiros também podem diminuir o tempo de carregamento.
- Seu tema e quaisquer arquivos grandes além disso podem realmente tornar as coisas mais lentas.
- Redireciona, o número de saltos necessários para chegar a uma página da web irá desacelerar as coisas.
- Depois, o JavaScript, que abordaremos em um segundo.
Mas todas essas coisas podem ser culpadas. Então, vamos abordar alguns recursos, algumas das métricas e o que eles significam e, a seguir, quais são algumas das maneiras pelas quais você pode melhorar a velocidade da sua página hoje.
Ferramentas e recursos de velocidade de página
Os principais recursos que listei aqui são as ferramentas do Google e os insights sugeridos pelo Google. Acho que o que é realmente interessante sobre eles é que conseguimos ver quais são suas preocupações no que diz respeito à velocidade da página e realmente começamos a ver a mudança em direção ao usuário. Devíamos estar pensando nisso de qualquer maneira. Mas, em primeiro lugar, como isso está afetando as pessoas que visitam seu site e, em segundo lugar, como podemos também obter o duplo benefício de o Google perceber que ele é de qualidade superior?
Sabemos que o Google sugere um site para carregar em qualquer lugar entre dois a três segundos. Quanto mais rápido, melhor, obviamente. Mas é aí que está o alcance. Eu também sugiro 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 maneira legal de entrar nisso.
Relatório de experiência do usuário do Chrome
Esta é a métrica do usuário real do Chrome. Infelizmente, ele está disponível apenas para sites populares e maiores, mas você obtém alguns dados realmente bons dele. Ele está alojado no BigQuery *, portanto, é necessário algum conhecimento básico de SQL.
* Nota do editor: Editamos esta transcrição para maior precisão. No vídeo, Britney disse “BigML”, mas pretendia dizer BigQuery. É difícil filmar um Whiteboard Friday de tópico avançado em uma única tomada! 🙂
Farol
Lighthouse, um dos meus favoritos, está disponível diretamente no Chrome Dev Tools. Se você estiver em uma página da web e clicar em Inspecionar Elemento e abrir as Ferramentas de Desenvolvimento do Chrome, na guia mais à direita onde diz Auditoria, você pode executar um relatório Lighthouse diretamente em seu navegador.
O que adoro nisso é que ele fornece exemplos muito específicos e correções que você pode fazer. Um fato engraçado de saber é que ele estará automaticamente no 3G rápido simulado e observe que eles estão focados em usuários móveis em 3G. Eu gosto de mudar para 3G rápido aplicado, porque tem o Lighthouse para fazer uma execução real dessa carga. Demora um pouco mais, mas parece um pouco mais preciso. Bom saber.
Page Speed Insights
O Page Speed Insights é realmente interessante. Eles agora incorporaram o Relatório de experiência do usuário do Chrome. Mas se você não for um desses sites grandes, ele nem mesmo medirá a velocidade real da página. Ele vai ver como seu site está configurado e fornecer feedback de acordo com isso e pontuá-lo. Apenas algo bom para estar ciente. 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 você fizer isso, por favor, comente abaixo. Mas ele está localizado em testmysite.thinkwithgoogle.com . Este é muito legal porque testa a velocidade móvel do seu site. Se você rolar para baixo, isso vincula diretamente ao ROI para sua empresa ou site. Vemos o Google aproveitando as métricas do mundo real, vinculando-o à porcentagem de pessoas que você está perdendo porque seu site é lento. É uma maneira brilhante de colocar todos nós a bordo e lutar por algumas dessas melhorias.
Pingdom e GTmetrix não são produtos ou ferramentas do Google, mas também são muito úteis.
Métricas de velocidade do site
Então, quais são algumas das métricas?
Qual é a primeira pintura?
A primeira pintura é a primeira tinta não branca em uma tela. Pode ser apenas a primeira mudança de pixel. Essa mudança inicial é considerada a primeira pintura.
Qual é a primeira tinta com conteúdo?
A primeira pintura com conteúdo é quando o primeiro conteúdo aparece. Isso pode ser parte da navegação ou da barra de pesquisa ou o que quer que seja. – Essa é a primeira pintura com conteúdo.
Qual é a primeira pintura significativa?
A primeira pintura significativa é quando o conteúdo principal está visível. Quando você meio que obtém aquela reação de “Oh, sim, é para isso que vim para esta página”, essa é a primeira pintura significativa.
Qual é a hora de interagir?
A hora de interagir é quando é visualmente utilizável e envolvente. Então, todos nós acessamos uma página da web e parece que está pronto, mas ainda não podemos usá-la. É aí que entra essa métrica. Então, quando ela pode ser usada pelo usuário? Novamente, observe como até essas métricas são centradas no usuário. Muito, muito legal.
Conteúdo DOM carregado
O conteúdo DOM foi carregado, isto é, quando o HTML é completamente carregado e analisado. Então, alguns realmente bons para ficar de olho e apenas estar atento em geral.
Maneiras de melhorar a velocidade da sua página
HTTP / 2
HTTP / 2 pode definitivamente acelerar as coisas. Até que ponto, você tem que pesquisar e testar.
Pré-conectar, pré-buscar, pré-carregar
Pré-conectar, pré-buscar e pré-carregar realmente interessantes e importantes para acelerar um site. Vemos o Google fazendo isso em seus SERPs. Se você inspecionar um elemento, poderá ver o Google fazendo a pré-busca de alguns dos URLs para que seja mais rápido se você clicar em alguns desses resultados. Você pode fazer isso da mesma forma em seu site. Isso ajuda a carregar e acelerar esse processo.
Habilite o armazenamento em cache e use uma rede de distribuição de conteúdo (CDN)
O cache é muito, muito importante. Definitivamente, faça sua pesquisa e verifique se ela está configurada corretamente. O mesmo acontece com os CDNs, tão valiosos para acelerar um site, mas você deseja ter certeza de que seu CDN está configurado corretamente.
Comprimir imagens
A maneira mais fácil e provavelmente mais rápida de acelerar seu site hoje é realmente compactar essas imagens. É uma coisa tão fácil de fazer. Existem todos os tipos de ferramentas gratuitas disponíveis para você compactá-los. Optimizilla é um deles. Você pode até usar ferramentas gratuitas em seu computador, Salvar para a Web e compactar corretamente.
Reduza os recursos
Você também pode minimizar os recursos. Portanto, é muito bom estar ciente do que minificação , agrupamento e compactação fazem para que você possa ter algumas dessas conversas mais técnicas com os desenvolvedores ou com qualquer outra pessoa que trabalhe no site.
Portanto, esta é uma espécie de visão geral de alto nível da velocidade da página. Há muito mais para cobrir, mas eu adoraria ouvir sua opinião e suas perguntas e comentários abaixo na seção de comentários.
