İçeriğin En Büyük İçeriği: Nedir ve Nasıl Optimize Edilir (2021)

Kullanıcı deneyiminin metrik alanı hızla geliştiğinden, yeni bir dile ihtiyaç vardır. En büyük içerikli boya (LCP), web sayfasında içerik oluşturmanın ne kadar sürdüğünü belirlemek için birkaç boyuttan biridir. LCP’nin ne olduğunu ve bu makalede nasıl ölçüleceğini tartışacağız. Ardından, yükleme sürenizi hızlandırmak için bazı önerileri tartışacağız. Başlayalım! En büyük içerikli boya (LCP) nedir? Kullanıcı merkezli nedeniyle LCP, Web Vitals puanları için önemli bir metriktir. Bu, belirli bir web sayfasının en önemli ayrıntıları kullanıcının tarayıcısında görülecektir.
LCP, tüketicilere odaklanan bir metriktir, çünkü görünümdeki en önemli detaylar genellikle en önemlisidir ve en kısa sürede ziyaretçilerinizin memnuniyetini artırır. LCP, web sayfası yükleme yöntemi sırasında ViewPort’ta yayınlanan en önemli ayrıntılar için ve web sayfaları yüklenmeye başladığı için ayrıntıları oluşturmak için gereken süreyi incelemek için görünür. LCP detayları genellikle kahramanlar veya büyük metin içerik paragrafları şeklinde bulunur. İyi bir LCP sıralaması nedir? LCP oluşturma süresini ölçtüğü için, sıralama düşüşünüz artıyor, çünkü müşterileriniz önemli içerik malzemesini daha hızlı görecektir.
LCP, sağlam bir skor için 2,5 saniyeden az veya 2,5 saniyeye eşit olmalıdır. Öyleyse, sayfa yeşil bir puan alacak ve sınavı geçecektir. LCP’niz 2.5 ve 4.0 arasındaysa, puanınız “artış gerektirir” çünkü turuncu bir değer elde edersiniz. LCP’nin 4 saniyeden fazla olduğunu varsayın. Skor o zaman “kötü” ve mümkün olan en kısa sürede düzeltmeniz gerekiyor.

Aşağıda bağlı makaleler
LCP neden önemlidir? Artık en büyük içerik boyasının ne olduğunu ve işlevlerin ne olduğunu bildiğimize göre, bu önlemin SEO için neden çok önemli olduğunu görebiliriz. Site hızı SEO endüstrisinde bir sıralama kriteri olarak yaygın olarak tanınır, ancak bunun çeşitli nedenleri vardır ve sonuç olarak LCP’nin SEO’yu etkilemesinin çeşitli nedenleri vardır. LCP’nin SEO için çok önemli olmasının nedenlerini göreceğiz ve Web sitenizin aşağıdaki bölümde hedef kitlenize görünürlüğü.
Bu istatistikler Google’ın kendisi tarafından üretilir ve önerilir.
Google’ın bu göstergeyi kullanmayı önermesi önemini göstermiştir. LCP, bu yıl Mayıs ayında başlayan web performans denetimlerini ölçmek için varsayılan bir faktör olacaktır.
Web sitenizi yükleme hızının sıralamanız üzerinde bir etkisi vardır.
Mobil cihazlarda ve masaüstü bilgisayarlarda Google, hızlı bir şekilde yüklenen sayfayı sever. Google aktif olarak LCP kullanmaya başladıktan sonra SERP’deki sayfa konumu etkilenecektir.
En tartışmalı boyanın kullanıcının deneyimi üzerinde bir etkisi vardır.
Kullanıcı deneyimi, içerik içeriğinin en büyük içeriğinden etkilenir. Kullanıcınızın deneyimi ne kadar kötü olursa, oranınız o kadar yüksek olur ve aramanızın sıralaması o kadar düşük olur. Oran çeşitli nedenlerden dolayı düşebilir, bu nedenle tam bilginin oranının nasıl azaltılacağı hakkında bir blog okuyun. En büyük içerikli boya (LCP) nasıl bildiriliyor? LCP yalnızca kullanıcı tarafından oluşturulan ve hala görünür olan bir öğe olarak tanımlanabilir. Oluşturma yüklenmemiş elemanlara uygulanmaz. Sonuç olarak, bu öğeler en büyük içerik boyası belirlenirken hesaplanmaz. Sayfadaki alt öğe kullanıcının görünüm alanında olduğunda, öğe LCP olabilir. LCP öğesi görünümden silinmiş olsa bile, muhtemelen en tatmin edicidir. Bahçede diğer daha büyük unsurlar üretilene kadar LCP olarak kalacaktır. Kullanıcılar sayfalarla etkileşime girdiğinde, LCP öğesinin de değişeceği önemli bir olasılık vardır. Ne tür içerik LCP gereksinimlerini karşılıyor? Bu boyut, üretilen her bir içerik türü tarafından tetiklenmez. Yazma sırasında aşağıdaki öğeler mevcuttur:
IMG> Element
öğeler> ‘deki etiketler
Bir poster olarak etiketinin resmi (tüm video dosyası değil)
CSS URL () yöntemini kullanarak arka plan görüntüsü ayarlanabilir.
Metin düğümleri (genellikle ana metin içeriği olan) ve diğer satır içi metin bileşenleri blok seviyesi öğesinde bulunur.
İçerik içeriğinin en büyük içeriği nasıl ölçülür?
Google PagePeed Insight
Google’ın PagesPeed Insights aracını kullanmak, web sitenizin en büyük içeriğini belirlemek için en basit yaklaşımdır. Bu, web sitenizden laboratuvar tabanlı bir değerlendirme üretecek ve Google tarafından toplanan orijinal kullanıcı verilerini geri yükleyecektir. Bu bulgu iki kategoriye ayrılmıştır: alan verileri ve laboratuvar verileri. Makaleler aşağıda bağlanmıştır.
Google Lab testi oldukça yavaş bir ağ bağlantısı kullandığından, metriğiniz genellikle laboratuvarda gerçek kullanıcıya göre daha yavaş olacaktır. Örneğin, YouTube’da sizin için LCP alanı 3.1 saniyedir, ancak laboratuvar testi 7.8 saniyelik bir değer üretir.

Web sitenizi hızlandırırsanız laboratuvar verileri hızlı bir şekilde artacaktır. Ancak, en son gerçek kullanıcı verilerini toplamak zaman alacaktır.

Laboratuvar testi Deniz Feneri ile gerçekleştirildiğinden, sayfaPeed Insights, geliştirilmesi gereken alanı tanımlayan daha ayrıntılı bir sayfa analizi de sağlar. Teşhis bölümünde, en büyük içerik boyasını yapan öğeler de bulabilirsiniz. Chrome geliştirme cihazı Laboratuar testi deniz feneri ile gerçekleştirildiğinden, sayfaPeed Insights, geliştirilmesi gereken alanları tanımlayan daha ayrıntılı bir sayfa analizi de sağlar.

Teşhis bölümünde, en büyük içerik boyasını yapan öğeler de bulabilirsiniz.
Performans profilinin zaman kısmını kontrol edin. En alttaki ilginç ayrıntıları görmek için LCP işaretleyicisini tıklayın. Chrome UX Raporu (Crux) Chrome UX Raporu (Crux), milyonlarca ana web sitesinden gerçek kullanıcı deneyimi hakkında istatistik yayınlar. Bu bilgiler, konuma göre kullanıcı deneyimi metriklerini toplayan Google BigQuery ML projesinde kullanılır. Her veri toplama, birkaç önemli metrike dayanan bölgelere göre kullanıcı deneyimini belirlemek amacıyla belirli ülkeleri temsil eder. Bu, LCP ve diğer performans göstergeleriyle alakasız görünse de, veritabanı, geliştiricilerin herhangi bir web sitesi için veri almasına izin veren açık bir API içerir. .

Aşağıda bağlı makaleler
Bu, bazı temel kodları nasıl yapacağınızı biliyorsanız, kendi siteniz veya rakipleriniz için LCP’yi izleyebileceğiniz anlamına gelir.

Bu rapor size demografik özelliklere, cihazlara ve yerlere dayalı tüketici deneyiminin daha yakın bir resmini sunar. İçeriğin en büyük içeriği nasıl optimize edilir, yavaş yükleme kaynaklarının süresini artırır
Resimler, arka plan görüntüleri ve video vites değiştirme optimize edilmelidir.

Görüntü optimizasyonu, web sayfalarının kullanıcı deneyimini yüklemesi ve geliştirmesi için gereken süreyi azaltabilir. Yükleme hızı, boyut değiştirerek, daha düşük çözünürlüklü fotoğraflar ve daha yeni dosya türleri kullanılarak ve hatta gerekirse görüntüleri ortadan kaldırarak artırılabilir.

Yükleme süresini artırmak için tüm fotoğraflarınızı en iyi Paro’dan silmenizi önermiyoruz, ancak bu görüntünün ne kadar önemli olduğuna dikkat edilmelidir.

Doğru dosya biçimini seçin
Görüntü formatlarında JPEG ve JPG (Ortak Fotoğraf Uzmanları Grubu, Jay-Peg) aynıdır. Burada ‘JPG’ biçimini kullanacağız. JPG dosyaları için dosya uzantısı .jpeg veya.jpg. Fotoğraflar gibi binlerce veya milyonlarca renk içeren resimler için JPG genellikle en iyi seçimdir. Bu genellikle en büyük dosyadır ve JPG bir sıkıştırma masterdır. Fotoğraflar ve fotoğraf görüntüleri JPG formatında saklanmalıdır. Kayıplı sıkıştırma, JPG’nin kısaltmasıdır. Bu, gereksiz verileri silerek dosyaları azaltır. Bu yüzden JPG sıkıştırması birçok renkte fotoğraflar için çok iyi çalışıyor. Bu, sistemden gelen bilgileri siler. Bu kaliteyi etkileyebilse de, doğru yapılırsa JPG sıkıştırması neredeyse görünmezdir. PNG (taşınabilir ağ grafikleri, belirgin ping veya pee-en-gee), hat sanatı ve sınırlı renk paleti olan diğer görüntüler için en iyi formattır. Tüm dosya türleri, görüntü dosyasında kullanılan sıkıştırma yöntemini ifade eder. Tasarımınız şeffaf bir arka plan gerektiriyorsa, çizgi sanatı veya fotoğraf için PNG kullanın. Kayıpsız dosya biçimi PNG’dir. Bu, dosya alanını daha iyi kullanmak için verilerin sıfırlanmasıyla çalışır. Fotoğraf görüntü dosyalarının boyutunu önemli ölçüde azaltmaz. Bununla birlikte, bu sınırlı renklere sahip çizgiler ve grafik çizgileri için iyidir. Bu aynı zamanda şeffaflığı da korur. Kullandığınız biçim olağanüstü bir fark yaratır. Web tasarımcılarının eskisinden daha küçük ve daha ayrıntılı grafikler oluşturmasına izin veren çeşitli yeni dosya türleri vardır. WebP en yaygın kullanılan formatlardan biridir.
JPEG ve PNG dosyaları WebP görüntülerinden daha büyüktür. Google’a göre, görüntüleri WebP’ye dönüştürmek yüzde 25-34 boyutunda bir azalmaya neden olabilir. Bu düşüşü elde etmek ve web yükleme süresini artırmak için, bu format kayıpsız ve kayıplı sıkıştırmayı birleştirir (dosyalardan seçici materyali silerek dosya boyutunun azaltıldığı veri sıkıştırma yöntemi). Ancak, WebP (JPEG XL gibi diğer dosya formatları ile birlikte) tüm tarayıcılar tarafından desteklenmez. Görüntü türünü dönüştürmek için yüzlerce araç mevcuttur. Burada bazılarını tartışacağız, ancak Google’ın hızlı araması daha fazlasını üretecek. CWEBP bir komut satırıdır – komut satırına alışıksanız bu basit bir proje için iyi bir alternatiftir. Kayıplı veya kayıpsız sıkıştırma kullanmayı ve piksel değerini ve diğer ayarları değiştirip değiştirmeyeceğinizi seçebilirsiniz. WebP için Imagemin, görüntüleri WebP formatlarına dönüştüren bir programdır. Bir oluşturma aracı kullanıyorsanız veya komut dosyası kullanıyorsanız, bu NPM eklentisi daha iyi bir seçenektir. Sıkıştırma, keskinlik, kalite ayarları ve diğer çeşitli parametrelerin türünü bir kez daha seçebilirsiniz. Squoosh, Google tarafından oluşturulan ve görüntü kalitenizi sıkıştırmanıza, değiştirmenize ve değiştirmenize olanak tanıyan bir uygulamadır. Özellikle, görüntüleri çeşitli formatlarda karşılaştırmanıza izin veren bir kaymaya sahiptir. Duyarlı bir görüntü sunmak

LCP puanınızı artırdığı görülecek cihaz için doğru görüntü boyutunu sunun. Masaüstü fotoğrafları, masaüstü ekranlarının genellikle mobil cihazlarda bulunanlardan çok daha büyük olması nedeniyle hücresel görüntülerden 2-4 kat daha fazla verileri kullanır. Farklı cihaz türleri için fotoğrafın boyutunu değiştirmek, zaman alan ancak uzun vadede ödeyecek işlemlerdir. Global CDN kullanın
CDN görüntü optimizasyonunda mükemmeldir. Amazon Cloudfront, Amazon Web Services (AWS) web sitesi için popüler bir CDN’dir. Dul platformu, fotoğrafını sunmak için AWS kullanır, bu da boyutunu azaltır ve yükleme süresini hızlandırır.
Önemli kaynaklar önceden yüklenmelidir
CSS ve JavaScript dosyaları gibi bazı web sitesi öğeleri yükleme sırasında önceliklendirilebilir, bu nedenle hangi dosyaların ilk yüklenmesi gerektiğini ve hangilerinin bekleyebileceğini düşünün. Yazı tipi, grafik veya üst yarım video ve CSS veya JavaScript önemli, daha önce yayınlanması gereken tüm öğelerdir.
Esnek olanlara hizmet vermek

Farklı malzemeleri koşullu olarak almak, sayfanın ana içeriğini oluşturan kaynakların yüklenmesi kullanışlı olarak kullanıcının cihazına bağlıdır. Bu teknik “uyarlanabilir sunum” olarak bilinir. Mobil cihazlara malzeme yüklerken, uyarlanabilir sunum çok yararlıdır.
Daha küçük HTML sunan önbellek varlıkları
Servis çalışanı çalışanı ile yanıt, daha küçük HTML yanıtları sunulması da dahil olmak üzere çeşitli işlevler için kullanılabilir. Ayrıca, tekrarlanan istekler için ağdan sormak yerine tarayıcıya sunulan statik kaynakları depolamak için de kullanılabilirler. JavaScript veya CSS oluşturmayı engelleyen JavaScript ve CSS’yi ortadan kaldırın, tarayıcı herhangi bir içerik malzemesi oluşturma yeteneğinden önce CSS veya JavaScript’i parçalamak ve yürütmek istediğinde “engelleme” olarak kabul edilir. “Engellenen” performans süresinin azaltılması, düşük kaliteli uygulamaları takip etme yoluyla yapılabilir. Küçük CSS
CSS belgelerinden boşlukları, eğrileri ve geri bildirimleri kaldırmak için CSS yöntemini en aza indirmek, onu mümkün olan küçüklere yönlendirmenin iyi bir yoludur. Bu, genel rapor boyutunun sıkıştırılması gibidir. Minifycode.com’u kullanın – Basit ve zarif bir kullanıcı arayüzü ile bu site, kodunuzu tek bir tıklama düğmesi ile azaltan JavaScript, CSS ve HTML için bir madenci sunar. Ayrıca, azaltılmış ve okumayı kolaylaştıran kodu ayıran bir “güzellik” cihazı ile donatılmıştır (temelde minifikasyonun tersi). Minifycode.com kullanarak CSS’yi azaltma adımları
Kaynak kodunuzu kopyalayıp bir kutuya yapıştırın veya kaynak kod dosyasını yükleyin.
Kodu küçültmek veya sıkıştırmak için CSS azaltma düğmesini seçin.
Azaltılmış kodun çıktısını kopyalayın veya azaltılmış kod dosyasını kaydedin.
Kritik olmayan CSS’yi erteleyin
Her işe yaramaz CSS silinmeli ve ilk oluşturma için artık arzu edilmeyen CSS eşzamanlı bir şekilde yüklenebilir.
Sırada kritik CSS kullanın
Önemli bir CSS’nin dahil edilmesi, tarayıcının ilk önce önemli belgeleri yüklemesine izin verecek şekilde daha hızlı yükleme sayfalarına yardımcı olacaktır.
Bugün birçok web sitesi JavaScript’e çok bağımlıdır ve bu kod genellikle öğelere yönlendirilir. Bu, tarayıcıyı maksimum hayati içerik malzemesine öncelik vermek yerine, önce varlığı işlemek/yüklemek için etkinleştirir. Gördüğümüz gibi, en iyi parodaki içerik materyaline öncelik vermek çok önemlidir. Ancak, JavaScript’in minimum miktarda indirilmesi ve sunulması zor olabilir. Google, kullanılmayan JavaScript’i geciktirmenin yanı sıra JavaScript belgelerinin daraltılmasını ve sıkıştırılmasını önerir. Düşük sunucu yanıt süresine sahip bir web sunucusu seçin, web sitenizdeki içerik boya öğelerinin en ciddi içeriğinin zorluğunu artırmak için en etkili yaklaşımlardan biri sunucu yanıt süresini azaltmaktır. Kaynakların web sitesine hızlı bir şekilde yüklenmemesi en yaygın nedeni barındırma paketinizdir. Paylaşılan barındırma paketi, çoğu çevrimiçi mağaza için hızlı hızlı sunucu yanıt süresi sağlamaz. Slow Host Server, hızlı ve duyarlı bir web sitesine sahip olmaya izin vermez. Barındırmaya ek olarak, sunucunuzu bir trafik artışını yerine getirmek için artırmak, LCP öğeleri sorununu en aza indirmek için akıllı bir yaklaşımdır. Sunucu reaksiyon süresi SEO için çok önemlidir ve aynı zamanda birisi tarafından da keyif alacaktır. Sunucu reaksiyon süresinin artmasına yönelik bazı yaklaşımlar aşağıda indekslenmiştir:
Daha etkili bir sunucu kullanın (daha büyük RAM ve CPU)

Sunucudaki topluluk gadget’larını artırın