İlan

Bir web sitesi işletiyorsanız, doğru görüntü formatlarını kullanın ve görüntülerinizi web için optimize edin Yeniden Boyutlandırmak, Dönüştürmek ve Optimize Etmek için 10 Ücretsiz Online Toplu Resim Araçlarıİşlenecek çok sayıda fotoğrafınız ve çok az zamanınız olduğunda toplu düzenleme araçlarına ihtiyacınız var. Sizi çevrimiçi olarak mevcut en iyi toplu yeniden boyutlandırıcılar, optimize ediciler veya dönüştürücülerle tanıştırıyoruz. Daha fazla oku . Ancak görüntü sıkıştırması iyi bilinen bir uygulama olsa da, HTML sıkıştırması gözden kaçma eğilimindedir, bu da utanç vericidir, çünkü faydaları faydalıdır.

Bu makalede, HTML dosyalarını daraltmanın iki ana yöntemini, HTML dosyalarının neden küçültülmesi gerektiğini ve nasıl devam edileceğini ele alacağız.

Sıkıştırma vs. Minification

HTML dosyalarını optimize etmeye gelince, bunun için iki ana yöntem vardır: sıkıştırma ve küçültülmesi. Yüzeyde benzer görünürler, ancak aslında iki farklı tekniktir, bu yüzden onları karıştırmayın.

Minification

instagram viewer

Küçültmeyi kaynak kodundaki gereksiz karakterlerin ve satırların kaldırılması olarak düşünebilirsiniz. Girintiyi, yorumları, boş satırları vb. Düşünün. Bunların hiçbiri HTML'de gerekli değildir - dosyanın daha kolay okunmasını sağlamak için vardır. Bu ayrıntıları kırpmak, hiçbir şeyi etkilemeden dosya boyutunu azaltabilir.

Örnek HTML sayfası:

Başlığınız Burada

Bu bir Başlık

Bana mail gönder [email protected].

Bu yeni bir paragraf!

Bu, kalın ve italik olarak yeni bir paragraftır.

Örnek HTML sayfası, küçültülmüş:

Başlığınız Burada

Bu bir Başlık

Bana mail gönder [email protected].

Bu yeni bir paragraf!

Bu, kalın ve italik olarak yeni bir paragraftır.

Orijinal boyut: 354. Minimize edilmiş boyut: 272. Kazanç: 82 (% 23.16).

Birçok web geliştiricisi ve site sahibi yalnızca JS ve CSS dosyaları için minyatür ayırır, ancak bu eski uygulama bir hatadır. HTML minimizasyonu da önemlidir.

2000'li yıllarda, küçültme araçları nadirdi. Her şey değiştiğinde dosyaları manuel olarak küçültmeniz gerekiyordu. HTML dosyaları JS ve CSS dosyalarından daha sık değiştiğinden, o zamanlar küçültmek çok sıkıcıydı. Bugünlerde tartışmalı bir nokta.

Sıkıştırma

Kullanıcılar web sitenizi ziyaret ettiğinde, bunu HTTP protokolünü kullanarak yaparlar. Tarayıcı, web sunucunuza belirli bir sayfa için istek gönderir, web sunucunuz sayfayı bulur, ardından o sayfanın içeriğini ziyaretçinin tarayıcısına geri gönderir.

Ancak HTTP protokolü sıkıştırmayı desteklediğinden, web sunucunuz sayfayı ziyaretçiye göndermeden önce sıkıştırabilir (varsayarak) sıkıştırma sunucunuzun ayarlarında etkinleştirilir) ve ardından ziyaretçinin tarayıcısı sayfayı orijinal durumuna geri açabilir.

En yaygın sıkıştırma şeması GZIPkullanılan bir dosya biçimidir. kayıpsız sıkıştırma algoritması Dosya Sıkıştırma Nasıl Çalışır?Dosya sıkıştırma nasıl çalışır? Dosya sıkıştırmanın temellerini ve kayıp ile kayıpsız sıkıştırma arasındaki farkı öğrenin. Daha fazla oku DEFLATE denir.

Algoritma, HTML dosyasındaki metnin yinelenen örneklerini arar, ardından bu yinelenen örnekleri önceki bir yinelenen referanslarla değiştirir. Her referans sadece iki sayıdır: referans ne kadar geri ve kaç karakter referans veriyoruz.

Bunun gibi bir metin dizesi düşünün (örnek GZIP web sitesinden alınmıştır):

Filan filan filan filan filan.

