En Büyük İçerikli Boya Nasıl Optimize Edilir ve Google'da Daha Yüksek Sıralanır

Web Sitenizin En Büyük İçerikli Boyasını Nasıl Ölçersiniz?

Öğrenmek için ücretsiz bir web sitesi hız testi yapın. LCP hızınız hemen görüntülenecektir.

Hız testinizin sonuçları size şunları söyleyecektir:

• LCP eşiği karşılandı.
• Diğer herhangi bir Core Web Vital'ı optimize etmeniz gerekiyor.

En Büyük İçerikli Boya Nasıl Hesaplanır?

Google, deneyimlerin yüzde 75'lik dilimine bakar; bu, gerçek web sitesi ziyaretçilerinin %25'inin 3,09 saniye veya daha yüksek LCP yükleme süreleri yaşadığı ve kullanıcıların %75'i için LCP'nin 3,09 saniyenin altında olduğu anlamına gelir.

Bu örnekte, gerçek kullanıcı LCP'si 3,09 saniye olarak gösterilmiştir.

Önemli Web Verileri Verilerimin Laboratuvar Testi Sonuçları Nelerdir?

Bu özel web hız testiyle, kontrollü bir test ortamında toplanan laboratuvar ölçümlerini de göreceksiniz. Bu metrikler Google sıralamalarını doğrudan etkilemese de bu verilerin iki avantajı vardır:

1. Web sitenizi geliştirir geliştirmez metrikler güncellenirken, Google'ın gerçek zamanlı verilerinin tamamen güncellenmesi 28 gün sürer.
2. Web sitenizi optimize etmenize yardımcı olabilecek metriklere ek olarak ayrıntılı raporlar alırsınız.

Ek olarak, PageSpeed ​​Insights laboratuvar verileri de sağlar, ancak rapor ettiği verilerin, daha yavaş bir ağ bağlantısını taklit etmek için kullandığı benzetilmiş azaltma nedeniyle bazen yanıltıcı olabileceğini unutmayın.

En Büyük İçerikli Boya Öğenizi Nasıl Bulursunuz?

DebugBear ile bir sayfa hızı testi çalıştırdığınızda, test sonucunda LCP öğesi vurgulanır.

Bazen LCP öğesi büyük bir resim olabilir ve diğer zamanlarda metnin büyük bir kısmı olabilir.

LCP öğenizin bir resim mi yoksa bir metin parçası mı olduğuna bakılmaksızın, sayfanız oluşturulmaya başlayana kadar LCP içeriği görüntülenmez.

Örneğin, aşağıdaki sayfada, en büyük boyadan bir arka plan görüntüsü sorumludur.

Aksine, bu sayfanın LCP'si bir metin paragrafıdır.

Web sitenizin En Büyük İçerikli Boyasını (LCP) geliştirmek için, LCP'den sorumlu HTML öğesinin hızlı bir şekilde görünmesini sağlamanız gerekir.

En Büyük İçerikli Boya Nasıl İyileştirilir

LCP'yi geliştirmek için yapmanız gerekenler:

1. LCP öğesinin görünmesi için hangi kaynakların gerekli olduğunu öğrenin.
2. Bu kaynakları nasıl daha hızlı yükleyebileceğinizi (veya hiç yükleyemeyeceğinizi) görün.

Örneğin, LCP öğesi bir fotoğrafsa görüntünün dosya boyutunu azaltabilirsiniz.

Bir DebugBear hız testi çalıştırdıktan sonra, nasıl optimize edilebileceği hakkında daha fazla bilgi görüntülemek için her bir performans metriğini tıklayabilirsiniz.

LCP'yi etkileyen yaygın kaynaklar şunlardır:

• Oluşturmayı engelleyen kaynaklar.
• Optimize edilmemiş resimler.
• Eski görüntü formatları.
• Optimize edilmemiş yazı tipleri.

Oluşturmayı Engelleyen Kaynaklar Nasıl Azaltılır?

Oluşturmayı engelleyen kaynaklar, tarayıcının sayfa içeriğini ekranda çizmeye başlayabilmesi için önce indirilmesi gereken dosyalardır. CSS stil sayfaları, birçok komut dosyası etiketi gibi tipik olarak oluşturmayı engeller.

Oluşturmayı engelleyen kaynakların performans üzerindeki etkisini azaltmak için şunları yapabilirsiniz:

1. Hangi kaynakların oluşturmayı engellediğini belirleyin.
2. Kaynağın gerekli olup olmadığını gözden geçirin.
3. Kaynağın işlemeyi engellemesi gerekip gerekmediğini inceleyin.
4. Örneğin sıkıştırma kullanarak kaynağın daha hızlı yüklenip yüklenemeyeceğini görün.

Kolay Yol: DebugBear istek şelalesinde, oluşturmayı engelleyen kaynaklara yönelik istekler bir "Engelleme" etiketiyle işaretlenir.

LCP Görüntü İsteklerini Önceliklendirme ve Hızlandırma

Bu bölüm için, ziyaretçilerinizin tarayıcılarının önce hangi resmin yüklenmesi gerektiğini hızlı bir şekilde belirlemesine yardımcı olmak için resimlerdeki yeni "getirme önceliği" özelliğini kullanacağız.

LCP öğenizde bu özelliği kullanın.

Neden? Niye?

Yalnızca HTML'ye bakarken, tarayıcılar genellikle hangi resimlerin önemli olduğunu hemen anlayamaz. Bir resim büyük bir arka plan resmi olurken, diğeri web sitesinin altbilgisinin küçük bir parçası olabilir.

Buna göre, sayfa işlenene ve tarayıcı görüntünün nerede göründüğünü anlayana kadar tüm görüntüler başlangıçta düşük öncelikli kabul edilir.

Ancak bu, tarayıcının LCP görüntüsünü indirmeye oldukça geç başladığı anlamına gelebilir.

Yeni Öncelikli İpuçları web standardı, web sitesi sahiplerinin, tarayıcıların resimlere ve diğer kaynaklara öncelik vermesine yardımcı olmak için daha fazla bilgi sağlamasına olanak tanır.

Aşağıdaki örnekte, gri çubukla gösterildiği gibi, tarayıcının beklemek için çok zaman harcadığını görebiliriz.

"Getirme önceliği" özniteliğini eklemek için bu LCP görüntüsünü seçerdik.

Görsellere “FetchPriority” Özelliği Nasıl Eklenir?

Basitçe bir HTML img etiketine fetchpriority=”high” özniteliğini eklemek, tarayıcının söz konusu resmi olabildiğince çabuk indirmeye öncelik vermesini sağlar.

<img src="photo.jpg" fetchpriority="high" />

Modern Görüntü Biçimlerini ve Boyutlu Görüntüleri Uygun Şekilde Kullanma

Yüksek çözünürlüklü görüntülerin dosya boyutu genellikle büyük olabilir, bu da indirmelerinin uzun sürdüğü anlamına gelir.

Aşağıdaki hız testi sonucunda koyu mavi gölgeli alanlara bakarak bunu görebilirsiniz. Her satır, tarayıcıya gelen görüntünün bir parçasını gösterir.

Görüntü boyutlarını küçültmek için iki yaklaşım vardır:

1. Görüntü çözünürlüğünün mümkün olduğunca düşük olduğundan emin olun. Kullanıcının cihazının boyutuna bağlı olarak görüntüleri farklı çözünürlüklerde sunmayı düşünün.
2. Aynı kalitedeki görüntüleri daha düşük bir dosya boyutunda depolayabilen WebP gibi modern bir görüntü formatı kullanın.

Yazı Tipi Yükleme Süreleri Nasıl Optimize Edilir?

LCP öğesi bir HTML başlığı veya paragrafıysa, bu metin yığını için yazı tipini hızlı bir şekilde yüklemek önemlidir.

Bunu başarmanın bir yolu, tarayıcıya yazı tiplerini erken yüklemesini söyleyebilen önyükleme etiketlerini kullanmaktır.

Yazı tipi gösterimi: CSS takas kuralı, tarayıcı daha sonra web yazı tipine geçmeden önce metni hemen varsayılan bir yazı tipiyle oluşturacağından, hızlandırılmış oluşturmayı da sağlayabilir.

LCP'yi Hızlı Tutmak İçin Web Sitenizi İzleyin

Web sitenizi sürekli olarak izlemek, yalnızca LCP optimizasyonlarınızın çalıştığını doğrulamanıza izin vermekle kalmaz, aynı zamanda LCP'niz kötüleşirse uyarı almanızı da sağlar.

DebugBear, Önemli Web Verilerini ve diğer site hızı ölçümlerini zaman içinde izleyebilir. Ürün, derinlemesine laboratuvar tabanlı testler gerçekleştirmenin yanı sıra Google'ın gerçek kullanıcı metriklerini de takip eder.

14 günlük ücretsiz deneme ile DebugBear'ı deneyin.