it-swarm-tr.com

HTML veya XHTML sayfa boyutunu azaltmak için genel optimizasyonlar?

HTML veya XHTML sayfa boyutunu azaltmak için yapılan bazı genel optimizasyonlar nelerdir? Akla gelen bazı şeyler:

  • yorumların kaldırılması,
  • yabancı boşlukların kaldırılması,
  • tekrarlayan satır içi stilleri bir CSS stil sayfasına taşıma,
  • vb.

Diğerleri neler? Hangisi en büyük paranın karşılığını verir veya otomatik olarak bir araç veya modül tarafından yapılabilir?

15
Chris W. Rea

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 İndir
  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

Birisi işaretlemenin Gzipped olması gerektiğini söyleyecek, ben de öyle olabilirim.

İşte Gzip 'nin Apache ve IIS ' da nasıl ayarlanacağı ile ilgili bağlantıların neler olduğuna dair uzun bir açıklama.

Bir WebReference hakkındaki makale , mod_gzip Apache modülünü kullanırken aşağıdaki performans kazançlarını bulacağınızı belirtir.

Webmaster'lar genellikle Web sunucusu performansında% 150-160 artış ve bu modülü kullanarak, HTML/XML/JavaScript bant genişliğinde% 70 -% 80 azalma görüyorlar. Genel olarak, bant genişliği tasarrufu yaklaşık% 30 ila% 60'tır

18
jessegavin

Muhtemelen buna değmez.

Ben HTML'deki boşlukları silmeyle oynadım biraz, ve gzipping işleminden sonra yükte sadece% 10'luk bir boyut küçültme gördüm.

Gerçekçi olarak, boşluk ve satır çıkıntısının giderilmesi, sıkıştırmanın bizim için yapacağı işleri yapıyor. Sadece bir insan destekli verimlilik damgası ekliyoruz:

 Ham Sıkıştırılmış 
 Geliştirilmemiş CSS 2,299 bayt 671 bayt 
 Optimize edilmiş CSS 1,758 bayt 615 bayt 

(evet, bu CSS diyor ama aynı temel kurallar HTML için de geçerli)

Problem şu,

  1. GZIP işin% 90'ını sizin için yapıyor, bu yüzden çılgınca bir mikro-optimizasyon. Demek istediğim, belki Google’da veya Yahoo’daysanız.
  2. Bu% 10 ek boyut küçültme, "kaynak göster" te tamamen okunamayan HTML'nin oldukça dik bir maliyetiyle geliyor
10
Jeff Atwood

tamam, küçük olanı: etiket adlarını ve niteliklerini küçük harf ve tutarlı tutun (bu arada standartların gerektirdiği gibi). Sıkıştırma oranını yüzde veya iki oranında artıracaktır.

6
Thomas Bonini

Çok yüksek hacimli bir siteyseniz, süper kısa varlık kimliği ve sınıf adları kullanmayı düşünebilirsiniz, çünkü bunlar hem HTML sayfasının hem de stillendirmek için kullanılan CSS sayfasının boyutunu azaltır.

Ayrıca aşırı yapılandırılmış site kompozisyonu konusunda dikkatli olun; Gerçekten gerekmediğinde div ve span bölümlerini eklemek kolaydır. Büyük sonuç kümeleri için çağrı alma ve benzeri çıktılar gibi stratejileri de düşünebilirsiniz.

Gerçekte, bu optimizasyonlar, Google ile aynı trafik kategorisinde olmayan siteler için buna değmeyecek kadar sınırlı bir geri ödemeye (ve çağrı stratejisi için potansiyel SEO olumsuz yönlere) sahiptir. Sadece GZip/Deflate sıkıştırmasını etkinleştirmek ve bununla bitmek için jessegavin 'in tavsiyesi ' i izleyin.

4
JasonBirch

Ortak css, resimler ve javascriptleri tek bir dosyada birleştirin. Bu, dosya boyutunu küçültmez, ancak http isteklerinin sayısını azaltır. Daha küçük dosyalar için http ek yükü indirme süresinden daha ağır basar. Css ve javascript dosyalarını birleştiren bir komut dosyası yazmak kolaydır, böylece geliştirme sırasında onları daha kolay yönetebilir, ancak bunları tek bir dosyaya dağıtabilirsiniz.

Görüntüleri birleştirmek hakkında daha fazla bilgi için http://css-tricks.com/css-sprites adresine bakın.

Ayrıca, Google’dan Kapatma Derleyicisi ’ne bakın. Kullanmadım, ancak javascript'i indirmeyi ve daha hızlı çalıştırmayı iddia ediyor.

