Bunu Neden Yazıyorum

Şu anda birkaç web sitesi işletiyorum ve başladığımdan beri performansım çok inişli çıkışlı oldu. Bazen bunu çok sinir bozucu buldum. Yerel olarak benim için her şey çok iyi çalışıyor gibi görünüyor, ancak daha sonra sunucu analizlerimi kontrol ediyorum ve bazı ülkelerde hızımın berbat olduğunu görebiliyorum.

Her zaman öyle görünüyorduCLSveyaLCPbenim için sorun buydu. Bu yüzden deneyimimi paylaşacağımı ve başkalarının da bunu anlamalarına yardımcı olmaya çalışacağımı düşündüm, özellikle de siz de aynı şeyi yaşıyorsanız. Ya da belki bu konuda sorun yaşadınız ve benzersiz bir bakış açınız veya çözümünüz var mı? Bunu duymayı çok isterim.

Buna göreArama Motoru Günlüğü, bu iki ölçümün optimize edilmesi sitenizin görünürlüğünü ve kullanıcı memnuniyetini önemli ölçüde artırabilir. Teoride kulağa harika geliyordu ama aslında onları düzeltmek farklı bir hikayeydi. Öğrendiklerimi size anlatayım.

CLS ve LCP Tam Olarak Nedir?

Kendi mücadelelerime girmeden önce bunların gerçekte ne olduğunu açıklayayım, çünkü bu kısaltmaları Google Search Console'da ilk gördüğümde ne anlama geldikleri hakkında hiçbir fikrim yoktu.

Kümülatif Düzen Kayması (CLS)sayfa düzeninizin yüklenirken ne kadar atladığını ölçer. Bir düğmeye basmak üzereyken tüm sayfanın değiştiğini biliyorsunuz, bu yüzden yanlış şeye mi tıkladınız? Bu bir CLS sorunudur. Bir kullanıcı olarak inanılmaz derecede sinir bozucu bir durum ve görünen o ki arama motorları da sizi bunun için cezalandırıyor.

En Büyük İçerikli Boya (LCP)sayfanızdaki görünür en büyük öğenin yüklenmesinin ne kadar sürdüğünü ölçer. Genellikle bu bir kahraman resmi veya büyük bir metin bloğudur. LCP'niz yavaşsa, ziyaretçileriniz yarı yüklü bir sayfaya bakıyor ve çoğu sayfayı terk ediyor.

Bunların her ikisi de Google'ın kapsamına giriyorÖnemli Web Verileri, which directly affect your search rankings. Dolayısıyla içeriğiniz mükemmel olsa bile zayıf CLS ve LCP puanları sizi geride tutabilir.

Web Sitenizi CLS ve LCP için Optimize Edin

🖼️

Görüntü Boyutlarını Ayarla
Görsellerin genişliğini ve yüksekliğini belirtin

📢

Reklamları Sorumlu Bir Şekilde Kullanın
Beklenmedik reklam boyutlandırmasından kaçının

⚡

Önemli Kaynakları Önceden Yükleyin
Kritik içeriklerin hızla yüklenmesini sağlayın

🔄

Dinamik İçeriği En Aza İndirin
Yükleme sırasında değişen içeriği sınırlayın

📊

Performansı Düzenli Olarak İzleyin
CLS ve LCP puanlarını takip etmek için araçları kullanın

CLS Kabusum

Karşılaştığım ilk sorun CLS oldu. Sayfalarım bana iyi görünüyordu ama puanlarım berbattı. Çok fazla kazı yaptıktan sonra ana suçluları buldum:

Boyutsuz resimler:Resimlerimde genişlik ve yükseklik ayarı yapmıyordum. Tarayıcının ne kadar alan ayıracağı hakkında hiçbir fikri yoktu, bu yüzden resimler yüklendikten sonra her şey değişti.
Yazı tipleri geç yükleniyor:Özel yazı tiplerim, sayfa oluşturulduktan sonra yükleniyordu ve bu, yeni yazı tipinin geri dönüşün yerini almasıyla tüm metnimin atlamasına neden oluyordu. Bu incelikli bir şeydi ama eklendi.
Dinamik içerik:Sayfa yüklendikten sonra içerik enjekte eden, her şeyi altlarına iten bazı bileşenlerim vardı.

