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

Ilya Grigorik

Jeremy Wagner

Sayfa yükleme hızını artırmak için gereksiz kaynak indirmelerini ortadan kaldırmanın yanı sıra, kalan kaynakları optimize edip sıkıştırarak toplam indirme boyutunu en aza indirebilirsiniz.

Veri sıkıştırmaya giriş

Web sitenizi, kullanılmayan kaynakların indirilmesini önleyecek şekilde ayarladıktan sonra, tarayıcı tarafından indirilmesi gereken kalan uygun kaynakları sıkıştırmanız gerekir. Kaynak türüne (metin, resim, yazı tipi vb.) bağlı olarak, aralarından seçim yapabileceğiniz birçok farklı teknik vardır: web sunucusunda etkinleştirilebilen genel araçlar, belirli içerik türleri için ön işleme optimizasyonları ve geliştiricinin girdisini gerektiren kaynağa özel optimizasyonlar.

En iyi performansı sunmak için aşağıdaki tekniklerin tümünün bir kombinasyonunu kullanmanız gerekir:

• Daha az bit kullanarak bilgiyi kodlama işlemine sıkıştırma denir.
• Gereksiz verileri ortadan kaldırmak her zaman en iyi sonuçları verir.
• Birçok farklı sıkıştırma tekniği ve algoritması bulunmaktadır.
• En iyi sıkıştırmayı elde etmek için çeşitli tekniklere ihtiyacınız vardır.

Veri boyutunu azaltma işlemine veri sıkıştırma denir. Birçok kişi, 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 algoritmalar, teknikler ve optimizasyonlar sağlamıştır.

Veri sıkıştırma hakkında ayrıntılı bilgi bu kılavuzun kapsamının çok dışındadır. Ancak sıkıştırmanın nasıl çalıştığını ve sayfalarınızın ihtiyaç duyduğu çeşitli öğelerin boyutunu küçültmek için kullanabileceğiniz teknikleri genel hatlarıyla anlamanız önemlidir.

Bu tekniklerin temel ilkelerini anlamak isterseniz yalnızca bu örnek için geliştirilmiş basit bir kısa mesaj biçimini optimize edebilirsiniz:

# 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 ve bazen yorumlar olarak da adlandırılan rastgele ek açıklamalar içerebilir. Ek açıklamalar, mesajın anlamını veya davranışlarını etkilemez.
2. Mesajlar, mesajın başında görünen anahtar/değer çiftleri olan başlıklar içerebilir (önceki örnekte ":" ile ayrılmıştır).
3. Mesajlar, metin yüklerini taşır.

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ı etkilemiyor. Mesaj iletilirken bu karakteri kaldırın.
2. Başlıkları verimli bir şekilde kodlamak için iyi teknikler vardır. Örneğin, tüm mesajların "format" ve "date" değerlerine sahip olduğunu biliyorsanız bunları kısa tam sayı kimliklerine dönüştürüp yalnızca bunları gönderebilirsiniz. Ancak bu doğru olmayabilir. Bu nedenle, şimdilik bu durumu değiştirmemenizi öneririz.
3. Yük yalnızca metindir. İçeriğinin tam olarak ne olduğunu bilmesek de ("secret-cipher" kullanıldığı anlaşılıyor) metne baktığımızda çok fazla gereksiz bilgi olduğunu görüyoruz. Tekrarlanan harfleri göndermek yerine, tekrarlanan harflerin sayısını sayabilir ve bunları daha verimli bir şekilde kodlayabilirsiniz. Örneğin, "AAA", üç A'dan oluşan bir ifadeyi temsil eden "3A" olur.

Bu tekniklerin bir arada kullanılması aşağıdaki sonucu verir:

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

Yeni mesaj 56 karakter uzunluğundadır. Yani orijinal mesajı %72 oranında sıkıştırmışsınızdır. Bu önemli bir düşüş.

Bu, sıkıştırma algoritmalarının metin tabanlı kaynakların aktarılma boyutunu azaltmada ne kadar etkili olabileceğini gösteren basit bir örnektir. Pratikte, sıkıştırma algoritmaları bir önceki örnekte gösterilenden çok daha karmaşıktır ve web'de, kaynakların indirme sürelerini önemli ölçüde kısaltmak için sıkıştırma algoritmaları kullanılabilir. Metne dayalı öğelere sıkıştırma uygulayarak web sayfası, kaynakları yükleme için daha az zaman harcayabilir. Böylece kullanıcılar, bu kaynakların etkilerini sıkıştırma olmadan göreceklerinden daha erken görebilir.

Kod sıkıştırma: ön işleme ve bağlama özgü optimizasyonlar

