Gereksiz kaynak indirme işlemlerini 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 seçebileceğ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 ortadan 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 geliştirmiştir.
Veri sıkıştırma konusunun ayrıntılı bir şekilde ele alınması bu kılavuzun kapsamı 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 olarak anlamanız önemlidir.
Bu tekniklerin temel ilkelerini açıklamak 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
- Mesajlar, bazen yorum olarak da adlandırılan ve "#" ön ekiyle belirtilen rastgele ek açıklamalar içerebilir. Ek açıklamalar, mesajın anlamını veya davranışlarını etkilemez.
- Mesajlar, mesajın başında görünen anahtar/değer çiftleri (önceki örnekte
":"ile ayrılmış) olan başlıklar içerebilir. - Mesajlar, metin yükleri taşır.
200 karakterden başlayan önceki mesajın boyutunu küçültmek için ne yapılabilir?
- Yorum ilginç ancak mesajın anlamını etkilemiyor. Mesajı iletirken bu bilgileri kaldırın.
- Üstbilgileri 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 yalnızca bunları gönderebilirsiniz. Ancak bu doğru olmayabilir. Bu nedenle, şimdilik bu konuyu bir kenara bırakmak en iyisidir.
- Yük yalnızca metindir. İçeriğin ne olduğunu tam olarak bilmesek de (görünüşe göre
"secret-cipher"kullanıyor) yalnızca metne bakarak çok fazla gereksiz bilgi olduğunu anlayabiliriz. Tekrarlanan harfleri göndermek yerine, tekrarlanan harflerin sayısını sayıp daha verimli bir şekilde kodlayabilirsiniz. Örneğin,"AAA","3A"olur. Bu, üç A'dan oluşan bir diziyi temsil eder.
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 gelir. Bu önemli bir düşüş.
Bu, sıkıştırma algoritmalarının metin tabanlı kaynakların aktarım boyutunu azaltmada nasıl etkili olabileceğine dair basit bir örnektir. Pratikte sıkıştırma algoritmaları, önceki örnekte gösterilenden ç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 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 uygulanmadığı duruma göre daha erken görebilir.
Sadeleştirme: Ön işleme ve bağlama özgü optimizasyonlar
Burada ele alınan ilk teknik sadeleştirmedir. Sadeleştirme, tam olarak bir sıkıştırma algoritması olmasa da kaynak kodda kullanılan gereksiz ve fazla karakterleri kaldırarak kaynakların insanlar tarafından daha kolay okunmasını sağlar. Ancak bu okunabilirlik, üretim web sitelerinde kaynak kodun işlevselliğini korumak için gerekli değildir ve web'deki kaynakların yüklenmesini geciktirebilir.
Sadeleştirme, sunulan kaynakların boyutunu önemli ölçüde azaltabilen, içeriğe özgü bir optimizasyon türüdür. 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ılmasından hemen önce kaynakları otomatik olarak sadeleştirebilen, yaygın olarak kullanılan bir yazılım türüdür.
Gereksiz verileri sıkıştırmanın en iyi yolu, bu verileri ortadan kaldırmaktır. Ancak rastgele verileri silemezsiniz. Ancak veri biçimi ve özellikleri hakkında içeriğe özel bilgiye sahip olduğumuz bazı bağlamlarda, gerçek anlamını veya özelliklerini etkilemeden yükün boyutunu ö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ü ele alalım:
- HTML işaretlemesi.
- Sayfanın sunumunu özelleştirmek için CSS.
- Etkileşimleri ve diğer gelişmiş sayfa özelliklerini destekleyen JavaScript.
Bu içerik türlerinin her birinde, geçerli içeriğin ne olduğu, yorumların nasıl belirtileceği vb. konularla ilgili farklı kurallar vardır. Ancak "Bu sayfanın boyutu nasıl küçültülebilir?" sorusu hâlâ yanıtlanmayı bekliyor.
- Kod yorumları geliştiricilerin en iyi dostudur ancak tarayıcının bunlara ihtiyacı yoktur. CSS (
/* ... */), HTML (<!-- ... -->) ve JavaScript (// ...) yorumlarını kaldırmak, sayfanın ve alt kaynaklarının toplam aktarım boyutunu azaltır. - "Akıllı" bir CSS sıkıştırıcı,
.awesome-containeriçin kuralları tanımlarken verimsiz bir yöntem kullandığımızı fark edebilir ve diğer stilleri etkilemeden iki bildirimi tek bir bildirimde birleştirerek daha fazla bayt tasarrufu sağlayabilir. Büyük bir CSS kuralı grubunda bu tür fazlalıkları kaldırmak faydalı olabilir ancak seçiciler genellikle medya sorguları gibi farklı bağlamlarda kopyalandığından 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 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, bir HTML belgesindeki metin dizilerinde bulunan boşlukları korumak istersiniz, çünkü bu boşluklar kullanıcıların 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ı uyguladıktan sonra sayfa 516 karakterden 204 karaktere düşer. Bu da yaklaşık %60 tasarruf sağlar. Ç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 kaynak haritalar ile birlikte, üretimdeki hataları daha kolay giderebilirsiniz. Böylece, kullanıcı deneyimi için performansı optimize ederken iyi bir geliştirici deneyimi de elde edebilirsiniz.
Önceki örnek önemli bir noktayı gösteriyor: Genel amaçlı bir sıkıştırıcı (örneğin, rastgele metinleri 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 düzinelerce optimizasyonu asla bilemez. Bu nedenle ön işleme, sadeleştirme ve içeriğe duyarlı diğer optimizasyonlar önemlidir.
Benzer şekilde, yukarıda açıklanan teknikler yalnızca metin tabanlı öğelerin ötesine de genişletilebilir. Resimler, videolar ve diğer içerik türlerinin tümü kendi meta veri biçimlerini ve çeşitli yükleri içerir. Örneğin, kamerayla fotoğraf çektiğinizde dosya genellikle kamera ayarları, konum vb. birçok ek bilgi içerir. Uygulamanıza bağlı olarak bu veriler kritik öneme sahip olabilir (ör. fotoğraf paylaşım sitesi) veya tamamen işe yaramaz olabilir. Bu durumda, kaldırmaya değip değmeyeceğini değerlendirmeniz gerekir. Uygulamada bu meta veriler, her resim için onlarca kilobayta kadar çıkabilir.
Kısacası, öğelerinizin verimliliğini optimize etmenin ilk adımı olarak farklı içerik türlerinden oluşan bir envanter 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ı belirledikten sonra, derleme ve yayınlama adımlarınıza ekleyerek otomatikleştirin. Böylece optimizasyonlar, her yeni üretim sürümüne tutarlı bir şekilde uygulanır.
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 yöntem, metin tabanlı yükleri kullanıcıya göndermeden önce agresif bir şekilde tekrarlanabilir kalıplar arayarak ve kullanıcı tarayıcısına ulaştıklarında 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-EncodingHTTP istek başlığında her ikisi için de destek bildirir. - Sunucunuzun sıkıştırmayı etkinleştirecek şekilde yapılandırılması gerekir. Web sunucusu yazılımı, metin tabanlı kaynakları sıkıştırmak için genellikle modülleri varsayılan olarak etkinleştirir.
- Hem gzip hem de Brotli, sıkıştırma seviyesi ayarlanarak sıkıştırma oranlarını iyileştirmek için hassas bir şekilde ayarlanabilir. Gzip için sıkıştırma ayarları 1 ile 9 arasında değişir. 9 en iyi sıkıştırma ayarıdır. Brotli için bu aralık 0 ile 11 arasındadır ve 11 en iyi sıkıştırma düzeyidir. 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ığın ortasındaki ayarlar, sıkıştırma oranı ile hız arasında en iyi dengeyi sunar. Ancak yanıtın önceden sıkıştırıldığı statik sıkıştırma mümkündür. Bu nedenle, her sıkıştırma algoritması için mevcut olan 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ı da sizin için yönetebilir. Böylece sıkıştırma konusunda endişelenmeniz gereken bir konu daha azalır.
gzip ve Brotli, her türlü bayt akışına uygulanabilen yaygın sıkıştırıcılardır. Arka planda, 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ışırlar.
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 bu algoritmaları, kayıpsız veya kayıplı sıkıştırma teknikleri kullanan çoğu resim biçimi gibi alternatif algoritmalar kullanılarak zaten sıkıştırılmış öğeler üzerinde çalıştırmak çok az iyileştirme sağlar veya hiç sağlamaz.
Tüm modern tarayıcılar, Accept-Encoding HTTP istek başlığında gzip ve Brotli desteğini bildirir. Ancak istemci sıkıştırılmış kaynağı istediğinde web sunucusunun bu kaynağı sunacak şekilde doğru 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ı |
|---|---|---|---|---|
| angular-1.8.3.js | Brotli | 1.346 KiB | 256 KiB | %81 |
| angular-1.8.3.js | gzip | 1.346 KiB | 329 KiB | %76 |
| angular-1.8.3.min.js | Brotli | 173 KiB | 53 KiB | %69 |
| angular-1.8.3.min.js | gzip | 173 KiB | 60 KiB | %65 |
| jquery-3.7.1.js | Brotli | 302 KiB | 69 KiB | %77 |
| jquery-3.7.1.js | gzip | 302 KiB | 83 KiB | %73 |
| jquery-3.7.1.min.js | Brotli | 85 KiB | 27 KiB | %68 |
| jquery-3.7.1.min.js | gzip | 85 KiB | 30 KiB | %65 |
| lodash-4.17.21.js | Brotli | 531 KiB | 73 KiB | %86 |
| lodash-4.17.21.js | gzip | 531 KiB | 94 KiB | %82 |
| lodash-4.17.21.min.js | Brotli | 71 KiB | 23 KiB | %68 |
| lodash-4.17.21.min.js | gzip | 71 KiB | 25 KiB | %65 |
Yukarıdaki tabloda, hem Brotli hem de gzip sıkıştırmasının birkaç tanınmış JavaScript kitaplığı için sağlayabileceği tasarruflar gösterilmektedir. Dosyaya ve algoritmaya bağlı olarak %65 ila %86 arasında tasarruf sağlanır. Referans olarak, hem Brotli hem de gzip için her dosyaya maksimum sıkıştırma seviyesi uygulandı. 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 özellikten yararlanmıyorsa kullanıcılarınız için performansı artırma konusunda 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 sağlar ve özellikle CDN'ler, sıkıştırma hızını ve oranını dengeleyecek şekilde bu optimizasyonu uygulamada çok etkilidir.
Sıkıştırmanın nasıl çalıştığını görmenin hızlı bir yolu, Chrome Geliştirici Araçları'nı açmak, Ağ panelini açmak, seçtiğiniz bir sayfayı yüklemek ve ağ panelinin en altını incelemektir.
Ö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ıdır.
- Tüm isteklerin aktarım boyutu. Bu, bir sayfanın kaynaklarından herhangi birine uygulanan sıkıştırmanın etkililiğini yansıtır.
- Tüm isteklerin kaynak boyutu. Bu, sayfa 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 olmadan ölçülemez. Core Web Vitals girişimi, gerçek kullanıcı deneyimini yansıtan metrikler oluşturmak ve bu metriklerle ilgili farkındalığı artırmak için başlatılmıştır. Bu, kullanıcı deneyimi kalitesini net bir şekilde yansıtmayan metriklere (ör. basit sayfa yükleme süresi) kıyasla daha avantajlıdır.
Bu kılavuzda açıklanan optimizasyonları web sitenizdeki kaynaklara uyguladığınızda, Core Web Vitals üzerindeki etkiler, optimize edilen kaynaklara ve ilgili metriklere göre değişiklik gösterebilir. Ancak bu optimizasyonları uygulamanın web sitenizin Core Web Vitals'ını iyileştirebileceği bazı durumlar şunlardır:
- Sadeleştirilmiş ve sıkıştırılmış HTML kaynakları, söz konusu HTML'nin yüklenmesini ve alt kaynaklarının keşfedilebilirliğini iyileştirebilir. Bu sayede alt kaynakların yüklenmesi de iyileşir. Bu, sayfanın Largest Contentful Paint (LCP) metriği için faydalı olabilir.
rel="preload"gibi kaynak ipuçları, kaynakların bulunabilirliğini etkilemek için kullanılabilir ancak çok fazla kullanılması bant genişliği çakışmasıyla ilgili sorunlara neden olabilir. 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ı tarafından mümkün olan en kısa sürede keşfedilebilir. - Bazı LCP adayları, sıkıştırma kullanılarak daha erken yüklenebilir. Örneğin, LCP adayı olan SVG resimlerinin kaynak yükleme süresi, metin tabanlı sıkıştırma yoluyla azaltılabilir. Bu, diğer resim türlerinde (ör. JPEG resimlerde kayıplı sıkıştırma kullanılır) yaptığınız optimizasyonlardan farklıdır. Diğer resim türleri, diğer sıkıştırma yöntemleriyle sıkıştırılı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ı tipleri kullanmıyorsanız (herhangi bir kaynak yükleme süresi olmadan görüntülenen sistem yazı tiplerini kullanıyorsanız) CSS'nizi sadeleştirip sıkıştırmak bu süreyi azaltır. Bu da potansiyel LCP metin düğümlerinin daha erken oluşturulabileceği anlamına gelir.
Sonuç
Metin tabanlı öğelerin kodlanmasını ve aktarılmasını optimize etme şekliniz, temel bir performans kavramıdır ancak büyük bir etkiye sahiptir. Sadeleş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. Sadeleştirme için uygun kaynaklara sadeleştirme uygulamak üzere bir paketleyici kullanın. Web sunucusu yapılandırmanızın sıkıştırmayı desteklediğinden emin olun, ancak bundan daha da önemlisi, mevcut en etkili sıkıştırmayı kullanın. Bu işlemi olabildiğince kolaylaştırmak için CDN'leri kullanarak sıkıştırmayı otomatik hale getirin. CDN'ler, kaynakları sizin için 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 oturduğundan ve sonraki optimizasyonların iyi temel uygulamalardan oluşan sağlam bir temele dayanabileceğinden emin olabilirsiniz.