3
mcrumley

Diğerlerinin de dediği gibi, en büyük yarar gzipping'dan geliyor.

Uygun HTML öğelerini kullandığınızdan emin olun. <div class="page-title">Hello World</div> yerine, <h1>Hello World</h1> kullanın.

Açık olanı: düzen için tabloları kullanmayın! 960.gs gibi basit bir ızgara sistemi kullanın (veya kendi hafif sürümünüzü kullanın). HTML boyutu arasında, özellikle iç içe geçmiş tablolarda büyük bir fark olabilir. Karşılaştırmak:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

ve

<div class="colSmall">...</div>
<div class="colLarge">...</div>
3
DisgruntledGoat

ASP.NET web sitesi kullanıyorsanız, ViewState 'e dikkat edin. Sayfada çok büyük gizli alanlar oluşturabilir, gerekli olmadığında sık sık aşırı yükleyebilir (ViewState’in sayfanın geri kalanından daha ağır olması bana zaten geldi).
AJAX kullanıyorsanız, ViewState her talepte ileri geri gönderileceği, web sitenizi yavaşlatacağı ve trafik hacmini artıracağı için özellikle geçerlidir.

Çözüm .net kodunda olsa.

2
Julien N

Diğerleri bunu söylediler, ancak evdekileri yeterince toplayamadılar: gzipping.

  1. Neredeyse hiçbir çaba, veya dezavantaj yok.
  2. Sınırlı tecrübeme göre, HTML boyutunu% 60 ile% 90 arasında azaltır.

HTML’e getirebileceğiniz diğer tüm ince ayarlamalar daha fazla çaba/bakım gerektirir ve yalnızca gzipping ve unutma ile karşılaştırıldığında neredeyse hiç bir etkisi olmaz. Google olmadıkça zamana değmezler. Sen Google değilsin.

(Diğerlerinin de belirttiği gibi, HTML’niz ne kadar tutarlı olursa, gzipping daha o kadar etkili olur - sınırlı anlayışa göre - gzipping dosyanızdaki özdeş dizileri arar ve yinelenen her örneği küçük bir kodla değiştirir. Özniteliklerinizi aynı düzende tutmak ve tüm kasanızı aynı tutmak gibi uygulamalar geliştirmek gzipping'un işini yapmanıza yardımcı olabilir.)

Oh - ve HTML’nizi oluşturma/sunma işleminizin bir noktasında otomatik olarak küçültüyorsanız, bu daha fazla çaba/bakım gerektirmez. Bazı HTML minifiers burada listelenmiştir:

https://stackoverflow.com/questions/728260/html-minification

1
Paul D. Waite

Bir sürü ücretsiz web performans analizi ve optimizasyon araçları var . Kendi büyük kontrol listenizi oluşturdukları raporlardan derleyebilirsiniz.

Zoompf Performance Assessment'ten bir kaç tane parantez içinde olan noktalar -

  • Dinamik olarak oluşturulmuş içerikten kaçının (resim). Çevrimdışı bir resmi çizmeyi veya yeniden boyutlandırmayı statik resim dosyası olarak düşünün.
  • Boyutsuz resim etiketleri kullanmaktan kaçının.
  • Google Analytics (& Ads), JavaScript dosyasının eşzamansız yüklenmesini destekler. Bunları kullanırsanız, zaman uyumsuz olarak yüklemeyi tercih edebilirsiniz.
1
mvark

Genel olarak gözden kaçan bir strateji, gereksiz tüm HTML kodlarını sayfadan kaldırmaktır.

Herhangi bir proje için, kullandığınız (X) HTML sürümüne ve web sitesinin nasıl kullanılacağına bağlı olarak bu stratejilerden hangisinin kullanılacağına karar vermelisiniz.

(Görünüşe göre, yeni bir kullanıcı olduğum için cevap başına birden fazla köprü gönderemiyorum, bu yüzden bu URL’lerin kopyalanması ve yapıştırılması gerekiyor ... Umarım bu bozulur.)

  • HTML4 ve HTML5'te, birçok öğe için, kapanış etiketi gerekli değildir. Gövde elemanının açılış etiketi de gerekli değildir. Görmek:

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

  • Protokol (http :) HTTP URL’lerinin bir kısmı çıkarılabilir.

meiert.com/en/blog/20090218/performance-and-rfc-2396/

  • <br> gibi etiketlerle, aslında XHTML kullanmanız gerekmiyorsa, XHTML sözdiziminde (<br />) kullanılan eğik çizgiyi bırakabilirsiniz.

  • İşte küçük HTML belge yapılarına bazı örnekler:

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

1
dzollman