Burada açıklanan ilk teknik küçültme'dir. Küçültme, tam olarak bir sıkıştırma algoritması olmasa da kaynakları insanlar için daha okunaklı hale getirmek amacıyla kaynak kodda kullanılan gereksiz ve fazladan karakterleri kaldırmanın bir yoludur. Ancak bu okunabilirlik, üretim web sitelerinde kaynak kodunun işlevini korumak için gerekli değildir ve web'de kaynakların yüklenmesini geciktirebilir.

Kod sıkıştırma, yayınlanan kaynakların boyutunu önemli ölçüde azaltabilen, içeriğe özel bir optimizasyon türüdür. Bu optimizasyonlar en iyi şekilde derleme ve dağıtım sürecinizin bir parçası olarak uygulanır. Örneğin, paketleyiciler, yeni üretim kodunun bir web sitesine dağıtılmasından hemen önce kaynakları otomatik olarak küçültebilecek yaygın olarak kullanılan bir yazılım türüdür.

Yinelenen veya gereksiz verileri sıkıştırmanın en iyi yolu, bunları ortadan kaldırmaktır. Ancak istediğiniz verileri silemezsiniz. Ancak veri biçimi ve özellikleri hakkında içerike özel bilgiye sahip olduğumuz bazı bağlamlarda, gerçek anlamını veya özelliklerini etkilemeden yükü önemli ölçüde küçültmek mümkündür.

<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ü düşünün:

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

Bu içerik türlerinin her biri, nelerin geçerli içerik oluşturduğunu, yorumları vb. belirtmek için farklı kurallara sahiptir. Ancak asıl soru şudur: "Bu sayfanın boyutu nasıl küçültülebilir?"

• Kod yorumları, geliştiricilerin en iyi arkadaşıdır ancak tarayıcı için gerekli değildir. 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ı, .awesome-container için kuralları tanımlarken verimsiz bir yöntem kullandığımızı fark edebilir ve diğer stilleri etkilemeden iki beyanı tek bir beyan halinde birleştirerek daha fazla bayt tasarrufu sağlayabilir. CSS kurallarının büyük bir kısmında bu tür bir fazlalığı kaldırmak faydalı olabilir. Ancak seçiciler genellikle medya sorguları gibi farklı bağlamlarda zorunlu olarak kopyalandığından, bu işlem agresif bir şekilde uygulanamayabilir.
• Boşluklar ve sekmeler, HTML, CSS ve JavaScript'te geliştiricilere 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şluk veya sekmeler gerekli olmadığı sürece, oldukça agresif bir şekilde uygulanabilir. Örneğin, bir HTML dokümanındaki metin çalıştırmaları içindeki boşlukları, kullanıcıların gerçekten göreceği içeriğin okunabilirliğini sağladığından 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 karakter sayısı 516'dan 204'e düşer. Bu, yaklaşık %60 tasarruf anlamına gelir. Çok okunaklı olmasa da kullanılabilir olması için okunaklı olması 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ülmüş üretim kodunuzun okunabilir bir temsilini sağlayan ve üretimdeki hataları daha kolay gidermenizi sağlayan kaynak haritalarıyla birlikte kullanıldığında, hem iyi bir geliştirici deneyimi elde edebilir hem de kullanıcı deneyimi için performansı optimize edebilirsiniz.

Önceki örnekte önemli bir nokta gösterilmektedir: Genel amaçlı bir sıkıştırıcı (ör. rastgele metni sıkıştırmak için tasarlanmış bir sıkıştırıcı), önceki örnekteki sayfayı sıkıştırma konusunda oldukça iyi bir iş çıkarabilir ancak yorumları kaldırmayı, CSS kurallarını daraltmayı veya içeriğe özgü düzinelerce başka optimizasyonu yapmayı asla bilemez. Bu nedenle, ön işleme, kod küçültme ve bağlama duyarlı diğer optimizasyonlar önemlidir.

Benzer şekilde, yukarıda açıklanan teknikler yalnızca metin tabanlı öğelerin ötesine genişletilebilir. Resimler, videolar ve diğer içerik türlerinin her biri kendi meta veri biçimlerini ve çeşitli yüklerini içerir. Örneğin, kamerayla fotoğraf çektiğinizde dosyanın içine genellikle birçok ek bilgi yerleştirilir: kamera ayarları, konum vb. Uygulamanıza bağlı olarak bu veriler kritik olabilir (örneğin, bir fotoğraf paylaşım sitesi) veya tamamen gereksiz olabilir. Kaldırmaya değip değmeyeceğini değerlendirmeniz gerekir. Pratikte bu meta veriler, her resme onlarca kilobayt ekleyebilir.

