sites

Analisamos 5,2 milhões de páginas para computadores e dispositivos móveis. Aprendemos o seguinte sobre a velocidade da página:

Google+ Pinterest LinkedIn Tumblr
  Analisamos 5,2 milhões de páginas para computadores e dispositivos móveis. O que aprendemos sobre a velocidade da página

Analisamos 5 milhões de páginas para computadores e dispositivos móveis para descobrir quais fatores afetam a velocidade da página.

Primeiro, criamos benchmarks globais para métricas de tempo de carregamento TTFB, Visual Complete e Fully Loaded.

Em seguida, analisamos como a compactação de imagem, CDNs e o carregamento do site afetam a hospedagem.

Nossos dados revelaram algumas idéias muito interessantes (e surpreendentes).

Aqui está um resumo de Nossos resultados mais importantes:

1. Para nossa análise de 5,2 milhões de páginas, a velocidade média da área de trabalho (TTFB) é de 1.286 segundos na área de trabalho e de 2.594 segundos no telefone . O tempo médio para carregar totalmente uma página da web é de 10,3 segundos na área de trabalho e 27,3 segundos no telefone.

. 2 Carregar uma página da Web média em dispositivos móveis leva 87,84% mais tempo do que em computadores.

. 3 O Squarespace e o Weebly têm a melhor velocidade geral para páginas móveis ao comparar os CMSs mais importantes entre si . O Wix e o WordPress ficaram quase no final.

. 4 Na área de trabalho, as CDNs têm o maior impacto no TTFB. No entanto, em dispositivos móveis, o número de solicitações de HTML parece afetar mais o TTFB.

. 5 O tamanho total da página tem um impacto significativo na velocidade de carregamento de computadores e dispositivos móveis. O carregamento visual de páginas maiores leva 318% mais tempo do que em páginas menores . Também descobrimos que a compactação gzip acelera o carregamento de imagens nos computadores e nos dispositivos móveis.

. 6 O peso total da página é o critério mais importante para a velocidade da página totalmente carregada. Páginas claras carregam 486% mais rápido que páginas grandes.

. 7 Wink e Gatsby são os frameworks Javascript mais rápidos . Meteoro e Tweenmax são os mais lentos. A estrutura mais rápida é 213% mais rápida que a mais lenta .

. 8 As páginas com compactação de arquivos muito baixa ou muito alta têm uma velocidade de página acima da média (medida pela Primeira pintura contextual).

. 9 Scripts de terceiros tornam mais lento o carregamento da página. Cada script de terceiros adicionado a uma página aumenta o tempo de carregamento em 34,1 milissegundos.

10. Descobrimos que o uso de imagens responsivas oferece a melhor experiência geral de carregamento de imagens. O uso do WebP reduziu significativamente o tempo de carregamento da imagem.

. 11 Os hosts GitHub e Weebly têm o desempenho TTFB geral mais rápido. O Siteground e o Wix são os provedores de hospedagem mais lentos que analisamos .

12 China, Japão e Alemanha têm os tempos de carregamento mais rápidos do TTFB. Austrália, Índia e Brasil têm os tempos mais baixos de TTFB.

. 13 O uso da CDN correlacionou-se com o desempenho inferior da velocidade da página . Provavelmente, isso se deve ao fato de certas CDNs terem um desempenho significativamente melhor que outras.

Comparação de métricas críticas de tempo para carregar velocidades da página

Como você deve saber, nossa primeira tarefa foi fazer a comparação de métricas importantes da velocidade da página.

"Velocidade da página" na verdade consiste em vários níveis diferentes.

  Níveis de carregamento de páginas da Web

Alguns desses níveis ocorrem no nível do servidor. Outras ações ocorrem no navegador do usuário.

Para entender a velocidade de carregamento das páginas, tivemos que estudar cada fase mais de perto.

Em particular, calculamos a velocidade média para o seguinte:

  • TTFB: Tempo para o primeiro byte da resposta do documento HTML
  • StartRender: Início da renderização

    Início da renderização

    Usuário visualmente concluído: Usuário pode ver todo o conteúdo da página

  • Índice de velocidade: Com que rapidez o usuário vê carregando uma página
  • onLoad: Quando todos os recursos da página (CSS, imagens etc.) foram baixados
  • Totalmente carregado: uma página é 100% carregada no navegador do usuário

