Gereksiz İndirmeleri Ortadan Kaldırma

İlya Grigorik
Ilya Grigorik

En hızlı ve en iyi optimize edilmiş kaynak, gönderilmeyen kaynaktır. Gereksiz kaynakları uygulamanızdan kaldırmalısınız. Örtülü ve açık varsayımları ekibinizle birlikte sorgulamak ve düzenli aralıklarla tekrar gözden geçirmek iyi bir uygulamadır. Aşağıda birkaç örnek verilmiştir:

  • Sayfalarınıza daima X kaynağını ekliyorsunuz ancak bu kaynağı indirmenin ve göstermenin maliyeti, kullanıcıya sağladığı değer ile dengeleniyor mu? Ürünün değerini ölçebiliyor ve kanıtlayabiliyor musunuz?
  • Kaynak (özellikle üçüncü taraf bir kaynaksa) istikrarlı bir performans sunuyor mu? Bu kaynak kritik yolda mı yoksa olmalı mı? Kaynak kritik yoldaysa sitede soruna yol açan tek nokta olabilir mi? Yani kaynağın kullanılamaması, sayfalarınızın performansını ve kullanıcı deneyimini etkiliyor mu?
  • Bu kaynağın HDS'si bulunuyor mu veya bulunmalı mı? Bu kaynak en iyi performans uygulamalarına (sıkıştırma, önbelleğe alma vb.) uyuyor mu?

Çoğu zaman sayfalarda gereksiz, hatta ziyaretçiye veya sitede barındırıldığı siteye fazla bir değer teslim etmeden sayfa performansını düşüren kaynaklar bulunur. Bu, birinci taraf ve üçüncü taraf kaynaklar ile widget'lar için eşit şekilde geçerlidir:

  • A Sitesi, ziyaretçilerin tek tıklamayla birden çok fotoğrafı önizlemesine olanak tanımak için, ana sayfasında bir dönen fotoğraf galerisi görüntülemeye karar verdi. Sayfa yüklendiğinde tüm fotoğraflar yüklenir ve kullanıcı fotoğraflar arasında ilerler.
    • Soru: Kaç kullanıcının bantta birden fazla fotoğraf görüntülediğini ölçtünüz mü? Çoğu ziyaretçinin hiçbir zaman görüntülemediği kaynakların indirilmesi, yüksek düzeyde ek yüke neden olabilir.
  • B Sitesine alakalı içerik görüntülemek, sosyal medya katılımını artırmak veya başka bir hizmet sunmak için üçüncü taraf bir widget yüklenmeye karar verildi.
    • Soru: Kaç ziyaretçinin widget'ı kullandığını veya widget'ın sağladığı içeriği tıkladığını mı izlediniz? Bu widget'ın oluşturduğu etkileşim, ek yükünü haklı çıkarmaya yetecek kadar var mı? Ayrıca, komut dosyasının gerekli olana kadar yüklenmediğinden emin olmak için bir yükleme stratejisi kullanmak sizin için uygun mu?

Gereksiz indirmelerin kaldırılıp kaldırılmayacağına karar vermek için genellikle dikkatlice düşünmek ve ölçümler yapmak gerekir. En iyi sonuçları elde etmek amacıyla düzenli olarak envanter çıkarın ve sayfalarınızdaki her öğe için bu soruları gözden geçirin.

Core Web Vitals üzerindeki etkiler

Önemli Web Verileri girişimi, kullanıcıların web'i kullanırken yaşadığı deneyimleri yansıtan bir dizi metrik sağlamak amacıyla Google tarafından kullanıma sunulmuştur. Core Web Vitals için pek çok optimizasyon stratejisi olmakla birlikte, bir sayfada 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 ile gruplandırılan, üzerinde düşünülmeye değer birkaç örnek verilmiştir. Bu, kapsamlı bir örnek listesi (ve çok sayıda örnek olsa da) olmasa da bunları okumak, aklınıza gelebilecek bir fikir 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 bir sitenin hızlı yüklendiği izlenimini veren önemli bir algı metriği olarak kabul edilir.

Genel olarak, daha az kaynak indirmek kullanıcının sahip olduğu bant genişliğinin daha az kaynak arasında paylaştırılacağı anlamına gelir ve LCP'de iyileşme sağlayabilir. Bunun klasik bir örneği geç yüklemedir. Geç yükleme, sayfa yükleme sırasında 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 indirilmeyeceği anlamına gelir. Örneğin 50 resimden oluşan büyük bir küçük resim galeriniz varsa, ilk on tanesi hariç tümünün geç yüklenmesi, tarayıcının mevcut bant genişliğini daha verimli bir şekilde kullanabileceği ve kullanıcının gördüğü ilk resimlerin daha hızlı yükleneceği anlamına gelir.

Ancak asıl amacınız daha az resim yüklemek değildir. Tarayıcıda, her bir kaynağın ne kadar bant genişliği alması gerektiğini belirleyen dahili bir önceliklendirme şeması vardır. Ancak bu durumda bile, özellikle yüksek öncelikte indirilenler olmak üzere tüm kaynaklar, potansiyel bir LCP öğesinin bağımlı kaynağını yok etme potansiyeline sahiptir. Bu, özellikle yavaş ağ bağlantıları için geçerlidir. Bu bağımlı kaynak, sayfanın LCP öğesini temsil eden bir resim dosyası olabileceği gibi, tarayıcının sayfanın LCP öğesi olarak belirlenebilecek bir metin düğümü oluşturması için gereken bir web yazı tipi kaynağı da olabilir.

