it-swarm-tr.com

Bant genişliğini azaltmada etkili yöntemler (ve böylece sayfa yükleme süreleri)?

Bir web sitesinin sayfa oluşturmak için ihtiyaç duyduğu bant genişliği miktarını azaltmak söz konusu olduğunda en etkili yöntemler nelerdir?

Agresif önbellekleme? JS/CSS küçültülüyor mu? Gzip? CMS? Spritelar?

12
Mark Henderson

Herhangi bir web sitesi tarafından kolayca uygulanabilen birkaç temel yöntem:

  • İsteği yapan tarayıcı destekliyorsa, HTML, CSS ve Javascript’inizi deflate veya gzip ile sıkıştırın.
  • Javascript'inizi Google Closure Compiler ile küçültün
  • Css'ınızı küçültün YUI Compressor

Biraz daha ilgili:

  • Bir sayfa veya görüntünün değişmesi muhtemel değilse, tarayıcıya önbelleklemesini söyleyin. Çoğu web sunucusu bunu zaten statik dosyalar için yapar, bu nedenle tek yapmanız gereken, dinamik komut dosyalarınıza mümkün olanı eklemektir.
  • CSS ve JS dosyalarınızı otomatik olarak tek bir dosyada birleştirin . Bu, HTTP isteklerini azalttığından (ek yükü olan ve bazı aptal tarayıcıların - ve Internet Explorer demek istediğim - etki alanı başına bir anda varsayılan 2 isteği sınırlamasının) avantajlıdır.
  • Statik dosyalarınızı (CSS, JS, resimler vb.) Ayrı bir etki alanı adına taşıyın. Bu, çerez bilgisinin HTTP isteğinde gönderilmemesine neden olur.
  • Otomatik olarak oluşturulan spriteları kullanın . Sprite, çok sayıda simge veya diğer küçük görüntüleri içeren tek bir görüntüdür; daha sonra CSS background özelliği ile hangi görüntünün gösterileceğini seçersiniz. Örnek .

    Bunun avantajı, istemcinin daha az HTTP isteği yapmasıdır (ek yükü vardır).

"Otomatik olarak" kalındı ​​çünkü bunları manuel olarak yapıyorsanız kesinlikle buna değmez ve kod bakımını kabus yapar. Genellikle otomatik olarak yapmak, özel bir komut dosyası yazmak anlamına gelir; bu nedenle "biraz daha fazla yer alır",

10
Thomas Bonini

Google, önerilerini en iyi şekilde özetledi ve açıkladı Yük Boyutunu En Aza İndir . Aşağıdaki teknikleri içerirler:

  1. Sıkıştırmayı etkinleştir
  2. Kullanılmayan CSS'yi kaldır
  3. JavaScript'i küçült
  4. CSS'yi küçült
  5. HTML'yi küçült
  6. JavaScript'in yüklenmesini ertele
  7. Görüntüleri optimize et
  8. Ölçekli görüntüleri servis et
  9. Kaynakları tutarlı bir URL’den sun

Bu öneriler, açık kaynak kodlu Firefox/Firebug eklenti projesinin bir parçası Sayfa Hızı . Yahoo! 'Nun YSlow eklentisine benzer. Gerçek Sayfa Hızı eklentisi, listenin ayrıntılı olarak açıkladığından çok daha fazla optimizasyonu kontrol eder. Sayfa Hızı Kullanma Talimatı da sunulmuştur.

Yahoo! 'Nun Web Sitenizi Hızlandırmak İçin En İyi Uygulamalar benzer bir dizi en iyi uygulamayı tanımlar:

  1. HTTP İsteklerini En Aza İndirme
  2. İçerik Dağıtım Ağı kullanın
  3. Süre Sonu veya Önbellek Kontrol Başlığı Ekleme
  4. Gzip Bileşenleri
  5. Stil Sayfalarını Zirveye Çıkarın
  6. Scriptleri dibe koy
  7. CSS İfadelerinden Kaçının
  8. JavaScript ve CSS'yi Harici Yap
  9. DNS Aramalarını Azaltın
  10. ...

(Yahoo! 'Nun listesi ~ 35 öğe uzunluğunda, bütünüyle alıntı yapmaya gerek yok.)

Hem YSlow (resim bağlantısı) ve Sayfa Hızı (resim bağlantısı) Sayfalarınız üzerinde testler yapmanızı, yapabileceğiniz şeyleri önermek ve size önerilerinin ne olduğunu zaten gösteren göstermenizi sağlar.

5
Bryson