HTML veya XHTML sayfa boyutunu azaltmak için yaygın optimizasyonlar mı?

HTML veya XHTML sayfa boyutunu azaltmak için yapılan bazı yaygın optimizasyonlar nelerdir? Akla gelen bazıları:

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

Diğerleri neler? Hangisi en büyük paranın karşılığını sunar veya bir araç veya modül tarafından otomatik olarak gerçekleştirilebilir?

Google, Yük Boyutunu En Aza İndirmek için önerilerini açıkladı ve açıkladı . Bunlar aşağıdaki teknikleri içerir:

1. Sıkıştırmayı etkinleştir
2. Kullanılmayan CSS'yi kaldırın
3. JavaScript'i küçültün
4. CSS'yi küçültün
5. HTML'yi küçültün
6. JavaScript yüklemesini erteleme
7. Görüntüleri optimize edin
8. Ölçekli görüntüler sunma
9. Tutarlı bir URL'den kaynak sunma

Bu öneriler, açık kaynaklı Firefox / Firebug eklenti projesinin Sayfa Hızı adlı bir parçasıdır . Yahoo benzer! 'S YSlow eklentisine benzer. Gerçek Sayfa Hızı eklentisi, bu listenin ayrıntılı olarak açıkladığından daha fazla optimizasyonu kontrol edecektir. Sayfa Hızı Kullanma Talimatları da sunulmaktadır.

Yahoo! ' Nun Web Sitenizi Hızlandırmaya Yönelik En İyi Uygulamaları benzer benzer en iyi uygulamaları tanımlar:

1. HTTP İsteklerini En Aza İndirin
2. İçerik Dağıtım Ağı Kullanma
3. Sona Erme veya Önbellek Denetimi Üstbilgisi Ekleme
4. Gzip Bileşenleri
5. Stil Sayfalarını En Üste Yerleştirin
6. Komut Dosyalarını Alta 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 ürün uzunluğunda, bütünüyle alıntı yapmaya gerek yok.)

Hem YSlow (görüntü bağlantısı) hem de Sayfa Hızı (görüntü bağlantısı), sayfalarınızda testler gerçekleştirmenize olanak tanıyarak , yapabileceğiniz şeyleri önerir ve size önerilerinin neler olduğunu zaten gösterir.

Birisi işaretlemenin Gzipped olması gerektiğini söyleyecek, bu yüzden ben de olabilirim.

İşte Gzip'in Apache'de nasıl kurulacağına dair bağlantıların uzun bir açıklaması ve IIS'de .

WebReference ile ilgili bir makale , mod_gzip Apache modülünü kullanırken aşağıdaki performans kazanımlarını bulacağınızı belirtir.

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

Muhtemelen buna değmez.

Ben ettik HTML boşluk çıkarmadan ile oynanan Gzip Sıkıştırma sonrasında yükü içinde ancak% 10 boyutu azalma biraz ve testere.

Gerçekçi olarak, boşluk ve satır besleme kaldırma, sıkıştırmanın bizim için yapacağı işi yapıyor. Sadece insan destekli bir verim ekliyoruz:

                  Ham Sıkıştırılmış
Optimize edilmemiş CSS 2.299 bayt 671 bayt
Optimize CSS 1.758 bayt 615 bayt

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

Problem şu,

1. GZIP işin% 90'ını sizin için yapıyor, bu yüzden bu çılgın bir mikro optimizasyon. Demek istediğim, belki Google veya Yahoo iseniz.
2. % 10 ek boyut küçültme, "görüntüleme kaynağı" nda tamamen okunamayan HTML'nin oldukça dik maliyetiyle gelir

tamam, küçük olanı: etiket adlarını ve özelliklerini küçük harfli ve tutarlı tutun (bu arada standart zorunlu olarak). Sıkıştırma oranını bir veya iki oranında artıracaktır.

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

Ayrıca, aşırı yapılandırılmış site kompozisyonu konusunda dikkatli olun; gerçekten ihtiyaç duyulmadığında div ve span bölümleri eklemek kolaydır. Ayrıca, büyük sonuç kümeleri için sayfalama ve benzer çıktılar gibi stratejileri de düşünebilirsiniz.