CLS sorunlarımın çoğunun çözümü şaşırtıcı derecede basitti. Tüm görseller ve medya için açık boyutlar tanımlamaya başladım. Geri dönüşün hemen gerçekleşmesi için yazı tipi yüklememe yazı tipi görüntüleme takasını ekledim. Dinamik olarak yüklenen her türlü içerik için CSS'de yer ayırdım.

Gibi araçlarGoogle Sayfa Hızı Analizleriburada çok yardımcı olduk. Size tam olarak hangi öğelerin düzen değişikliklerine neden olduğunu gösterirler, böylece tahminde bulunmazsınız.

Sonra LCP Sorunu Geldi

Tam her şeyi hallettiğimi düşünürken,LCP puanlarıişaretlemeye başladı. İşin sinir bozucu kısmı, sitemin benim için Birleşik Krallık'ta hızlı yüklenmesiydi, ancak analizlerim diğer ülkelerde korkunç hızlar gösteriyordu. LCP ile ilgili olan da budur; büyük ölçüde kullanıcılarınızın nerede olduğuna ve sunucunuzdan ne kadar uzakta olduklarına bağlıdır.

Bulduğum ana sorunlar şunlardı:

Optimize edilmemiş büyük görseller:Kahraman resimlerim çok büyüktü. Tam çözünürlüklü fotoğrafları sıkıştırmadan yüklüyordum.
Sunucu yanıt süresi:CDN olmadan sunucumdan uzaktaki kullanıcılar ilk yanıtı uzun süre bekliyordu.
Oluşturmayı engelleyen JavaScript:Kafamda, sayfanın tamamlanmasına kadar oluşturulmasını engelleyen komut dosyaları vardı.

GibiBacklinko'nun çalışmasıLCP puanları iyi olan sitelerin belirgin şekilde daha iyi etkileşime ve daha düşük hemen çıkma oranlarına sahip olduğunu gösteriyor. Bu sorunları düzeltmeye başladığımda, kendi analizlerimde farkı görebildim.

LCP'ime Aslında Ne Yardımcı Oldu?

Tüm görsellerimi sıkıştırmaya ve mümkün olduğunca WebP formatını kullanmaya başladım. Ayrıca gerekli olmayan komut dosyalarını eşzamansız olarak yüklenecek şekilde taşıdım veya tamamen erteledim. Sitelerim Vercel'de barındırılıyor ve bu da benim için uç ağla ilgili pek çok işi hallediyor, ancak geleneksel bir barındırma kullanıyorsanız,CDNuluslararası trafik için büyük bir fark yaratabilir.

CDN, sitenizin kopyalarını dünyanın her yerindeki konumlarda saklar, böylece ziyaretçilere tek kaynak sunucunuz yerine onlara daha yakın bir yerden hizmet sunulur. Belirli bölgelerde kötü hızlar görüyorsanız, araştırmaya değer ilk şeylerden biri budur.

Can Sıkıcı Kısım - Asla Gerçekten "Sabit" Değildir

İşte kimsenin sana bahsetmediği şeyCLS ve LCP. Bunları bir kez düzeltip yolunuza devam etmiyorsunuz. Ne zaman yeni bir özellik eklesem, yeni bir görsel eklesem veya düzenimi değiştirsem puanlar yeniden değişebilir. Bu devam eden bir şeydir.

Google Search Console'da her şeyin yeşil olduğu haftalar geçirdim, sonra yeni bir bileşen ekledim ve aniden CLS'im yeniden işaretlendi. Bu gerçekten can sıkıcı bir durum ama artık her önemli değişiklikten sonra Önemli Web Verilerimi kontrol etmeyi öğrendim.

