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

Ilya Grigorik

Jeremy Wagner

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ırmaya giriş

Web sitenizi kullanılmayan kaynakları indirmeyecek şekilde ayarladıktan sonraki adım, tarayıcının indirmesi gereken kalan uygun kaynakları sıkıştırmaktır. 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ştiriciden giriş gerektiren kaynağa özgü optimizasyonlar.

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

• Sıkıştırma, bilgileri daha az bit kullanarak kodlama işlemidir.
• Gereksiz verileri kaldırmak her zaman en iyi sonuçları verir.
• Birçok farklı sıkıştırma tekniği ve algoritması vardır.
• En iyi sıkıştırmayı elde etmek için çeşitli teknikler kullanmanız gerekir.

Veri boyutunu küçültme 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 sunmuştur.

Veri sıkıştırma konusunun kapsamlı bir şekilde ele alınması 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 genel olarak anlamanız önemlidir.

Bu tekniklerin temel ilkelerini göstermek için yalnızca bu örnek için oluşturulmuş basit bir kısa mesaj biçimini optimize etme sürecini ele alalım:

# 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. İletiler, bazen yorum olarak da adlandırılan ve "#" önekiyle belirtilen 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 (önceki örnekte ":" ile ayrılmış) olan başlıklar içerebilir.
3. Mesajlar, metin yükleri taşır.

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

1. Yorum ilginç olsa da iletinin anlamını etkilemiyor. Mesajı iletirken bu bilgiyi ortadan kaldırın.
2. Başlıkları verimli bir şekilde kodlamak için iyi teknikler vardır. Örneğin, tüm mesajlarda "biçim" ve "tarih" olduğunu biliyorsanız bunları kısa tam sayı kimliklerine dönüştürüp gönderebilirsiniz. Ancak bu doğru olmayabilir. Bu nedenle, şimdilik bu ayarı değiştirmemeniz önerilir.
3. Yük yalnızca metin içerir. İçeriğin gerçekte ne olduğunu bilmesek de (görünüşe göre "secret-cipher" kullanılıyor) sadece metne bakarak çok fazla gereksiz bilgi olduğunu görebiliyoruz. Belki de tekrarlanan harfleri göndermek yerine, tekrarlanan harflerin sayısını sayıp daha verimli bir şekilde kodlayabilirsiniz. Örneğin, "AAA", üç A'dan oluşan bir diziyi temsil eden "3A" olur.

Bu tekniklerin birleştirilmesi aşağıdaki sonucu verir:

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

Yeni mesaj 56 karakter uzunluğunda. Bu, orijinal mesajı %72 oranında sıkıştırdığınız anlamına geliyor. Bu önemli bir düşüş.

Bu, sıkıştırma algoritmalarının metin tabanlı kaynakların aktarım boyutunu azaltmada ne kadar etkili olabileceğine dair basit bir örnektir. Uygulamada, sıkıştırma algoritmaları önceki örnekte gösterilenden çok daha karmaşıktır ve web'de kaynakların indirme sürelerini önemli ölçüde azaltmak için sıkıştırma algoritmaları kullanılabilir. Metin tabanlı öğelere sıkıştırma uygulandığında web sayfası kaynakları yüklemek için daha az zaman harcar. Böylece kullanıcılar, bu kaynakların etkilerini sıkıştırma olmadan göreceklerinden daha kısa sürede 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 kaynak kodda kullanılan gereksiz ve yedekli karakterleri kaldırarak kaynakları insanlar için daha okunabilir hale getirme yöntemidir. Ancak bu okunabilirlik, kaynak kodun üretim web sitelerindeki işlevselliğini korumak için gerekli değildir ve web'deki kaynakların yüklenmesini geciktirebilir.

Küçültme, içeriğe özel bir optimizasyon türüdür. Sunulan kaynakların boyutunu önemli ölçüde azaltabilir. Bu optimizasyonlar, derleme ve dağıtım sürecinizin bir parçası olarak en iyi şekilde uygulanır. Örneğin, paketleyiciler, yeni üretim kodunun bir web sitesine dağıtımından hemen önce kaynakları otomatik olarak küçültebilen, 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 rastgele verileri silemezsiniz. Ancak veri biçimi ve özellikleri hakkında içeriğe özgü bilgiye sahip olduğumuz bazı bağlamlarda, yükün boyutunu gerçek anlamını veya özelliklerini etkilemeden önemli ölçüde azaltmak 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ü göz önünde bulundurun:

1. HTML biçimlendirmesi.
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 birinde geçerli içerik, yorum belirtme vb. ile ilgili farklı kurallar vardır. Ancak asıl soru, "Bu sayfanın boyutu nasıl küçültülebilir?"