Algoritma aşağıdaki tekrarı tanır:

B {lah b} {lah b} {lah b} {lah b} lah.

İlk olay referansımızdır, bu yüzden bırakın:

Blah b {lah b} {lah b} {lah b} lah.

İkinci olay, beş karakter geride ve beş karakter uzunluğunda olan ilk tekrarlama anlamına gelir:

Blah b [5,5] {lah b} {lah b} lah.

Ancak bu durumda, algoritma bir sonraki tekrarlamanın aynı karakter dizisi olduğunu kabul eder, bu nedenle referans uzunluğunu beş tane daha uzatır:

Blah b [5,10] {lah b} lah.

Ve yeniden:

Filan b [5,15] lah.

Algoritma, sonraki üç karakterin referanstaki ilk üç karakter olduğunu fark edecek kadar akıllıdır, bu nedenle üçe kadar uzanır:

Filan b [5,18].

Şimdi tipik bir HTML dosyasını ve içinde ne kadar tekrar olduğunu düşünün. Neredeyse her etiket, örneğin, karşılık gelen bir kapanış etiketine sahiptir.. Ayrıca, birçok etiket boyunca tekrarlanır., , ,, vb. Nitelikler de dahil olmak üzere sık sık tekrarlanır sınıf, href, ve src. GZIP sıkıştırmasının HTML ile neden bu kadar etkili olduğunu görmek kolaydır.

Tek dezavantajı, web sunucusunun her sayfa istendiğinde sıkıştırmayı yürütmek için biraz daha fazla CPU'ya ihtiyacı olmasıdır. Ancak CPU günümüzde pek endişe etmediğinden, GZIP'i etkinleştirmek neredeyse her zaman onsuz olmaktan daha iyidir, giriş düzeyinde web hostinginiz olsa bile En İyi Web Hosting Hizmetleri: Paylaşılan, VPS ve Dedicatedİhtiyaçlarınız için en iyi web barındırma hizmeti mi arıyorsunuz? İşte blogunuz veya web siteniz için en iyi önerilerimiz. Daha fazla oku .

Neden Sıkıştırmalı ve Küçültmelisiniz

Her ikisinin de günümüzün mobil ağırlıklı web ortamında çok önemli olan iki ana yararı vardır.

Daha Hızlı Sayfa Yükleri

Ortalama olarak, HTML küçültücü, temel ayarlarla bir dosyanın boyutunu yaklaşık yüzde 3 azaltabilir. İsteğe bağlı gelişmiş ayarlarla, bir HTML dosyası yüzde 10'a kadar olası bir azalma için yüzde 3 ila 7 oranında azaltılabilir. Bu doğrudan daha hızlı sayfa yükleme sürelerine dönüşür.

Daha Az Bant Genişliği Kullanıldı

Her biri 50 KB'tan 45 KB'ye küçültülmüş ve toplam 50 KB'lik bir küçülme için 10 dosyanız olduğunu varsayalım. Diyelim ki web siteniz her gün ortalama 1.000 ziyaretçiye hizmet veriyor ve her ziyarette ortalama on sayfa var. Yalnızca HTML minimizasyonu bant genişliği kullanımınızı günde 50 MB (ayda 1,5 GB) azaltır.

Sıkıştırma + Minimizasyon

Gördüğünüz gibi, özellikle de siteniz büyüdükçe, dosyalar büyüdükçe ve trafik arttıkça HTML küçültme tek başına yararlıdır. Bunu not et Google’ın PageSpeed ​​yönergeleri HTML'yi küçültmenizi öneririz, bu yüzden şüpheniz varsa, bunun sizi ikna etmesine izin verin.

Ancak HTML optimizasyonu ile ilgili harika olan şey, küçültme veya sıkıştırma seçmek zorunda kalmamanızdır. Her ikisini de yapabilirsiniz! Aslında, sen meli İkisinide yap.

Sıkıştırılmış HTML Nasıl Çalışır ve Neden Gerekebilir örnek html kodu

Ortalama olarak, GZIP sıkıştırmasının bir HTML dosyasını yüzde 70 ila 90 oranında küçültmesini bekleyebilirsiniz. Muhafazakar bir sıkıştırma tahmini ile yukarıdaki örnek kullanıldığında, küçültülmüş HTML dosyalarının her biri 45 KB ile 13,5 KB arasında olacak ve toplam 365 KB küçülecektir. Minimum / sıkıştırılmamış ile karşılaştırıldığında, site bant genişliğiniz artık günde 365 MB (ayda 11 GB) azalmaktadır.

