Açıklanan En Büyük İçerikli Boya: Zamanınızı Nasıl İyileştirirsiniz?

Web sitenizdeki En Büyük İçerikli Boya'yı nasıl geliştireceğiniz konusunda mı zorlanıyorsunuz? Ya da En Büyük İçerikli Boya'nın ne anlama geldiğinden ve neden en başta bununla ilgilenmeniz gerektiğinden emin değil misiniz?

Nereden başlarsanız başlayın bu yazı tam size göre çünkü Largest Contentful Paint hakkında bilmeniz gereken her şeyi öğreneceksiniz.

Bu, En Büyük İçerikli Boya'nın ne anlama geldiğini, neden önemli olduğunu, nasıl ölçüleceğini ve nasıl geliştirileceğini içerir.

Mevcut bilgi seviyenize göre belirli bir bölüme atlamak için aşağıdaki içindekileri kullanabilirsiniz. Ya da baştan başlamak için okumaya devam edin.

En Büyük İçerikli Boya (LCP) Nedir? En Büyük İçerikli Boyanın Anlamını Açıklamak

En Büyük İçerikli Boyama, bir web sayfasının ana içeriğinin yüklenmesinin ne kadar sürdüğünü ölçen bir performans metriğidir.

En Büyük İçerikli Boyama, Kümülatif Düzen Kayması (CLS) ve İlk Giriş Gecikmesi (FID) ile birlikte Google'ın Önemli Web Verileri ölçümlerinin bir parçasıdır.

Daha teknik bir düzeyde, En Büyük İçerikli Boyama, kullanıcının sayfa yüklemesini başlatmasından en büyük metin bloğunun, resmin veya videonun görünüm alanı içinde işlenmesine kadar geçen süreyi ölçer.

LCP açısından “ana içerik” ne anlama geliyor?

Ana içerik, söz konusu asıl sayfaya bağlı olacaktır, ancak aşağıdakilerden herhangi biri olabilir:

• Metin – daha spesifik olarak, metin düğümleri veya diğer satır içi düzey metin öğeleri içeren herhangi bir blok düzeyindeki öğe.
• Görüntü – bir <img> öğesinin içindeki öğeler veya bir <svg> öğesinin içindeki <image> öğeleri.
• Video – herhangi bir <video> öğesi (poster görüntüsünü kullanır).
• Arka plan resmi olan bir öğe – yalnızca CSS url() işlevi aracılığıyla yüklendiğinde (CSS gradyanları için geçerli değildir).

Bu yazının ilerleyen kısımlarında, sitenizdeki herhangi bir sayfa için tam olarak En Büyük İçerikli Boya öğesini nasıl bulacağınızı öğreneceksiniz.

En Büyük İçerikli Boya ile İlk İçerikli Boya Karşılaştırması

Sorabileceğiniz yaygın sorulardan biri, En Büyük İçerikli Boyama ile bir başka yaygın performans ölçütü olan İlk İçerikli Boyama arasındaki farkın ne olduğudur.

İki terim benzer olsa da, temel fark, En Büyük Zengin İçerikli Boyama sayfanın "ana içeriğinin" yüklenmesinin ne kadar sürdüğünü ölçerken, İlk Zengin İçerikli Boyama "ilk nesnenin" yüklenmesinin ne kadar sürdüğünü ölçer ( olsun ya da olmasın) . ana içeriktir ).

Temel olarak:

• LCP = yalnızca ana içerik
• FCP = içeriğin ne olduğuna bakılmaksızın ilk içerik parçası

Bu nedenle, "ana içerik" öğesi genellikle ilk yüklenen öğe olmadığından, LCP süreniz neredeyse her zaman FCP sürenizden biraz daha yüksek olacaktır.

Sitenizin En Büyük İçerikli Boyama Süresi Neden Önemlidir?

Sitenizin En Büyük İçerikli Boyama sürelerinin önemli olmasının iki ana nedeni vardır:

1. Kullanıcı deneyimi
2. Arama motoru optimizasyonu

Kullanıcı deneyimi

Sitenizin En Büyük İçerikli Boyama sürelerini önemsemenizin en büyük nedeni, bu ölçümün, sitenizin performansı söz konusu olduğunda kullanıcılarınızın deneyimlerini anlamak için iyi bir vekil olmasıdır.

Çoğu kullanıcı, web sitenizin her bir betiği ve öğeyi tam olarak yüklemesinin ne kadar sürdüğünü umursamaz. Bunun yerine, web sitenizden değer elde etmeye başlamalarının ne kadar sürdüğünü önemserler.

