Sıkıştırılmış HTML Nasıl Çalışır ve Neden İhtiyacınız Olabilir?

Bir web sitesi işletiyorsanız, nasıl yapılacağını zaten biliyor olmalısınız. doğru görüntü formatlarını kullanın ve resimlerinizi web için optimize edin. Ancak görüntü sıkıştırma iyi bilinen bir uygulama olsa da, HTML sıkıştırması gözden kaçma eğilimindedir, bu da utanç verici çünkü faydaları değerlidir.

Bu makalede, HTML dosyalarını küçültmek için iki ana yöntemi, HTML dosyalarının neden küçültülmesi gerektiğini ve bunun nasıl yapılacağını inceleyeceğiz.

Sıkıştırma ve Küçültme

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

küçültme

Minification'ı kaynak koddaki gereksiz karakter ve satırların kaldırılması olarak düşünebilirsiniz. Girintileri, yorumları, boş satırları vb. düşünün. Bunların hiçbiri HTML'de gerekli değildir -- bunlar dosyanın daha kolay okunmasını sağlamak için vardır. Bu ayrıntıları kırpmak, hiçbir şeyi etkilemeden dosya boyutunu küçültebilir.

Örnek HTML sayfası:

  
  
 Your Title Here  
  
  
    
 Send me mail at  support@yourcompany.com  .
This is a new paragraph!

This is a new paragraph in bold and italics.

Orijinal boyut: 354. Küçültülmüş boyut: 272. Tasarruf: 82 (%23,16).

Birçok web geliştiricisi ve site sahibi, küçültmeyi yalnızca JS ve CSS dosyaları için ayırır, ancak bu modası geçmiş uygulama bir hatadır. HTML küçültme de önemlidir.

2000'lerde, 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 her seferinde küçültmek çok sıkıcıydı. Günümüzde, bu bir tartışmalı nokta.

Sıkıştırma

Kullanıcılar web sitenizi ziyaret ettiğinde, bunu HTTP protokolünü kullanarak yaparlar. Tarayıcı, belirli bir sayfa için web sunucunuza bir istek gönderir, web sunucunuz sayfayı bulur ve 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 (sunucunuzun ayarlarında sıkıştırmanın etkinleştirildiğini varsayarak) ve ardından ziyaretçinin tarayıcısı sayfayı orijinal durumuna geri açabilir.

En yaygın sıkıştırma şeması GZIP kullanan bir dosya biçimi olan kayıpsız sıkıştırma algoritması DEFLATE denir.

Algoritma, HTML dosyasındaki metnin yinelenen oluşumlarını arar ve ardından bu yinelenen oluşumları önceki bir oluşuma yapılan referanslarla değiştirir. Her referans sadece iki sayıdır: referans ne kadar geride ve kaç karaktere atıfta bulunuyoruz.

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

Blah blah blah blah blah.

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

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

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

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

İkinci oluşum, beş karakter gerisinde ve beş karakter uzunluğunda olan ilk oluşumu ifade eder:

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

Ancak bu durumda, algoritma bir sonraki oluşumun 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:

Blah b[5,15]lah.

Ve algoritma, sonraki üç karakterin referanstaki ilk üç karakter olduğunu anlayacak kadar akıllıdır, bu yüzden üçe kadar uzar:

Blah b[5,18].

Şimdi tipik bir HTML dosyasını ve içinde ne kadar tekrar olduğunu düşünün. gibi hemen hemen her etiket

, gibi karşılık gelen bir kapanış etiketine sahiptir

. Ayrıca, birçok etiket baştan sona tekrarlanır, örneğin

, vb. Özellikler de sık sık tekrarlanır.

class

href

, ve

src

. GZIP sıkıştırmasının HTML ile neden bu kadar etkili olduğunu anlamak kolaydır.

Tek dezavantajı, web sunucusunun her sayfa istendiğinde sıkıştırmayı yürütmek için biraz daha fazla CPU'ya ihtiyaç duymasıdır. Ancak günümüzde CPU çok önemli olmadığı için, giriş seviyesi web barındırma hizmetiniz olsa bile GZIP'i etkinleştirmek neredeyse her zaman daha iyidir.