Özetlemek gerekirse, öğelerinizin verimliliğini optimize etmenin ilk adımı olarak farklı içerik türlerinin envanterini oluşturun ve boyutlarını küçültmek için içeriklere özel ne tür optimizasyonlar uygulayabileceğinizi düşünün. Ardından, ne olduklarını öğrendikten sonra bu optimizasyonların üretime sunulan her yeni sürümde tutarlı bir şekilde uygulanmasını sağlamak için derleme ve yayınlama adımlarınıza ekleyerek bu optimizasyonları otomatikleştirin.

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, kullanıcıya göndermeden önce metin tabanlı yüklerde tekrarlanabilir kalıpları agresif bir şekilde arayarak ve kullanıcının tarayıcısından sonra sıkıştırmasını kaldırarak bir adım daha ileri gider. Sonuç olarak, bu kaynaklarda daha da önemli bir azalma ve daha hızlı indirme süreleri elde edilir.

• gzip ve Brotli, metne dayalı öğ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ırmayı destekler ve Accept-Encoding HTTP istek başlığında her ikisinin de desteğini gösterir.
• Sunucunuz, sıkıştırmayı etkinleştirecek şekilde yapılandırılmış olmalıdır. Web sunucusu yazılımları, genellikle modüllerin metin tabanlı kaynakları varsayılan olarak sıkıştırmasını sağlar.
• Hem gzip hem de Brotli, sıkıştırma düzeyini ayarlayarak sıkıştırma oranlarını iyileştirmek için hassas ayarlanabilir. gzip için sıkıştırma ayarları 1 ile 9 arasında değişir. 9 en iyi anlamına gelir. Brotli için bu aralık 0 ile 11 arasındadır ve 11 en iyisidir. Ancak, daha yüksek sıkıştırma ayarları daha fazla zaman gerektirir. Dinamik olarak sıkıştırılan (yani istek sırasında sıkıştırılan) kaynaklar için aralık 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 durumda yanıt önceden sıkıştırılır ve bu nedenle her sıkıştırma algoritması için mevcut en agresif sıkıştırma ayarları kullanılabilir.
• İçerik Yayınlama Ağları (CDN'ler) genellikle uygun kaynakların otomatik olarak sıkıştırılmasını sağlar. CDN'ler dinamik ve statik sıkıştırmayı sizin için de yönetebilir. Böylece, sıkıştırma konusunda endişelenmeniz gereken bir unsur daha ortadan kalkar.

gzip ve Brotli, herhangi bir bayt akışına uygulanabilen yaygın sıkıştırıcılardır. Gelişmiş olay bölümünde, bir dosyanın daha önce 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.

Gerçekte, hem gzip hem de Brotli en iyi performansı metin tabanlı içeriklerde gösterir. Bu sıkıştırma yöntemleri, genellikle büyük dosyalar için %70-90'a varan sıkıştırma oranları elde eder. Bununla birlikte, alternatif algoritmalar (ör. kayıpsız veya kayıplı sıkıştırma teknikleri kullanan çoğu resim biçimi) kullanılarak sıkıştırılmış olan bu algoritma öğelerini çalıştırmak, herhangi bir iyileşme sağlamaz.

Tüm modern tarayıcılar, Accept-Encoding HTTP istek başlığında gzip ve Brotli desteğini belirtir. Ancak web sunucusunun, istemci istekte bulunduğunda sıkıştırılmış kaynağı sunacak şekilde düzgün şekilde yapılandırılmasını sağlamak barındırma sağlayıcının sorumluluğundadır.

Önceki tabloda, hem Brotli hem de gzip sıkıştırmasının birkaç tanınmış JavaScript kitaplığında sağlayabileceği tasarruflar gösterilmektedir. Dosyaya ve algoritmaya bağlı olarak tasarruf oranı %65 ila %86 arasında değişir. Referans olarak, her dosyaya hem Brotli hem de gzip için maksimum sıkıştırma düzeyi uygulanmıştır. Mümkün olduğunda gzip yerine Brotli'yi tercih edin.

Sıkıştırmayı etkinleştirmek, uygulanabilecek en basit ve en etkili optimizasyonlardan biridir. Web siteniz bu avantajdan yararlanmıyorsa kullanıcılarınız için performansı artırma fırsatını kaçırıyorsunuz demektir. 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 uygulama konusunda son derece etkilidir.

Sıkıştırma işlemini uygulamalı olarak görmenin hızlı bir yolu, Chrome Geliştirici Araçları'nı açıp Ağ panelini açıp istediğiniz bir sayfayı yüklemek ve ağ panelinin en alt kısmını gözlemlemektir.

Önceki resimde olduğu gibi, aşağıdakilerin dökümünü görürsünüz:

• İstek sayısı (sayfa için yüklenen kaynakların sayısı).
• Tüm isteklerin aktarım boyutu. Bu değer, sayfanın kaynaklarına uygulanan sıkıştırmanın etkinliğini gösterir.
• Tüm isteklerin kaynak boyutu. Bu değer, sayfanın sıkıştırılmış kaynaklarının sıkıştırılmadan önceki boyutunu gösterir.

Core Web Vitals üzerindeki etkiler

Bu iyileştirmeleri yansıtan metrikler olmadığı sürece performans iyileştirmeleri ölçülemez. Core Web Vitals girişimi, gerçek kullanıcı deneyimini yansıtan metrikler oluşturmak ve bu metrikler hakkında farkındalık yaratmak için vardır. Bu, kullanıcı deneyimi kalitesiyle net bir şekilde ilişkili olmayan metriklerin (ör. basit sayfa yükleme süresi) aksinedir.

Bu kılavuzda açıklanan optimizasyonları web sitenizdeki kaynaklara uyguladığınızda Önemli Web Verileri'ndeki etkiler, optimize edilen kaynaklara ve ilgili metriklere göre değişiklik gösterebilir. Bununla birlikte, bu optimizasyonları uygulamanın web sitenizin Core Web Vitals performansını iyileştirebileceği bazı örnekler aşağıda verilmiştir:

• Küçükleştirilmiş ve sıkıştırılmış HTML kaynakları, söz konusu HTML'nin yüklenmesini ve alt kaynaklarının bulunabilirliğini iyileştirebilir. Bu da alt kaynakların yüklenmesini iyileştirir. Bu, sayfanın Largest Contentful Paint (LCP) değeri için yararlı olabilir. rel="preload" gibi kaynak ipuçları, kaynakların bulunabilirliğini etkilemek için kullanılabilir. Ancak çok fazla kaynak ipucu kullanmak bant genişliği çekişmesi sorunlarına neden olabilir. Bir gezinme isteği için HTML yanıtının sıkıştırıldığından emin olarak, içindeki kaynaklar önceden yükleme tarayıcısıyla en kısa sürede keşfedilebilir.
• Bazı LCP adayları, sıkıştırma kullanılarak da daha erken yüklenebilir. Örneğin, LCP adayı olan SVG resimlerinin kaynak yükleme süresi, metne dayalı sıkıştırma yoluyla azaltılabilir. Bu, JPEG resimlerin kayıplı sıkıştırma kullanması gibi diğer sıkıştırma yöntemleriyle sıkıştırılan diğer resim türlerinde yapacağınız optimizasyonlardan farklıdır.
• Ayrıca, metin düğümleri de LCP adayı olabilir. Bu kılavuzda açıklanan tekniklerin nasıl kullanılacağı, web sayfalarınızdaki metinler için web yazı tipi kullanıp kullanmadığınıza bağlıdır. Web yazı tipi kullanıyorsanız web yazı tipi optimizasyonuyla ilgili en iyi uygulamalar geçerlidir. Ancak web yazı tiplerini kullanmıyorsanız (yerine herhangi bir kaynak yükleme süresi gerektirmeden görüntülenen sistem yazı tiplerini kullanıyorsanız) CSS'nizi küçültmek ve sıkıştırmak bu süreyi azaltır. Bu da olası LCP metin düğümlerinin daha erken oluşturulabileceği anlamına gelir.

Sonuç

Metin tabanlı öğelerin kodlamasını ve aktarımını optimize etme şekliniz, temel performans kavramıdır ancak büyük bir etkiye sahiptir. Küçükleştirme ve sıkıştırmaya uygun kaynakların bu optimizasyonlardan yararlanması için elinizden geleni yaptığınızdan emin olun.

Daha da önemlisi, bu süreçlerin otomatikleştirildiğinden emin olun. Küçültme 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 bundan daha fazlası da mevcut olan en etkili sıkıştırmayı kullanın. Bu işlemi olabildiğince basitleştirmek için CDN'leri kullanın. CDN'ler, kaynakları sizin için sıkıştırmakla kalmaz, aynı zamanda bunu çok hızlı bir şekilde yapar.

Bu temel performans kavramlarını web sitenizin mimarisine yerleştirerek performans optimizasyonu çalışmalarınızın sağlam bir temele sahip olmasını ve sonraki optimizasyonların iyi temel uygulamalardan oluşan sağlam bir temele dayanmasını sağlayabilirsiniz.