A velocidade média do TTFB é de 1.286 segundos na área de trabalho e 2.594 segundos no telefone.

  Velocidade média TTFB na área de trabalho e no celular

A velocidade média inicial de renderização é de 2,834 segundos na área de trabalho e 6,709 segundos no telefone.

  Velocidade média de renderização de inicialização no desktop e no celular do telefone móvel

A velocidade média do Visual Complete na área de trabalho é de 8.225 segundos d 21.608 segundos em dispositivos móveis.

  Velocidade visual geral média em computadores e dispositivos móveis.

A velocidade média do índice de velocidade é de 4.782 segundos na área de trabalho e 11.455 segundos nos dispositivos móveis.

  Velocidade média do índice de velocidade em computadores e dispositivos móveis.

A velocidade média do OnLoad é de 8,875 segundos na área de trabalho e 23,608 segundos no telefone.

  Velocidade média de carga na área de trabalho e no celular

A velocidade média de carga total é de 10,3 segundos na área de trabalho e 27,3 segundos no telefone móvel.

  Velocidade média de carga total na área de trabalho e no telefone

Chave para prosseguir: A velocidade média de carregamento da página para uma página da Web é de 10,3 segundos na área de trabalho e 27,3 segundos no telefone. O carregamento de páginas para celular leva em média 87,84% mais tempo do que nos computadores.

Weebly e Squarespace têm o melhor desempenho geral de velocidade. O WordPress tem um dos piores

Para responder a essa pergunta, determinamos o CMS que será usado para todos os sites em nosso conjunto de dados. Em seguida, comparamos o desempenho do TTFB para cada CMS descoberto.

De acordo com nossos dados, Weebly e Squarespace estão no topo do desempenho da área de trabalho.

  Classificações de desempenho da velocidade da página do CMS (computador)

E velocidade da página para celular. O Squarespace é o número 1 … com o Adobe Experience Manager e o Weebly completando os três primeiros.

  Rankings de desempenho de velocidade da página do CMS (celular)

O interessante é que o WordPress é apenas o 14º quando se trata do melhor CMS de velocidade móvel que analisamos.

  O WordPress ocupa o 14º lugar entre o CMS em velocidade de página para celular.

Outro CMS popular, o Wix, também tem uma classificação ruim para a velocidade de carregamento de desktops e dispositivos móveis.

  O Wix é low-end para desktops e dispositivos móveis. Velocidade da página

Embora o WordPress cobra aproximadamente 30% de todos os sites, claramente não é otimizado para a velocidade de carregamento da página. Isso não significa que o WordPress seja um CMS ruim. Possui outros benefícios (como facilidade de uso, uma extensa biblioteca de plugins e SEO) que facilitam o acesso do CMS a muitos proprietários de sites.

No entanto, se você observar atentamente a velocidade do site, parece que outros CMS estão fazendo uma vantagem distinta sobre o WordPress.

Resumo: O Squarespace e o Weebly oferecem a melhor velocidade para sites móveis entre os CMS mais importantes. WordPress e Wix estão na parte inferior.

O uso de uma CDN pode ajudar o Desktop TTFB. Minimizar solicitações de HTML é essencial para o TTFB móvel

Analisamos os efeitos de várias propriedades da página no TTFB (tempo até o primeiro byte).

Aqui está o que vimos:

  Fatores que afetam o TTFB de desktop e dispositivos móveis

Como você pode ver, o uso de uma CDN parece melhorar o TTFB para dispositivos de desktop e móveis. No entanto, as CDNs parecem ser mais úteis na área de trabalho do que no telefone. Nas páginas carregadas de um dispositivo móvel, o número de solicitações de HTML teve mais impacto no TTFB.

Embora exista um relacionamento entre diferentes propriedades da página e tempos de TTFB, os fatores no nível da página não resultam em TTFB. O TTFB é determinado principalmente pelo tempo de resposta do servidor, que discutiremos mais adiante.

Aviso importante: Ao usar uma CDN e minimizar os requisitos de HTML, o TTFB pode ser acelerado tanto na área de trabalho quanto no dispositivo móvel.

O carregamento de páginas grandes leva 381% mais tempo do que o carregamento de páginas menores

