HTML veya XHTML sayfa boyutunu azaltmak için yapılan bazı genel optimizasyonlar nelerdir? Akla gelen bazı şeyler:
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?
Google, önerilerini en iyi şekilde özetledi ve açıkladı Yük Boyutunu En Aza İndir . Aşağıdaki teknikleri içerirler:
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:
(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.
Birisi işaretlemenin Gzipped olması gerektiğini söyleyecek, ben de öyle olabilirim.
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
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,
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.
Ç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.
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.
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>
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.
Diğerleri bunu söylediler, ancak evdekileri yeterince toplayamadılar: gzipping.
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:
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 -
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.)
meiert.com/en/blog/20080601/optional-tags-in-html-4/
code.google.com/speed/articles/optimizing-html.html
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/