LCP Kaynak Yükleme Süresini Optimize Edin

LCP Kaynak Yükleme Süresini Optimize Edin

Largest Contentful Paint (LCP), çevrimiçi kullanıcı deneyiminizi ölçen 3 Core Web Vitals performans metriğinden biridir. LCP, en büyük içerikli öğenin (bir görsel, video veya metin bloğu) görüntü alanında görünür hale gelmesi için geçen süreyi yakalar. Kaynak Yükleme Süresi, LCP'nin LCP öğesi için ağ kaynağının alınmasında ne kadar zaman harcandığını gösteren bir alt bölümüdür.  LCP'nin kaynak yükleme süresi yönünü derinlemesine inceleyelim ve etkisini ile optimizasyon stratejilerini keşfedelim.

LCP'de Kaynak Yükleme Süresi Nedir?

Kaynak Yükleme Süresi, genellikle Yükleme Süresi olarak adlandırılır ve tarayıcının sonunda LCP öğesi olacak ağ kaynağını (örneğin bir görsel) indirmesi için gereken süreyi ifade eder. Görseller ve videolar için bu süre, görselin indirilmeye başladığı andan tarayıcının indirmeyi tamamladığı ana kadar olan zaman dilimini kapsar. Metin tabanlı LCP öğeleri için yükleme süresi genellikle sıfırdır.

Kaynak Yükleme Süresi, tarayıcının LCP kaynağını indirmeye başladığı andan indirmeyi tamamladığı ana kadar ölçülür. Bu ölçüm, kullanıcıların bir web sayfasının ana içeriğini ne kadar hızlı görebileceğini ve etkileşime geçebileceğini doğrudan etkilediği için çok önemlidir. Kaynak yükleme süresi aşağıdakiler de dahil olmak üzere birçok faktörden etkilenebilir:

• Dosya Boyutu: Daha büyük dosyalar daha uzun indirme süreleri gerektirir.
• Ağ Hızı: Daha yavaş bağlantılar doğal olarak yükleme süresini uzatır.
• Sunucu Yanıt Hızı: Sunucu yanıtındaki gecikmeler kaynak alımını yavaşlatır.
• Eşzamanlı İndirmeler: Aynı anda indirilen kaynaklar bant genişliği için rekabet eder ve bu durum yükleme sürelerini artırabilir.

Kaynak Yükleme Süresini Tespit Etme

Kaynak yükleme süresini belirlemek ve ölçmek için iki etkili yöntem vardır:

Chrome DevTools'ta Ağ İncelemesi: Chrome'un Geliştirici Araçlarını açmak için Ctrl + Shift + I kısayolunu kullanın, ardından "Network" sekmesini seçin ve sayfayı yeniden yükleyin. Ağ isteklerinde LCP öğesini bulun (LCP öğesini öğrenmek istiyorsanız Core Web Visualizer'ı deneyin). Ağ denetçisi kaynağın indirilmesinin ne kadar sürdüğünü gösterecektir.

İpucu: LCP gecikmesi, aktarılan boyut ve gerçek boyut gibi ek ayrıntıları görmek için büyük istek satırlarını etkinleştirin.

Gerçek Kullanıcı İzleme (RUM) Verilerinden Yararlanın: 

RUM araçları genellikle LCP atıf verilerini kaydeder. Largest Contentful Paint için atıf verileri kaynak yükleme gecikmesi hakkında bilgi içerir. Bu veriler, yükleme süresi eğilimlerinin zaman içinde veya sayfaya göre görselleştirilmesini sağlayarak site genelindeki yükleme süreleri hakkında net bir görünüm sunar. Bu kalıpları analiz ederek, yükleme sürelerini yavaşlatabilecek öğeleri belirlemek ve daha hızlı, daha sorunsuz performans için hedefe yönelik fırsatları ortaya çıkarmak mümkündür.

LCP Yükleme Süresi Nasıl İyileştirilir

Kaynak yükleme gecikmeleri, kaynaklar optimal olmayan bir sıra veya boyutta indirildiğinde meydana gelir. Bunu ele almak için iki ana yaklaşım vardır: veri boyutunu azaltmak veya veri iletimini optimize etmek. LCP kaynak yükleme süresini iyileştirmek için etkili teknikler ve kalıplar şunlardır:

1. Dosya Boyutunu Optimize Edin:

Dosya boyutunu optimize etmek, ağ üzerinden gönderilecek bayt miktarını azaltır. Daha az veri genellikle daha kısa indirme süresi anlamına gelir.

Modern Görsel Formatları Kullanın: AVIF ve WebP sıkıştırmada öncü konumdadır. AVIF özellikle geniş sıkıştırma yetenekleri sunarak dosya boyutlarını WebP'ye kıyasla %50'ye kadar azaltabilir ve kaliteden ödün vermeden karmaşık fotoğraflar için idealdir. Ancak WebP, daha geniş bir tarayıcı yelpazesiyle güçlü uyumluluğunu korur ve özellikle daha basit görseller için etkilidir.

Duyarlı Görseller: <picture> öğesi ve srcset niteliği, ekran boyutuna göre özelleştirilmiş görseller sunarak mobil cihazlar için daha küçük görsel sürümlerini ve daha büyük ekranlar için yüksek çözünürlüklü sürümleri kullanmayı mümkün kılar. İşte bir örnek kurulum:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy" alt="Description">
</picture>

Doğru Görsel Boyutları: Duyarlı görseller çözümün sadece bir parçasıdır çünkü duyarlı olmak doğru boyutlandırılmış oldukları anlamına gelmez. Görsel boyutlarını görüntüleme boyutlarıyla eşleştirmek, en sık gördüğüm hatalardan biridir. 500 piksellik bir görüntüleme alanı için 2000 piksel genişliğinde bir görsel sunmak bant genişliğini israf eder ve yükleme sürelerini fark edilir şekilde yavaşlatabilir.

2. Ağ Performansını İyileştirin: 

Kaynak ağ boyutları optimize edildikten sonra, bir sonraki adım ağ hızını en üst düzeye çıkarmak veya ağı tamamen atlamaktır. Bu şu yollarla başarılabilir:

Ağ İhtiyacını Atlayın: Atlanan bir ağ bağlantısından daha hızlı ağ bağlantısı yoktur. Tarayıcılar, görseller, betikler ve stil dosyaları gibi statik (değişmeyen) içerikleri doğrudan yerel tarayıcı önbelleğinden sunma seçeneğine sahiptir. Sunucuyu tarayıcıya doğru önbellek talimatları gönderecek şekilde yapılandırın. Örneğin expires başlığıyla.

En etkili kurulum şöyle bir Cache-Control başlığı göndermektir:

Cache-Control: public, max-age=31536000, immutable

• public: Kaynağın hem tarayıcılar hem de ara önbellekler tarafından önbelleğe alınmasına izin verir.
• max-age=31536000: Kaynağın taze kabul edileceği maksimum süreyi bir yıl (31.536.000 saniye) olarak ayarlar.
• immutable: Kaynağın zaman içinde değişmeyeceğini belirtir ve gereksiz yeniden doğrulama isteklerini önler.

HTTP/3: En son HTTP/3 protokolü, gecikmeyi azaltarak ve paket kaybını geleneksel TCP'ye göre daha verimli bir şekilde ele alarak ağ performansını iyileştirebilir. (HTTP/3'ün özellikle Time to First Byte söz konusu olduğunda çeşitli ek avantajları vardır) 

HTTP/3'ün etkin olup olmadığını kontrol etmek için Ctrl-Shift-I kısayoluyla ağınızı inceleyin. Network sekmesini seçin, ağ sütun başlıklarına sağ tıklayın ve 'protocol' seçeneğinin etkinleştirildiğinden emin olun. Sayfayı yeniden yükleyin ve protokolü kontrol edin. HTTP/3 için protokol 'h3' olarak görünmelidir

Kaynakları Kendi Sunucunuzda Barındırma: Önemli ve/veya erken yüklenen ağ kaynakları varsayılan olarak her zaman kaynak sunucuda barındırılmalıdır.  Kendi sunucunuzda barındırma, üçüncü taraf sunuculara bağlanma ihtiyacını ortadan kaldırır ve bu durum ek DNS aramaları, SSL anlaşmaları ve bağlantı kurulumları nedeniyle önemli gecikmelere neden olabilir. Kendi sunucunuzda barındırma, zaten açık olan tek bir bağlantının yeniden kullanılmasını sağlar ve ayrı bağlantılar kurmanın ek yükünü azaltır. Kendi sunucunuzda barındırılan kaynaklar ayrıca sıkıştırma ve önbellek politikaları üzerinde tam kontrol sağlar.