"Visualmente concluído" é quando todo o conteúdo visual de uma página da Web é carregado no navegador do usuário.

  Visualmente concluído

Pode haver scripts e outros ativos sendo carregados fora da tela. Da perspectiva do usuário, no entanto, a página é carregada.

Visualmente completo é uma métrica importante para a velocidade da página, pois afeta a experiência subjetiva de um usuário em relação à velocidade ou velocidade de carregamento de uma página.

Desde que um usuário possa ver Quando você usa a página, ela está totalmente carregada.

Observamos que o tamanho da página (bytesTotal) tem um impacto significativo nos tempos de carregamento de PCs móveis e de mesa.

  Fatores que afetam a integridade visual de desktops e dispositivos móveis

No entanto, o tamanho da página é mais importante em dispositivos móveis do que em computadores.

Nos computadores de mesa, o uso de uma CDN se correlacionou mais fortemente com a velocidade de carregamento mais rápida da integridade visual. Com o formato da página o mais próximo possível de um segundo.

Em dispositivos móveis, uma CDN era apenas o quinto fator mais importante.

Então, se você estiver preocupado em melhorar a velocidade de carregamento do dispositivo móvel, eu consideraria fazer o máximo possível.Você pode reduzir o tamanho das suas páginas. Isso pode significar excluir scripts de terceiros. Ou comprima imagens. As etapas exatas dependem do seu site. No entanto, é claro que a velocidade do Visually Complete é sobre o tamanho do HTML.

Resumo: As CDNs podem melhorar drasticamente a velocidade das páginas Visualmente Completas em computadores e dispositivos móveis. No entanto, as CDNs têm um impacto muito maior no carregamento da área de trabalho. Para dispositivos móveis, o tamanho total da página é o fator mais importante no carregamento de páginas para páginas visualmente completas.

O peso total da página está intimamente vinculado à velocidade da página "totalmente carregada".

Finalmente, analisamos os fatores que afetam a velocidade da página "Carregado totalmente".

Como o nome indica, o carregamento completo é carregado quando 100% dos ativos em uma página são carregados e renderizados.

Quando se trata da velocidade de páginas totalmente carregadas, o tamanho geral de uma página é de longe o fator mais importante para computadores e dispositivos móveis.

  Fatores que afetam a carga total em computadores e dispositivos móveis.

O número de solicitações também determina a rapidez com que uma página é totalmente carregada.

O interessante desses dados é que há muita sobreposição entre computadores e dispositivos móveis. Ao contrário de muitas das outras métricas que analisamos, o Desktop e o celular com carregamento total parecem ser afetados pelas mesmas variáveis ​​(tamanho da página e requisitos gerais de HTML).

A importância do tamanho da página e dos requisitos de HTML, no entanto, não deve ser considerada.Não é uma grande surpresa.

A compactação de imagens, caches e outras etapas geralmente reduz o tempo de carregamento da página. Mas eles só podem ir tão longe. Por fim, um navegador deve carregar todos os ativos em uma página para que uma página seja "totalmente carregada". E quanto mais recursos você carrega, mais tempo leva para carregar a página.

Essa é provavelmente a razão pela qual as CDNs parecem não ter muito impacto na velocidade da página totalmente carregada (3ª geral no ambiente de trabalho), 10ª no telefone). CDNs podem melhorar o tempo de carregamento das imagens. No entanto, eles não podem fazer muito com scripts de terceiros e outros recursos que podem atrasar as coisas.

Resumo: O tamanho geral afeta a velocidade das páginas totalmente carregadas nos dois computadores, mais do que qualquer outra variável e móvel. Páginas grandes (<.83 MB) take 486% longer to fully load compared to smaller pages (> 3,49 MB).

Wink e Gatsby são as estruturas JavaScript mais rápidas para sites de tamanho médio.

Quando se trata de definir prioridades para carregamento em uma página (e quando), as estruturas JavaScript fazem muito

. Por esse motivo, 74% de todos os sites usam essas estruturas para criar páginas eficientes, seguro e padronizado.

Criamos primeiro benchmarks para a frequência de uso de cada estrutura na Web.

  Usando a estrutura JavaScript

O React é de longe a estrutura JS mais usada (25,3% dos sites a utilizam). TweenMax (10,3%) e RequireJS (9,5%) também são bastante populares.

