Por que desisti dos insights de velocidade da página do Google. Por que você não precisa se preocupar com o Google PageSpeed Insights O impacto do Google Page Speed na classificação
Módulo Google PageSpeed para um site: o que pode fazer e como usá-lo
Decidimos experimentar e adicionar um acelerador do Google a três projetos. Vamos descobrir o que aconteceu.
Os sites devem carregar instantaneamente. Ah, não, os sites não devem nada a ninguém? Entre no trólebus e sente-se ao lado de um aluno sentado com um iPhone. Veja se ele está disposto a esperar o carregamento de uma loja online. Vamos colocar desta forma: três segundos e a aba fecha. O próximo resultado dos resultados da pesquisa é usado.
A propósito, sobre os resultados da pesquisa. A velocidade de carregamento do site afeta as classificações dos mecanismos de pesquisa. Provas e . Sites “lentos” têm menos probabilidade de serem visitados por robôs e, portanto, menos propensos a serem indexados. Isso afeta a posição nos resultados da pesquisa e a facilidade de encontrar as informações necessárias.
Pense constantemente se sua página carregará mais lentamente em um smartphone do que em um PC. E se for esse o caso, provavelmente iremos reduzi-lo nos resultados da pesquisa.
— Matt Cutts, Google
O Google trabalhou muito e lançou sua ferramenta de teste de velocidade – PageSpeed. É fácil encontrar elementos que retardam o carregamento - acesse aqui e no único campo indicamos o endereço que deseja testar. Um relatório de desempenho detalhado estará pronto em um minuto. O resultado será mostrado em papagaios. O ideal é que sejam cem, mas tente conseguir! Nem o próprio Google consegue fazer isso: verifique seus serviços :)
Os testes são realizados para desktop e versão móvel site. É melhor navegar de acordo com a escala de cores: a zona amarela indicará que existem elementos que precisam ser otimizados, a zona verde indicará que está tudo bem. Se o site estiver na zona vermelha, aumente a velocidade e otimize-o. Caso contrário, há um abismo pela frente: no momento em que a página carregar, o usuário já terá ido para outro site :)
Existem duas maneiras de otimizar seu site.
Otimização manual
1. Comprimimos as imagens usando o Photoshop ou as executamos Otimizilla, Por exemplo
Quanto menores forem as imagens, quanto mais chacais, mais rápido o site carrega. Fazemos compactação, ocultamos fotos multimegapixels em cat. Chega de visualização de 640x480. Uma imagem menor significa um site mais rápido.
Mesmo na linha de partida Página do Google Os gráficos dos desenvolvedores podem ser compactados em 71%.
2. Conectamos fontes do próprio site e não as extraímos das fontes do Google
A desvantagem é que até que o navegador carregue a fonte, o usuário verá o enfadonho Arial ou Tahoma.
3. Aproveite ao máximo o cache do seu navegador
Quando o site já tiver sido parcialmente salvo pelo cliente, o carregamento será muito mais rápido.
4. Reduza JavaScript e CSS
Os scripts não são editados todos os dias após o lançamento - não faz sentido compactá-los na hora. Basta otimizar uma vez após editar o código. É melhor renderizar os modelos JS no servidor, incorporar os resultados em HTML e usar os modelos no cliente após o carregamento.
5. Encurtando HTML
Na prática, removendo espaços extras, tabulações e quebras de linha.
6. Remova o código não utilizado
Você pode usar a auditoria integrada ao Chrome. Pressione F12 e vá para a guia Auditorias. Na parte inferior há um único botão Executar. Faz essencialmente a mesma coisa que o PageSpeed. Somente em tempo real.
Otimização automática
Qualquer site consiste em elementos dinâmicos e estáticos. Elementos dinâmicos são o próprio código HTML, obtido a partir de trabalhos PHP e consultas ao banco de dados. E o resto é estático. São imagens, JavaScript e CSS.
Você pode otimizar seu site automaticamente com esta coisa legal do Google - Informações do PageSpeed. Este módulo é instalado no servidor nginx e, após configurações, compacta em tempo real muita informação, incluindo gráfico.
O PageSpeed Insights pode analisar HTML e otimizar recursos. Apertar, em suma. No código-fonte, os recursos estarão localizados em um caminho diferente daquele especificado pelo desenvolvedor para compactar a foto. Vale a pena considerar isso. Mas a exibição dos recursos não mudará. O peso diminuirá. Isso significa que a velocidade de carregamento da página aumentará e os visitantes ficarão mais felizes :)
No entanto, o PageSpeed Insights tem limitações. Ele só pode ser instalado no nginx rodando em ou servidor virtual. Não, um servidor compartilhado alugado em algum lugar da Alemanha não funcionará.
A segunda limitação está relacionada à eterna guerra dos navegadores. As imagens compactadas pelo PageSpeed são convertidas para o formato .webp, que só o Chrome entende (no popular Internet Explorer 6 tal coisa não funcionará). EM versões mais recentes O Opera também aprendeu como exibir essas imagens. Porque o motor foi trocado.
Exemplos de uso do PageSpeed Insights
Instalamos o módulo PageSpeed Insights em três projetos - em nosso novo site e em dois clientes. O módulo vê de qual navegador vem a solicitação, verifica se ele está treinado para exibir o formato webp e retorna uma imagem otimizada ou um jpeg normal.
Segundo Sibirix, a configuração demorou cerca de meio dia. Tivemos que fazer algumas coisas empiricamente: mudamos e olhamos o que estava acontecendo. Às vezes, a zona era verde, mas podia mudar para amarelo de forma totalmente imprevisível.
Agora ambas as versões estão na zona verde. Isso significa que não haverá problemas com velocidade. Se a velocidade da conexão for boa, não é algum tipo de EDGE :)
Dentro de suporte técnico loja online da fábrica Vitra, decidimos experimentar e instalar nela o módulo PageSpeed Insights:
O serviço Google PageSpeed Insights, que oferece conselhos sobre como acelerar um site, ganhou popularidade há muito tempo. Você pode ter encontrado suas recomendações mesmo que nunca tenha aberto a página do projeto. Agências de SEO e freelancers gostam de inserir os resultados da análise em suas propostas de vendas e auditorias, tentando impressionar o cliente com muita terminologia e manchetes duras no espírito de “É preciso consertar”.
Portanto, para entender o que é o Google PageSpeed Insights e é necessário seguir suas recomendações?, é necessário não apenas para desenvolvedores, mas também para proprietários de sites/gerentes de projetos de Internet.
Esta foi a introdução. E agora a nuance prometida.
O Google PageSpeed Insights é para fins de teste versões diferentes uma página. Comparar classificações de sites diferentes é um exercício inútil.
Você entende? O Google PageSpeed Insights NÃO é um serviço de medição de velocidade de sites. Esta é uma ferramenta que mostra possíveis pontos de esforço para otimizar a velocidade de carregamento da página. E, claro, a classificação no serviço não afeta diretamente a classificação e, portanto, usar recomendações em relatórios de SEO é falso. Exceto em situações em que a implementação dessas dicas realmente tenha um impacto crítico na experiência do usuário.
Poderíamos terminar aqui, mas você não estaria lendo este blog se não gostasse de provas. Bem, vamos pensar sobre isso.
Qual é a relação entre a velocidade real de carregamento e a classificação do PageSpeed?
Na verdade. Aqui estão duas capturas de tela do serviço.
1. Resultados do teste de uma página contendo muito texto e imagens:
Apesar do tamanho, a página carrega a uma velocidade aceitável - você mesmo pode verificar.
2..php - tem um atraso de carregamento de 5 segundos (função sleep(5)):
A diferença é de 20 pontos, a primeira página está na zona “vermelha”, a segunda está na zona “amarela”. Ops!
Muito claro, não é? Lembre-se: uma avaliação ruim não é o mesmo que carregamento longo. Este é apenas um indicador de que a página pode ser tornada mais rápida. Mas o serviço, é claro, não dirá se é 2 vezes mais rápido ou 2% mais rápido. Não porque haja algo de errado com ele. É apenas para outra pessoa e está tudo bem. O desenvolvedor deve tomar decisões.
Ok, mas classificações altas ainda são boas para SEO, certo? Visto que este é um serviço do próprio Google!
O argumento é, na minha opinião, bastante fraco. Conforme mostrado acima, a quantidade de pontos que a ferramenta produz não está relacionada às características que realmente são importantes para o usuário.
Aqueles. esta classificação é mais ruidosa do que um sinal de pesquisa útil. Os principais sites com funcionalidades JS complexas geralmente estão na zona “vermelha”. Mas projetos da década de 2000, criados apenas em HTML, podem dar de 80 a 90 pontos. A propósito, o Google nunca declarou a relação entre a classificação do seu serviço e a classificação.
Mas digamos que este seja realmente um fator de classificação importante. O que observaríamos então? O TOP seria dominado por sites com classificações altas. Existe tal coisa? Não!
Aqui está uma captura de tela de um site do TOP-2 do Google para a consulta “janelas de plástico Moscou”:
Claro, este é um exemplo isolado. Mas se esse fator fosse realmente significativo, tal site não seria permitido no TOP. Você pode encontrar muitos outros casos em tópicos igualmente competitivos.
Portanto, pensamos primeiro na velocidade real de carregamento do site (você pode conferir, por exemplo, em http://www.webpagetest.org/). Se a velocidade não for muito boa (pior que a dos concorrentes), primeiro trabalhamos na otimização do banco de dados e dos scripts que exibem o conteúdo. A sua organização analfabeta é a razão da maioria dos “freios”. E então o PageSpeed Insights será útil.
Então, agora você sabe que às vezes pode ignorar conselhos terríveis como “Certifique-se de consertar” - mesmo que o Google os dê. Boa sorte!
Grátis on-line Serviço do Google Page Speed Insights é uma ferramenta abrangente para determinar o desempenho real e escolher maneiras eficazes de otimizar seu site. Conveniente para uso em um computador e em dispositivo móvel. Não mostra a velocidade absoluta da página, mas analisa a eficiência da dinâmica de carregamento e renderização no navegador do cliente. Neste caso, apenas são levados em consideração fatores que não dependem do tipo de conexão à Internet: JavaScript, CSS, estrutura HTML, configuração do servidor, tamanho da imagem, etc.
Começando
Para obter um relatório de desempenho detalhado, você precisa acessar o site oficial do Page Speed Insights e colar o link do recurso em estudo na linha “Insira o URL da página da web”. Depois disso, você precisa clicar no botão “Analisar”.
O tempo de preparação e entrega do resultado leva menos de um minuto. O usuário pode avaliar imediatamente a necessidade de otimização SEO ou verificar a eficácia do algoritmo de promoção do mecanismo de busca utilizado para o site.
Recursos do Google Page Speed Insights
O relatório de velocidade de carregamento do site possui uma componente gráfica e digital, separadamente para PCs e dispositivos móveis.
O indicador Page Speed mostra a dinâmica em segundos desde o início da primeira renderização do conteúdo (FCP) até o carregamento do HTML e a construção da árvore DOM (DCL), ou seja, a interface está totalmente inicializada para o usuário. Quanto menor esse tempo, mais rápido o site será exibido no navegador. Para garantir que todos os recursos estejam em pé de igualdade, o Google Page Speed Insights usa a velocidade média de carregamento da rede como ponto de partida, dando uma das seguintes classificações:
- Lento – lento (cor vermelha);
- Médio – normal (laranja);
- Rápido – rápido (verde).
Ter um gráfico de distribuição de velocidade facilita a identificação de áreas problemáticas com base na taxa de download e a tomada das medidas necessárias. As marcações gráficas coloridas também têm um significado claro.
Além disso, o serviço online Page Speed Insights usa uma escala de 100 pontos para avaliar os recursos da web com base no tempo que leva para produzir resultados para uma consulta de pesquisa e no carregamento completo da página. Existem três intervalos de velocidade no total:
- Baixo (baixo) – 0–59 pontos;
- Médio (média) – 60–79;
- Bom (bom) – 80–100.
Uma classificação baixa de um recurso da web quase sempre indica grandes deficiências na organização do processo de renderização, que requerem eliminação obrigatória.
Page Speed Insights e promoção de SEO
O Google usa cerca de 200 fatores para determinar a classificação de um site, entre os quais os mais importantes são a palavra-chave no início da tag de título, o volume e a relevância do conteúdo para as consultas de pesquisa, a densidade e localização das palavras-chave e a velocidade absoluta de carregamento. O indicador Google Page Speed Insights afeta diretamente a entrega de 1 a 3 resultados em 100. Ao mesmo tempo, os requisitos oficiais do sistema afirmam que “o site deve funcionar o mais rápido possível”. Este fator tem um efeito benéfico no histórico comportamental de um recurso da web e aumenta significativamente sua classificação. É por isso que a promoção eficaz de sites SEO requer indicadores normais do Page Speed Insights, mas não necessariamente valores Bom e Rápido. Uma clara confirmação desse fato é o megapopular recurso Amazon.com, com um nível médio de otimização e uma classificação elevada.
Os desenvolvedores prestaram muita atenção à funcionalidade e aparência site às custas de minimizar o tempo para carregar totalmente imagens e estilos.
Além de um relatório detalhado sobre o desempenho de um recurso web, o serviço também oferece várias opções para melhorá-lo. Por exemplo, a Amazon.com recebeu as seguintes sugestões de otimização.
Usando o cache do navegador. Prático e conselho útil sobre o uso de cabeçalhos de cache para armazenar cópias de arquivos estáticos (não mude de um consulta de pesquisa para outro) no navegador do usuário.
É possível que a lista de links contenha um recurso cuja hospedagem esteja implementada em site de terceiros, o que impossibilita o cumprimento desta recomendação.
Removendo JavaScript que bloqueia a renderização. Se possível, organize a execução de scripts interativos de páginas web no rodapé do site (rodapé - parte inferior) ou carregue o cabeçalho e o JavaScript de forma assíncrona. Além disso, parte do código pode ser transferida para a marcação HTML principal. A participação de um profissional é importante aqui para não atrapalhar o correto funcionamento das funcionalidades do site. Esta recomendação não é adequada para recursos que utilizam modelo pronto WordPress.
Otimização da folha de estilo em cascata. É possível dividir o código CSS para upload prioritário dos estilos de design da primeira tela para o cabeçalho do site e adicionar as tabelas em cascata restantes ao rodapé. Aqui também é necessária a participação de um designer de layout para evitar problemas futuros no funcionamento do site.
Compressão de imagem. De forma eficiente Aumentar a velocidade de carregamento do site é otimizar o tamanho das imagens e fotografias. Você pode usar o editor para isso Adobe Photoshop ou serviços online especializados: Compressor.io, TinyPNG, Optimizilla, Web Resizer. Largura de imagem recomendada em formato JPEG, gif ou png – 400–600 pixels com peso de 35–75 KB.
Livre Ferramenta Google O Page Speed Insights é rápido, fácil de usar, fornece análises detalhadas do desempenho do site e recomendações práticas para melhorar a velocidade de carregamento. Usando este serviço, você pode melhorar a conversão do seu recurso da web e evitar o abandono do usuário devido ao atraso na renderização ou no upload demorado de imagens.
🎧 2019 Novo Google PageSpeed Insights: pânico ou alegria?
Ouça o episódio do podcast sobre o Google PageSpeed Insights atualizado! 🎧
Com a recente atualização do Google em seu serviço de otimização de carregamento de páginas da web, houve um grande rebuliço. Os resultados da medição da velocidade dos recursos mais populares acabaram sendo três vezes menores do que eram antes do lançamento das novas configurações no PageSpeed Insights. E se a velocidade de carregamento do site foi incluída entre os fatores de classificação dos mecanismos de pesquisa mais significativos desde o verão de 2018 Sistemas do Google, então como você pode não entrar em pânico? E que tipo de serviço é esse que perturbou os especialistas em SEO em todo o mundo da noite para o dia?
O que é o Google PageSpeed Insights
Esse serviço gratuito não apenas permite avaliar a rapidez com que as páginas da web carregam, mas também ajuda a melhorar ativamente esse indicador. A ferramenta foi criada para diagnosticar e otimizar a velocidade dos recursos e há muito tempo ocupa um lugar no tesouro de todo especialista em SEO que se preze. Ele é como um curador “fluente” de sites: observa o trabalho, analisa, identifica pontos fracos e sugere quais erros precisam ser corrigidos. Ao mesmo tempo, o PageSpeed Insights não apenas orienta sobre o que você precisa fazer, mas também mostra quanto tempo uma determinada ação de otimização de velocidade economizará em downloads futuros.
Por que o PageSpeed é considerado a ferramenta mais importante para medir a velocidade dos recursos
Este é um serviço muito conveniente e fácil de usar que até um iniciante pode entender facilmente. Além disso, é multifuncional e neste parâmetro está à frente da maioria dos seus concorrentes. PageSpeed é um dos poucos serviços adaptativos adaptados para funcionar em dispositivos móveis. Também desempenha um grande papel o fato de esta ferramenta de verificação da velocidade de carregamento do site estar intimamente ligada a um dos maiores mecanismos de busca do mundo e ser adaptada para isso. Para começar, tudo que você precisa fazer é inserir o URL do site. Os resultados são oferecidos em duas versões: para carregar páginas em um computador e em um dispositivo móvel. A avaliação é realizada em uma escala de 100 pontos. Enganam-se aqueles que dizem que 100 pontos é uma barreira inatingível. Não acredite.
Vale a pena imitar este serviço?
Não encorajamos você a escolher uma ou outra ferramenta de otimização; Mas se você deseja que seu site tenha uma boa classificação no Google, o PageSpeed Insights é uma ferramenta realmente importante. Porém, não se esqueça que a pontuação é apenas uma avaliação subjetiva do serviço, e não um fato imutável. Porém, mostra a real velocidade do recurso, colocando tudo em perspectiva.
Existem outros serviços para medir e otimizar a velocidade, mas você não deve escolher um “ídolo” para si e adorá-lo cegamente. Nenhum deles, incluindo o PageSpeed, é referência. Essas ferramentas não foram projetadas para obter a pontuação mais alta, como em um exame, mas para encontrar a interseção ideal entre funcionalidade, usabilidade e velocidade de um recurso. Isso significa que é mais sensato otimizar apenas o que pode ser melhorado sem comprometer outras características do site, e não tentar “fazer com que todos os pontos recomendados caibam em 100”. Não se esqueça de que o objetivo final é fornecer a experiência de usuário mais positiva possível.
Atualização do algoritmo Google PageSpeed Insights
Em julho, o Google lançou novo algoritmo- Atualização de velocidade, tornando a velocidade de carregamento um fator de classificação nos mecanismos de busca. As atualizações do PSI (PageSpeed Insights) de novembro mudaram radicalmente o serviço. Agora ele é executado no Lighthouse Analytics, integrado Navegador Google Cromo. Esta é uma ferramenta aberta código fonte, criado para melhorar e controlar a qualidade das páginas da web. Se antes o PSI avaliava um recurso com base no cumprimento de determinadas condições e na conclusão de tarefas, agora apenas a rapidez é levada em consideração para obter uma pontuação elevada. É importante quanto tempo leva para o primeiro conteúdo e sua parte principal aparecerem na página, quantos segundos leva para o usuário interagir totalmente com o recurso, o índice geral de velocidade e outras características.
O PageSpeed Insights adicionou um recurso de storyboard, que consiste em dez slides nos quais você pode ver a ordem em que o conteúdo da página aparece. Além disso, o serviço agora orienta sobre a utilização de novos formatos de imagem no recurso – JPEG 2000, WebP e JPEG XR – que pesam menos que seus antecessores. Este é um parâmetro importante, pois afeta principalmente a velocidade de carregamento de sites onde uma parte significativa do conteúdo é ocupada por diversas imagens.
O que fazer se suas métricas do Google PageSpeed Insights caírem após a última atualização
Nas próximas semanas, os desenvolvedores testarão o serviço atualizado em busca de bugs que já foram descobertos e os corrigirão. Agora, ao verificar a velocidade de carregamento de um mesmo site, o serviço pode apresentar resultados diferentes, ou até mesmo declarar que a página está indisponível. No primeiro caso, você precisa fazer de 5 a 6 medições seguidas e focar na média, pois os sites não são estáticos e sua velocidade também não. A segunda opção é crítica; caso isso aconteça, é necessário colocar o site em monitoramento de acessibilidade com urgência. Ao mesmo tempo, não se esqueça que leva um certo tempo para estabelecer o bom funcionamento do PSI e para que o site perca também uma posição elevada nos resultados de pesquisa. Essas coisas não acontecem da noite para o dia. Portanto, não há necessidade de entrar em pânico ou tomar medidas precipitadas - talvez seja necessário corrigi-las em algumas semanas.
Aqui está o que você deve fazer:
concentre-se na versão móvel - o Google tem requisitos mais sérios para isso e a torna uma prioridade.
Desative bibliotecas e plugins desnecessários, eles diminuem bastante a velocidade de carregamento do site, mas nem sequer estão envolvidos na exibição de seu conteúdo. Há um ponto sutil aqui: este trabalho é apenas para especialistas experientes, caso contrário você pode “quebrar” completamente o site.
Foco em conseguir o carregamento instantâneo da primeira tela: de acordo com as novas condições do mecanismo de busca, ele deve estar pronto para funcionar e interagir com o usuário o mais rápido possível.
Vá para o rodapé (parte inferior da página) js que não estão envolvidos na exibição da página ou pelo menos na primeira tela. Algumas pessoas aconselham mover o css para lá também, mas isso não deve ser feito em hipótese alguma. Isso desacelerará ainda mais a preparação da página para interação.
E não tente alcançar a pontuação perfeita. Sem conhecer as sutilezas necessárias, ao invés de melhorar a qualidade de um recurso, você pode causar danos significativos a ele. A opção ideal é pedir ajuda a alguém que conheça bem o assunto. Após o diagnóstico, ficará claro se está tudo em ordem ou se realmente algo precisa ser mudado.
Como obter 100/100 no Google PageSpeed Insights
Nem todas as recomendações do serviço podem ser seguidas pelo proprietário médio de um site ou mesmo por um especialista em otimização de SEO. Às vezes, tais ações em mãos ineptas trazem exatamente o resultado oposto e, como resultado, o recurso começa a perder sua posição nos resultados da pesquisa. Por exemplo, a transferência de JavaScript e CSS do cabeçalho (topo da página) para o rodapé, recomendada pelo serviço PSI, deve ser feita por um programador experiente que saiba posicionar corretamente esses elementos. Caso contrário, os blocos de recursos podem ficar “distorcidos” e a velocidade cairá em vez de melhorar.
Portanto, como mencionado acima, buscar uma pontuação de 100/100 no PageSpeed Insights nem sempre é sensato, e se você está determinado a alcançar a perfeição, faça-o com cautela. Lembre-se que o usuário é mais importante que a classificação PSI e ele não deve ver pedaços de layout ou design de página torto em seu site.
Benefícios do serviço
Apesar de todas as armadilhas em trabalhar com esta ferramenta, ela ainda é muito popular e por boas razões. Muitas dicas sobre como reduzir o tamanho de scripts, imagens e outros elementos são realmente úteis para aumentar a velocidade de carregamento do site. Utilizar o cache do navegador, recomendado pelo serviço em alguns casos, também é algo muito importante para agilizar o recurso, mas não é nada fácil nem para webmasters. Portanto, para não errar, é melhor confiar esse trabalho a uma equipe profissional de otimização de sites. Por exemplo, você pode nos ligar. :-)
22 ferramentas relevantes para verificar a velocidade de carregamento da página do site em 2019
Pode haver um grande número de ferramentas para verificar a velocidade de carregamento do site, mas entre elas existem apenas algumas que realmente valem a pena considerar:
Você pode realizar a mesma tarefa usando ferramentas úteis para Chrome – Google Chrome DevTools. Ou você pode ficar sem extensões: pressione Ctrl+Shift+i com a guia com seu site aberta no Chrome e selecione Auditorias no console do navegador. Em seguida, clique em Executar auditorias e aguarde enquanto o Lighthouse analisa o site e exibe os resultados.
Quais parâmetros realmente importam ao medir a velocidade do site em 2019
O PSI identifica seis pontos que determinam a classificação final de um serviço e que têm valor real na análise da velocidade de carregamento do site.
Tempo de carregamento do primeiro conteúdo
Este é o intervalo desde o momento em que a página abre e começa a carregar até que o primeiro texto ou imagem apareça nela.
Índice de velocidade de download
Esta é uma medida da velocidade com que o conteúdo do site é carregado até o momento em que a página para de mudar visualmente. Ou seja, o usuário pode ver o conteúdo como deveria ser.
Tempo de carregamento para interação
Este parâmetro mostra quantos segundos o usuário precisa esperar para começar a clicar na página e em seu conteúdo individual.
É hora de carregar conteúdo suficiente
Este é o intervalo de tempo em que a maior parte do material aparece em uma página web. Ou seja, o site parece quase totalmente pronto para visualização completa.
Hora de término da CPU
Essa métrica do Google PageSpeed Insights significa que o processador carregou o site o suficiente para responder às ações do usuário em um período de tempo adequado. Pode ser, por exemplo, inserir texto em uma pesquisa ou clicar em um elemento interativo. O tempo de resposta da página não deve exceder 50 milissegundos.
Tempo aproximado de atraso de entrada
Este é o tempo de resposta da página às ações do usuário durante os 5 segundos mais ativos de seu carregamento. Se neste momento o site responder por mais de 50 ms, então é criado um efeito de “congelamento” e parece ao visitante que seu recurso está “desacelerando”.
O que esperar do Google PageSpeed Insights atualizado este ano
A versão antiga do PSI muitas vezes valorizava muito os recursos muito lentos, mas, pelo contrário, menosprezava imerecidamente os rápidos. O serviço atualizado coloca coisas realmente importantes em um pedestal - o tempo de resposta do servidor e a quantidade de conteúdo “pesado” na página. Todas as “joias e bugigangas” volumosas apenas estragarão o placar e perderão gradualmente sua popularidade.
A era dos sites verdadeiramente reativos e de bons especialistas que sabem como criá-los está chegando.
Acesse e acelere seus sites!
Ouça nosso podcast sobre o Google PageSpeed atualizado! 🎧
Olá, queridos leitores do blog. Hoje quero falar com vocês sobre um tema tão importante como a velocidade de carregamento do site. Você provavelmente já ouviu falar que, junto com muitos outros fatores que influenciam a promoção de um projeto Web, os motores de busca também começaram recentemente a levar isso em consideração. E os freios do site irritam muito os visitantes, principalmente os que estão acostumados.
Mesmo assim, para muitos webmasters, a velocidade de carregamento não é um tópico que você deva começar a quebrar a cabeça imediatamente, geralmente é adiado para mais tarde, e problemas urgentes relacionados ao preenchimento do recurso com materiais exclusivos e melhorá-lo vêm à tona. otimização interna, mas todo o conjunto de fatores que influenciam. Como se costuma dizer, uma corrente é tão forte quanto o seu elo mais fraco...
Serviços online para medir a velocidade de carregamento do site
De qualquer forma, foi assim que me senti até recentemente ao tentar acelerar meus recursos. Mas ocorreu-me que é melhor não esperar por tendências desagradáveis (nomeadamente, uma diminuição do tráfego de , porque é mais crítico para a velocidade de carregamento), mas corrigir a lacuna óbvia agora mesmo.
Você só precisa perceber isso velocidade, a partir do qual seu site, blog ou fórum é carregado, é um indicador muito importante. Se o seu projeto não estiver indo bem com este indicador, isso pode levar a consequências bastante desagradáveis. E o mais importante deles é que os visitantes podem se recusar a trabalhar com o seu recurso, porque... Demora muito para carregar as páginas. Além disso, os motores de busca, especialmente o Google, levam isso em consideração ao avaliar a utilidade geral de um determinado recurso.
Para entender a rapidez com que as páginas do seu recurso carregam, você pode usar, por exemplo, os recursos deste, descritos detalhadamente no artigo no link fornecido. Ou você pode usar os serviços projetados para isso. Abaixo darei alguns exemplos disso.
- Pingdom— aqui basta indicar o endereço da página cuja velocidade de carregamento você deseja medir (não precisa ser a página principal, pois a velocidade de carregamento das páginas internas não é menor, e muitas vezes ainda mais importante).
Como resultado, será apresentado um diagrama do tempo de download de objetos individuais da página web, bem como seu URL e peso. Quanto menos objetos serão carregados e mais leve cada um deles pesará, melhor. Por exemplo, para este propósito eu:
- combinou algumas fotos do tema do site em
- e também, se possível, reduzido em
- fora isso faz sentido
Na verdade, você pode acompanhar alguns problemas e o histórico de medição da velocidade do seu site nas abas adjacentes do menu superior do Pingdom.
Em uma janela pop-up, você será solicitado a copiar o link permanente do teste concluído e também enviá-lo por e-mail ou Twitter. Você também pode assinar a disponibilidade na parte inferior da janela. Se o seu recurso cair (ficar indisponível para visitantes), você receberá uma mensagem por e-mail ou SMS para o seu celular. Mas este serviço é pago, embora exista a possibilidade de teste gratuito.
Para o seu site, assim como para visualizar o Traceroute, você precisará selecionar a guia “Ping e Traceroute” no topo da página. Insira o URL sem http no formulário fornecido, marque a caixa de seleção “Traceroute” ou “Ping” neste formulário e clique em “Testar agora”.
- Teste de página da Web— como de costume, insira a URL da página que você está verificando (não necessariamente a principal). O serviço leva algum tempo para calcular a velocidade de carregamento de todos os elementos do site, após o qual produz um diagrama bastante visual (mais precisamente, até dois - para a primeira passagem e para a segunda, quando alguns dos elementos do site são carregados do navegador cache):
No primeiro diagrama, preste atenção na posição da linha vertical roxa - esta será tempo de conclusão da renderização do site. A segunda linha vertical (azul) significará tempo de carregamento completo. É bom que a primeira linha esteja entre 1 e 1,5 segundos do carregamento do site e a segunda linha antes de 4 segundos. Então os parágrafos seguintes podem ser lidos “para referência”. Se o site demorar mais de 4 segundos para carregar, você precisará se preocupar em corrigir essa situação.
- Informações do Google PageSpeed
é uma ferramenta para desenvolvedores do próprio Google. Dá uma avaliação da velocidade de carregamento do seu site (ou melhor, da otimização dessa velocidade) em uma escala de 100. 100 é um ideal inatingível, mas conseguir 80-90 é bem possível, especialmente porque o serviço dá recomendações muito detalhadas para corrigir as deficiências identificadas.
Como você pode ver na captura de tela acima, o Google PageSpeed Insights fornece uma avaliação abrangente - para um navegador de computador e para um navegador móvel. Além disso, abaixo você encontrará uma avaliação da facilidade de uso do seu recurso em diversos gadgets. Se você ainda não se preocupou, a pontuação lá será muito baixa (e na captura de tela do seu site à direita da janela do smartphone, tudo ficará bem visível).
Mas o mais importante é que o Google PageSpeed Insights dá recomendações sobre como aumentar a pontuação do seu site, ou seja como acelerar isso. Você precisa começar, naturalmente, do início, porque essas correções serão as que mais contribuirão para a aceleração.
Por exemplo, tive um problema ao configurar a compactação gzip e definir o tempo de cache para arquivos estáticos (imagens, arquivos css e scripts) nos navegadores dos usuários, porque o Apache funciona em conjunto com o nginx, mas não sei como trabalhar com isto. Tive que escrever para o suporte técnico da Infobox pedindo para configurar tudo - eles fizeram isso e nem pegaram o dinheiro (graças a eles!). A propósito, inicialmente eles definiram o tempo de armazenamento do cache para 1 hora, mas o Google PageSpeed Insights ainda reclamou:
Tive que me aprofundar nas instruções deste serviço online e ler lá que o mínimo necessário é 1 dia de armazenamento de estática no cache. Pedi ao suporte técnico da hospedagem que fornecesse 1 semana de reserva, o que eles fizeram. Agora a avaliação aumentou um pouco e o Google não tem grandes reclamações sobre meu recurso em termos de velocidade de carregamento, o que é bom.
- Testar meu site- um novo serviço, novamente do Google. Basicamente, ele se concentra em avaliar a versão mobile do seu site, inclusive pelo critério de sua velocidade de carregamento:
Simples e de bom gosto, como dizem. Você pode assinar o boletim informativo para alterações.
- GTmetrix- novamente, “sem mais delongas” insira a URL da página desejada e aguarde um pouco até que a análise seja concluída. Como resultado, você receberá um relatório gerado com base nos dados de dois plug-ins de navegador - Page Speed (leia sobre como trabalhar com ele abaixo) e YSlow. Na verdade, cabe a você decidir quais dados confiar e quais recomendações seguir.
Já escrevi sobre isso com alguns detalhes e por isso não vou me repetir, para não sobrecarregar um artigo já pesado (se você ler até o fim, pode se considerar um herói).
- Administrador de ping- um recurso online semelhante para medir o tempo de resposta do servidor de diferentes partes do nosso vasto planeta.
- Rastreador de Host- quase a mesma coisa, apenas países diferentes.
- ByteCheck- permite medir o valor TTFB (Time To First Byte) do seu site, que costuma ser observado durante a otimização. Este é o momento em que o navegador recebe o primeiro byte de dados do servidor. Quanto maior o valor do TTFB, mais lento o servidor processa os recursos, o que é ruim. Leia dicas para otimizar o carregamento do site.
- Impacto de carga- não se trata apenas de velocidade, mas também é um serviço importante. Ele permite testar a capacidade de carregamento do seu site e se a velocidade de carregamento da página diminui. Uma coisa muito útil.
- Velocidade da página da web- um serviço online com um design do início dos anos noventa, mas bastante informativo se se adaptar à falta de usabilidade. Abaixo estão recomendações gerais para corrigir a situação.
É realmente importante monitorar a velocidade de carregamento da página?
Mas voltemos da medição da velocidade à procura de oportunidades para aumentá-la. , anteriormente existia uma aba experimental “Eficácia do Site”, onde era feita uma avaliação da velocidade de carregamento do site.
Em geral, não há nada de criminoso na velocidade de carregamento indicada ali, mas o fato de meu blog carregar mais lentamente do que 84% de todos os recursos da web na Internet já é um sinal que deveria ter sido respondido. Mas como o Google pensa que meu blog é estranho em termos de velocidade, vale a pena levar esse problema a sério e abordar seriamente a questão de como aumentá-lo.
Na verdade, não houve necessidade de inventar nada de especial, porque o próprio Google sugere o que há de mais solução ideal. Mais precisamente, ele sugere utilizar uma ferramenta que, por sua vez, vai te ajudar a entender o que exatamente precisa ser feito para agilizar um pouco (ou muito) o seu site. Estou falando de um serviço online Velocidade da página(anteriormente também havia extensões com o mesmo nome para Navegador FireFox e Chrome, que usei principalmente).
Deixe-me fazer uma reserva desde já que esta ferramenta opera em coisas bastante complexas e não totalmente compreensíveis para webmasters comuns, que estão principalmente relacionadas a sutilezas e nuances Trabalho na web servidor. Se você nunca administrou um servidor, será difícil.
Existe uma saída - estresse seu anfitrião sobre o tema de realizar as ações que Paige Speed prescreve. Se ele concorda ou não, é outra questão. Não ousei, porque é estranho dar acesso ao servidor a qualquer pessoa (é assim que sou desconfiado).
Sobre página inicial O PageSpeed ainda sugere instalar o módulo no seu servidor caso ele esteja rodando Apache ou Nginx (que é o meu caso):
Mas ainda não entendo como isso é feito, porque não entendo nada de administração de servidores e nunca trabalhei com sistemas do tipo Unix. Isso é muito mais difícil do que instalar um programa ou fazer upload de um plugin no WordPress. Outro nível de imersão. Hoster também não se atreveu a incomodá-lo com isso. Em geral, não testei este módulo - é possível que você já tenha experimentado e tenha algo a dizer...
Em geral, pela primeira vez usei o Page Speed como extensão do navegador (agora, pelo que entendi, ele não funciona). Anteriormente, ele era integrado às ferramentas de desenvolvedor do Firefox e do Chrome. É verdade que no início (há vários anos) olhei apenas brevemente para os conselhos que ele estava me dando e, sem entender quase nada, decidi que isso não era para mim, depois disso, com o coração leve, excluí o PageSpeed plugin como um elemento desnecessário e estranho à minha mente.
O fato é que mesmo entendendo o que esse plugin jura, eu realmente não sabia o que fazer, para eliminar tudo isso e de alguma forma agilizar o seu blog. Em geral, descobri imediatamente muitas coisas mais importantes para fazer, em comparação com as quais o rato se preocupa Configurações da web servidores (especialmente porque eu não os entendo particularmente) pareciam pequenos e insignificantes.
É verdade que certa vez também arquivei a solução para o problema de segurança e, como resultado, paguei por ela com a perda de todo aquele dinheiro. Tendo em conta o que aconteceu, outro dia resolvi insistir e tentar avançar com o problema de aumentar a velocidade de carregamento do site, por mais incompreensível e difícil que esse assunto fosse para mim.
Resumindo, reinstalei o Page Speed no Mazila (agora não preciso mais fazer isso), olhei exatamente do que ele mais reclamava e ainda consegui melhorar algumas coisas e, espero, em aumente pelo menos ligeiramente a velocidade.
P.S. Agora o Page Speed só pode ser usado online e não precisa mais ser instalado no navegador (em qualquer caso, este plugin é incompatível com novas versões do Chrome), embora isso não mude a essência.
Então, antes você tinha que instalar um plugin no seu navegador, mas agora você só precisa ir aqui, insira o URL da página que deseja analisar (em tipos diferentes as páginas podem apresentar vários problemas de velocidade de carregamento, portanto, nesta ferramenta faz sentido verificar todas as opções) e clicar no botão azul “Analisar”.
Após aguardar o resultado do processo de verificação, você verá uma janela semelhante à que já mostrei na imagem acima no texto (no parágrafo 3 das descrições serviço on-line ov para verificar a velocidade de carregamento dos sites). Que. como resultado, verá toda uma lista de reclamações que este serviço online tem sobre o seu recurso, nomeadamente sobre a sua velocidade de carregamento. Ao mesmo tempo, ele lhe dará algumas instruções sobre como otimizar o funcionamento do servidor Web em conjunto com o mecanismo que você está utilizando.
Além disso, no topo da janela do Page Speed haverá comentários e recomendações que você gostaria de visualizar e alterar em primeiro lugar(“conserte com certeza”), porque isso terá o maior efeito em termos de aumento da velocidade de carregamento e não exigirá muito esforço de sua parte. Vou dar um exemplo de análise de um dos meus projetos menores, que realmente não tenho tempo para fazer:
Aqueles. recomendações e problemas detectados são marcados com um retângulo vermelho com ponto de exclamação e localizados no topo da lista são os mais importantes e é aconselhável iniciar a otimização com eles (baratos e alegres, como dizem), conseguindo assim o maior efeito.
Os problemas marcados em laranja exigirão mais esforço de sua parte para serem corrigidos, mas podem não resultar em um aumento muito significativo na velocidade. Infelizmente, ah, por enquanto você pode colocá-los em segundo plano e prosseguir com as tarefas prioritárias que ajudarão a acelerar significativamente o projeto.
Minha foto inicial há alguns anos (mesmo usando o plugin - agora a mesma coisa pode ser vista em http://gtmetrix.com/, pois usa a API PageSpeed) para https://site era assim:
Decidi então começar do primeiro ponto “Aproveitar o cache do navegador” (agora se chama "Use o cache do seu navegador"), pois pela lógica do Page Speed, essas recomendações devem levar à maior aceleração do meu blog.
Se você clicar no spoiler ao lado desta inscrição, aparecerá uma lista de vários arquivos que não atendem aos requisitos ideais cache de objetos estáticos(scripts, arquivos CSS, arquivos de imagem usados em páginas da web f) nos navegadores dos usuários (ou seja, leitores):
Aqueles. Para aumentar a velocidade de carregamento, o PageSpeed Insights nos aconselha a configurar de maneira ideal o cache de vários elementos das páginas da web nos navegadores dos usuários, para que, ao visualizar outros, esses elementos estáticos não sejam recarregados do servidor. Em teoria, tudo isso parece bastante confuso, porque não tenho ideia dos mecanismos de cache usados pelos navegadores (leia sobre isso e como limpá-lo).
Além disso, otimizaremos o cache de objetos estáticos utilizando os mecanismos do próprio servidor de hospedagem. Muito confuso, mas já vou sugerir para você soluções prontas, encontrados na Internet russa, e você os testará em ação e decidirá qual deles funcionará melhor em sua hospedagem.
Otimizando o cache do navegador e verificando seu funcionamento
É verdade que isso não funcionou na minha hospedagem atual, porque agora tenho uma combinação de Apache e nginx (preciso configurar o último, o que o hoster fez por mim de uma forma que eu desconheço). Mas se você tiver o Apache puro, o método sugerido abaixo pode funcionar.
Em geral, tentaremos influenciar o servidor onde seu projeto está hospedado de forma que ele emita comandos aos navegadores visando otimizar o cache de elementos estáticos. Faremos isso através de um método bastante conhecido ferramenta controle remoto servidor - arquivo .htaccess. Você sabe da existência de tal coisa?
Geralmente fica na pasta raiz. Naturalmente, tudo descrito abaixo só funcionará em servidores rodando Apache, mas via de regra, eles são a maioria. Depois de conectar-se ao seu recurso via FTP (), abra a pasta raiz (geralmente PUBLIC_HTML ou HTDOCS) e verifique o arquivo .htaccess nela.
De agora em diante, você faz tudo por sua própria conta e risco. Portanto, certifique-se de baixar uma cópia deste arquivo para o seu computador para que, se algo acontecer, você possa reverter rapidamente.
Se .htaccess não está visível, então tente no programa FileZilla selecionar os itens “Servidor” - “Forçar exibição” no menu superior arquivos ocultos" Se mesmo depois disso ele não aparecer na raiz, crie um arquivo de texto vazio em seu computador em qualquer editor conveniente para você (eu uso o NotePad Plus Plus), dê um nome a ele e copie-o para a raiz.
Depois disso, renomeie este arquivo para .htaccess no FileZilla. Agora você precisará abri-lo para edição e adicionar o código abaixo. Mas primeiro, deixe-me explicar um pouco.
As maneiras mais populares de habilitar esta opção em um servidor web executando Apache são usando os módulos mod_headers ou mod_expires. O código abaixo irá ajudá-lo a habilitar o cache estático no navegador se o serviço online tiver pelo menos um desses módulos Apache instalados em seu servidor.
Primeiro eu vou te dar código para o módulo mod_headers. Observe que ele usa uma verificação para ver se o seu hoster possui este módulo. Caso não seja encontrado, o código não será executado e não causará erros. No entanto, mais uma vez recomendo fortemente que você primeiro copie o arquivo .htaccess original (antes de adicionar o código abaixo) para o seu computador para evitar incidentes.
Você pode excluir comentários (suas linhas começam com um sinal de cerquilha), mas eles não afetarão de forma alguma a operação do código.
Será possível adicionar mais bloco de código por módulo para mod_expires, que verifica novamente sua presença em seu servidor, o que garante que este trecho de código seja seguro para uso:
Os comentários podem ser excluídos novamente mais tarde.
Se não funcionar, mas você espera um milagre, aqui estão mais algumas variações do mesmo código, mas experimente uma de cada vez, não todas de uma vez:
ExpiresActive On ExpiresByType application/javascript "acesso mais 1 ano" ExpiresByType text/javascript "acesso mais 1 ano" ExpiresByType text/css "acesso mais 1 ano" ExpiresByType image/gif "acesso mais 1 ano" ExpiresByType image/jpeg "acesso mais 1 ano" ExpiresByType image/png "acesso mais 1 ano" Conjunto de cabeçalhos Controle de cache: privado Conjunto de cabeçalhos Controle de cache: público BrowserMatch "MSIE" força sem variação BrowserMatch "Mozilla/4.(2)" força sem variação - Tamanho do FileETag MTime
ExpiresActive on ExpiresDefault "acesso mais 1 mês"
Agora, depois de inserir o código em .htaccess que permite aumentar a velocidade otimizando o cache no navegador do lado do visitante, e salvar as alterações feitas, verifique novamente sua página de recursos no PageSpeed Insights e certifique-se de que o problema desapareça:
Como você pode ver, no meu caso, “Use o cache do navegador” não é mais uma falha crítica que retarda o carregamento, e o ícone próximo a esta nota mudou para laranja, mas não para verde. Infelizmente, não consigo influenciar serviços de terceiros de onde meu site carrega conteúdo estático (como Yandex, Google, Feedburner e Aptulaik).
Q.E.D. Assim, resolvemos um dos problemas mais significativos e significativos encontrados no Page Speed.
Como habilitar a compactação de objetos estáticos no servidor
Além disso, um problema muito comum de reclamação do serviço GTmetrix é a falta de compactação dos arquivos no servidor antes de transferi-los para os navegadores dos usuários.
É usado neste caso, sobre o qual já escrevi. Se você analisar não diretamente através do PageSpeed Insights, mas através do GTmetrix, então na área PageSpeed “Ativar compactação” é chamado de “Ativar compactação gzip” e no YSlow é chamado de “Compactar componentes com gzip”.
Para habilitar esta mesma compactação Gzip nas hospedagens onde é utilizado o servidor Apache, bastará adicionar o código correspondente ao arquivo .htaccess (é um arquivo de controle do servidor remoto). O Apache possui dois módulos para compactação e um deles será instalado pelo seu hoster (embora isso não seja fato).
O mais comum - vamos começar com ele. Adicionamos novamente uma verificação da presença deste módulo ao código para não receber um erro 500 para todo o site.
Um pouco menos popular, o código para ativar a compactação Gzip para os tipos de arquivo necessários será semelhante a este:
Na verdade, tente verificar a página no PageSpeed Insights após instalar o código. Se o problema desaparecer, considere-se com sorte. Devido à presença do Apache com nginx, tudo isso não me ajudou (o hoster disse que o nginx é o responsável pela estática, nesta situação é necessário configurá-lo - não sei como ele fez isso).
Boa sorte para você! Nos vemos em breve nas páginas do blog
Você pode estar interessado
Medir e aumentar a velocidade do site no GTmetrix, bem como configurar o carregamento da biblioteca jQuery do Google CDN 
Compressão Gzip para acelerar o carregamento do site - como habilitá-la para Js, Html e Css usando o arquivo .htaccess 
Como maximizar a velocidade de carregamento do site e otimizar a carga do servidor 
Aceleração de site – o que faz, como medir e como acelerar você mesmo o site 
Criação Sprites CSS no gerador online Sprites Me para reduzir o número de solicitações ao servidor 
Otimização e compactação de CSS no Page Speed - como desabilitar arquivos externos estilos e combiná-los em um para acelerar o carregamento 
Como conseguir um site rápido - otimização (compactação) de imagens e scripts, além de reduzir o número de solicitações HTTP
