Metin tabanlı öğelerin kodlama ve aktarım boyutunu optimize edin

Gereksiz kaynak indirmelerini ortadan kaldırmanın yanı sıra, sayfa yükleme hızını artırmak için yapabileceğiniz en iyi şey, kalan kaynakları optimize edip sıkıştırarak genel indirme boyutunu en aza indirmektir.

Veri sıkıştırma 101

Web sitenizi kullanılmayan kaynakların indirilmesini önleyecek şekilde ayarladıktan sonra, tarayıcının indirmesi gereken kalan uygun kaynakları sıkıştırmak gerekir. Kaynak türüne (metin, resimler, yazı tipleri vb.) bağlı olarak, web sunucusunda etkinleştirilebilecek genel araçlar, belirli içerik türleri için ön işleme optimizasyonları ve geliştiricinin giriş yapmasını gerektiren kaynağa özgü optimizasyonlar arasından seçim yapabileceğiniz birçok farklı teknik vardır.

En iyi performansı sunmak için aşağıdaki tekniklerin tümünün bir arada kullanılması gerekir:

  • Daha az bit kullanarak bilgi kodlama işlemine "sıkıştırma" denir.
  • En iyi sonucu almak için daima gereksiz verilerin ortadan kaldırılması gerekir.
  • Birçok farklı sıkıştırma tekniği ve algoritması bulunmaktadır.
  • En iyi sıkıştırma işlemi için çeşitli tekniklere ihtiyacınız olacaktır.

Verilerin boyutunu azaltma işlemi veri sıkıştırmadır. Sıkıştırma oranlarını, sıkıştırma hızını ve çeşitli sıkıştırma algoritmalarının gerektirdiği belleği iyileştirmek için birçok kişi algoritmalar, teknikler ve optimizasyonlarla katkıda bulundu.

Veri sıkıştırmaya ilişkin kapsamlı bir açıklama bu kılavuzun kapsamının çok ötesindedir. Ancak, sıkıştırmanın nasıl çalıştığını ve sayfalarınızın gerektirdiği çeşitli öğelerin boyutunu küçültmek için kullanabileceğiniz teknikleri (üst düzeyde) anlamanız önemlidir.

Bu tekniklerin temel ilkelerini açıklamak amacıyla, sadece bu örnek için tasarlanmış basit bir mesaj biçimini optimize etme sürecini değerlendirin:

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA
  1. Mesajlar, "#" önekiyle belirtilen rastgele ek açıklamalar (bazen yorumlar olarak da adlandırılır) içerebilir. Ek açıklamalar mesajın anlamını veya davranışlarını etkilemez.
  2. Mesajlar, iletinin başında görünen (önceki örnekte ":" ile ayrılmış olan) anahtar/değer çiftleri olan headers içerebilir.
  3. Mesajlarda metin yükü bulunabilir.

200 karakterden başlayan önceki mesajın boyutunu küçültmek için ne yapılabilir?

  1. Yorum ilgi çekici olsa da mesajın anlamını etkilemez. Mesajı iletirken bunları kaldırabilirsiniz.
  2. Üst bilgileri verimli bir şekilde kodlamak için başarılı teknikler bulunmaktadır. Örneğin, tüm mesajlarda "format" ve "tarih" bulunduğunu biliyorsanız bunları kısa tamsayılara dönüştürüp sadece bu tamsayıları gönderebilirsiniz. Ancak bu her zaman geçerli olmayabilir. Bu nedenle, şimdilik bu konuyu yalnız bırakmak en iyisidir.
  3. Yük yalnızca metinden ibarettir. İçeriğin gerçekten ne olduğunu bilmiyoruz (görünüşe göre "secret-cipher" kullanıyor), sadece metne baktığımızda çok fazla gereksiz olduğunu görebiliyoruz. Tekrarlanan harfleri göndermek yerine, yinelenen harf sayısını sayarak bunları daha verimli bir şekilde kodlayabilirsiniz. Örneğin "AAA", üç A'dan oluşan bir diziyi temsil eden "3A" haline gelir.

Bu tekniklerin birleştirilmesiyle şu sonuç elde edilir:

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

Yeni mesaj 56 karakter uzunluğundadır. Bu, orijinal iletiyi %72 oranında sıkıştırdığınız anlamına gelir. Bu, önemli bir azalma!

