Seu site é muito lento? Então é hora de tomar alguma providência para resolver o problema. Mesmo que não seja, você pode estar interessado em saber quais erros os desenvolvedores cometem que afetam o tempo de carregamento da página.
Por que o tempo de carregamento da página é importante?
O tempo de carregamento da página está diretamente relacionado ao desempenho do site.
Se demorar mais de 3 segundos para carregar, você perderá metade dos visitantes antes mesmo que eles cheguem ao seu site.
Visibilidade - o Google leva em consideração o tempo de carregamento da página ao classificar os resultados de pesquisa. Portanto, o tempo de carregamento do site afeta a facilidade com que os usuários podem encontrá-lo na Internet.
Conversão - quanto mais rápido a página carrega, mais os usuários interagem com o site. Sites lentos matam conversões. Os clientes em potencial relutarão em usar o site e seguir os apelos à ação (CTAs) se a sua página da web demorar muito para carregar. Isso fará com que usuários frustrados saiam do site sem comprar seu produto ou usar seus serviços.
Facilidade de uso - quanto menor o tempo de carregamento, mais satisfeito o usuário ficará. Como resultado, a retenção de clientes será maior.
, , HubSpot.
Yahoo 0,4 , 9%.
1 Amazon 1,6 .
2- Bing 4,3% , 3,75% 1,8%.
, , .
, ,
. , .
1. HTTP-
HTTP- , , . , , Network .
4 8. , .
, Yahoo, , 80% HTTP-.
, HTTP-:
CSS / JS - CSS, JS , . CSS , CSS .
, - , . . , , , , , .
- , . , HTTP- . .
HTTP/2 . HTTP/2 , . , .
2. CDN
- CDN, , . , HTTP- .
CDN .
CDN , -, , . CDN . , .
, , CDN .
CDN TTL .
CDN ?
. , , CDN, .
, CDN , . , .
, , , .
Bit Node, TypeScript, React, Vue, Angular .
3.
- . .
.
- . Gzip. . - Gzip.
, Brotli, .
HTML CSS 50% 70% , .
, , .
4.
HTML, CSS JS , , .
JS .
JavaScript - JS . , - JS-.
HTML, JS- (defer.js) </body>
.
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
: «, , defer.js».
5.
, . , HTTP-. . Google , , , .
, Screaming Frog, . , .
, :
-
-
, -.
, ? , , .
- , Google Pagespeed Insights, Pingdom, YSlow .. , .
, .
, , .