CLS ve LCP'nin Kullanıcı Deneyimi Üzerindeki Etkisi

0,1 saniye

Kullanıcı Toleransı

%32

Hemen Çıkma Oranı Artışı

Dönüşüm Oranı Düşüşü

Önemli Web Verileri

SEO Sıralamasının Önemi

Tarafından hazırlanan bir raporFinansal Markayavaş web sitelerinin ne kadar doğrudan gelir kaybına yol açabileceğini vurguluyor. Bu, sıkıcı gelse bile işin üstesinden gelmek için yeterli motivasyondur.

Bana En Çok Yardımcı Olan Araçlar

Aynı sorunlarla ilgileniyorsanız, aslında kullandığım ve yararlı bulduğum araçlar şunlardır:

Google Arama Konsolu:Sorunlarımı ilk burada fark ettim. Önemli Web Verileri puanlarınızı sayfalara göre ayrılmış olarak gösterir ve tam olarak nelere dikkat etmeniz gerektiğini size söyler.
Sayfa Hızı Analizleri:Değişiklik yaptıktan sonra her sayfayı bunun üzerinden geçiyorum. Belirsiz tavsiyeler yerine spesifik, uygulanabilir tavsiyeler verir.Shopify'ın web performansı kılavuzuaynı zamanda harika bir yardımcı kaynaktır.
Web Verileri Uzantısı:Bu Chrome uzantısı, siz kendi sitenize göz atarken CLS, LCP ve diğer ölçümlerinizi gerçek zamanlı olarak gösterir. Geliştirme sırasında sürekli açık tutuyorum.

Performans sorunlarınızı belirledikten sonra,Google Arama AI sıralama aracıiyileştirmelerinizin gerçekten daha iyi arama görünürlüğüne dönüşüp dönüşmediğini kontrol etmek için. Sıralamanıza yardımcı olmuyorsa puanları sabitlemenin hiçbir anlamı yoktur.

Eğer Bu Yoldan Geçiyorsan Tavsiyem

Performansınız benimki kadar inişli çıkışlıysa size şunu önerebilirim:

Panik yapma.CLS ve LCP sorunları inanılmaz derecede yaygındır. Her şeyi yanlış yapmıyorsunuz; bu ölçümler yalnızca hassastır.
Analizlerinizi ülkeye göre kontrol edin.Siteniz sizin için hızlı olabilir ancak başka yerlerdeki ziyaretçiler için yavaş olabilir. Bir CDN bunu hızlı bir şekilde çözebilir.
Önce resimleri düzeltin.Deneyimlerime göre, çoğu CLS ve LCP sorununun nedeni optimize edilmemiş görüntüler ve eksik boyutlardır.
Her değişiklikten sonra test edin.Önemli güncellemeler yaptığınızda PageSpeed Insights'ı çalıştırma alışkanlığını edinin.
Sabırlı ol.Google Search Console verilerinin güncellenmesi günler veya haftalar sürebilir. Kontrol paneli henüz değişmedi diye düzeltmelerinizin işe yaramadığını varsaymayın.

Hala öğreniyorum ve hala bununla uğraşıyorum. Puanlarım eskisinden daha iyi ama onlara mükemmel diyemem. İşinize yarayan çözümler bulduysanız, bunları gerçekten duymak isterim. Ayrıca performans verilerinizi bizim aracımızla görselleştirmeyi deneyebilirsiniz.ücretsiz çevrimiçi grafik oluşturucuZaman içindeki gelişmeleri takip etmek için.

İşin özü şudur:CLS ve LCPgitmiyorlar. SEO için önemliler, kullanıcı deneyimi için önemliler ve eğer benim yaptığım gibi web siteleri işletiyorsanız sizi tetikte tutacaklar. Ancak bunlar düzeltilebilir ve yaptığınız her iyileştirme buna değer.