Em seguida, desejamos descobrir quais estruturas de JavaScript apresentam melhor desempenho em páginas pequenas (<1,264,374 Bytes) medium (1,264,374 and 4,019,332 Bytes) and large (> 4.019.332 bytes).

Para sites pequenos, o RightJS ficou no topo.

<img class = "" src = "https://backlinko.com/wp-content/uploads/2019/10/impact-of-javascript-framework-on-fcp-page-weight- less-than- 1264374-bytes.png "title =" Impacto da estrutura JavaScript no FCP, peso da página <1.264.374 bytes "alt =" Impacto da estrutura JavaScript no FCP, peso da página < 1,264,374 bytes" style="max-width: 700px !important" />

Wink e Gatsby tiveram melhor desempenho nas páginas do meio.

 Impacto da estrutura JavaScript no FCP, peso da página entre 1.264.374 e 4.019.332 bytes.

E para sites grandes, Gatsby e Riot tiveram os tempos de FCP mais rápidos.

 Riot é bom para páginas grandes

Para páginas pequenas, no entanto, a Riot teve uma pontuação muito pior (15ª no geral).

 O motim não é bom para páginas pequenas

Resumo: Não existe uma estrutura "Melhor" do JavaScript para todas as situações. Para sites com muitas páginas pequenas, o RightJS é a melhor escolha. Para sites com sites principalmente grandes, Gatsby parece ser ideal.

As páginas com baixa ou alta compressão têm os tempos de carregamento mais rápidos.

A compactação de arquivos de paginação em um servidor é uma faca de dois gumes. Por um lado, a compactação de arquivos reduz significativamente o peso da página.

A compactação de arquivos antes de enviá-los do servidor, no entanto, requer trabalho extra no navegador porque o cliente deve descompactar os arquivos antes da renderização.

Como parte de Para responder a essa pergunta, decidimos responder à pergunta: A compactação de arquivos realmente melhora a velocidade da página?

Para responder a esta pergunta, categorizamos o FCP em três categorias (Rápido, Médio, Lento):

Rápido: 0-1000 ms
Média: 1000ms-2500ms
Lento: <2500 ms

Em seguida, comparamos a velocidade do FCP e os níveis de compactação para páginas pequenas, médias e grandes.

Em páginas menores, níveis mais baixos de compactação foram associados a tempos de carregamento mais rápidos do FCP. No entanto, os tempos de carregamento aumentam novamente em níveis de compressão muito altos (90-100%).

<img class = "" src = "https://backlinko.com/wp-content/uploads/2019/10/impact -of-compress-on-fcp-page-weight-less-than-880337" bytes.png "title =" Efeito da compactação no FCP, peso da página <880.337 bytes "alt =" Efeito da compactação no FCP, peso da página [19659120] As páginas médias tiveram uma distribuição semelhante:

 Efeito da compactação no FCP, Peso da página 880.337 - 3.625.927 bytes

Páginas grandes tinham uma distribuição de curva de sino reversa ainda mais extrema:

 Uma diminuição no desempenho do FCP para páginas que contenham um número moderado de arquivos

Em particular, páginas que compactam 60% a 80% dos arquivos têm o pior desempenho .

Quando se trata de melhorar a velocidade da página, isso é muito baixo ou muito alto.Os níveis de compressão geralmente funcionam melhor. Baixos níveis de compactação reduzem a carga de trabalho do navegador. E altos níveis de compactação superam o esforço do lado do cliente com menos carga útil.

Nota importante: As páginas de compactação muito baixa ou muito alta apresentam desempenho melhor que as páginas compactadas moderadamente. [19659130] Os scripts de terceiros têm um impacto negativo nos tempos de carregamento

Não é de surpreender que scripts de terceiros (como Google Analytics, botões sociais e hosts de vídeo) resultem em tempos de FCP mais lentos.

 Scripts de terceiros afetam negativamente o tempo de carregamento da página

De fato, descobrimos que qualquer script de terceiros que estenda o tempo de carregamento da página em 34,1 milissegundos tem um impacto maciço na velocidade da página.

Obviamente, o efeito depende do script usado. Certos scripts de terceiros (como o Hotjar) carregam relativamente rapidamente. Outros, incluindo o Salesforce, são notoriamente lentos.

