En hızlı ve en iyi optimize edilmiş kaynak, gönderilmeyen kaynaktır. Uygulamanızdan gereksiz kaynakları kaldırmanız gerekir. Ekiple örtük ve açık varsayımları sorgulamak ve düzenli olarak tekrar gözden geçirmek iyi bir uygulamadır. Aşağıda birkaç örnek verilmiştir:
- X kaynağını sayfalarınıza her zaman dahil ettiniz, ancak kaynağı indirip görüntülemenin maliyeti, kullanıcıya sağladığı değeri karşılıyor mu? Değerini ölçebilir ve kanıtlayabilir misiniz?
- Kaynak (özellikle üçüncü taraf kaynağıysa) tutarlı bir performans sağlıyor mu? Bu kaynak kritik yolda mı yoksa kritik yolda olması gerekiyor mu? Kaynak kritik yoldaysa site için tek bir hata noktası olabilir mi? Yani, kaynak kullanılamıyorsa sayfalarınızın performansını ve kullanıcı deneyimini etkiler mi?
- Bu kaynağın HDS'ye ihtiyacı var mı veya HDS'si var mı? Bu kaynak, sıkıştırma, önbelleğe alma vb. performansla ilgili en iyi uygulamaları izliyor mu?
Sayfalar genellikle gereksiz kaynaklar içerir veya daha da kötüsü, ziyaretçiye ya da barındırıldığı siteye çok fazla değer sağlamadan sayfa performansını engeller. Bu, birinci taraf ve üçüncü taraf kaynakları ve widget'ları için eşit şekilde geçerlidir:
- A sitesi, ziyaretçilerin tek bir tıklamayla birden fazla fotoğrafı önizlemesine olanak tanımak için ana sayfasında bir fotoğraf bandı göstermeye karar vermiştir. Sayfa yüklendiğinde tüm fotoğraflar yüklenir ve kullanıcı fotoğraflar arasında ilerler.
- Soru: Bantta birden fazla fotoğrafı kaç kullanıcının görüntülediğini ölçtünüz mü? Çoğu ziyaretçinin hiçbir zaman görüntülemediği kaynakları indirerek yüksek maliyetlere neden olabilirsiniz.
- B sitesi, alakalı içerik görüntülemek, sosyal etkileşimi artırmak veya başka bir hizmet sunmak için üçüncü taraf widget'ı yüklemeye karar vermiştir.
- Soru: Widget'ı kaç ziyaretçinin kullandığını veya widget'ın sağladığı içeriği tıkladığını izlediniz mi? Bu widget'ın oluşturduğu etkileşim, maliyetini karşılamaya yetiyor mu? Ayrıca, komut dosyasının ihtiyaç duyulana kadar yüklenmediğinden emin olmak için bir yükleme stratejisi kullanmanız mümkün mü?
Gereksiz indirmeleri ortadan kaldırıp kaldırmayacağınızı belirlemek için genellikle çok dikkatli düşünmeniz ve ölçüm yapmanız gerekir. En iyi sonuçlar için sayfalarınızdaki her öğe için bu soruları düzenli olarak inceleyin ve tekrar gözden geçirin.
Core Web Vitals'ta etkiler
Core Web Vitals girişimi, Google tarafından kullanıcıların web'i kullanırken yaşadıklarını yansıtan bir dizi metrik sağlamak için kullanıma sunulmuştur. Core Web Vitals için birçok optimizasyon stratejisi olsa da bir sayfaya belirli bir kaynağın yüklenip yüklenmeyeceğini sorgulamak, web sitenizde bu metrikleri iyileştirmeniz için size yol gösterebilir. Aşağıda, her Core Web Vital'a göre gruplandırılmış, dikkate değer birkaç örnek verilmiştir. Bu liste, örneklerin kapsamlı bir listesi olmasa da (ve çok sayıda örnek vardır) bunları okumak size düşünmek için bir şeyler verebilir.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP), en büyük içeriğin (ör. hero resim veya başlık) ne zaman yüklendiğini ölçer. Kullanıcıya sitenin hızlı yüklendiğini hissettiren önemli bir algısal metrik olarak kabul edilir.
Genel olarak, daha az kaynak indirmek, kullanıcının sahip olduğu bant genişliğinin daha az kaynağa ayrılacağı anlamına gelir ve LCP'de iyileşme sağlayabilir. Klasik bir örnek, sayfa yüklenirken görüntü alanının dışındaki resimlerin, tarayıcı kullanıcının bunları görme olasılığının daha yüksek olduğunu belirleyene kadar indirilmediği geç yüklemedir. Örneğin, 50 resimden oluşan büyük bir küçük resim galeriniz varsa ilk ondan hariç tümünü yavaş yüklemek, tarayıcının mevcut bant genişliğini daha verimli kullanabileceği ve kullanıcının göreceği ilk resimlerin daha hızlı yükleneceği anlamına gelir.
Ancak bu, her zaman daha az resim yüklemekten ibaret değildir. Tarayıcıda, her kaynağın ne kadar bant genişliği almasını belirleyen dahili bir önceliklendirme şeması vardır. Ancak bu tüm kaynaklar (özellikle de yüksek öncelikli olarak indirilenler) bile potansiyel bir LCP öğesinin bağımlı kaynağını yoksun bırakma potansiyeline sahiptir. Bu durum özellikle yavaş ağ bağlantılarında geçerlidir. Bu bağımlı kaynak, sayfanın LCP öğesini temsil eden bir resim dosyası olabilir ancak tarayıcının sayfanın LCP öğesi olarak belirlenebilecek bir metin düğümünü oluşturması için ihtiyaç duyduğu bir web yazı tipi kaynağı da olabilir.
Web sitenizde metin ağırlıklıysa bir sayfanın LCP öğesi metin düğümü olabilir. Birçok iyi yazı tipi optimizasyon ve yükleme stratejisi olsa da web sitenizin ihtiyaçları için bir sistem yazı tipinin yeterli olup olmadığını değerlendirmeniz faydalı olabilir. Böylece, metin düğümü olan LCP öğeleri bir web yazı tipi kaynağına bağımlı olmadan yüklenebilir ve CSS ile HTML sunucudan gelir gelmez hemen boyanabilir.
Cumulative Layout Shift (CLS)
Yüklediğiniz her kaynak, özellikle ilk boyama işlemi tamamlanana kadar indirilmemişse sayfanın kümülatif düzen değişikliğine (CLS) katkıda bulunma potansiyeline sahiptir. Görsellerde CLS'den kaçınmak, açık boyutlar ayarlama gibi uygulamalardan kaçınmanızı gerektirir. Yazı tipleri için yazı tipi yüklemeyi ve yedek yazı tipi eşleştirmeyi yönetmek, web yazı tipinin takas süresi boyunca yaşanan değişiklikleri en aza indirebilir. JavaScript için bu, komut dosyasının DOM'u nasıl değiştirdiğini yöneterek düzen kaymalarını kabul edilebilir bir düzeye indirme olabilir.
Sayfanın CLS'sine katkıda bulunan her kaynak, sayfa düzeninin yeterince kararlı olmasını sağlamak için bir miktar çalışma gerektirir. Belirli bir kaynağa ihtiyacınız olup olmadığını sorguladığınızda yalnızca sayfa yüklemelerini hızlandırmakla kalmaz, düzen kararlılığını korumak için gereken bilişsel çabayı da azaltmış olursunuz. Bu, hem kullanıcılar hem de geliştiriciler için daha az can sıkıcı bir deneyim sağlar. Böylece, projenizdeki diğer hedeflere ulaşmak için daha fazla zamanınız olur.
Interaction to Next Paint (INP)
Interaction to Next Paint (INP), sayfanın kullanım süresi boyunca kullanıcı girişlerine verilen yanıtı ölçer. Web'de deneyimlenen etkileşimin çoğunu JavaScript sağladığından, bir sayfanın INP'si yüklediği JavaScript'ten büyük ölçüde etkilenebilir. Özellikle sayfa yükleme sırasında indirilen komut dosyası kaynaklarının miktarı, komut dosyası değerlendirme ve derleme ile ilgili pahalı olabilecek bir çalışmanın başlatılmasına neden olabilir. Başlangıç sırasında ne kadar az JavaScript yüklerseniz tarayıcının, kullanıcıların tarayıcı ile etkileşim kurmaya çalışabileceği sayfa deneyimindeki kritik noktada yapması gereken iş o kadar az olur.
Başlatma sırasında indirilen JavaScript kaynaklarının boyutunu azaltmaya yönelik kod bölme ve ağaç sallama gibi stratejiler olsa da projenizde kullandığınız paketlerin gerekli olup olmadığını görmek için bunları denetlemek faydalı olacaktır. Örneğin, lodash'ta günümüzde hâlâ yararlı olan birçok yöntem bulunur. Ancak bu yöntemler, tarayıcının eşleme, azaltma ve filtreleme gibi Array'ye özgü işlevleri ve diğer birçok işlevi de kapsar.
Progresif geliştirme, daha güçlü cihazlara ve daha hızlı ağ bağlantılarına sahip kullanıcılar için ekleyebileceğiniz temel (ancak yine de işlevsel) bir deneyim sunmanıza olanak tanıdığı için JavaScript'te yararlı bir yaklaşımdır. Kademeli iyileştirme ilkesine uyup uymadığınız fark etmez. İndirmekten kaçınabileceğiniz her JavaScript kaynağı, kullanıcı etkileşimlerine daha hızlı yanıt veren bir deneyimle sonuçlanabilir. Bu da web performansının önemli bir yönüdür.
Sonuç
Web sitenizi gereksiz indirmeler açısından denetlemek, hızlı kullanıcı deneyimleri sunmanın yalnızca bir parçası olabilir ancak büyük etki potansiyeline sahip bir parçasıdır. Özetle:
- Sayfalarınızdaki kendi öğelerinizi ve üçüncü taraf öğelerinizi envantere alın.
- Her öğenin performansını (değeri ve teknik performansı) ölçün.
- Kaynakların yeterli değer sağlayıp sağlamadığını belirleyin.
- Gereksiz indirmelerin Core Web Vitals ve destekleyici metrikler üzerindeki etkisini anlayın.
İçerik verimliliğini bu şekilde optimize ederek yalnızca genel performansı iyileştirmekle kalmaz, kullanıcıların bant genişliğini de boşa harcamazsınız. Ayrıca kullanıcı odaklı metrikleri iyileştirebilir ve daha iyi bir kullanıcı deneyimi sunabilirsiniz.