En Büyük İçerikli Boya, ana içeriğin yüklenmesinin ne kadar sürdüğünü görerek bu "değer" anını ölçmeye çalışmakla iyi bir iş çıkarıyor.

Hızlı En Büyük İçerikli Boyama süresi elde etmek için sitenizi optimize ederseniz, en azından performans söz konusu olduğunda, kullanıcılara sitenizde sağlam bir deneyim sunduğunuzdan oldukça emin olabilirsiniz (ayrıca müşteri dostu bir tasarım isteyeceksiniz) ve iyi kullanılabilirlik).

Elbette bu, diğer performans ölçütlerini göz ardı etmeniz gerektiği anlamına gelmez. Her zaman sitenizin performansına ve darboğazlarına bütünsel bir bakış atmanızı öneririz, bu nedenle Kinsta barındırma - Kinsta APM kullanıyorsanız ücretsiz olarak kullanılabilen kendi uygulama performansı izleme (APM) aracımızı oluşturduk.

Arama Motoru Optimizasyonu (SEO)

Arama motoru optimizasyonu cephesinde, Largest Contentful Paint, Google'ın 2022 Sayfa Deneyimi algoritma güncellemesinde bir SEO sıralama faktörü olarak kullanmaya başladığı, Google'ın Core Web Vitals metrik üçlüsünün bir parçasıdır.

Bu, zayıf En Büyük İçerikli Boyama sürelerine sahip olmanın, sitenizin Google'ın arama sonuçlarındaki performansını etkileyebileceği anlamına gelir.

İçerik kalitesi/alaka düzeyi ve geri bağlantılar gibi diğer faktörler, web sitenizin sıralamasında hala çok daha büyük bir rol oynasa da, SEO çabalarınızdan en iyi şekilde yararlanmanızı sağlamak için sitenizin En Büyük İçerikli Boyama sürelerini optimize etmek önemlidir.

En Büyük İçerikli Boya Puanlarını Ne Etkileyebilir?

İki "ana" sorun türü, bir sayfanın En Büyük İçerikli Boyama sürelerini etkileyebilir:

1. Sunucunuzun ilk HTML belgesiyle yanıt vermesinin ne kadar sürdüğü.
2. Gerçek LCP kaynağının yüklenmesinin ne kadar sürdüğü.

İlk sorun türü, sunucu yanıt süresiyle, yani ilk bayta kadar geçen süreyle (TTFB) ilgilidir. Bir kullanıcının tarayıcısının ana içeriği yüklemeyi düşünmeden önce sunucudan bir yanıt alması gerekir.

Bunu etkileyen yaygın sorunlardan bazıları şunlardır:

• Sayfa önbelleğini kullanmamak – sayfa önbelleğini kullanmamak, sunucuyu HTML belgesiyle yanıt vermeden önce daha fazla "iş" yapmaya zorlar.
• Yavaş barındırma - yavaş bir barındırma sağlayıcısı, ne yaparsanız yapın, her zaman yavaş bir TTFB'ye sahip olacaktır.
• CDN kullanmamak – içerik dağıtım ağı (CDN), kullanıcıların sayfaları sitenizin kaynak sunucusundan indirmesini gerektirmek yerine, sayfaları küresel ağından sunarak TTFB'yi hızlandırabilir.

Sitenizin sunucusu ilk HTML belgesini teslim ettikten sonra, gerçek ana içerik öğesinin yüklenmesi söz konusu olduğunda daha fazla darboğaz olabilir.

Bunu etkileyen yaygın sorunlardan bazıları şunlardır:

• Oluşturmayı engelleyen JavaScript veya CSS (veya genel olarak optimize edilmemiş/gereksiz kod) – kullanıcının tarayıcısının ana öğeyi yüklemeden önce gereksiz JavaScript veya CSS'yi indirmesi ve/veya işlemesi gerekiyorsa, bu LCP'nizi yavaşlatır.
• Optimize edilmemiş görüntüler – LCP öğesi bir görüntüyse, optimize edilmemiş görüntülerin kullanılması zamanınızı yavaşlatır çünkü daha büyük görüntülerin indirilmesi daha uzun sürer.
• Optimize edilmemiş yazı tipi yükleme – LCP öğesi metin ise, özel yazı tiplerini optimize edilmemiş bir şekilde yüklemek, o metnin görünmesinin daha uzun sürmesine neden olabilir.
• Sıkıştırılmamış dosyalar – Gzip veya Brotli gibi sıkıştırma teknolojilerini kullanmıyorsanız, bu, kullanıcının tarayıcısının sitenizin dosyalarını indirmesinin daha uzun sürmesine neden olur.