Em resumo, scripts de terceiros resultam em tempos de carregamento mais longos. E quanto mais scripts tiver uma página, mais lenta ela tende a carregar.

Resumo: Cada script de terceiros usado em uma página aumenta o tempo de carregamento da página em 34,1 milissegundos.

Imagens responsivas parecem melhorar o tempo de carregamento da página mais do que o carregamento lento e o uso da WebP

As imagens desempenham um papel extremamente importante no desempenho do site por dois motivos principais:

Primeiro, as fotos levam uma quantidade considerável de Tamanho total de uma página.

Segundo, a atenção do usuário geralmente se concentra nas imagens que aparecem em uma página. Carregar essas imagens lentamente pode afetar negativamente o UX.

Como as imagens podem afetar ou interferir na velocidade de carregamento de um site, decidimos comparar o desempenho de quatro abordagens diferentes de otimização de imagem:

  • WebP: Desenvolvido pelo Google, WebP é um formato de imagem que se compara a outros formatos de arquivo podem ser menores, mas ainda assim resultam em uma qualidade de imagem semelhante.
  • Imagens otimizadas: "Imagens otimizadas" são fornecidas em diferentes versões de imagens, dependendo do dispositivo, local e mais usuários. Incluímos o uso da rede de entrega de conteúdo (CDN), compactação de imagem e outros serviços da Web para aprimoramento de imagem nessa categoria.
  • Redefinir imagens fora da tela Quando as imagens são carregadas abaixo da dobra quando um usuário rola para o ponto da página. Também chamado de "carregamento lento".
  • Imagens responsivas: Quando as imagens se ajustam dinamicamente ao tamanho da janela do navegador.

A comparação dessas diferentes abordagens às pontuações de velocidade do farol deu os melhores resultados.

]  As imagens responsivas são correlacionadas com a melhor pontuação de velocidade do farol.

Também analisamos qual abordagem levou à maioria das pontuações 100/100 Lighthouse . E os resultados foram muito semelhantes.

 As imagens responsivas se correlacionam com uma porcentagem mais alta de 100/100 pontuações na velocidade do farol.

Resumo: Embora o WebP possa melhorar a compactação de imagem em comparação com PNG, os JPEGs têm muito poucos sites implementando esse novo formato de imagem no momento.

A hospedagem GitHub e Weebly têm o melhor desempenho TTFB. O Siteground e o Wix têm os piores

Comparamos o desempenho da velocidade da página dos principais provedores de hospedagem na web.

Considerando que o tempo de resposta do servidor tem maior impacto no TTFB, analisamos como os vários hosts impactaram essa métrica principal.

Em particular, dividimos o TTFB em três categorias (Rápido, Médio, Lento). E analisamos a porcentagem que cada host encontrou em cada categoria.

Aqui está o desempenho do TTFB de cada provedor de hospedagem na área de trabalho:

 Desempenho do TTFB entre os principais provedores de hospedagem na web (desktop)

Github, Weebly e Acquia foram os 3 principais artistas para desktop TTFB. Automattic, Wix e Siteground foram os piores desempenhos.

Realizamos a mesma análise para TTFB móvel. Aqui estão os resultados:

 Desempenho do TTFB entre os principais provedores de hospedagem na web (celular)

Como você pode ver, o Github é extremamente poderoso em dispositivos móveis e desktops. Dado o fato de os sites do github fornecerem apenas recursos estáticos, não deve ser surpresa. Isso significa que o Github não é, de muitas maneiras, uma comparação individual com os hosts da web "normais".

Seravo, Netlify e Weebly completam o Top 4. Wix e Automattic estão no final da lista. [19659003] Qual é o insight dessa análise?

O TTFB é apenas um dos muitos fatores a serem considerados na escolha de um host. Também existem custos, disponibilidade, suporte ao cliente, recursos e muito mais.

No entanto, o Github Pages é de longe a melhor opção entre hosts grandes quando se trata de tempos de carregamento rápidos de desktop e dispositivos móveis. Os hosts Wix e Automattic normalmente têm tempos TTFB lentos.

