5 kesalahan umum pengembang yang memengaruhi waktu muat halaman

Apakah situs Anda terlalu lambat? Kemudian saatnya mengambil tindakan untuk mengatasi masalah ini. Meskipun tidak, Anda mungkin tertarik untuk mengetahui kesalahan apa yang dibuat pengembang yang memengaruhi waktu muat halaman.

Mengapa waktu buka halaman penting?

Waktu buka halaman secara langsung berhubungan dengan kinerja situs.

Jika dibutuhkan lebih dari 3 detik untuk memuat, Anda akan kehilangan setengah dari pengunjung Anda bahkan sebelum mereka sampai ke situs Anda.

• Visibilitas - Google memperhitungkan waktu buka halaman saat memberi peringkat dalam hasil pencarian. Karenanya, waktu buka situs memengaruhi seberapa mudah pengguna dapat menemukannya di Internet.

  
  
  
  
  

• Konversi - semakin cepat halaman dimuat, semakin banyak pengguna yang berinteraksi dengan situs. Situs lambat membunuh konversi. Calon pelanggan akan enggan menggunakan situs dan mengikuti ajakan bertindak (CTA) jika halaman web Anda membutuhkan waktu lama untuk dimuat. Ini akan menyebabkan pengguna yang frustrasi meninggalkan situs tanpa membeli produk atau menggunakan layanan Anda.

  
  
  
  
  

• Kemudahan penggunaan - semakin pendek waktu pemuatan, pengguna akan semakin puas. Hasilnya, retensi pelanggan akan lebih tinggi.

  
  
  
  
  

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

, .

, , .