Sitenize bağlı olarak, her iki alanda veya alanlardan yalnızca birinde darboğaz yaşıyor olabilirsiniz. Tüm bu sorunları nasıl çözeceğinizi bu gönderide biraz sonra öğreneceksiniz.

İyi Bir En Büyük İçerikli Boyama Süresi Nedir?

Google, "İyi" En Büyük İçerikli Boyama süresini 2,5 saniyenin altında olarak tanımlar.

Sayfanızın En Büyük İçerikli Boyama süresi 2,5 ile 4,0 saniye arasındaysa, Google bunu "İyileştirme Gerekiyor" olarak sınıflandırır. Ve sayfanızın süresi 4.0 saniyenin üzerindeyse Google bunu “Kötü” olarak tanımlar.

İşte bunu görsel olarak gösteren bir Google grafiği:

En Büyük İçerikli Boya Nasıl Ölçülür: En İyi LCP Test Araçları

En Büyük İçerikli Boyama için sitenizin performansını test etmek için kullanabileceğiniz bir dizi araç vardır - en yararlılarından bazılarını inceleyelim…

Sayfa Hızı Bilgileri

PageSpeed ​​Insights, dört yararlı bilgi parçası sunduğundan, En Büyük İçerikli Boyama'yı değerlendirmek için en iyi araçlardan biridir:

1. Sitenizin gerçek kullanıcılarla En Büyük İçerikli Boyama sürelerini Chrome UX raporundan görebilirsiniz ( sitenizde rapora dahil edilecek kadar trafik varsa ).
2. Sitenizin nasıl performans gösterdiğini görmek için simüle edilmiş testler çalıştırabilirsiniz.
3. Google, hangi öğeyi optimize edeceğinizi bilmenizi sağlayan test için kullandığı gerçek LCP öğesini size söyleyecektir.
4. Google, LCP sürenizi nasıl iyileştireceğiniz konusunda öneriler sağlayacaktır.

Nasıl kullanılacağı aşağıda açıklanmıştır:

1. PageSpeed ​​Insights web sitesine gidin.
2. Test etmek istediğiniz sayfanın URL'sini girin.
3. Analiz Et'i tıklayın.

Google daha sonra size hem mobil hem de masaüstü için sonuçları gösterecektir - her ikisini de kontrol ettiğinizden emin olun.

Google'ın LCP'yi hesaplamak için kullandığı ana öğeyi bulmak için Teşhis bölümüne ilerleyebilir ve En Büyük İçerikli Boyama öğesi bölümünü genişletebilirsiniz:

Yine, hem mobil hem de masaüstünü kontrol ettiğinizden emin olun çünkü LCP öğesi her biri için farklı olabilir.

Chrome Geliştirici Araçları

Ayrıca, Performans sekmesini veya Lighthouse denetim özelliğini kullanarak En Büyük İçerikli Boyama süresini doğrudan Chrome Geliştirici Araçları'ndan test edebilirsiniz. Size daha fazla bilgi verdiği için Performans sekmesini kullanmanızı öneririz.

İşte nasıl başlayacağınız:

1. Test etmek istediğiniz sayfayı açın.
2. Chrome Geliştirici Araçları'nı açın.
3. Performans sekmesine gidin.
4. Web Verileri kutusunun işaretli olduğundan emin olun.
5. Yeniden Yükle düğmesini tıklayın ( aşağıda belirtilmiştir ).

Artık sitenizin tam bir analizini görmelisiniz.

Ağ sekmesinde LCP'nin üzerine gelirseniz saati görebilirsiniz:

Zamanlamalar sekmesinde LCP'nin üzerine gelirseniz gerçek LCP öğesini görebilirsiniz:

Google Arama Konsolu

Google Arama Konsolu, En Büyük İçerikli Boyama süresi için tek bir sayfayı test etmenize izin vermese de, site çapındaki performansı değerlendirmek için gerçekten yararlıdır.

Sitenizdeki her sayfanın farklı bir LCP süresi olacaktır, bu nedenle ana sayfanızı öylece test edip bir gün bekleyemezsiniz.

Google Search Console ile sitenizdeki her sayfanın Google'ın “İyi”, “İyileştirme Gerekiyor” ve “Kötü” kategorilerinde nereye düştüğünü görebileceksiniz. Performans verileri Chrome UX raporundan gelir, yani gerçek kullanıcı verilerine dayanır.

Henüz yapmadıysanız, önce sitenizi Google Search Console ile doğrulamanız gerekir.

Bunu yaptıktan sonra, LCP raporuna şu şekilde erişebilirsiniz:

1. Siteniz için Google Search Console'u açın.
2. Deneyim sekmesi altındaki Önemli Web Verileri'ne gidin.
3. Mobil veya Masaüstü grafiğinin yanındaki Raporu Aç'a tıklayın.
4. URL'ler neden iyi kabul edilmiyor bölümünde sorun olup olmadığına bakın. Sorunu tıklarsanız, hangi URL'lerin sorunlara neden olduğu hakkında daha fazla bilgi görebilirsiniz.

*Veriler her birinde farklı olabileceğinden, hem masaüstü hem de mobil sonuçlarını kontrol ettiğinizden emin olun.

Web Sayfası Testi

WebPageTest, simüle edilmiş performans testlerini çalıştırmak için başka bir kullanışlı seçenektir.

PageSpeed ​​Insights'tan farklı olarak WebPageTest, test konumu, bağlantı hızı, cihaz ve daha fazlası gibi çeşitli test ölçümlerini tamamen özelleştirmenize olanak tanır. Diğer araçlara göre kullanmanın ana avantajı budur - size testi yapılandırmak için daha fazla seçenek sunar.

Testi şu şekilde çalıştırabilirsiniz:

1. WebPageTest'e gidin.
2. Test etmek istediğiniz sayfa URL'sini ekleyin.
3. Testinizi tamamen yapılandırmak için Gelişmiş Yapılandırma seçeneklerini genişletin.

Sonuçlar sayfasında, tonlarca başka performans ölçümüyle birlikte (şelale analizi dahil) LCP verilerini göreceksiniz.

En Büyük İçerikli Boya Öğesi Nasıl Bulunur?

En Büyük İçerikli Boyama'yı iyileştirmek istiyorsanız, Google'ın LCP sürenizi hesaplamak için tam olarak hangi öğeyi kullandığını bilmek gerçekten yararlı olabilir.

Örneğin, Google'ın ana sayfanızda LCP öğesi olarak kahraman resminizi kullandığını biliyorsanız, ana sayfanızın LCP sürelerini iyileştirmek istiyorsanız bu ana resmi mümkün olan en kısa sürede sunmanın yollarını bulmanız gerektiğini bilirsiniz.

Daha önce de belirttiğimiz gibi, En Büyük İçerikli Boyama öğenizi PageSpeed ​​Insights veya Chrome Geliştirici Araçlarını kullanarak bulabilirsiniz.

LCP öğeniz farklı cihazlarda farklı olabileceğinden hem mobil hem de masaüstü sonuçlarını kontrol ettiğinizden emin olun.

WordPress'te (veya Diğer Platformlarda) En Büyük İçerikli Boya Nasıl Geliştirilir

Artık Largest Contentful Paint hakkında her şeyi bildiğinize göre, WordPress'te Largest Contentful Paint'i nasıl iyileştireceğinize ilişkin bazı eyleme geçirilebilir ipuçlarına geçelim.

Bu ipuçları için WordPress'e odaklanacak olsak da, tüm ipuçları evrenseldir ve diğer web sitesi türleri için geçerlidir.

Sunucu Yanıt Süresini İyileştirmek için Önbelleğe Almayı Ayarlayın

Önbelleğe alma, tamamlanmış HTML belgesini ziyaretçilerin tarayıcılarına teslim etmeden önce sunucunuzun yapması gereken işleme işini azaltarak sunucu yanıt süresini iyileştirebilir.

WordPress sitenizi Kinsta ile barındırıyorsanız, Kinsta sizin için optimize edilmiş önbelleği otomatik olarak uyguladığı için önbelleğe almayı yapılandırma konusunda endişelenmenize gerek yoktur.

Başka bir yerde barındırıyorsanız, WP Super Cache gibi ücretsiz bir eklenti veya WP Rocket gibi ücretli bir eklenti kullanarak sitenizde önbelleğe almayı etkinleştirebilirsiniz.

Daha fazla seçenek için, en iyi WordPress önbellek eklentilerini içeren gönderimize göz atın.

Daha Hızlı WordPress Hosting'e Yükseltin

Bu listedeki tüm taktikler, LCP sürenizi iyileştirmenize yardımcı olsa da, lafı dolandırmak yok:

Yavaş, optimize edilmemiş WordPress barındırma kullanıyorsanız, LCP süreleriniz her zaman barındırıcınızın kalitesiyle sınırlandırılacaktır.

İşleri biraz daha iyi hale getirebilirsiniz, ancak sunucunuz yavaşsa 2,5 saniyenin altında LCP sürelerine ulaşmak için her zaman mücadele edeceksiniz.

En Büyük İçerikli Boyama sürelerinizi iyileştirmenin en kolay yolunu istiyorsanız sitenizi Kinsta'ya taşıyabilirsiniz. Kinsta yalnızca performans açısından optimize edilmiş barındırma altyapısı sunmakla kalmaz, aynı zamanda bu listedeki diğer birçok optimizasyonun üstesinden gelmek için yerleşik özelliklere de sahibiz.

Bu, En Büyük İçerikli Boyama sürelerini optimize etmekle uğraşmak yerine sitenizi büyütmeye odaklanabileceğiniz anlamına gelir.

Eğer ilgileniyorsanız, Kinsta herhangi bir ana bilgisayardan sınırsız sayıda web sitesini ücretsiz olarak taşıyacaktır - buradan ücretsiz geçiş hakkında daha fazla bilgi edinin.

Hâlâ sınırdaysanız – önce bu listedeki diğer ipuçlarını deneyin. Ancak bu listedeki her şeyi yapmanıza rağmen hala mücadele ediyorsanız, daha iyi bir barındırmaya ihtiyacınız olabilir.

Bir İçerik Dağıtım Ağı (CDN) kullanın

CDN olmadan, sitenizin tüm ziyaretçilerinin barındırma sunucunuzdan bir sayfanın HTML'sini ve statik varlıklarını indirmesi gerekir.

Ziyaretçileriniz sunucunuza yakınsa, bu genellikle bir sorun değildir. Ancak ziyaretçileriniz dünyanın dört bir yanına dağılmış durumdaysa bu, ziyaretçi ile sitenizin sunucusu arasındaki fiziksel mesafe nedeniyle sitenizi yavaşlatabilir.

Bir CDN ile sitenizin statik varlıklarını (hatta sitenizin tamamlanmış HTML sayfalarını) CDN'nin küresel ağına dağıtabilirsiniz. Bu şekilde, ziyaretçiler çok daha hızlı olan CDN'nin en yakın konumundan dosya indirebilir.

Kinsta ile ev sahipliği yapıyorsanız, en iyi sonuçlar için Kinsta'nın Edge Önbelleğe Alma özelliğini kullanmanızı öneririz.

Kinsta'nın uç önbelleğe alma özelliği, sitenizin tam HTML sayfalarını ve statik varlıklarını Cloudflare'nin küresel ağına önbelleğe alarak çalışır ( çoğu CDN çözümü gibi statik varlıkları yalnızca önbelleğe almak yerine ).

Bu, sitenizin ziyaretçilerinin, hem sunucu yanıt süresini hem de LCP kaynağınızın yüklenmesini hızlandıran en yakın uç konumdan tüm sayfayı indirebileceği anlamına gelir.

Kinsta'nın Edge Önbelleğini etkinleştirmek için sitenizin MyKinsta'daki panosundaki Edge Önbelleğe Alma sekmesine gidin.

Başka bir yerde barındırıyorsanız KeyCDN, Bunny, StackPath ve diğerleri gibi popüler CDN hizmetlerini kullanarak sitenizin statik varlıkları için bir CDN ayarlayabilirsiniz.

Oluşturmayı Engelleyen JavaScript'ten Kaçının (Ertele veya Kaldır)

Oluşturmayı engelleyen JavaScript, o sırada gerekli olmasa bile ana LCP öğenizden önce yüklenen JavaScript'tir.

LCP öğesinin yüklenmesini geciktirerek, LCP yükleme sürelerinizi yavaşlatır.

Bunu düzeltmek için uygulayabileceğiniz birkaç strateji vardır:

• Mümkünse gereksiz JavaScript'i kaldırın.
• Sitenizin ana öğesinin yüklenmesini engellememesi için JavaScript'i erteleyin.
• Bir kullanıcı sitenizle etkileşime geçene kadar JavaScript'i geciktirin.

Çoğu insan için bu işlevi uygulamanın en kolay yolu, Autoptimize veya WP Rocket gibi eklentilerdir.

Bunun nasıl yapılacağına dair eksiksiz bir kılavuz için, çok ayrıntılı iki gönderiye sahibiz:

• WordPress'te oluşturmayı engelleyen kaynaklar nasıl ortadan kaldırılır
• JavaScript'in ayrıştırılması nasıl ertelenir

Oluşturmayı Engelleyen CSS'den Kaçının ve CSS Dağıtımını Optimize Edin

Nasıl optimize edilmemiş JavaScript sitenizi yavaşlatabilirse, optimize edilmemiş CSS de aynı şeyi yapabilir.

Esasen, mümkün olduğu kadar az CSS yüklemek istiyorsunuz. Ve yüklemeniz gereken CSS için, onu en uygun şekilde yüklemek istersiniz. Tipik olarak bu, önemli CSS'yi erken yüklemek, kritik olmayan CSS'yi ise yükleme işleminin daha sonrasına ertelemek istediğiniz anlamına gelir.

Geliştirici değilseniz, bunu başarmanın en kolay yolu Perfmatters, WP Rocket veya FlyingPress gibi performans optimizasyonu eklentilerini kullanmaktır.

Örneğin, WP Rocket, kullanılmayan CSS'yi sayfa sayfa kaldırmak ve CSS'yi en iyi şekilde sunmak için yerleşik özellikler sunar.

Tüm bunları nasıl yapacağınıza daha derinlemesine bakmak istiyorsanız, CSS'yi nasıl optimize edeceğimize ilişkin eksiksiz kılavuzumuza göz atın.

HTML, CSS ve JavaScript'inizi Küçültün

Yukarıdaki kod optimizasyon tekniklerine ek olarak, sitenizin HTML, CSS ve JavaScript'ini de küçültmek isteyeceksiniz.

Esasen bu, boyutunu küçültmek için sitenizin kodundaki gereksiz karakterleri ve boşlukları kaldırır.

Kinsta ile ev sahipliği yapıyorsanız Kinsta, küçültmeyi Cloudflare entegrasyonumuz aracılığıyla otomatik olarak halledebilir. Bu özelliği nasıl kontrol edeceğiniz aşağıda açıklanmıştır:

1. Sitenizin kontrol panelini MyKinsta'da açın.
2. CDN sekmesine gidin.
3. Görüntü Optimizasyonu'nun yanındaki Ayarlar'a tıklayın.
4. CSS ve JS için kutuları işaretleyin ve ayarları kaydedin.

Sitenizi başka bir yerde barındırıyorsanız, kodunuzu küçültmek için Autoptimize gibi ücretsiz bir eklenti veya Perfmatters, WP Rocket veya FlyingPress gibi premium kapsamlı eklentilerden birini kullanabilirsiniz.

Veya daha fazla bilgi edinmek için tam kod küçültme eğitimimize göz atın. Eğitim JavaScript'e odaklansa da, diğer kodları küçültmek için aynı yöntemleri ve eklentileri kullanabilirsiniz.

Sunucu Düzeyinde Sıkıştırma Kullanın (Gzip veya Brotli)

Sunucu düzeyinde sıkıştırma, Gzip veya Brotli gibi teknolojileri kullanarak sitenizin dosyalarının boyutunu küçültmenizi sağlar.

Örneğin, Kinsta web sitesi için kullandığımız sıkıştırma, Kinsta ana sayfasının dosya boyutunu %85,82 oranında azalttı.

WordPress web sitenizi Kinsta ile barındırıyorsanız, bunun için endişelenmenize gerek yok çünkü Kinsta, Brotli sıkıştırmasını tüm siteler için otomatik olarak etkinleştirir.

Sitenizi başka bir yerde barındırıyorsanız, sitenizde Gzip veya Brotli'nin etkin olup olmadığını kontrol etmek için GiftOfSpeed'in bu ücretsiz aracını kullanabilirsiniz.

Siteniz sıkıştırma kullanmıyorsa, ayarlamak için Gzip sıkıştırmasını nasıl etkinleştireceğinizle ilgili kılavuzumuzu takip edebilirsiniz.

Sitenizin içeriğini sunmak için Cloudflare kullanıyorsanız, Cloudflare ayrıca Brotli sıkıştırmasını etkinleştirmek için yerleşik bir ayara sahiptir:

1. Sitenizi Cloudflare kontrol panelinde açın.
2. Kenar çubuğu menüsünde Hız → Optimizasyon seçeneğine gidin.
3. Brotli geçişini etkinleştirin.

Görüntüleri Sıkıştırın ve Yeniden Boyutlandırın

LCP öğeniz bir görüntüyse, bu görüntü dosyasının boyutunu küçültmenin yollarını bulmak, kullanıcının tarayıcısının görüntüyü indirmesi için gereken süreyi azaltır (ve böylece LCP sürenizi hızlandırır).

Görüntünün boyutunu küçültmek için, görüntüyü gerçekten kullandığınız boyutlara göre yeniden boyutlandırmalı, kayıplı veya kayıpsız sıkıştırma kullanarak sıkıştırmalı ve WebP gibi optimize edilmiş bir biçimde sunmalısınız.

Bu yaklaşım, genel olarak bir performans optimizasyonu en iyi uygulamasıdır - En Büyük İçerikli Boyama'ya özgü değildir.

Daha kapsamlı bir görünüm için, web siteleri için görsel optimizasyonuna ilişkin ayrıntılı kılavuzumuza göz atın.

Ve evet, WordPress sitenizi Kinsta ile barındırıyorsanız, bunun için endişelenmenize gerek yok çünkü Kinsta, herhangi bir üçüncü taraf araca ihtiyaç duymadan sitenizin resimlerini otomatik olarak optimize eden yerleşik bir özellik sunuyor.

Bu özelliği şu şekilde etkinleştirebilirsiniz:

1. Sitenizin kontrol panelini MyKinsta'da açın.
2. CDN sekmesine gidin.
3. Görüntü Optimizasyonu'nun yanındaki Ayarlar'a tıklayın.
4. Tercih ettiğiniz görüntü iyileştirme düzeyini seçin ve ayarları kaydedin - Lossy'yi kullanmak, görüntü kalitesi üzerinde küçük bir etkisi olsa da, en büyük hız iyileştirmelerini sunacaktır.

En Büyük İçerikli Paint Görüntüsünü Önceden Yükleyin

LCP öğeniz bir görüntüyse, LCP'yi iyileştirmenin başka bir stratejisi de En Büyük İçerikli Boyama görüntüsünü önceden yüklemektir. Bu nedenle, PageSpeed ​​Insights'ta "En Büyük İçerikli Boya resmini önceden yükle" gibi bir öneri görebilirsiniz.

Önceden yükleme ile bir kullanıcının tarayıcısına, sitenizin LCP öğesi olan belirli bir resim gibi belirli kaynakları indirmeye öncelik vermesini söyleyebilirsiniz.

LCP görüntülerini önceden yüklemenin en teknik olmayan yolu, özel bir Önyükleme Kritik Görüntüler özelliği sunan Perfmatters gibi bir eklenti kullanmaktır. Tek yapmanız gereken kaç resmin önceden yükleneceğini belirtmektir - çok fazla öğenin önceden yüklenmesinin olumsuz bir etkisi olabileceğinden, tek bir resimle başlamanızı öneririz.

WordPress.org'da bunu başarmak için WPZOOM'un Preload Featured Images eklentisi gibi bazı ücretsiz eklentilerin yanı sıra FlyingPress gibi diğer premium eklentiler de bulunmaktadır.

Geç Yükleme Sorunlarını Kontrol Edin

PageSpeed ​​Insights'ta "En Büyük İçerikli Boya resmini önceden yükle" mesajını tetikleyebilecek bir diğer sorun, WordPress sitenizin resimleri geç yüklemesiyle ilgili sorunlardır.

Veya bu, PageSpeed ​​Insights'ta "En Büyük Contentful Paint resmi geç yüklendi" uyarısını da tetikleyebilir.

Geç yükleme, bir kullanıcı sitenizle etkileşime girene kadar belirli kaynakların (resimler gibi) yüklenmesini bekleyerek sitenizin ilk yükleme sürelerini hızlandırmanıza olanak tanır.

Bu normalde iyi bir şey olsa da, siteniz LCP öğeniz olan görüntüyü geç yüklemeye çalışıyorsa LCP sürelerinizi yavaşlatabilir. Bu nedenle, sitenizin ilk görünüm alanında görünen herhangi bir resmi yüklemekte tembel olmadığından emin olmak isteyeceksiniz.

WordPress'in WordPress 5.5'te sunduğu yerel tarayıcı geç yükleme özelliğini kullanıyorsanız, bu sorunu yaşamamalısınız çünkü WordPress zaten WordPress 5.9'dan itibaren ilk içerik içi görüntüyü otomatik olarak dışlar.

İlk görüntüden daha fazlasını hariç tutmak istiyorsanız, wp_omit_loading_attr_threshold işlevini kullanabilirsiniz (ancak çoğu kişinin burada bir şey yapması gerekmez).

Ancak, JavaScript destekli bir yavaş yükleme eklentisi kullanıyorsanız, bu hariç tutmayı eklentinin ayarlarından manuel olarak ayarlamanız gerekebilir. Örneğin, Perfmatters eklentisi, ilk "X" görüntülerini geç yüklemeden hariç tutmanıza izin veren bir seçenek içerir.

Yavaş yükleme eklentiniz bu tür bir hariç tutmayı ayarlamanıza izin vermiyorsa, izin veren farklı bir eklentiye geçebilirsiniz.

Font-Display ile Yazı Tipi Yüklemeyi Optimize Edin: İsteğe Bağlı

LCP öğeniz metin ise, sitenizin yazı tipi yükleme işlemi metnin görünmesini geciktirebilir ve bu da LCP sürenizi yavaşlatır.

Genellikle bu, özel yazı tiplerini kullanırken olur. Siteniz herhangi bir metni özel yazı tipi yüklenene kadar bekleyecek şekilde yapılandırılmışsa, özel yazı tipi dosyasının yüklenmesi uzun sürerse bu işlem işleri yavaşlatacaktır.

Bunu düzeltmek için Font-Display: İsteğe Bağlı CSS tanımlayıcısını kullanabilirsiniz.

Bu, özel yazı tipi küçük bir pencerede (genellikle yaklaşık 100ms veya daha kısa) yüklenmiyorsa, tarayıcıya bir yedek yazı tipi kullanmasını söyler.

Basit bir dille bu, temel olarak, tarayıcının özel yazı tipine yükleme şansı vermesi gerektiği anlamına gelir. Ancak, özel yazı tipi yeterince hızlı yüklenmezse, içeriğin daha fazla gecikmesini önlemek için tarayıcının yalnızca bir yedek sistem yazı tipi kullanması gerekir.

Alternatif olarak, yedek yazı tipini hemen yükleyen ve ardından özel yazı tipi yüklendikten sonra özel yazı tipini "değiştiren" Yazı Tipi Görüntüleme: Değiştirme özelliğini de kullanabilirsiniz. Ancak bu yaklaşım, yazı tiplerinin boyutları farklıysa Kümülatif Düzen Kayması ile ilgili sorunlara neden olabilir, bu nedenle dikkatli olmak isteyeceksiniz.

Özel yazı tipiniz web sitenizin tasarımı için kesinlikle gerekli değilse, Yazı Tipi Görüntüleme: İsteğe bağlı kullanmak, Önemli Web Verileri açısından genellikle en iyi seçenektir.

Doğrudan CSS kullanmakta rahatsanız, alt temanızın stil sayfasında Font-Display özelliğini manuel olarak düzenleyebilirsiniz.

CSS kullanmak istemiyorsanız, bunu yapmanıza yardımcı olacak eklentiler de bulabilirsiniz, ancak bunların çoğu Google Yazı Tipleri için optimize etmeye odaklanmıştır:

• Asset CleanUp – Pro sürümüyle ücretsiz ve özel yerel yazı tipleri için Google Yazı Tiplerini destekler.
• Perfmatters - Google Yazı Tipleri için bir özellik sunar.

Sitenizi tasarlamak için Elementor kullanıyorsanız, Elementor ayrıca bunu Elementor ile oluşturduğunuz sayfalar için kullanmanıza izin veren yerleşik bir seçenek içerir:

1. Elementor → Ayarlar'a gidin.
2. Gelişmiş sekmesini açın.
3. Google Yazı Tipleri Yükü açılır menüsünü İsteğe Bağlı olarak ayarlayın.

Özet

Bigest Contentful Paint'i nasıl geliştireceğinizi öğrenmek, sitenizin kullanıcı deneyimini iyileştirmek ve arama motoru sıralamalarınızı en üst düzeye çıkarmak için önemlidir.

Largest Contentful Paint'i iyileştirmenin genellikle iki bölümü vardır - sunucu yanıt sürenizi hızlandırmak ve ardından sitenizin kodunu LCP öğesini mümkün olan en kısa sürede oluşturmak için optimize etmek.

Yavaş sunucu yanıt süresi konusunda endişelenmek istemiyorsanız, WordPress sitenizi Kinsta'ya taşıyabilirsiniz. Kinsta'nın performans açısından optimize edilmiş mimarisi, sitenizi olabildiğince çabuk teslim etmek için özel olarak tasarlanmıştır.

Ayrıca, Kinsta'nın Edge Önbelleğe Alma özelliği ile sitenizin sayfalarını Cloudflare'in küresel ağında önbelleğe alabilirsiniz; bu, dünyanın her yerinden ziyaretçilerin ışık hızında sunucu yanıt sürelerinin (ve sonuç olarak ışık hızında LCP sürelerinin) keyfine varacağı anlamına gelir.

Daha fazla bilgi edinmek istiyorsanız, Kinsta'nın yönetilen WordPress barındırma veya Kinsta'nın yönetilen WooCommerce barındırma hakkında daha fazla bilgi için bu sayfalara göz atabilirsiniz.

Bazı özel LCP performans optimizasyonlarında size yardımcı olacak bir profesyonel isterseniz, Kinsta Ajans Dizininde bir sağlayıcı da bulabilirsiniz.