CDN Kullanın: Content Delivery Network (CDN), görseller, CSS ve JavaScript gibi statik kaynakları kullanıcıya daha yakın konumlardan önbelleğe alan ve sunan dağıtık sunucular ağıdır. Bu, doğrudan Kaynak Yükleme Süresini etkileyen veri seyahat süresini (gidiş-dönüş süresini) azaltır. Bunun yanı sıra birçok CDN, görsel sıkıştırma, üstün ağ yapılandırmaları (HTTP/3 & 0-RTT gibi) ve çok daha fazlası gibi ek avantajlar da sunar. Özelleşmiş Görsel CDN'leri, otomatik format dönüştürme, yeniden boyutlandırma ve sıkıştırma gibi gerçek zamanlı optimizasyonlar sunarak bunu bir adım öteye taşıyabilir.

3. Kaynak Önceliklendirmesini Optimize Edin

Kaynak boyutu küçültüldükten ve ağ optimize edildikten sonra, ağ rekabeti sorunu da vardır. Kötü ağ koşullarında aynı anda birden fazla kaynak istendiğinde, kaynak indirme süresini önemli ölçüde yavaşlatabilir. Bu nedenle kaynak indirme zamanlamasını yaparak ağ rekabetini en aza indirmek mantıklıdır.

Kritik Kaynakları Önceliklendirin: Hero görselleri veya ekranın üst kısmındaki CSS gibi temel kaynakları fetchpriority="high" ile işaretleyin. Bu, tarayıcıya bu varlıkları önce indirmesi sinyalini verir ve anında yüklenmesi gerekmeyen betikler, widget'lar veya üçüncü taraf öğeler tarafından yavaşlatılmalarını önler. Bu kritik kaynakları önceliklendirmek, kullanıcılarınızın en çok önem verdiği içerik için yükleme süresini azaltır. Preload (geç keşif sorununu çözmek için) ve fetchpriority="high" (ağ rekabeti sorununu çözmek için) kombinasyonu, LCP kaynağının mümkün olduğunca erken ve hızlı bir şekilde alınmasını sağlamak için en güçlü tekniktir.

<!-- For LCP images visible in the initial HTML -->
<img src="hero-image.webp" fetchpriority="high" alt="...">

<!-- To improve discovery  -->
<link rel="preload" href="hero-image.webp" as="image" fetchpriority="high">

Ağ Rekabetini Azaltın: Gerekli olmayan varlıkları erteleyerek veya gecikmeli yükleyerek başlangıç indirmelerini kolaylaştırın. Hemen görünmeyen görseller veya videolar ile arka plan veya ikincil öğeler için yüklemeyi erteleyin. Ekran dışı medya için loading="lazy" kullanmak iyi bir başlangıç noktasıdır; diğer gerekli olmayan betikleri ve varlıkları daha fazla ertelemek bant genişliğini serbest bırakacak ve kritik kaynaklarınızla olan rekabeti azaltarak sayfanızın ana içeriğinin hızlı yüklenmesini ve görüntülenmesini sağlayacaktır. LCP görselinize asla loading="lazy" uygulamayın; bu, puanınıza zarar verecek kritik bir anti-kalıptır.

4. Speculation Rules Kurun

Speculation Rules, tarayıcıların tahmin edilen kullanıcı gezinmesine göre web sayfalarını önceden getirmesini veya önceden işlemesini sağlar. Önceden getirme, LCP'nin Time to First Byte alt bölümünü etkili bir şekilde ortadan kaldırır ve kaynak yükleme süresi üzerinde etkisi yoktur. Önceden işleme, sonraki sayfayı gizli bir sekmede işler ve tüm sayfa kaynaklarını indirir.  Bu, önceden işlenmiş bir sayfanın bu örnek LCP dağılımında gösterildiği gibi LCP öğesi için yükleme sürelerinin çoğunu ortadan kaldırır.