Neden Sıkıştırıp Küçültmelisiniz?

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

Daha Hızlı Sayfa Yüklemeleri

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

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

Diyelim ki toplam 50 KB küçülme için her biri 50 KB'den 45 KB'ye küçültülmüş 10 dosyanız var. Diyelim ki web siteniz her gün ortalama 1.000 ziyaretçiye hizmet veriyor ve her ziyaret ortalama on sayfa. Tek başına HTML küçültme, bant genişliği kullanımınızı günde 50 MB (ayda 1,5 GB) azaltır.

Sıkıştırma + Küçültme

Gördüğünüz gibi, HTML küçültme, özellikle siteniz büyüdükçe, dosyalar büyüdükçe ve trafik arttıkça kendi başına yararlıdır. Bunu not et Google'ın Sayfa Hızı yönergeleri HTML'yi küçültmeyi tavsiye edin, bu yüzden şüpheniz varsa, bunun sizi başka türlü ikna etmesine izin verin.

elektronik için ucuz online alışveriş siteleri

Ancak HTML optimizasyonunun harika yanı, küçültmeyi veya sıkıştırmayı seçmek zorunda olmamanızdır. İkisini de yapabilirsiniz! aslında sen NS İkisinide yap.

Ortalama olarak, GZIP sıkıştırmasının bir HTML dosyasını yüzde 70 ila 90 oranında küçültmesini bekleyebilirsiniz. Yukarıdaki örneği muhafazakar bir sıkıştırma tahminiyle kullanarak, küçültülmüş HTML dosyalarının her biri 45 KB'den 13,5 KB'ye çıkar ve toplam 365 KB küçülür. Küçültülmemiş/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) azaltılmıştır.

Bant genişliği tasarrufuna ek olarak, son kullanıcının tarayıcısının sayfa başına 50 KB'a karşı yalnızca 13,5 KB indirmesi gerektiğinden her sayfa çok daha hızlı yüklenir.

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

Neyse ki, bugü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 işletiyorsanız, tek yapmanız gereken bir eklenti yüklemektir ve hem sıkıştırma hem de küçültmenin avantajlarından yararlanabilirsiniz.

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

Eğer sen bir tek küçültme istiyorsanız, öneririz HTML'yi küçült Eklenti. Basittir, HTML/CSS/JS'yi destekler ve küçültme yöntemini biraz değiştirmenize olanak tanır (örn.

http:

https:

URL'lerden).

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 küçültülmemiş bir 'kaynak' küme ve bir 'küçültülmüş' küme, kaynak dosyada herhangi bir değişiklik yaptığınızda oluşturduğunuz.

Küçültmek için şu araçlardan birini kullanın:

WordPress gibi CMS'lerden uzaklaştıysanız ve şimdi statik site oluşturucuları kullanıyorsanız, bu uygun bir tekniktir.

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 farklılık gösterebilir. 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 adlı bir dosya oluşturun.

.htaccess

kök dizinde. Aşağıdaki ayarlara sahip olmak için .htaccess dosyasını düzenleyin:

  
 mod_gzip_on Yes  
 mod_gzip_dechunk Yes  
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$  
 mod_gzip_item_include handler ^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ırmanın çalışıp çalışmadığından emin değil misiniz? Bu araçla test edin .

Nihai verimlilik için şunları da yapmalısınız: CSS'nizi nasıl kontrol edeceğinizi, temizleyeceğinizi ve optimize edeceğinizi öğrenin .

Paylaş Paylaş Cıvıldamak E-posta Hemen Windows 11'e Yükseltmeli misiniz?

Windows 11 yakında geliyor, ancak mümkün olan en kısa sürede güncellemeniz mi yoksa birkaç hafta beklemeniz mi gerekiyor? Hadi bulalım.

Sonrakini Oku İlgili konular

Programlama
HTML
Web Geliştirme

Yazar hakkında Joel Lee(1524 Makale Yayınlandı)

Joel Lee, 2018'den beri MakeUseOf'un Genel Yayın Yönetmenidir. Bilgisayar Bilimleri alanında ve dokuz yılı aşkın profesyonel yazma ve düzenleme deneyimi.

Joel Lee'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın