Üstün UX için En Büyük İçerikli Boya Nasıl Ölçülür ve Optimize Edilir

Çevrimiçi başarı söz konusu olduğunda, bunu yapmanın birçok yolu vardır. Optimize edilmiş bir kullanıcı deneyimi böyle bir yoldur. Google, web sitelerini SEO açısından sıralamak için farklı kullanıcı deneyimleri ve ilgili ölçümler kullanacaktır. Web performansını artırmak için birden fazla araç üretmeye devam etti. Aşağıda, Google'ın kullanıcı deneyimini iyileştirmek için aradığı bazı yöntemlere göz atacağız.

Google Temel Web Verileri nedir?

Google, iyi bir kullanıcı deneyimi olarak nitelendirilen şeyin ölçüsünü ve anlayışını değiştirmeye yönelik son girişiminde, sayfanın metriklerini düzenledi. Bu standartlaştırılmış metrikler, temel web hayati değerleri olarak adlandırılır ve web sitenizdeki gerçek dünyadaki kullanıcı uzmanlığının derecelendirilmesini kolaylaştırır.

En Büyük İçerikli Boya Nedir?

Başlamak için, En Büyük İçerikli Boya'ya (LCP) bakalım. Temel web hayati metriklerinden biridir. Görünüm alanı içindeki en büyük içerik bileşeninin yüklenme süresini görünür hale geldikçe ölçer. TTFB ve First Contentful Paint gibi alternatif metrikler birlikte canlı sayfa deneyimini kolaylaştırır, sayfa kullanıcı için "anlamlı" hale geldiğinde mevcut olmazlar.

Genellikle, sayfadaki en önemli bileşen tamamen görünür hale gelmedikçe, sayfa kullanıcı için yeterli bağlam sunmayabilir. Bu nedenle LCP, kullanıcının beklentilerini temsil eder. Temel bir web hayati metriği olarak LCP, Performans Puanının yüzde yirmi beşini oluşturur ve bu nedenle optimize edilmesi gereken en önemli metriklerden biridir.

LCP Zamanınızı Kontrol Etme

Google'a göre, En Büyük İçerikli Boya için düşünülen parça kategorileri şunlardır:

• <img> öğeleri
• <svg> öğesinin içindeki <image> öğeleri
• <video> öğeleri (kullanılan poster resmi)
• URL işlevi aracılığıyla yüklenen arka plan görüntüsüne sahip bir öğe
• Metin düğümlerinden ve/veya diğer satır içi düzey metin öğelerinden oluşan blok düzeyinde öğeler

LCP Nasıl Ölçülür?

Elbette, web sayfanızın LCP'sini ölçmenin birden çok yolu vardır. Bunu yapmanın en kolay yolu, Lighthouse, PageSpeed ​​Insights, Search Console ve Chrome Kullanıcı Deneyimi Raporu'nu içeren mevcut platformlardan birini kullanmaktır. Örneğin, Google PageSpeed ​​Insights raporunda LCP'yi hesaplama bileşenini belirtir.

İyi bir LCP nedir?

Uygun kullanıcı uzmanlığı sağlamak için sitenizde 2,5 saniye veya daha düşük bir LCP sağlamaya çalışmalısınız. Sayfa yüklemelerinizin çoğu bu eşiğin altında gerçekleşmelidir. Artık hepimiz LCP'lerin ne olduğunu ve hedefimizin ne olması gerektiğini bildiğimize göre, LCP'yi geliştirmenin yollarını inceleyelim.

(Lütfen Sayfaların çoğunluğunun 2,5 saniye veya daha düşük bir LCP'de yüklenmesi gerekir adlı resmi ekleyin.jpg)

En Büyük İçerikli Boyama (LCP) nasıl optimize edilir

LCP'yi tamamen azaltmanın altında yatan sistem, kullanıcının cihazına indirilen verileri azaltmak ve bu içeriği yönetmek ve sorunsuz kullanıcı deneyimi sağlamak için gereken süreyi azaltmaktır.

Resimlerinizi optimize edin

Çoğu sitede, ekranın üst kısmındaki içerik genellikle LCP için gerekli olan büyük boyutlu bir resim içerir. Bir kahraman resmi, bir atlıkarınca veya bir afiş olabilir. Daha sağlam bir LCP için bu resimleri optimize etmelisiniz.

Resimlerinizi optimize etmek için ImageKit.io gibi bir üçüncü taraf resim CDN'si kullanmalısınız. Üçüncü taraf bir görüntü CDN'si kullanmanın avantajı, yalnızca gerçek işinizi hedeflemeniz ve görüntü optimizasyonunu görüntü CDN'sine bırakmanızdır.

Duyarlı resimler için gerçek zamanlı dönüşümler

Google, hemen hemen tüm siteler için mobil öncelikli bölümlendirmeyi kullanır. Bu nedenle, masaüstü üzerinden mobil için LCP'yi optimize etmek gereklidir. Her görüntü, yerleşim düzeninin talebine göre ölçeklendirilmelidir.

Örneğin, listeleme sayfasında görselin daha küçük boyutta ve ürün detay sayfasında daha büyük boyutta olmasını istersiniz. Bu yeniden boyutlandırma, o sayfa için gerekenden fazla bayt kullanmamanızı sağlar.

Resimleri önbelleğe alın ve teslim süresini iyileştirin

Görüntü CDN'leri, fotoğrafları teslim etmek için İçerik Dağıtım Ağı'nı (CDN) kullanır. Bir CDN kullanmak, resimlerin dünyanın öbür ucundaki bir sunucu yerine yakındaki bir konumdan yüklenmesini sağlar.

Temel kaynakları önceden yükleyin

LCP'yi etkiliyorsa tarayıcının bir görsel yüklemeyebileceği durumlar vardır. Örnek olarak, ekranın üst kısmındaki bir başlık resmi, bir CSS dosyası içinde arka plan resmi olarak görülebilir. Tarayıcı, CSS dosyası indirilene kadar resim hakkında bunu bilemeyeceğinden, onu yüklemeyecektir.

Şimdi, “En büyük Contentful boyama resmini nasıl önceden yüklerim?” diye soruyorsanız, cevap basittir. Köprü metni biçimlendirme dili belgenizin üst bölümüne rel= “preload” özniteliğine sahip bir etiket kullanarak bunları önceden yükleyebileceksiniz.

Bir belgeye birden çok kaynağı önceden yükleyebilecek olsanız da, bunu ekranın üst kısmındaki resimler veya videolar, sayfa genelindeki yazı tipi dosyaları veya temel CSS ve JS dosyalarıyla sınırlamanız gerekir.

Sunucu yanıt sürelerini azaltın

Sunucunuzun yüklenmesi normal sayılandan daha uzun sürerse, sayfanın ekrana yüklenme süresi artar. LCP ile birlikte her sayfa hızı metriğini olumsuz etkiler. Sunucu yanıt sürelerinizi geliştirmek için şunları yapabilirsiniz:

• Sunucularınızı analiz edin ve optimize edin
• Bir İçerik Dağıtım Ağı kullanın
• Üçüncü taraf kaynaklara ön bağlantı
• Bir servis çalışanı ile önce içeriği önbelleğe sunun
• Metin dosyalarını sıkıştır

İstemci cihaz yanıt sürelerini iyileştirin

Sayfanızın yüklenmesi uzun sürerse, potansiyel müşteriler için rahatsız edici olabilir. Neyse ki, uçlarında düzgün bir şekilde yüklenmesini ve sorunsuz bir kullanıcı deneyimi oluşturmasını sağlamak için yapabileceğiniz birkaç şey var. Bu içerir:

• Temel CSS'yi satır içine alma
• İçeriği küçültme ve basın
• İstemci tarafı işleme için LCP'yi optimize etme
• Sunucu tarafı oluşturmayı kullanma
• Ön işlemeyi kullanma

LCP, kullanıcı deneyimi ve yolculuğuyla güçlü bir şekilde ilişkili olan büyük bir arama sıralama faktörü haline geldi. Bu nedenle, bir web işi yürütüyorsanız, çabanın başarısını sağlamak için bu bileşenleri optimize etmelisiniz.

Yazar Biyografisi

Ghia Marnewick yazar, sosyal medya yöneticisi ve dijital yöneticidir. Aumcore için içerik yazıyor ve dünyayla bilgi paylaşmanın yeni yollarını bulma konusunda tutkulu.