Principais argumentos: Entre os principais provedores de hospedagem, o Github e o Weebly tiveram melhor desempenho na área de trabalho. De acordo com nossa análise, o GitHub e o Seravo foram os hosts móveis mais rápidos. Note-se, no entanto, que o Github Pages fornece apenas páginas estáticas, o que é uma vantagem inerente aos outros hosts que analisamos.

China, Japão e Alemanha têm os tempos de carregamento TTFB mais rápidos.

Comparamos os tempos de carregamento TTFB para 11 países em nosso conjunto de dados.

Aqui está uma discriminação das velocidades de desktop por país:

 Tempo de carregamento do TTFB por país (computador)

E celular:

 Tempo de carregamento do TTFB por país (celular)

Aviso importante: A China oferece o melhor desempenho TTFB para dispositivos móveis e desktops. O próximo é o Japão e a Alemanha, com velocidades rápidas de página acima da média global. França, Reino Unido, Canadá, EUA e Rússia têm uma velocidade média da página. Austrália, Brasil e Índia têm taxas abaixo da média global.

Páginas com CDN apresentam desempenho pior do que páginas sem CDN

Uma de nossas descobertas mais surpreendentes foi que as páginas com CDN realmente tiveram desempenho pior do que aquelas que não usavam CDN.

Isso era verdade para os dois desktops:

 O uso de CDN se correlaciona com a menor velocidade da página da área de trabalho

e o celular:

 da CDN se correlaciona com a menor velocidade da página móvel

?

Teoricamente, uma CDN deve melhorar a velocidade da página em geral, fornecendo conteúdo próximo à localização do usuário.

 Como funciona uma CDN

No entanto, esse não foi o caso em nossa análise.

Temos a hipótese de que nem todas as CDNs são criadas iguais. Em muitos casos, o uso de uma CDN mal otimizada pode realmente diminuir o desempenho.

De fato, ao analisar o desempenho dos 18 principais fornecedores de CDN, vimos uma enorme diferença no desempenho.

]  Desempenho da velocidade da página entre as CDNs mais importantes

Em particular, descobrimos que (na área de trabalho) a melhor CDN teve desempenho 3,6 vezes melhor que a pior CDN. Isso explica por que as CDNs não melhoram automaticamente o desempenho.

Para entender melhor os desempenhos ruins, comparamos o desempenho da CDN com a média global.

<img class = "" src = "https://backlinko.com/wp-content/uploads/2019/10/page-speed-performanace-among-major-cdjor-compared-to-the-average. png "title =" Desempenho da velocidade da página entre as principais CDNs em comparação com a média "alt =" A velocidade da página das principais CDNs em comparação com a média [19659035] Em seguida, inserimos cada CDN em um dos três blocos:

  • Bom (quase e% lento é melhor que a média em todos os provedores)
  • Média (% rápido ou% lento é melhor que a média em todos os provedores))
  • Ruim (% rápido e% lento são piores que a média de todos

Aqui está um resumo do desempenho de cada provedor:

Desktop

Bom: Airee, Amazon Cloudfront, CDN do Azure, CacheFly, EdgeCast, Rapidamente, GitHub Pages, Google Cloud, KeyCDN, MaxCDN, Netlify
Média: CDN77
Ruim: Akamai, ArvanCloud, Cloudflare , Fireblade, Incapsula, Sucuri

Celular

Airee, Amazon Cloudfront, CDN do Azure, CDN77, EdgeCast, Rapidamente, Páginas do GitHub, Google Cloud, KeyCDN, MaxCDN, Netlify
: Fireblade, Incapsula, Sucuri
Ruim: Akamai, ArvanCloud, Cloudflare

Resumo da chave: O uso de uma CDN não melhora automaticamente o desempenho da velocidade da página. Determinadas CDNs apresentam desempenho significativamente melhor que outras. Portanto, é importante usar uma CDN com bom desempenho tanto na área de trabalho quanto no dispositivo móvel.

Conclusão

Se você quiser saber mais sobre como essa análise foi conduzida, leia nossos métodos de estudo em PDF. [19659195] Agora, gostaria de ouvir sua opinião:

Que resultados deste estudo você notou?

Ou:

A quais descobertas você deseja responder?

De qualquer forma, analisamos 5,2 milhões de páginas para computadores e dispositivos móveis. O que aprendemos sobre o Page Speed ​​foi publicado pela primeira vez no Backlinko.

Comments are closed.