Kötü bir kullanıcı deneyimine katkıda bulunan faktörlerden biri, bir kullanıcının ekrana işlenen herhangi bir içeriği görmesinin ne kadar sürdüğüdür. First Contentful Paint (FCP), ilk DOM içeriğinin oluşturulmasının ne kadar sürdüğünü ölçer, ancak sayfadaki en büyük (genellikle daha anlamlı) içeriğin oluşturulmasının ne kadar sürdüğünü yakalayamaz.
Largest Contentful Paint Nedir?
En Büyük İçerikli Boyama (LCP), bir Temel Web Vitals metriğidir ve görünüm alanındaki en büyük içerik öğesi görünür hale geldiğinde ölçer. Sayfanın ana içeriğinin ekrandaki görüntülemeyi ne zaman bitirdiğini belirlemek için kullanılabilir.
Zayıf bir LCP’nin en yaygın nedenleri şunlardır:
- Yavaş sunucu yanıt süreleri
- Oluşturmayı engelleyen JavaScript ve CSS
- Yavaş kaynak yükleme süreleri
- İstemci tarafı oluşturma
Yavaş sunucu yanıt süreleri
Tarayıcının sunucudan içerik alması ne kadar uzun sürerse, ekrandaki herhangi bir şeyi görüntülemesi o kadar uzun sürer. Daha hızlı bir sunucu yanıt süresi, LCP dahil olmak üzere her bir sayfa yükleme ölçüsünü doğrudan iyileştirir.
Her şeyden önce, sunucunuzun içeriğinizi nasıl ve nerede işleyeceğini iyileştirin. Kullanım İlk Byte Zaman (TTFB) sunucu yanıt süreleri ölçmek için. TTFB’nizi birkaç farklı yolla iyileştirebilirsiniz:
- Sunucunuzu optimize edin
- Kullanıcıları yakındaki bir CDN’ye yönlendirin
- Varlıkları önbelleğe al
- Önce HTML sayfalarını önbellek olarak sun
- Üçüncü taraf bağlantılarını erken kurun
Sunucunuzu optimize edin
Sunucunuzun tamamlanması önemli miktarda zaman alan pahalı sorgular mı çalıştırıyorsunuz? Veya sayfa içeriğini döndürme sürecini geciktiren sunucu tarafında gerçekleşen başka karmaşık işlemler var mı? Sunucu tarafı kodunuzun verimliliğini analiz etmek ve iyileştirmek, tarayıcının verileri alması için gereken süreyi doğrudan iyileştirecektir.
Bir tarayıcı isteğinde anında statik bir sayfa sunmak yerine, birçok sunucu tarafı web çerçevesinin web sayfasını dinamik olarak oluşturması gerekir. Diğer bir deyişle, tarayıcı istediğinde zaten hazır olan eksiksiz bir HTML dosyası göndermek yerine, çerçevelerin sayfayı oluşturmak için mantığı çalıştırması gerekir. Bu, bir veritabanı sorgusundan bekleyen sonuçlardan veya bileşenlerin bir UI çerçevesi ( React gibi ) tarafından biçimlendirmeye dönüştürülmesi gerektiğinden kaynaklanıyor olabilir . Sunucuda çalışan birçok web çerçevesi, bu işlemi hızlandırmak için kullanabileceğiniz performans kılavuzuna sahiptir.
Check out aşırı yüklenmiş bir sunucu Fix fazla ipucu için.
Kullanıcıları yakındaki bir CDN’ye yönlendirin
Bir İçerik Dağıtım Ağı (CDN), birçok farklı konuma dağıtılan sunuculardan oluşan bir ağdır. Web sayfanızdaki içerik tek bir sunucuda barındırılıyorsa, web siteniz coğrafi olarak daha uzaktaki kullanıcılar için daha yavaş yüklenir, çünkü tarayıcı istekleri kelimenin tam anlamıyla dünyayı dolaşmak zorundadır. Kullanıcılarınızın uzaktaki sunuculara ağ isteklerini beklemek zorunda kalmamalarını sağlamak için bir CDN kullanmayı düşünün.
Önbellek varlıkları
HTML’niz statikse ve her istekte değiştirilmesi gerekmiyorsa, önbelleğe alma gereksiz yere yeniden oluşturulmasını engelleyebilir. Oluşturulan HTML’nin bir kopyasını diskte depolayarak, sunucu tarafında önbelleğe alma TTFB’yi azaltabilir ve kaynak kullanımını en aza indirebilir.
Araç zincirinize bağlı olarak, sunucu önbelleğini uygulamanın birçok farklı yolu vardır:
- Önbelleğe alınmış içeriği sunmak için ters proxy’leri ( Varnish , nginx ) yapılandırın veya bir uygulama sunucusunun önüne kurulduğunda bir önbellek sunucusu görevi görür
- Bulut sağlayıcınızın ( Firebase , AWS , Azure ) önbellek davranışını yapılandırın ve yönetin
- İçeriğinizin önbelleğe alınması ve kullanıcılarınıza daha yakın depolanması için uç sunucular sağlayan bir CDN kullanın
HTML sayfalarını önbellek olarak sun
Yüklendiğinde, bir hizmet çalışanı tarayıcının arka planında çalışır ve sunucudan gelen istekleri yakalayabilir. Bu seviyedeki programlı önbellek kontrolü, HTML sayfasının içeriğinin bir kısmını veya tamamını önbelleğe almayı ve yalnızca içerik değiştiğinde önbelleği güncellemeyi mümkün kılar.
Aşağıdaki grafik, bu modeli kullanan bir sitede LCP dağıtımlarının nasıl azaltıldığını göstermektedir:

Grafik, hizmet çalışanının durumuna göre bölümlere ayrılmış olarak son 28 gün içinde tek bir siteden LCP dağılımını gösterir. Hizmet çalışanında önbellek ilk HTML sayfa sunumu başlatıldıktan sonra ne kadar fazla sayfa yüklemesinin daha hızlı bir LCP değerine sahip olduğuna dikkat edin (grafiğin mavi kısmı).
Önbellek olarak tam veya kısmi HTML sayfaları sunma teknikleri hakkında daha fazla bilgi edinmek için , Hizmet Çalışanları ile Daha Küçük HTML Yükleri’ne bakın.
Üçüncü taraf bağlantılarını erken kurun #
Üçüncü taraf kaynaklara yönelik sunucu istekleri, özellikle sayfada kritik içeriği görüntülemeleri gerekiyorsa, LCP’yi de etkileyebilir. rel="preconnect"
Tarayıcıya sayfanızın mümkün olan en kısa sürede bağlantı kurmayı planladığını bildirmek için kullanın .
<link rel="preconnect" href="https://example.com" />
dns-prefetch
DNS aramalarını daha hızlı çözmek için de kullanabilirsiniz .
<link rel="dns-prefetch" href="https://example.com" />
Her iki ipucu da farklı şekilde çalışsa da, dns-prefetch
desteklemeyen tarayıcılar için yedek olarak kullanmayı düşünün preconnect
.
<head>
…
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
</head>
Algılanan sayfa hızını iyileştirmek için ağ bağlantılarını erkenden kurun başlıklı makaleyi okuyarak daha fazla bilgi edinin.
JavaScript ve CSS engelleme oluşturma
Bir tarayıcının herhangi bir içeriği görüntüleyebilmesi için HTML biçimlendirmesini bir DOM ağacına ayrıştırması gerekir. HTML ayrıştırıcısı, herhangi bir harici stil sayfası ( <link rel="stylesheet">
) veya eşzamanlı JavaScript etiketleri ( <script src="main.js">
) ile karşılaşırsa durur .
Komut dosyaları ve stil sayfaları, FCP’yi ve dolayısıyla LCP’yi geciktiren oluşturma engelleme kaynaklarıdır. Web sayfanızın ana içeriğinin daha hızlı yüklenmesini sağlamak için kritik olmayan JavaScript ve CSS’leri erteleyin.
CSS engelleme süresini azaltın
Aşağıdakilerle sitenizde yalnızca minimum miktarda CSS’nin oluşturulmasını engellediğinden emin olun:
- CSS’yi küçültün
- Kritik olmayan CSS’yi erteleyin
- Satır içi kritik CSS
Küçültme CSS
Daha kolay okunabilirlik için CSS dosyaları boşluk, girinti veya yorumlar gibi karakterler içerebilir. Bu karakterlerin tümü tarayıcı için gereksizdir ve bu dosyaların küçültülmesi, kaldırılmalarını sağlayacaktır. Sonuç olarak, CSS engelleme miktarını azaltmak, sayfanın ana içeriğini (LCP) tam olarak oluşturmak için gereken süreyi her zaman iyileştirecektir.
Bir modül paketleyici veya derleme aracı kullanıyorsanız, her derlemede CSS dosyalarını küçültmek için uygun bir eklenti ekleyin:
- Web paketi için: optimize-css-varlıkları-web paketi-eklentisi
- Gulp için: gulp-clean-css
- Toplama için: toplayıcı-eklenti-css-taşıyıcı

Daha fazla ayrıntı için CSS’yi Küçültme kılavuzuna bakın.
Ertele kritik olmayan CSS
Web sayfanızda kullanılmayan herhangi bir CSS’yi bulmak için Chrome Geliştirme Araçlarında Kapsam sekmesini kullanın .
En iyi hale getirmek için:
- Kullanılmayan CSS’leri tamamen kaldırın veya sitenizin ayrı bir sayfasında kullanılıyorsa başka bir stil sayfasına taşıyın.
- İlk oluşturma için gerekli olmayan herhangi bir CSS için, dosyaları eşzamansız olarak yüklemek için loadCSS kullanın; bu,
rel="preload"
veonload
.html <link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">
LCP iyileştirme örneği: Kritik olmayan CSS’nin ertelenmesinden önce ve sonra
Daha fazla ayrıntı için, Kritik olmayan CSS kılavuzuna bakın.
Satır içi kritik CSS
Ekranın üst kısmındaki içerik için kullanılan herhangi bir kritik yol CSS’yi doğrudan içine ekleyerek satır içi <head>.

Önemli stilleri satır içine almak, kritik CSS’yi almak için gidiş-dönüş talebinde bulunma ihtiyacını ortadan kaldırır. Geri kalanını ertelemek CSS engelleme süresini en aza indirir.
Sitenize el ile satır içi stilleri ekleyemiyorsanız, işlemi otomatikleştirmek için bir kitaplık kullanın. Bazı örnekler:
- Critical , CriticalCSS ve Penthouse , katın üst kısmındaki CSS’yi ayıklayan ve satır içi yapan paketlerdir.
- Critters , kritik CSS’yi satır içine alan ve gerisini tembel olarak yükleyen bir web paketi eklentisidir

Daha fazla bilgi edinmek için Kritik CSS Çıkarma kılavuzuna bir göz atın .
JavaScript engelleme süresini azaltın
Kullanıcılara minimum miktarda gerekli JavaScript’i indirin ve sunun. JavaScript’i engelleme miktarını azaltmak, daha hızlı bir render ve sonuç olarak daha iyi bir LCP ile sonuçlanır.
Bu, komut dosyalarınızı birkaç farklı şekilde optimize ederek başarılabilir:
- JavaScript dosyalarını küçültün ve sıkıştırın
- Kullanılmayan JavaScript’i erteleyin
- Kullanılmayan çoklu dolguları en aza indirin
Optimize İlk Girdi Gecikmesi kılavuzu biraz daha ayrıntılı olarak JavaScript engellemeyi süresini azaltmak için gerekli tüm teknikleri kapsar.
Yavaş kaynak yükleme süreleri
CSS veya JavaScript engelleme süresindeki bir artış doğrudan daha kötü performansla sonuçlansa da, diğer birçok kaynak türünü yüklemek için geçen süre de boyama sürelerini etkileyebilir. LCP’yi etkileyen öğe türleri şunlardır:
<img>
elementler<image>
bir<svg>
elemanın içindeki elemanlar<video>
öğeler ( poster görüntüsü, LCP’yi ölçmek için kullanılır)url()
İşlev aracılığıyla yüklenen bir arka plan resmine sahip bir öğe (CSS degradesinin aksine)- Metin düğümleri veya diğer satır içi düzey metin öğeleri içeren blok düzeyinde öğeler
Ekranın üst kısmında oluşturulursa, bu öğelerin yüklenmesi için geçen süre, LCP üzerinde doğrudan bir etkiye sahip olacaktır. Bu dosyaların olabildiğince hızlı yüklenmesini sağlamanın birkaç yolu vardır:
- Görüntüleri optimize edin ve sıkıştırın
- Önemli kaynakları önceden yükleyin
- Metin dosyalarını sıkıştır
- Ağ bağlantısına göre farklı varlıklar sunun (uyarlamalı sunum)
- Bir hizmet çalışanı kullanarak varlıkları önbelleğe alın
Görüntüleri optimize edin ve sıkıştırın
Birçok site için, sayfanın yüklenmesi tamamlandığında görünümdeki en büyük öğeler resimlerdir. Çarpıcı resimler, büyük karuseller veya afiş resimleri bunun yaygın örnekleridir.

Bu tür görüntülerin yüklenmesinin ve işlenmesinin ne kadar sürdüğünü iyileştirmek, LCP’yi doğrudan hızlandıracaktır. Bunu yapmak için:
- İlk etapta bir resim kullanmamayı düşünün. İçerikle alakalı değilse kaldırın.
- Görüntüleri sıkıştır ( örneğin Imagemin ile )
- Görüntüleri daha yeni biçimlere dönüştürün (JPEG 2000, JPEG XR veya WebP)
- Duyarlı resimler kullanın
- Bir görüntü CDN’si kullanmayı düşünün
Tüm bu teknikleri ayrıntılı olarak açıklayan kılavuzlar ve kaynaklar için Resimlerinizi optimize edin sayfasına bir göz atın .
Önemli kaynakları önceden yükleyin
Bazen, belirli bir CSS veya JavaScript dosyasında bildirilen veya kullanılan önemli kaynaklar, örneğin bir uygulamanın birçok CSS dosyasından birinin derinliklerine gizlenmiş bir yazı tipi gibi, istediğinizden daha sonra getirilebilir.
Belirli bir kaynağa öncelik verilmesi gerektiğini biliyorsanız, <link rel="preload">
daha erken getirmek için kullanın . Birçok kaynak türü önceden yüklenebilir, ancak öncelikle yazı tipleri, ekranın üst kısmındaki görüntüler veya videolar ve kritik yol CSS veya JavaScript gibi kritik varlıkları önceden yüklemeye odaklanmalısınız .
<link rel="preload" as="script" href="script.js" />
<link rel="preload" as="style" href="style.css" />
<link rel="preload" as="image" href="img.png" />
<link rel="preload" as="video" href="vid.webm" type="video/webm" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
Chrome 73’ten bu yana, çok daha hızlı görüntü yükleme için her iki modeli birleştirmek üzere duyarlı görüntülerle birlikte ön yükleme kullanılabilir .
<link
rel="preload"
as="image"
href="wolf.jpg"
imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
imagesizes="50vw"
/>
Metin dosyalarını sıkıştır
Gzip ve Brotli gibi sıkıştırma algoritmaları, sunucu ve tarayıcı arasında aktarılırken metin dosyalarının (HTML, CSS, JavaScript) boyutunu önemli ölçüde azaltabilir. Gzip, tüm tarayıcılarda etkin bir şekilde desteklenir ve daha da iyi sıkıştırma sonuçları sağlayan Brotli, neredeyse tüm yeni tarayıcılarda kullanılabilir .
Kaynaklarınızı sıkıştırmak, teslimat boyutlarını en aza indirecek, yükleme sürelerini ve dolayısıyla LCP’yi iyileştirecektir.
- Öncelikle, sunucunuzun dosyaları otomatik olarak sıkıştırıp sıkıştırmadığını kontrol edin. Çoğu barındırma platformu, CDN ve ters proxy sunucusu, varlıkları varsayılan olarak sıkıştırmayla kodlar veya bunları kolayca yapılandırmanıza izin verir.
- Dosyaları sıkıştırmak için sunucunuzu değiştirmeniz gerekiyorsa, daha iyi sıkıştırma oranları sağlayabileceği için gzip yerine Brotli kullanmayı düşünün.
- Kullanmak için bir sıkıştırma algoritması seçtikten sonra, varlıkları tarayıcı tarafından istendiğinde anında değil, derleme işlemi sırasında önceden sıkıştırın. Bu, sunucu ek yükünü en aza indirir ve özellikle yüksek sıkıştırma oranları kullanıldığında, istekler yapıldığında gecikmeleri önler.

Daha fazla ayrıntı için Ağ yüklerini küçültme ve sıkıştırma kılavuzuna bakın.
Uyarlanabilir sunum
Bir sayfanın ana içeriğini oluşturan kaynakları yüklerken, kullanıcının cihazına veya ağ koşullarına bağlı olarak farklı varlıkları koşullu olarak getirmek etkili olabilir. Bu, Ağ Bilgileri , Aygıt Belleği ve HardwareConcurrency API’leri kullanılarak yapılabilir.
İlk oluşturma için kritik olan büyük varlıklarınız varsa, kullanıcının bağlantısına veya cihazına bağlı olarak aynı kaynağın farklı varyasyonlarını kullanabilirsiniz. Örneğin, 4G’den düşük bağlantı hızları için video yerine bir resim görüntüleyebilirsiniz:
if (navigator.connection && navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// Load video
} else {
// Load image
}
}
Kullanabileceğiniz kullanışlı özelliklerin listesi:
navigator.connection.effectiveType
: Etkili bağlantı türünavigator.connection.saveData
: Veri tasarrufu etkin / devre dışınavigator.hardwareConcurrency
: CPU çekirdek sayısınavigator.deviceMemory
: Cihaz hafızası
Daha fazla bilgi için, ağ kalitesine göre Uyarlanabilir hizmete bakın .
Bir hizmet çalışanı kullanarak varlıkları önbelleğe alın
Hizmet çalışanları, bu makalenin önceki bölümlerinde belirtildiği gibi daha küçük HTML yanıtları sunma dahil olmak üzere birçok yararlı görev için kullanılabilir. Ayrıca, tekrarlanan isteklerde ağdan değil tarayıcıya sunulabilen herhangi bir statik kaynağı önbelleğe almak için de kullanılabilirler.
Bir hizmet çalışanı kullanarak kritik kaynaklara ulaşmak, özellikle web sayfasını daha zayıf bir bağlantıyla yeniden yükleyen (veya hatta çevrimdışı olarak erişen) kullanıcılar için yükleme sürelerini önemli ölçüde azaltabilir. Workbox gibi kitaplıklar , önceden alınmış varlıkları güncelleme sürecini, bunu kendi başınıza halletmek için özel bir hizmet çalışanı yazmaktan daha kolay hale getirebilir.
Servis çalışanları ve Workbox hakkında daha fazla bilgi edinmek için Ağ güvenilirliğine bir göz atın .
İstemci tarafı oluşturma
Çoğu site, sayfaları doğrudan tarayıcıda işlemek için istemci tarafı JavaScript mantığını kullanır. React , Angular ve Vue gibi çerçeveler ve kitaplıklar, bir web sayfasının farklı yönlerini sunucu üzerinden tamamen istemcide işleyen tek sayfalı uygulamalar oluşturmayı kolaylaştırdı.
Çoğunlukla istemcide oluşturulan bir site oluşturuyorsanız, büyük bir JavaScript paketi kullanıldığında bunun LCP üzerinde yaratabileceği etkiye karşı dikkatli olmalısınız. Bunu önlemek için optimizasyonlar yapılmazsa, kullanıcılar tüm kritik JavaScript’in indirilmesi ve çalıştırılması tamamlanana kadar sayfadaki herhangi bir içeriği göremeyebilir veya bu içerikle etkileşime girmeyebilir.
İstemci tarafında oluşturulan bir site oluştururken aşağıdaki optimizasyonları göz önünde bulundurun:
- Kritik JavaScript’i en aza indirin
- Sunucu tarafı oluşturmayı kullanın
- Ön işleme kullan
Kritik JavaScript’i en aza indirin
Sitenizdeki içerik yalnızca görünür hale gelirse veya belirli bir miktarda JavaScript indirildikten sonra etkileşime girilebilirse, paketinizin boyutunu mümkün olduğunca azaltmak daha da önemli hale gelir. Bu şu şekilde yapılabilir:
- JavaScript’i küçültmek
- Kullanılmayan JavaScript’i erteleme
- Kullanılmayan polyfill’leri en aza indirme
Bu optimizasyonlar hakkında daha fazla bilgi edinmek için JavaScript engelleme süresini azaltın bölümüne geri dönün .
Sunucu tarafı oluşturmayı kullan
JavaScript miktarını en aza indirmek, çoğunlukla istemci tarafından oluşturulan sitelerde odaklanılması gereken ilk şey olmalıdır. Bununla birlikte, LCP’yi olabildiğince iyileştirmek için bir sunucu oluşturma deneyimini birleştirmeyi de düşünmelisiniz.
Bu kavram, uygulamayı HTML’ye dönüştürmek için sunucuyu kullanarak çalışır, burada istemci daha sonra tüm JavaScript’i ve gerekli verileri aynı DOM içeriğinde ” hidratlar “. Bu, sayfanın ana içeriğinin yalnızca istemcide değil, ilk olarak sunucuda oluşturulmasını sağlayarak LCP’yi iyileştirebilir, ancak birkaç dezavantajı vardır:
- Sunucuda ve istemcide aynı JavaScript ile oluşturulmuş uygulamanın bakımı karmaşıklığı artırabilir.
- Sunucuda bir HTML dosyası oluşturmak için JavaScript çalıştırmak, yalnızca sunucudan statik sayfalar sunmaya kıyasla her zaman sunucu yanıt sürelerini (TTFB) artırır.
- Sunucu tarafından oluşturulan bir sayfa etkileşime girilebiliyor gibi görünebilir, ancak tüm istemci tarafı JavaScript çalıştırılana kadar herhangi bir kullanıcı girdisine yanıt veremez. Kısacası, Etkileşim Süresi’ni (TTI) daha da kötüleştirebilir.
Ön oluşturmayı kullan
Ön işleme, sunucu tarafı oluşturmadan daha az karmaşık olan ve ayrıca uygulamanızda LCP’yi iyileştirmenin bir yolunu sağlayan ayrı bir tekniktir. Kullanıcı arabirimi olmayan bir tarayıcı olan başsız bir tarayıcı, derleme süresi boyunca her yolun statik HTML dosyalarını oluşturmak için kullanılır. Bu dosyalar daha sonra uygulama için gerekli olan JavaScript paketleriyle birlikte gönderilebilir.
Ön oluşturma ile TTI yine de olumsuz etkilenir, ancak sunucu yanıt süreleri, her sayfayı yalnızca talep edildikten sonra dinamik olarak işleyen bir sunucu tarafı oluşturma çözümünde olduğu kadar etkilenmez.

Farklı sunucu oluşturma mimarilerine daha derin bir bakış için, web üzerinde Rendering’e bir göz atın .
Geliştirici araçları
LCP’yi ölçmek ve hatalarını ayıklamak için bir dizi araç mevcuttur:
- Lighthouse 6.0 , bir laboratuar ortamında LCP ölçümü için destek içerir.
- Zamanlama bölümünde Performansı Krom DevTools’un panelin bir LCP işaretleyici ve gösterileri bulunmaktadır LCP ile ilişkili öğesi sizi vurgulu üzerinde İlgili Düğüm alanında.
- Chrome Kullanıcı Deneyimi Raporu , kaynak düzeyinde birleştirilmiş gerçek dünya LCP değerleri sağlar