Bu, sıkıştırma algoritmalarının metin tabanlı kaynakların aktarım boyutunu azaltmada nasıl etkili olabileceğini gösteren oyuncak bir örnektir. Pratikte, sıkıştırma algoritmaları bir önceki örnekten çok daha karmaşıktır ve web'de sıkıştırma algoritmaları, kaynakların indirme sürelerini önemli ölçüde azaltmak için kullanılabilir. Metin tabanlı öğelere sıkıştırma uygulanarak bir web sayfası, kaynakları yükleme konusunda daha az zaman harcayabilir. Böylece kullanıcılar, bu kaynakların etkilerini sıkıştırma olmadan görebileceklerine göre daha erken görebilir.

Küçültme: ön işleme ve bağlama özgü optimizasyonlar

Burada ele alınan ilk teknik küçültme'dir. Küçültme kesinlikle bir sıkıştırma algoritması olmasa da kaynakların insanlar için daha okunabilir olmasını sağlamak amacıyla kaynak kodda kullanılan gereksiz ve gereksiz karakterleri kaldırmanın bir yoludur. Ancak bu okunabilirlik, ilgili kaynak kodunun üretim web sitelerinde işlevselliğini sürdürmek için gerekli değildir ve web'e kaynakların yüklenmesini geciktirebilir.

Küçültme, sunulan kaynakların boyutunu önemli ölçüde azaltabilen içeriğe özgü bir optimizasyon türüdür ve optimizasyonların, derleme ve dağıtım sürecinizin bir parçası olarak uygulanması önerilir. Örneğin paketleyiciler, web sitesine yeni üretim kodu dağıtımından hemen önce kaynakları otomatik olarak küçültebilen, yaygın olarak kullanılan bir yazılım türüdür.

Fazlalık veya gereksiz verileri sıkıştırmanın en iyi yolu bu verileri ortadan kaldırmaktır. Ancak, rastgele verileri silemezsiniz. Yine de veri biçimi ve özellikleri hakkında içeriğe özgü bilgiye sahip olduğumuz bazı bağlamlarda, yükün gerçek anlamını veya yeteneklerini etkilemeden boyutunu önemli ölçüde azaltmak mümkün.

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

Önceki HTML snippet'ini ve içerdiği üç farklı içerik türünü göz önünde bulundurun:

  1. HTML işaretlemesi.
  2. Sayfanın sunumunu özelleştirmek için CSS.
  3. Etkileşimleri ve diğer gelişmiş sayfa özelliklerini destekleyen JavaScript.