• Kod yorumları, geliştiricilerin en iyi dostudur ancak tarayıcının bunlara ihtiyacı yoktur. CSS (/* ... */), HTML (<!-- ... -->) ve JavaScript (// ...) yorumlarının kaldırılması, sayfanın ve alt kaynaklarının toplam aktarım boyutunu küçültür.
• "Akıllı" bir CSS sıkıştırıcı, .awesome-container için kuralları verimsiz bir şekilde tanımladığımızı fark edebilir ve diğer stilleri etkilemeden iki bildirimi tek bir bildirimde birleştirerek daha fazla bayt tasarrufu sağlayabilir. Bu tür bir gereksizliğin büyük bir CSS kuralı grubundan kaldırılması, toplamda önemli bir fark yaratabilir. Ancak seçiciler genellikle medya sorguları gibi farklı bağlamlarda zorunlu olarak tekrarlandığından bu işlem agresif bir şekilde uygulanamayabilir.
• Boşluklar ve sekmeler, HTML, CSS ve JavaScript'te geliştiricilere kolaylık sağlayan unsurlardır. Ek bir sıkıştırıcı, tüm sekmeleri ve boşlukları kaldırabilir. Diğer tekilleştirme tekniklerinin aksine, bu tür bir optimizasyon, söz konusu boşluklar veya sekmeler sayfanın sunumu için gerekli olmadığı sürece oldukça agresif bir şekilde uygulanabilir. Örneğin, HTML belgesindeki metin dizilerinde yer alan boşlukları korumak isteyebilirsiniz. Bu boşluklar, kullanıcıların gerçekten göreceği içeriğin okunabilirliğini sağlar.

<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 sayfa 516 karakterden 204 karaktere düşer. Bu da yaklaşık %60 tasarruf anlamına gelir. Bu kodun çok okunaklı olmadığı doğru olsa da kullanılabilmesi 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 gösterimini sağlayan kaynak haritalarıyla birlikte kullanıldığında, üretimdeki hataları daha kolay giderebilirsiniz. Böylece, kullanıcı deneyimi için performansı optimize ederken iyi bir geliştirici deneyimi de yaşayabilirsiniz.

Önceki örnek önemli bir noktayı gösteriyor: Genel amaçlı bir sıkıştırıcı (örneğin, 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ü diğer optimizasyonları 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 ötesine de taşınabilir. Resimler, videolar ve diğer içerik türlerinin tümünde kendi meta verileri ve çeşitli yükler bulunur. Örneğin, kamerayla fotoğraf çektiğinizde dosya genellikle kamera ayarları, konum vb. gibi birçok ek bilgi içerir. Uygulamanıza bağlı olarak bu veriler kritik olabilir (ör. fotoğraf paylaşım sitesi) veya tamamen işe yaramaz olabilir. Kaldırmaya değip değmeyeceğini değerlendirmeniz gerekir. Uygulamada, bu meta veriler her resim için on binlerce kilobayt ekleyebilir.

Kısacası, öğelerinizin verimliliğini optimize etme sürecinde ilk adım olarak farklı içerik türlerinin envanterini oluşturun ve boyutlarını küçültmek için ne tür içeriğe özel optimizasyonlar uygulayabileceğinizi düşünün. Ardından, bu optimizasyonların ne olduğunu öğrendikten sonra, üretimdeki her yeni yayın için optimizasyonların tutarlı bir şekilde uygulanmasını sağlamak amacıyla bunları derleme ve yayınlama adımlarınıza ekleyerek otomatikleştirin.

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

Metin tabanlı öğelerin boyutunu küçültmek için sonraki adım, bu öğelere bir sıkıştırma algoritması uygulamaktır. Bu özellik, metin tabanlı yüklerde tekrarlanabilir kalıpları kullanıcıya göndermeden önce agresif bir şekilde arayarak ve kullanıcı tarayıcısına ulaştıktan sonra sıkıştırmayı açarak bir adım daha ileri gider. Sonuç olarak bu kaynaklar daha da önemli ölçüde azaltılır ve indirme süreleri kısalı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ırmayı destekler ve Accept-Encoding HTTP istek başlığında her ikisi için de destek olduğunu belirtir.
• Sunucunuz sıkıştırmayı etkinleştirecek şekilde yapılandırılmış olmalıdır. Web sunucusu yazılımı genellikle metin tabanlı kaynakları sıkıştırmak için modülleri varsayılan olarak etkinleştirir.
• Hem gzip hem de Brotli, sıkıştırma düzeyini ayarlayarak sıkıştırma oranlarını iyileştirecek şekilde ince ayarlanabilir. Gzip için sıkıştırma ayarları 1 ile 9 arasında değişir. En iyi ayar 9'dur. Brotli için bu aralık 0 ile 11 arasındadır ve 11 en iyi değerdir. 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) kaynaklar için aralığın ortasındaki ayarlar, sıkıştırma oranı ve hız arasında en iyi dengeyi sunar. Ancak, yanıtın önceden sıkıştırıldığı ve bu nedenle her sıkıştırma algoritması için mevcut en agresif sıkıştırma ayarlarını kullanabildiği statik sıkıştırma mümkündür.
• İç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ı da sizin için yönetebilir. Böylece, sıkıştırmayla ilgili endişelenmeniz gereken bir nokta daha azalır.

gzip ve Brotli, herhangi bir bayt akışına uygulanabilen yaygın sıkıştırıcılar arasındadır. Bu araçlar, bir dosyanın daha önce incelenen içeriklerinden bazılarını hatırlar ve ardından yinelenen veri parçalarını verimli bir şekilde bulup değiştirmeye çalışır.

Uygulamada hem gzip hem de Brotli, metin tabanlı içeriklerde en iyi performansı gösterir ve genellikle daha büyük dosyalar için% 70-90'a varan sıkıştırma oranları elde eder. Ancak, alternatif algoritmalar kullanılarak halihazırda sıkıştırılmış olan bu algoritmaları (kayıpsız veya kayıplı sıkıştırma tekniklerini kullanan çoğu resim biçimi gibi) çalıştırmak çok az veya hiç iyileşme sağlar.

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

Yukarıdaki tabloda, hem Brotli hem de gzip sıkıştırmanın birkaç iyi bilinen JavaScript kitaplığı için sağlayabileceği tasarruf gösterilmektedir. Dosyaya ve algoritmaya bağlı olarak% 65 ile% 86 arasında tasarruf sağlanır. Referans olarak, hem Brotli hem de gzip için her dosyaya maksimum sıkıştırma düzeyi uygulanmıştır. Mümkün olan her yerde gzip yerine Brotli'yi tercih edin.

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

Sıkıştırmanın nasıl çalıştığını hızlıca görmek için Chrome Geliştirici Araçları'nı açın, Ağ panelini açın, istediğiniz bir sayfayı yükleyin ve ağ panelinin en alt kısmını inceleyin.

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

• İstek sayısı, sayfaya yüklenen kaynakların sayısıdır.
• Tüm isteklerin aktarım boyutu. Bu, bir sayfanın kaynaklarından herhangi birine uygulanan sıkıştırmanın etkinliğini yansıtır.
• Tüm isteklerin kaynak boyutu. Bu metrik, sayfanın kaynaklarının sıkıştırması açıldıktan sonra ne kadar büyük olduğunu gösterir.

Core Web Vitals üzerindeki etkiler

Performans iyileştirmeleri, bu iyileştirmeleri yansıtan metrikler olmadığı sürece ö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 başlatılmıştır. Bu, örneğin basit sayfa yükleme süresi gibi kullanıcı deneyimi kalitesine net bir şekilde yansımayan metriklerin aksine bir durumdur.

Bu kılavuzda belirtilen optimizasyonları web sitenizdeki kaynaklara uyguladığınızda, optimize edilen kaynaklara ve ilgili metriklere bağlı olarak Core Web Vitals üzerindeki etkiler değişebilir. Ancak, bu optimizasyonları uygulamanın web sitenizin Core Web Vitals puanını iyileştirebileceği bazı durumlar aşağıda verilmiştir:

• Küçültülmüş ve sıkıştırılmış HTML kaynakları, söz konusu HTML'nin yüklenmesini ve alt kaynaklarının keşfedilebilirliğini artırarak yüklenme sürelerini kısaltabilir. Bu, bir sayfanın Largest Contentful Paint (LCP) değeri için faydalı 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 anlaşmazlığıyla ilgili sorunlara neden olabilir. Bir gezinme isteği için HTML yanıtının sıkıştırıldığından emin olarak, içindeki kaynakların önceden yükleme tarayıcısı tarafından mümkün olan en kısa sürede keşfedilmesini sağlayabilirsiniz.
• Bazı LCP adayları, sıkıştırma kullanılarak daha hızlı yüklenebilir. Örneğin, LCP adayları olan SVG resimlerinin kaynak yükleme süresi, metin tabanlı sıkıştırma ile azaltılabilir. Bu, diğer resim türlerinde yapacağınız optimizasyonlardan farklıdır. Diğer resim türleri, JPEG resimlerin kayıplı sıkıştırma kullanması gibi, doğası gereği diğer sıkıştırma yöntemleriyle sıkıştırılır.
• Ayrıca, metin düğümleri de LCP adayları olabilir. Bu kılavuzda açıklanan tekniklerin uygulanabilirliği, web sayfalarınızdaki metinlerde 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ı tipleri kullanmıyorsanız (bunun yerine herhangi bir kaynak yükleme süresi olmadan görüntülenen sistem yazı tiplerini kullanıyorsanız) CSS'nizi küçültmek ve sıkıştırmak bu süreyi kısaltı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ı nasıl optimize ettiğiniz, temel bir performans kavramıdır ancak büyük bir etkiye sahiptir. Küçültme ve sıkıştırma için 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 ve en etkili sıkıştırma yöntemini kullanın. Bu işlemi olabildiğince kolay hale getirmek için CDN'leri kullanarak sıkıştırma işlemini otomatikleştirin. CDN'ler yalnızca kaynakları sıkıştırmakla kalmaz, aynı zamanda bunu çok hızlı bir şekilde yapabilir.

Bu temel performans kavramlarını web sitenizin mimarisine yerleştirerek performans optimizasyonu çalışmalarınızın iyi bir temele oturmasını ve sonraki optimizasyonların iyi temel uygulamalardan oluşan sağlam bir temel üzerine inşa edilmesini sağlayabilirsiniz.