5 erreurs courantes des développeurs qui affectent les temps de chargement des pages

Votre site est-il trop lent? Ensuite, il est temps de prendre des mesures pour résoudre ce problème. Même si ce n'est pas le cas, vous voudrez peut-être savoir quelles erreurs les développeurs font qui affectent les temps de chargement des pages.





Pourquoi le temps de chargement de la page est-il important?

Le temps de chargement de la page est directement lié aux performances du site.





Si le chargement prend plus de 3 secondes, vous perdrez la moitié de vos visiteurs avant même qu'ils n'arrivent sur votre site.





  • Visibilité - Google prend en compte le temps de chargement de la page lors du classement dans les résultats de recherche. Par conséquent, le temps de chargement d'un site affecte la facilité avec laquelle les utilisateurs peuvent le trouver sur Internet.





  • Conversion - plus la page se charge rapidement, plus les utilisateurs interagissent avec le site. Les sites lents tuent les conversions. Les clients potentiels seront réticents à utiliser votre site et à suivre les appels à l'action (CTA) si votre page Web prend du temps à se charger. Cela conduira des utilisateurs frustrés à quitter le site sans acheter votre produit ou utiliser vos services.





  • Facilité d'utilisation - plus le temps de téléchargement est court, plus l'utilisateur sera satisfait. En conséquence, la fidélisation de la clientèle sera plus élevée.





, , 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 (Github).





, , , .





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 .. , .





, .





, , .








All Articles