Bant genişliği tasarruflarının yanı sıra, her kullanıcının çok daha hızlı yüklenmesi nedeniyle son kullanıcının tarayıcısının sayfa başına yalnızca 50 KB yerine 13,5 KB indirmesi gerekiyor.

HTML Nasıl Sıkıştırılır ve Küçültülür

Neyse ki, bu günlerde ikisi de çok zor değil ve bunları kurmak için çok fazla teknik bilgiye ihtiyacınız yok.

WordPress Eklentileri

Bir WordPress sitesi çalıştırıyorsanız, tek yapmanız gereken bir eklenti yüklemek ve hem sıkıştırma hem de küçültmenin avantajlarından yararlanabilirsiniz.

Çoğu önbellek eklentisi sayfaları önbelleğe almaktan daha fazlasını yapar. Örneğin, WP En Hızlı Önbellek ve W3 Toplam Önbellek her ikisinde de sayfa yüklerini daha da hızlandıran ve bant genişliği kullanımını azaltan diğer özelliklerin yanı sıra HTML minimize ve GZIP sıkıştırmayı açmanıza izin veren tek tıklatma ayarları vardır.

Eğer sen sadece minyatür istiyorum, öneririz HTML'yi küçültün Eklenti. Çok basit, HTML / CSS / JS'yi destekliyor ve küçültme yöntemini biraz değiştirmenize izin veriyor (ör. http: ve https: URL'lerinden).

Statik HTML Küçültücüler

HTML dosyalarınız statikse (yani bir CMS veya web çerçevesi tarafından dinamik olarak oluşturulmamışsa), iki HTML dosyası kümesini koruyabilirsiniz: kolay düzenleme için değiştirilmemiş bir "kaynak" kümesi ve bir kaynak dosyada her değişiklik yaptığınızda oluşturduğunuz "küçültülmüş" bir küme.

Küçültmek için aşağıdaki araçlardan birini kullanın:

  • HTMLCompressor
  • HTML Küçültücü
  • HTML Küçültücü (yukarıdakinden farklı)

WordPress gibi CMS'lerden uzaklaştıysanız ve şimdi kullanıyorsanız, bu geçerli bir tekniktir statik site jeneratörleri CMS'nizi Bırakmanın ve Statik Bir Site Oluşturucuyu Düşünmenin 7 NedeniUzun yıllar boyunca, bir web sitesi yayınlamak birçok kullanıcı için zordu. WordPress gibi CMS'ler bunu değiştirdi, ancak yine de kafa karıştırıcı olabilirler. Başka bir alternatif Statik Site Oluşturucu'dur. Daha fazla oku .

GZIP Sıkıştırmasını Etkinleştir

GZIP sıkıştırmasını etkinleştirme adımları, kullandığınız web sunucusu yazılımına bağlı olarak değişebilir. Apache en popüler seçenek olduğundan, .htaccess kullanarak nasıl etkinleştirileceğini ele alacağız.

FTP kullanarak web sunucunuza bağlanın, ardından şu adlı bir dosya oluşturun: .htaccess kök dizinde. .Htaccess dosyasını aşağıdaki ayarlara sahip olacak şekilde düzenleyin:

 mod_gzip_on Evet mod_gzip_dechunk Evet mod_gzip_item_include dosya. (html? | txt | css | js | php | pl) $ mod_gzip_item_include işleyici ^ cgi-script $ mod_gzip_item_include mime ^ text /.* mod_gzip_item_include mime ^ application / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Content-Encoding:.. * Gzip *
 SetOutputFilter DEFLATE. 

Web sitenizde sıkıştırma işleminin çalışıp çalışmadığından emin değil misiniz? Bu araçla test edin.

Nihai verimlilik için ayrıca CSS'nizi nasıl kontrol edeceğinizi, temizleyeceğinizi ve optimize edeceğinizi öğrenin CSS Dosyalarını Kontrol Etmek, Temizlemek ve Optimize Etmek için 11 Yararlı AraçlarCSS kodunuzu geliştirmek mi istiyorsunuz? Bu CSS denetleyicileri ve iyileştiricileri, CSS kodunun iyileştirilmesine, sözdiziminin geliştirilmesine ve web sayfalarınızın küçültülmesine yardımcı olur. Daha fazla oku .

Joel Lee'nin bir B.S. Bilgisayar Bilimi ve altı yılı aşkın profesyonel yazma deneyimi. MakeUseOf'un Genel Yayın Yönetmeni.