Gerçekte, bu optimizasyonların Google ile aynı trafik kategorisinde olmayan siteler için buna değmesi son derece sınırlı bir geri ödemeye (ve çağrı stratejisi için potansiyel SEO olumsuzluklarına) sahiptir. GZip / Deflate sıkıştırmayı etkinleştirmek için jessegavin önerisini takip edin ve onunla yapın.

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

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

Ayrıca, Google'dan Closure Derleyici'ye göz atın . Ben kullanmadım, ama javascript indirme ve daha hızlı yapmak iddia ediyor.

Diğerlerinin söylediği gibi, en büyük fayda gzipping'den geliyor.

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

Ve bariz olanı: düzen için tablo 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>

Bir 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ükler (ViewState'in sayfanın geri kalanından daha ağır olduğu bana zaten geldi).
ViewState her istekte ileri geri gönderilecek, web sitenizi yavaşlatacak ve trafik hacmini artıracağından AJAX kullanıyorsanız özellikle doğrudur.

Çözüm .net kodunda olsa.

Bir sürü ücretsiz web performans analizi ve optimizasyon aracı vardır . Oluşturdukları raporlardan kendi büyük kontrol listenizi derleyebilirsiniz.

İşte bir Zoompf Performans Değerlendirmesi'nden başka birkaç yorumlanmış nokta -

• Dinamik olarak oluşturulan içerikten kaçının (resim). Bir resmi çevrimdışı olarak statik resim dosyası olarak çizmeyi veya yeniden boyutlandırmayı düşünün.
• Boyutsuz resim etiketleri kullanmaktan kaçının.
• Google Analytics (ve Reklamlar), JavaScript dosyasının eşzamansız olarak yüklenmesini destekler. Bunları kullanırsanız, senkronize olmayan bir şekilde yüklemeyi seçebilirsiniz.

Sıklıkla 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 hangisini kullanacağınıza karar vermeniz gerekir.

(Görünüşe göre, yeni bir kullanıcı olduğum için cevap başına birden fazla köprü gönderemiyorum, bu nedenle bu URL'lerin kopyalanması ve yapıştırılması gerekecek ... Umarım bu daha koşer.)

• HTML4 ve HTML5'te, birçok öğe için kapanış etiketi gerekli değildir. Gövde öğesi için 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

• HTTP URL'lerinin protokol (http :) kısmı atlanabilir.

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

• <br> gibi etiketlerle, gerçekten XHTML kullanmanız gerekmedikçe XHTML sözdiziminde (<br />) kullanılan eğik çizgiyi hariç tutabilirsiniz.

• Aşağıda, küçük HTML belge yapılarına bazı örnekler verilmiştir:

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

html5doctor.com/html-5-boilerplates/

Diğerleri bunu söylemişler, ama evdeki noktayı yeterince sıkıştırmamışlar: gzipleme.

1. Neredeyse hiç çaba veya dezavantaj.
2. Sınırlı deneyimime göre HTML boyutunu% 60 ile% 90 arasında azaltır.

HTML'de yapabileceğiniz diğer tüm ince ayarlar daha fazla çaba / bakım gerektirir ve sadece gzipleme ve unutmaya kıyasla neredeyse hiçbir etkiye sahip değildir. Google olmadıkça zaman ayırmaya değmezler. Google değilsiniz.

(Diğerlerinin de belirttiği gibi, HTML'niz ne kadar tutarlı olursa, gzipping'in daha sınırlı etkiye sahip olması nedeniyle - sınırlı anlayışım uyarınca - gzipping dosyanızdaki aynı dizeleri arar ve yinelenen her bir örneği, Özniteliklerinizi aynı sırada tutmak ve tüm kasanızı aynı tutmak gibi yazma uygulamaları gzipping'in işini yapmasına 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 küçültücüler burada listelenmiştir:

/programming/728260/html-minification