Web sitenizde çok fazla metin yer alıyorsa sayfanın LCP öğesi bir metin düğümü olabilir. Birçok iyi yazı tipi optimizasyonu ve yükleme stratejisi olsa da, bir sistem yazı tipinin web sitenizin ihtiyaçları için yeterli olup olmadığını değerlendirmek 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 gelirken neredeyse anında boyayabilir.

Cumulative Layout Shift (CLS)

Yüklediğiniz her kaynak, özellikle ilk boyama sırasında indirme işlemi bitmemişse, sayfanın Cumulative Layout Shift (CLS) değerine katkıda bulunma potansiyeline sahiptir. Resimler söz konusu olduğunda CLS'de, müstehcen boyut ayarlama gibi uygulamaların kullanılmasından kaçının. Yazı tipleri için yazı tipi yüklemesini ve potansiyel olarak yedek yazı tipi eşleştirmesini yönetmek, web yazı tipinin değiştirme döneminde kaymaları en aza indirebilir. JavaScript için, düzen kaymalarının kabul edilebilir bir miktara düşürülmesi için komut dosyasının DOM'yi nasıl değiştireceğini yönetebilir.

Bir sayfanın CLS'sine katkıda bulunan her kaynak, sayfa düzeninin yeterince istikrarlı olmasını sağlamak için bir miktar çalışma gerektirir. Belirli bir kaynağa ihtiyacınız olup olmadığını sorgulayarak yalnızca sayfa yüklemelerini hızlandırmakla kalmaz, aynı zamanda düzen kararlılığını korumak için gereken bilişsel çabayı da azaltırsınız. Böylece hem çok daha az sinir bozucu bir kullanıcı deneyimi hem de daha az can sıkıcı bir geliştirici deneyimi ortaya çıkar. Böylece projelerinizde diğer hedeflerin peşinden gitmek için daha fazla zamanınız olur.

Sonraki Boyamayla Etkileşim (INP) ve İlk Giriş Gecikmesi (FID)

Sonraki Boyamayla Etkileşim (INP) ve İlk Giriş Gecikmesi (FID), kullanıcı girişlerine duyarlılığı ölçen metriklerdir. Mart 2024'te INP'nin Önemli Web Verileri olarak FID'nin yerini alması planlanıyor ancak FID optimizasyon stratejileri INP için de geçerli olacak. Ayrıca, INP'nin optimize edilmesi genellikle FID'den daha zordur. Çünkü FID ölçümü olarak yalnızca ilk etkileşimin giriş gecikmesini değil, tüm sayfa etkileşimleri için tam etkileşim gecikmesini izler.

INP ve FID, JavaScript'ten en çok etkilenen içeriklerdir. Bunun nedeni, web'de kullanıcıların deneyimlediği etkileşimlerin büyük kısmını JavaScript'tir. Hem INP hem de FID için, sayfa yükleme sırasında indirilen komut dosyası kaynaklarının miktarı, komut dosyası değerlendirmesi ve derlemesi için maliyetli olabilecek işleri başlatacaktır. Başlatma sırasında ne kadar az JavaScript yüklerseniz, tarayıcının sayfa deneyimindeki söz konusu kritik noktada yapması gereken iş o kadar az olur.

Başlatma sırasında indirilen JavaScript kaynaklarının boyutunu küçültmeye yönelik stratejiler (kod bölme ve ağaç sallama gibi) olsa da gerekli olup olmadıklarını görmek için projelerinizde kullandığınız paketleri denetlemenizde fayda vardır. Örneğin lodash'in günümüzde hâlâ kullanışlı olan birçok yöntemi olsa da eşleme, azaltma, filtreleme ve filtreleme için Array'ye özgü işlevler gibi, tarayıcının hemen sunduğu yöntemlerle sunulur.

Progresif geliştirme, kullanıcılara daha güçlü cihazlara ve daha hızlı ağ bağlantılarına sahip kullanıcılara ekleyebileceğiniz temel (ama yine de işlevsel) bir deneyim sunmanızı sağladığından JavaScript için yararlı bir yaklaşımdır. Kademeli geliştirme ilkesine bağlı kalsanız da etmeseniz de önemli bir nokta var: İndirmekten kaçınabileceğiniz her JavaScript kaynağı, kullanıcı etkileşimlerine daha hızlı yanıt veren bir deneyimle sonuçlanabilir. Bu, web performansının önemli bir unsurudur.

Sonuç

Web sitenizi gereksiz indirmelere karşı denetlemeniz, hızlı kullanıcı deneyimleri sunmanın yalnızca bir unsuru olsa da yüksek etki potansiyeli olan bir şeydir. Özetle:

  • Sayfalarınızda kendi öğelerinizin ve üçüncü taraf öğelerinizin envanterini oluşturun.
  • Her bir öğenin performansını (değerini ve teknik performansını) ölçün.
  • Kaynakların yeterli değer sağlayıp sağlamadığını belirleyin.
  • Gereksiz indirmelerin Önemli Web Verileri üzerindeki etkisini ve destekleyici metrikleri anlayın.

İçerik verimliliğini bu şekilde optimize ederek genel performansı iyileştirmekle kalmaz, kullanıcıların bant genişliğini boşa harcamamaya da dikkat eder, kullanıcı merkezli metrikleri potansiyel olarak iyileştirir ve daha iyi bir kullanıcı deneyimi sunarsınız.