Bu içerik türlerinin her birinin geçerli içerik oluşturma konusunda farklı kuralları, yorumları belirtmek için farklı kuralları vb. vardır. Ancak akla şu soru geliyor: "Bu sayfanın boyutu nasıl küçültülebilir?"

  • Kod yorumları, geliştiricinin en iyi dostudur, ancak tarayıcı bunlara ihtiyaç duymaz! CSS (/* ... */), HTML (<!-- ... -->) ve JavaScript (// ...) yorumlarının kaldırılması, sayfanın ve alt kaynaklarının toplam aktarım boyutunu azaltır.
  • "Akıllı" bir CSS sıkıştırıcısı, .awesome-container için kural tanımlamak üzere verimsiz bir yöntem kullandığımızı fark edebilir ve iki bildirimi, diğer stilleri etkilemeden tek bir rapora daraltarak bayttan daha fazla tasarruf sağlayabilir. Çok sayıda CSS kuralında, bu tür fazlalıkların kaldırılması bir sonuca yol açabilir, ancak seçiciler genellikle medya sorguları gibi farklı bağlamlarda yinelendiğinden, agresif bir şekilde uygulanabilecek bir şey olmayabilir.
  • Boşluklar ve sekmeler, geliştiricilere HTML, CSS ve JavaScript'te kolaylık sağlar. Ek bir sıkıştırıcı, tüm sekmeleri ve boşlukları kaldırabilir. Diğer tekilleştirme tekniklerinin aksine, bu tür optimizasyon, sayfanın sunumu için bu tür boşluklar veya sekmelere gerek olmadığı sürece oldukça agresif bir şekilde uygulanabilir. Örneğin, bir HTML dokümanında kullanıcıların gerçekten göreceği içeriğin okunabilirliğini sağlamak için bir HTML dokümanında bulunan metnin içinde kalan boşlukları korumak isteyebilirsiniz.
<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

Önceki adımlar uygulandıktan sonra sayfanın uzunluğu 516'dan 204'e çıkıyor. Bu da yaklaşık %60 tasarruf anlamına geliyor. Ne yazık ki okunabilir değil ancak kullanılabilir olması için mutlaka okunması gerekmez. Modern geliştirme uygulamaları, kaynak kodunuzun iyi biçimlendirilmiş ve okunabilir sürümlerini, üretime gönderdiğiniz iyi optimize edilmiş koddan ayrı tutmanıza da olanak tanır. Dönüştürülen üretim kodunuzun okunabilir bir temsilini sağlayan kaynak haritaları ile birlikte kullanıldığında, üretim sırasındaki hataları daha kolay gidermenize olanak tanır. Bu sayede hem iyi bir geliştirici deneyimi yaşayabilir hem de kullanıcı deneyimi için performansı optimize edebilirsiniz.

Önceki örnek önemli bir noktayı gösterir: Genel amaçlı bir sıkıştırıcı (ör. rastgele bir metni sıkıştırmak için tasarlanmış), önceki örnekte sayfayı sıkıştırmak açısından oldukça başarılı olabilir, ancak yorumları çıkarmayı, CSS kurallarını daraltmayı veya içeriğe özgü onlarca optimizasyonu asla bilemez. Bu nedenle ön işleme, küçültme ve bağlama duyarlı diğer optimizasyonlar önemlidir.

Benzer şekilde, yukarıda açıklanan teknikler yalnızca metin tabanlı öğelerin ötesinde de kullanılabilir. Resim, video ve diğer içerik türlerinin kendi meta veri biçimleri ve çeşitli yükleri bulunur. Örneğin, bir fotoğraf makinesiyle fotoğraf çekerken, dosya genellikle kamera ayarları ve konum gibi pek çok ekstra bilgiyi yerleştirir. Uygulamanıza bağlı olarak bu veriler kritik öneme (örneğin, bir fotoğraf paylaşım sitesi) bağlı olabilir veya tamamen gereksiz olabilir. Kaldırmaya değip değmeyeceğine bakmalısınız. Pratikte, bu meta veriler her resme onlarca kilobayt ekleyebilir.

Kısacası, öğelerinizin verimliliğini optimize etmenin ilk adımı olarak farklı içerik türlerinden oluşan bir envanter oluşturun ve bunların boyutunu küçültmek için uygulayabileceğiniz içeriğe özgü optimizasyonları düşünün. Ardından, ne olduklarını belirledikten sonra, bu optimizasyonları derleme ve yayınlama adımlarınıza ekleyerek otomatik hale getirerek optimizasyonların üretimdeki her yeni sürüme tutarlı bir şekilde uygulanmasını sağlayın.

Sıkıştırma algoritmalarıyla metin sıkıştırma

Metin tabanlı öğelerin boyutunu küçültmenin bir sonraki adımı, bu öğelere bir sıkıştırma algoritması uygulamaktır. Bu da metin tabanlı yüklerdeki tekrarlanabilir kalıpları kullanıcıya göndermeden önce agresif bir şekilde arayarak ve kullanıcının tarayıcısına ulaştığında bunların sıkıştırmasını açarak bir adım daha ileri gider. Sonuç olarak bu kaynaklar önemli ölçüde azalır ve ardından indirme süreleri de hızlanır.

  • gzip ve Brotli, metin tabanlı öğelerde (CSS, JavaScript, HTML) en iyi performansı gösteren yaygın olarak kullanılan sıkıştırma algoritmalarıdır.
  • Tüm modern tarayıcılar gzip ve Brotli sıkıştırmasını destekler ve Accept-Encoding HTTP isteği başlığında her ikisi için de destek belirtir.
  • Sunucunuz sıkıştırmayı etkinleştirecek şekilde yapılandırılmalıdır. Web sunucusu yazılımı genellikle varsayılan olarak, metin tabanlı kaynakları sıkıştırmak için modülleri etkinleştirir.
  • Hem gzip hem de Brotli'de, sıkıştırma seviyesini düzenleyerek sıkıştırma oranlarını iyileştirmek için ince ayar yapılabilir. gzip için sıkıştırma ayarları 1 ile 9 arasında değişir ve 9 en iyisidir. Brotli için bu aralık 0-11 arasında olup 11 en iyisidir. Ancak, daha yüksek sıkıştırma ayarları daha fazla zaman gerektirir. Dinamik olarak sıkıştırılmış (yani istek anında) kaynaklar için aralığın ortasındaki ayarlar, sıkıştırma oranı ile hız arasında en iyi dengeyi sunar. Ancak statik sıkıştırma mümkündür. Bu da yanıt önceden sıkıştırıldığında gerçekleşir ve bu nedenle her bir sıkıştırma algoritması için kullanılabilen en agresif sıkıştırma ayarlarını kullanabilir.
  • İçerik Yayınlama Ağları (CDN) genellikle uygun kaynakların otomatik olarak sıkıştırılmasını sunar. CDN'ler, dinamik ve statik sıkıştırmayı sizin yerinize de yönetebilir. Bu sayede, sıkıştırmayla ilgili endişe duymanız gereken bir daha az olur.

gzip ve Brotli, herhangi bir bayt akışına uygulanabilen yaygın olarak kullanılan sıkıştırıcılardır. Gelişmiş bir sistemde, bir dosyanın önceden incelenen içeriklerinin bir kısmını hatırlar ve ardından yinelenen veri parçalarını etkili bir şekilde bulup değiştirmeye çalışırlar.

Pratikte hem gzip hem de Brotli, metin tabanlı içeriklerde en iyi performansı gösterir ve genellikle daha büyük dosyalarda% 70-90'a varan sıkıştırma oranlarına ulaşır. Bununla birlikte, zaten alternatif algoritmalar kullanılarak sıkıştırılmış olan bu algoritma öğelerini (ör. kayıpsız veya kayıplı sıkıştırma teknikleri kullanan çoğu resim biçimi) çalıştırmak, çok az iyileşme sağlar veya hiç gelişme sağlamaz.

Tüm modern tarayıcılar, Accept-Encoding HTTP istek başlığında gzip ve Brotli desteğini tanıtır. Ancak, istemci istediğinde web sunucusunun sıkıştırılmış kaynağı sunmak için doğru şekilde yapılandırıldığından emin olmak barındırma sağlayıcısının sorumluluğundadır.

Dosya Algoritma Sıkıştırılmamış boyut Sıkıştırılmış boyut Sıkıştırma oranı
angle-1.8.3.js Brotli Dili 1.346 KiB 256 KiB %81
angle-1.8.3.js gzip 1.346 KiB 329 KiB %76
angle-1.8.3.min.js Brotli Dili 173 KiB 53 KiB %69
angle-1.8.3.min.js gzip 173 KiB 60 KiB %65
jquery-3.7.1.js Brotli Dili 302 KiB 69 KiB %77
jquery-3.7.1.js gzip 302 KiB 83 KiB %73
jquery-3.7.1.min.js Brotli Dili 85 KiB 27 KiB %68
jquery-3.7.1.min.js gzip 85 KiB 30 KiB %65
lodash-4.17.21.js Brotli Dili 531 KiB 73 KiB %86
lodash-4.17.21.js gzip 531 KiB 94 KiB %82
lodash-4.17.21.min.js Brotli Dili 71 KiB 23 KiB %68
lodash-4.17.21.min.js gzip 71 KiB 25 KiB %65

Yukarıdaki tablo, Brotli ve gzip sıkıştırmasının bilinen birkaç JavaScript kitaplığı için sağlayabileceği tasarrufları göstermektedir. Tasarruflar, dosyaya ve algoritmaya bağlı olarak% 65 ile% 86 arasında değişir. Referans olması açısından, hem Brotli hem de gzip için her bir dosyaya maksimum sıkıştırma seviyesi uygulanmıştır. Mümkün olan her yerde, gzip yerine Brotli'yi tercih edin.

Sıkıştırmayı etkinleştirmek, uygulanabilecek en basit ve etkili optimizasyonlardan biridir. Web siteniz bu özellikten yararlanmıyorsa kullanıcılarınızın performansını artıracak büyük bir fırsatı kaçırıyorsunuz. Neyse ki, birçok web sunucusu bu önemli optimizasyonu mümkün kılan varsayılan yapılandırmalar sunar. Özellikle CDN'ler, sıkıştırma hızını ve oranını dengeleyecek şekilde uygulamada çok etkilidir.

Sıkıştırmayı çalışırken görmenin hızlı bir yolu Chrome Geliştirici Araçları'nı, panelini, seçtiğiniz bir sayfayı yüklemek ve ağ panelinin en altına bakmaktır.

Geliştirici Araçları, gerçek ve aktarım boyutunun karşılaştırmasını okur.
Tüm sayfa kaynaklarının aktarım boyutunun (yani sıkıştırılmış) Chrome Geliştirici Araçları'nın ağ panelinde görselleştirilmiş halinin temsilidir.

Önceki resimde olduğu gibi aşağıdakilerin dökümünü görmeniz gerekir:

  • İstek sayısı (sayfa için yüklenen kaynakların sayısıdır).
  • Tüm isteklerin aktarım boyutu. Bu, bir sayfanın kaynaklarına uygulanan sıkıştırmanın etkinliğini gösterir.
  • Tüm isteklerin kaynak boyutu. Bu boyut, sıkıştırılmış sayfa açıldıktan sonra sayfa kaynaklarının ne büyüklükte olduğunu gösterir.

Core Web Vitals üzerindeki etkiler

Bu iyileştirmeleri yansıtan metrikler yoksa performans iyileştirmeleri ölçülemez. Önemli Web Verileri girişimi, gerçek kullanıcı deneyimini yansıtan metrikler oluşturmak ve bu metrikler hakkında farkındalık oluşturmak için geliştirilmiştir. Bu durum, kullanıcı deneyimi kalitesini net bir şekilde yansıtmayan, basit sayfa yükleme süresi gibi metriklerin tersidir.

Bu kılavuzda açıklanan optimizasyonları web sitenizdeki kaynaklara uyguladığınızda, bunun Core Web Vitals üzerindeki etkileri, optimize edilen kaynaklara ve ilgili metriklere bağlı olarak değişiklik gösterebilir. Ancak, bu optimizasyonları uygulamanın web sitenizin Core Web Vitals'ı iyileştirebileceği bazı durumlar aşağıda verilmiştir:

  • Küçültülmüş ve sıkıştırılan HTML kaynakları söz konusu HTML'nin yüklenmesini ve alt kaynaklarının keşfedilebilirliğini iyileştirebilir. Böylece, bunların yüklenme durumu da iyileşir. Bu, bir sayfanın Largest Contentful Paint (LCP) özelliği için yararlı olabilir. rel="preload" gibi kaynak ipuçları, kaynakların bulunabilirliğini etkilemek için kullanılabilir. Ancak çok fazla ipucu kullanmak bant genişliği anlaşmazlığıyla ilgili sorunlara neden olabilir. Gezinme isteğine ilişkin HTML yanıtının sıkıştırılmasını sağlayarak içlerindeki kaynaklar, ön yükleme tarayıcısı tarafından mümkün olan en kısa sürede keşfedilebilir.
  • Bazı LCP adayları da sıkıştırma kullanılarak daha erken yüklenebilir. Örneğin, LCP adayı olan SVG görüntülerinin kaynak yükleme süresi metin tabanlı sıkıştırmayla kısaltılabilir. Bu, JPEG resimlerinin kayıplı sıkıştırmayı kullanma şekli gibi diğer sıkıştırma yöntemleriyle kendiliğinden sıkıştırılan diğer resim türlerinde yapacağınız optimizasyonlardan farklıdır.
  • Ek olarak, metin düğümleri LCP adayları da olabilir. Bu kılavuzda açıklanan tekniklerin, web sayfalarınızdaki metinler için bir web yazı tipi kullanıp kullanmamanıza bağlı olarak nasıl kullanılacağına bağlıdır. Web yazı tipi kullanıyorsanız web yazı tipi optimizasyonuyla ilgili en iyi uygulamalar geçerlidir. Bununla birlikte, web yazı tiplerini kullanmıyorsanız (bunun yerine, herhangi bir kaynak yükleme süresine neden olmadan gösterilen sistem yazı tiplerini) CSS'nizi küçültüp sıkıştırmak yükleme süresini kısaltır, bu da potansiyel LCP metin düğümlerinin oluşturulmasının daha erken gerçekleşebileceği anlamına gelir.

Sonuç

Metin tabanlı öğelerin kodlamasını ve aktarımını optimize etme yönteminiz, performansın temel konseptidir ancak önemli bir etkiye sahiptir. Küçültmeye ve sıkıştırmaya uygun kaynakların bu optimizasyonlardan yararlandığından emin olmak için elinizden geleni yaptığınızdan emin olun.

Daha da önemlisi, bu işlemlerin otomatikleştirildiğinden emin olun. Küçültmek için uygun kaynaklara küçültme uygulamak üzere bir paketleyici kullanın. Web sunucusu yapılandırmanızın sıkıştırmayı desteklediğinden emin olun. Ancak, bunun dışında, mümkün olan en etkili sıkıştırmayı kullanın. Bu süreci olabildiğince basit hale getirmek için, sıkıştırmayı sizin yerinize otomatikleştirmek üzere CDN'leri kullanın. CDN'ler, yalnızca kaynakları sizin için sıkıştırmakla kalmaz, aynı zamanda bunu çok hızlı bir şekilde de yapabilir.

Bu temel performans kavramlarını web sitenizin mimarisiyle bir araya getirerek, performans optimizasyonu çalışmalarınızın iyi bir temele sahip olduğundan ve sonraki optimizasyonların iyi temel uygulamalara dayanan sağlam bir temele dayanabileceğinden emin olabilirsiniz.