Bir web sayfasının salyangoz hızında yüklenmesi veya tıklamaya çalıştığınız anda bir düğmenin hareket etmesiyle yaşadığımız o küçük hayal kırıklığı hepimiz hissettik. WPBeginner'da site hızına takıntılıyız çünkü bu küçük anların kullanıcı deneyiminde büyük bir fark yarattığını biliyoruz.
Google Core Web Vitals'ı tanıttığında, bu performans sorunlarına bir isim verdi, ancak teknik jargon bunaltıcı gelebilir. Bilgisayar bilimi dereceniz yoksa SEO'nuzun zarar göreceğinden endişe edebilirsiniz.
İyi haber şu ki, harika puanlar almak için geliştirici olmanıza gerek yok. Bu optimizasyon sürecini kendimiz yaşadık ve sizin için temel unsurlara indirdik.
Bu kılavuzda, daha hızlı ve daha akıcı bir WordPress sitesi için Temel Web Gelişmişlik Ölçütlerinizi iyileştirmek üzere basit, pratik adımları size adım adım anlatacağız.
Bu kılavuzda neleri ele alacağımıza dair hızlı bir genel bakış:
- Google Temel Web Gelişmişlik Ölçütleri Nedir?
- Google Core Web Vitals Puanınızı Nasıl Test Edersiniz
- Core Web Vitals Neden Önemlidir?
- WordPress'te Temel Web Vitals'ınızı Nasıl İyileştirirsiniz (7 İpucu)
- Core Web Vitals Hakkında Sıkça Sorulan Sorular
- WordPress Performansını Ölçme ve İyileştirme Üzerine Uzman Rehberleri
Google Temel Web Gelişmişlik Ölçütleri Nedir?
Google'ın Core Web Vitals'ı, arama motorunun bir web sitesinin genel kullanıcı deneyimini ölçmek için kullandığı belirli performans metrikleridir. Bu puanlar, SEO sıralamalarınızı etkileyebilecek Google'ın sayfa deneyimi sinyallerinin bir parçasıdır.
Gerçek şu ki, kimse yavaş bir web sitesini sevmez ve bu Google'ı da içerir. Core Web Vitals, sitenizin ziyaretçileriniz için ne kadar hızlı görünür, etkileşimli ve kararlı hale geldiğini ölçmenize yardımcı olur.
To do that, Google uses three key tests:
- En Büyük İçerik Boyama (LCP)
- Sonraki Boyamaya Etkileşim (INP)
- Kümülatif Düzen Kayması (CLS)
Not: Mart 2024'e kadar Google, INP yerine İlk Girdi Gecikmesi'ni (FID) kullanıyordu. Bazı performans test araçlarında hala bu eski metriği görebilirsiniz.
Bu testlerin adları teknik gelse de, ölçtükleri şeyin anlaşılması oldukça basittir. Her birinin nasıl çalıştığına bakalım.
En Büyük İçerik Boyama (LCP)
En Büyük İçerikli Boyama, sayfanızdaki ana içeriğin kullanıcılar için ne kadar hızlı görünür hale geldiğini ölçer. Bu, öne çıkan bir resim, büyük bir metin bloğu veya başka bir belirgin öğe olabilir.
A page might load quickly overall, but if the most important content appears last, the page will still feel slow to the user. LCP helps you spot and fix this issue.
Sonraki Boyamaya Etkileşim (INP)
Interaction to Next Paint (Sonraki Boyamaya Etkileşim), bir kullanıcının sizinle etkileşime geçtikten sonra sitenizin görsel geri bildirim sağlamasının ne kadar sürdüğünü ölçer. Bu etkileşim bir tıklama, dokunma veya tuşa basma olabilir.
Örneğin, biri iletişim formundaki 'Gönder' düğmesine tıkladığında, INP o eylemi onaylamak için ekranda görsel olarak bir değişiklik olana kadar geçen süreyi ölçer.
Kümülatif Düzen Kayması (CLS)
Kümülatif Düzen Kayması, sayfanız yüklenirken görsel kararlılığını ölçer. Kötü bir CLS puanı, sayfa oluşturulurken öğelerin ekranda zıpladığı anlamına gelir.
Bir kullanıcının bir düğmeye tıklamaya çalıştığında, reklam veya üzerindeki bir resim yüklendiği için son saniyede hareket etmesi sinir bozucudur. İyi bir CLS puanı, düzeninizin kararlı ve öngörülebilir olduğu anlamına gelir.
Google Core Web Vitals Puanınızı Nasıl Test Edersiniz
Core Web Vitals puanınızı test etmenin en kolay yolu Google’ın PageSpeed Insights aracıdır. Kontrol etmek istediğiniz URL'yi girin ve 'Analiz Et' düğmesine tıklayın.
Sonuçlar ‘Temel Web Gelişmişlik Ölçütleri Değerlendirmesi’ bölümünde gösterilir. Geçme notu, başlığın yanında yeşil renkle belirtilecektir.
Bunun altında, üç hayati unsurun her biri için özel puanları görebilirsiniz. Değerlendirmeyi geçmek için şu hedeflere ulaşmanız gerekir:
- En Büyük İçerikli Boyama (LCP): 2,5 saniye veya daha az
- Interaction to Next Paint (INP): 200 milisaniye veya daha az
- Kümülatif Düzen Kayması (CLS): 0,1 veya daha az
Web Sitenizin Tamamı İçin Çekirdek Web İşlemlerini Nasıl Görüntülersiniz
Web sitenizin tamamı için ortalama bir puan görmek üzere, Google Search Console hesabınızdaki Core Web Vitals raporunu kullanabilirsiniz.
This report shows you which URLs on your site have good, needs improvement, or poor scores, allowing you to prioritize your optimization efforts.
For even more detailed reports, you can use the Lighthouse test built directly into the Chrome browser. Simply open a website, right-click anywhere, and select the ‘Inspect’ option.
Note: You must run Chrome tests in Incognito mode for the most accurate results. Otherwise, your own browser extensions could negatively affect the scores.
Core Web Vitals Neden Önemlidir?
Core Web Vitals, kullanıcıların web sitenizle nasıl etkileşim kurduğunu doğrudan yansıttığı için önemlidir. Yalnızca ham hıza değil, ziyaretçilerin içeriğinizi ne kadar hızlı görebildiğine ve etkileşimde bulunabildiğine odaklanırlar.
Bir çalışma, sayfa yükleme süresindeki bir saniyelik gecikmenin dönüşümlerde %7 kayba ve sayfa görüntülemelerinde %11 azalmaya neden olabileceğini buldu. Kötü bir kullanıcı deneyimine sahip daha hızlı bir web sitesi, yine de kârınızı olumsuz etkiliyor.
Temel Web Vitals'ı iyileştirmek bu sorunu çözmenize yardımcı olur. Kullanıcı deneyimi onaylanmış bir Google SEO sıralama faktörü olduğundan, iyi bir puan size rakiplerinize karşı bir avantaj sağlayabilir.
WordPress'te Temel Web Vitals'ınızı Nasıl İyileştirirsiniz (7 İpucu)
WordPress'te Core Web Vitals puanınızı iyileştirmek o kadar da zor değil. Bazı temel performans optimizasyon ipuçlarını izleyerek değerlendirmeyi kolayca geçebilirsiniz.
1. WordPress Hosting'inizi Optimize Etme
WordPress barındırma sağlayıcınız, web sitenizin performansında en önemli rolü oynar. Kaliteli bir barındırıcı, sunucularını özellikle WordPress için optimize eder, bu da sitenize üzerine inşa edilecek sağlam bir platform sunar.
WPBeginner'da, bu çok nedenden dolayı SiteGround kullanıyoruz. WordPress.org tarafından resmi olarak önerilen az sayıdaki hosting firmasından biridir ve performansları mükemmeldir.
Platformları Google Cloud üzerinde çalışır ve güçlü SG Optimizer eklentilerini içerir. Tüm gelişmiş önbellekleme ve performans ince ayarlarını otomatik olarak halleder, bu da sitemizin bu kadar hızlı olmasının önemli bir nedenidir.
Farklı bir barındırma hizmeti kullanıyorsanız, WP Rocket en iyi alternatiftir. Diğer projelerimiz için önerdiğimiz önbellekleme eklentisidir ve daha iyi bir Temel Web Gelişmişlik Ölçütleri puanı elde etmeyi çok daha kolaylaştırır.
2. En Büyük İçerikli Boyama (LCP) Puanını İyileştirme
Bahsettiğimiz gibi LCP, en büyük içerik öğesinin ekranda görünmesi için geçen süredir. Tipik bir blog yazısında bu genellikle öne çıkan resim veya makale metnidir.
Ölçülen öğenin hangisi olduğunu öğrenmek için PageSpeed Insights sonuçlarını aşağı kaydırın ve ‘En Büyük İçerikli Boyama öğesi’ sekmesini genişletin.
Eğer büyük bir resimse, onu daha küçük bir dosya ile değiştirmeyi deneyin. web için resimleri optimize etme konulu rehberimizde daha fazla bilgi edinebilirsiniz.
3. Etkileşimden Sonraki Boyama (INP) Puanını İyileştirme
Interaction to Next Paint (Sonraki Boyamaya Etkileşim) puanı, kullanıcının sitenizde bir şeye tıklaması ile görsel bir yanıt görmesi arasındaki süreyi ölçer. Buradaki uzun bir gecikme, sitenizin yavaş ve tepkisiz hissetmesine neden olabilir.
Örneğin, bir ziyaretçinin bir iletişim formunu doldurduğunu ve 'Gönder' düğmesine tıkladığını hayal edin. Sitemizde WPForms kullanıyoruz çünkü hız için üretilmiştir ve gecikme olmadan gönderimleri işleyerek sorunsuz bir deneyim yaratır.
Kötü INP'nin büyük bir nedeni, sayfanın geri kalanından önce yüklenen JavaScript'tir. Bunu düzeltmenin en kolay yolu, size nasıl kuracağınızı göstereceğimiz WP Rocket gibi bir eklentidir.
Öncelikle eklentiyi yükleyip etkinleştirmeniz gerekir. Ardından, Ayarlar » WP Rocket bölümüne gidin ve ‘Dosya Optimizasyonu’ sekmesine geçin.
Sayfanın altına kaydırın ve 'JavaScript'i ertelenmiş olarak yükle' kutusunu işaretleyin. Değişikliklerinizi kaydetmeyi unutmayın.
Bu basit ayar, web sitenize önce görünür içeriği yüklemesini ve JavaScript'i beklemesini söyler. Bu tek değişiklik, INP puanınızı önemli ölçüde iyileştirebilir.
4. Kümülatif Düzen Kayması (CLS) Puanını İyileştirme
Sayfadaki öğeler yüklendikçe hareket ettiğinde kötü bir CLS puanı oluşur. Sorunlara neden olan öğeleri görmek için PageSpeed raporunuzdaki 'Büyük düzen kaymalarından kaçının' sekmesini genişletin.
Bunu önlemek için tarayıcılara resimlerinizin, video yerleştirmelerinizin ve reklamlarınızın boyutlarını (genişlik ve yükseklik) belirtmelisiniz. Bu, tarayıcının öğe yüklenmeden önce doğru miktarda alanı ayırmasına olanak tanır.
WordPress resimlerinize otomatik olarak boyutlar ekler, ancak diğer medya yerleştirmelerini kontrol etmelisiniz. Bir öğenin genişlik ve yükseklik özniteliklerinin tanımlanıp tanımlanmadığını kontrol etmek için tarayıcınızdaki Denetleme Aracını kullanarak bunu yapabilirsiniz.
5. Oluşturma Engelleme Öğelerini Ortadan Kaldırma
Engelleme yapan oluşturma öğeleri, genellikle sayfanızın geri kalanının görüntülenmeden önce yüklenmesi gereken JavaScript veya CSS dosyalarıdır. Bu, algılanan sayfa hızınızı yavaşlatır ve Temel Web İşaretleri puanlarınızı olumsuz etkiler.
PageSpeed Insights bu sorunlu dosyaları sizin için listeleyecektir. Bunlar genellikle eklentilerden ve Google Analytics veya Facebook Pixel gibi üçüncü taraf araçlardan gelir.
Bunu manuel olarak düzeltmek yeni başlayanlar için zor olabilir. Kodu hiç ellemeden oluşturma engelleme kaynaklarını kolayca nasıl ortadan kaldıracağınıza dair adım adım bir kılavuzumuz var.
6. WordPress'te Resimleri Doğru Boyutlandırma
Gereksiz yere büyük resimler yüklemek, web sitelerini yavaşlatan yaygın bir hatadır. Yüksek çözünürlüklü fotoğrafların yüklenmesi daha uzun sürer ve genellikle web'de görüntüleme için gerekli değildir.
Bu durum özellikle mobil kullanıcılar için sorunludur. Tema görüntüyü daha küçük bir ekrana sığacak şekilde küçültecek olsa da, ziyaretçinin tarayıcısının tam boyutlu dosyayı indirmesi gerekir.
Kaliteyi kaybetmeden görüntüleri doğru şekilde optimize etme konusunda ayrıntılı bir kılavuzumuz var.
7. Using a CDN to Improve Your Core Web Vitals Score
CDN veya İçerik Dağıtım Ağı, sitenizi dünyanın dört bir yanındaki ziyaretçiler için daha hızlı hale getiren bir hizmettir. Bunu, statik dosyalarınızın (resimler ve CSS gibi) kopyalarını farklı coğrafi konumlardaki sunucularda depolayarak yapar.
Bu, kullanıcıların bu dosyaları kendilerine en yakın sunucudan indirmelerine olanak tanır, bu da yükleme sürelerini azaltır. Ayrıca ana barındırma sunucunuzdaki yükü de önemli ölçüde azaltır.
WPBeginner için, Cloudflare'ın kurumsal CDN'sine güveniyoruz. Bu sadece hızımızı artırmakla kalmaz, aynı zamanda her gün milyonlarca spam isteğini ve kötü niyetli saldırıyı engelleyen güçlü bir güvenlik duvarı sağlar.
Çoğu işletme için, Cloudflare'ın ücretsiz planı bile mükemmel CDN hizmeti ve temel güvenlik duvarı koruması sağlar. Core Web Vitals puanlarınızı iyileştirmenin en etkili yollarından biridir.
Core Web Vitals Hakkında Sıkça Sorulan Sorular
Binlerce kullanıcının web sitelerini hızlandırmasına yardımcı olduktan sonra, Temel Web Gelişmişlik Ölçütleri hakkında çok fazla soru alıyoruz. İşte en yaygın sorulardan bazılarının cevapları.
S: Üç Temel Web Vitals nedir?
C: Üç ana metrik, yükleme performansı için En Büyük İçerik Boyama (LCP), web sitesi etkileşimi için Etkileşimden Sonraki Boyama (INP) ve görsel kararlılık için Kümülatif Düzen Kayması (CLS)'dir.
S: İyi bir Core Web Vitals puanı nedir?
C: LCP için 2,5 saniye veya daha az, INP için ise 200 milisaniye veya daha az bir süre hedeflemelisiniz. CLS için 0,1 veya daha düşük bir puan iyi kabul edilir.
S: İyi bir tema Temel Web Vitals'ımı otomatik olarak düzeltebilir mi?
C: İyi kodlanmış bir tema mükemmel bir temel sağlar, ancak sihirli bir değnek değildir. Puanlarınız ayrıca barındırma sağlayıcınız, resim boyutlarınız ve kullandığınız eklenti sayısı tarafından da büyük ölçüde etkilenir.
S: Temel Web Gelişmişlik Ölçütleri puanlarımı ne sıklıkla kontrol etmeliyim?
C: Puanlarınızı en az ayda bir kez kontrol etmenizi öneririz. Ayrıca yeni bir eklenti yükledikten, temanızı değiştirdikten veya sitenize büyük yeni özellikler ekledikten sonra test etmek de iyi bir fikirdir.
WordPress Performansını Ölçme ve İyileştirme Üzerine Uzman Rehberleri
Çekirdek Web Temel Ölçümlerini nasıl optimize edeceğinizi artık bildiğinize göre, WordPress performansını ölçme ve iyileştirme ile ilgili diğer makaleleri görmek isteyebilirsiniz:
- WordPress Hızını ve Performansını Artırmak İçin Nihai Rehber
- WooCommerce Performansını Nasıl Hızlandırırsınız
- Bir Web Sitesi Hız Testini Doğru Bir Şekilde Nasıl Çalıştırırsınız (En İyi Araçlar)
- Bir WordPress Web Sitesini Stres Testi Nasıl Yapılır
- Google'ın INP Puanı Nedir ve WordPress'te Nasıl İyileştirilir
- WordPress Site Performansını İyileştirmek İçin GTmetrix Eklentisi Nasıl Kullanılır
- En Hızlı WordPress Barındırma (Performans Testleri)
Umarım bu rehber, WordPress için Core Web Vitals'ı nasıl optimize edeceğinizi öğrenmenize yardımcı olmuştur. Kullanıcı deneyiminin bir diğer önemli parçası da güvenliktir, bu nedenle sitenizi korumak için WordPress güvenlik kontrol listemizi takip etmenizi öneririz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Olaf
Overall website optimization might look simple on “paper,” but in practice, it’s usually a different story. Achieving impressive numbers and speeds can sometimes feel like painstaking work. It depends on the state of the website you inherit and how well the previous owner maintained it, or the technologies they used to build it. Sometimes, if a site is built on a page builder and relies on multiple plugins for every minor function, it’s challenging to devise any strategy to improve core web vitals. This list provides a solid starting point, a guide on what to check, what to improve, and how to go about it. A great foundation for beginners.
Samuel
SEO'nun diğer yönlerine kapılıp core web vital'ı unutmak kolaydır. Kullanıcılar için core web vitals'ın varlığından haberdar olsam da, ona gerçekten dikkat etmemiştim. Yeni bir wordpress sitesi tasarladığımda, odak noktam her zaman google arama veya başka bir arama motorunda ne kadar hızlı sıralanacağıdır. Bu makaleyi okumak, web geliştiricisi olarak iş akışlarıma web vitals'ı dahil etme düşüncelerimi bilgilendiriyor. Bu ayrıntılı kılavuz için teşekkürler. Yeni bir müşteri için bir web sitesini yeni bitirdim ve bu makale buradaki tüm talimatları izleyerek kullanıma sunulacak. Çok teşekkürler.
Dayo Olobayo
Bu kılavuzda belirtilen stratejileri uygulamaya başlayana kadar WordPress sitemin yavaş yüklenme süresiyle mücadele ediyordum. Talimatlar, Core Web Vitals'ımı optimize etmemi kolaylaştırdı ve şimdi sitem ışık hızında. Teşekkürler!
WPBeginner Desteği
Rica ederim!
Yönetici
Jiří Vaněk
Başlangıçta WordPress hızıyla çok uğraştım. Kendi sunucumda 4 vCPU ve 8GB RAM'e sahip bir web sitem var. O zaman bile kırmızı rakamlar görmeye devam ettim. Bununla, optimizasyonun sadece sunucu performansı veya barındırma ile ilgili değil, aynı zamanda WordPress'in kendisini nasıl optimize ettiğinizle de ilgili olduğunu kastediyorum. Bu bağlamda, WP Rocket eklentisinin bana en çok yardımcı olduğunu söylemeliyim. Sadece bu eklentiyi uyguladıktan sonra nihayet yeşil sayılara ulaştım. Belki de en çok yardımcı olan şey URL bağlantılarının önbelleğe alınması ve nispeten gelişmiş bir önbellekleme oldu. Muhtemelen hiçbir önbellekleme eklentisi WP Rocket kadar iyi değildir. SEO açısından, web sitesi düzgün bir şekilde optimize edildikten sonra daha iyi pozisyonlar kazanmaya başladım.
WPBeginner Desteği
Thank you for sharing what you use for your site
Yönetici
Mohammed Haider
WordPress'te bir web sitem var. Core Web Vitals'ı geçemiyorum. Bunu başarmama yardımcı olabilecek ücretsiz bir WordPress eklentisi var mı?
WPBeginner Desteği
Web Vitals puanının birçok farklı bölümü vardır, önerilerimiz için “WordPress'te Çekirdek Web Vitals'ınızı Nasıl İyileştirirsiniz” bölümüne göz atmanızı öneririz.
Yönetici
Jiří Vaněk
Autooptimize eklentisi, bir tür önbellek eklentisiyle birlikte ücretsizdir ve gerçekten çok yardımcı olabilir.
Ladyson
Kodlarında sorunlar çıkaran birçok sürükle-bırak tema oluşturucu olduğunu unutmayın.
Bunları düzenli olarak güncelleyerek düşük puan sorununu da çözebilirsiniz. Kodlarını Web Vitals için optimize ediyorlar.
WPBeginner Desteği
That is certainly something to keep in mind as well
Yönetici
miamiatz
Google kullanışlı şeyler icat etmekte iyidir. Kümülatif Düzen Kayması sorunu çoğu dijital cihazda kritik öneme sahiptir.
Tıklamak istediğiniz bir şeye tıklamak istersiniz, ancak tıklamak istediğiniz bağlantı/ikon/düğme farklı bir yere taşınmış olur ve başka bir şeye tıklarsınız.
This issue is found even in core android apps and non core apps including social media apps, news apps, even financial apps. It is ridiculous.
Bu Core Web Vitals'ı icat ettiği için Google'a alkış.
Web temel ölçümleriyle ilgilenenlere söylemek istediğim bir veya iki nokta var:
Most WordPress themes come with stylesheets that are loaded one after another.
Tema özelleştiricisi kullanılarak bildirilen Özel CSS en son yüklenir.
Şimdi, özel CSS'de temanın CSS dosyalarında farklı beyan edilmiş bir şeyin boyutunu veya şeklini (fontlar dahil) beyan ederseniz, öğe önce varsayılan tema stiliyle yüklenecek, ardından özel CSS'de bulunan CSS beyanına uyması için ayarlanacaktır.
Bu, düzen kaymalarına neden olur.
Yayın Kadrosu
Bu içgörüleri paylaştığınız için teşekkürler. Evet, CSS teslimatını optimize etmek, öğeleri tembel yüklemeyle birlikte yardımcı olabilir.
Yönetici
Ackson Mwape
Zamanında yapılan makale için çok teşekkürler.
Yayın Kadrosu
Always a pleasure Ackson
Yönetici