WordPress için Google PagePeed Insights Puanı Nasıl Artırılır

Bir web sitesinin yükleme hızı başarısını artırabilir veya bozabilir. İki özdeş sayfayı karşılaştırırsanız, daha hızlı olan sayfa Google gibi arama motorlarında ayrıcalıklı muamele görür. Neyse ki web sitenizin hızını test etmenin ve onu iyileştirme konusunda tavsiye almanın bir yolu var. Buna Google PageSpeed ​​Insights adı veriliyor; işte ne olduğu ve nasıl kullanabileceğiniz.

Google PageSpeed ​​Insights nedir?

Google PageSpeed ​​Insights (PSI), Google tarafından geliştirilen, mobil ve masaüstü cihazlardaki web sayfalarının hızını ve kullanıcı deneyiminin çeşitli öğelerini analiz eden ücretsiz bir çevrimiçi araçtır. Sayfayı analiz eder ve web sitesi sahiplerinin sitelerinin performansını artırmalarına yardımcı olacak puanlar ve öneriler verir. Herkes herhangi bir web sayfasında rapor çalıştırabilir; bu, kendi sitenizin ve rakip sitelerinizin ne kadar iyi çalıştığını görmenin harika bir yoludur.

Divi WordPress temamızla oluşturulmuş bir web sitesinin canlı demosunu burada bulabilirsiniz; henüz yapmadıysanız, hızlı bir Sayfa Hızı Raporu çalıştırmak için bir düğmeyi tıklayabilirsiniz.

Google'ın Chrome ekibi, iyi site hızı ve kullanıcı deneyimini belirlemeye yönelik ölçümleri standartlaştırmak amacıyla 2020'de Önemli Web Verileri'ni (CWV) kullanıma sundu. PageSpeed ​​Insights, bu ölçümleri analiz eden ve raporlayan bir araçtır. Bu nedenle site sahiplerinin CWV ölçümlerini ve bunların sayfa hızı SEO'nuzu nasıl etkileyeceğini anlaması çok önemlidir.

Önemli Web Verileri: Bu Kısaltmalar Ne Anlama Geliyor ve Ölçüyor?

Sayfa Hızı puanınız beş temel ölçümle ölçülür (ancak yalnızca üçü gerçekten "temel" olarak kabul edilir, diğer ikisi "dikkate değer" olarak adlandırılır).

LCP, INP, CLS, FCP ve TTFB kısaltmalarının kısa bir açıklamasını burada bulabilirsiniz:

• LCP (En Büyük İçerikli Boya), görünüm alanında görünen en büyük içerik öğesinin (resim, video, metin bloğu) ekranda oluşturulmasının ne kadar sürdüğünü ölçer. Sayfanın ana içeriğinin kullanıcı tarafından ne kadar hızlı görülebildiğini temsil eder. İyi bir kullanıcı deneyimi için 2,5 saniye veya daha kısa süreyi hedefleyin.
• INP (Sonraki Paint ile Etkileşim), bir sayfanın kullanıcı etkileşimlerine yanıt verme yeteneğini ölçer. Kullanıcının bir sayfayı ziyareti sırasındaki tüm tıklama, dokunma ve klavye etkileşimlerinin gecikmesine bakar ve sayfanın tipik gecikmesini temsil eden tek bir değer bildirir. İyi bir INP 200 milisaniye veya daha azdır. Buna eskiden Giriş Gecikmesi adı veriliyordu .
• CLS (Kümülatif Düzen Kayması), bir sayfanın görsel stabilitesini ölçer. Görünüm alanında görünür içeriğin ne kadar hareket ettiğini ölçer. Beklenmeyen düzen değişiklikleri kullanıcıları hayal kırıklığına uğratabilir (örneğin, tıklamaya çalışırken bir düğmenin hareket etmesi). 0,1 veya daha düşük bir CLS puanı hedefleyin.
• FCP (First Contentful Paint), sayfanın yüklenmeye başlamasından herhangi bir içeriğin (metin, resim vb.) ekranda ilk kez boyanmasına kadar geçen süreyi ölçer. Kullanıcının sayfanın yüklendiğine dair görsel geri bildirimi ne kadar hızlı aldığını gösterir. 1,8 saniye veya daha azını hedefleyin.
• TTFB (İlk Bayta Kadar Geçen Süre), tarayıcının bir sayfa talebinde bulunduktan sonra sunucudan ilk veri baytını alması için geçen süreyi ölçer. Sunucu yanıt verme hızı için önemli bir ölçümdür. 800 milisaniye veya daha azını hedefleyin.

Neden Mobil Sayfa Hızına Öncelik Vermelisiniz?

Akıllı telefonların ortaya çıkması ve aramaların çoğunun artık mobil cihazlardan yapılmasıyla birlikte Google ve diğer arama motorları, web sitelerinin ve web sayfalarının mobil deneyimine öncelik vermeye başladı. Dolayısıyla, PageSpeed ​​Insight değerlendirmesini çalıştırdığınızda bunun size hem Masaüstü hem de Mobil için bir puan verdiğini göreceksiniz.

Deneyimlerime göre, günümüzde masaüstünde 95 veya daha yüksek puan almak çok kolay, ancak mobil sürümde çok daha zor. Bunun birkaç nedeni var:

1. Birçok web tasarımcısı hâlâ web sitelerini öncelikle masaüstü deneyiminden tasarlıyor. Mobil tasarım sonradan akla gelen bir düşüncedir.
2. Mobil hız testi, hücresel verileri kullanan internet hızlarını varsayarken, masaüstü bilgisayarlar sabit ve yüksek hızlı ev veya iş internet bağlantılarını kullanma eğilimindedir. Bu eşitsizlik nedeniyle mobil deneyimler daha yavaş olma eğilimindedir.
3. Yukarıdaki 1 numaraya dayanarak, web tasarımcıları web sitelerini masaüstü bilgisayarları da göz önünde bulundurarak optimize eder; bu, en iyi optimizasyonların çoğunun mobil deneyime göre uyarlanmadığı anlamına gelir.

Bunu göz önünde bulundurarak, mobil deneyiminizin en az masaüstünüz kadar iyi olduğundan emin olun. Ancak her iki durumda da hem masaüstü hem de mobil deneyimler aynı kriterlere göre değerlendirilir ve bu ölçümlerin farkında olmalısınız.

Daha İyi Sayfa Hızı Puanları İçin Temel Web Verileri Nasıl İyileştirilir?

Tamam, yapabileceğiniz çok şey var ama bunları daraltmanıza yardımcı olur. Site sahiplerinin Önemli Web Verilerinin her birini iyileştirmesine yönelik öncelikli ve uygulanabilir öneriler topladım. Karşılaştığınız sorunlara göre önerilerimi bulacaksınız.

LCP (En Büyük İçerikli Boya)

LCP için raporda tanımlandığı gibi "En Büyük Unsur"a odaklanmak isteyeceksiniz. Bunun için kötü bir puan alındığında, kullanıcılar ana içeriği görmeden önce daha az önemli sayfa içeriğini görürler.

Şu üç şeye odaklanın:

1. LCP Öğesini Optimize Edin: İlk görünüm alanındaki en büyük öğeyi (genellikle bir resim veya kahraman metni) belirleyin. Önce bu öğeyi optimize edin:
   • Görseller: WebP gibi modern formatları kullanarak görselleri sıkıştırın. Uygun boyutlandırmayı kullanın (gerektiğinden daha büyük resimler sunmayın). Duyarlı görseller için srcset vesize niteliklerini kullanın. Görüntü dağıtımı için CDN kullanmayı düşünün.
   • Metin Blokları: Web yazı tiplerinin verimli bir şekilde yüklendiğinden emin olun (font-display: swap kullanmak iyidir). Metin oluşturmayı geciktiren, oluşturmayı engelleyen büyük JavaScript veya CSS bloklarından kaçının.
2. Ekranın Üst Kısmındaki İçeriği Optimize Edin: İçeriğin ekranın üst kısmına (sayfanın kaydırılmadan görünen kısmı) hızlı bir şekilde yüklenmesine öncelik verin. Kritik olmayan kaynakların ekranın alt kısmına yüklenmesini erteleyin.
3. Sunucu Yanıt Sürelerini İyileştirin (TTFB): Daha hızlı bir TTFB, LCP'yi doğrudan etkiler. Aşağıdaki TTFB önerilerine bakın.

INP (Sonraki Boyayla Etkileşim)

INP, sayfanızın kullanıcı etkileşimine (ör. düğme tıklamaları) nasıl yanıt verdiğine odaklanır. Bu, geliştirici odaklı metriklerden biridir ve geliştirici olmayanlar için çözülmesi çok daha zor olabilir.

Ancak bu görevlere hazır olduğunuzu düşünüyorsanız şu görevlere odaklanmalısınız:

1. Uzun Görevleri En Aza İndirin : Uzun süredir devam eden JavaScript görevlerini (ana iş parçacığını 50 ms veya daha uzun süre engelleyen herhangi bir şey) tanımlayın ve parçalayın. Kod bölmeyi kullanın ve kritik olmayan JavaScript'i erteleyin.
2. Olay İşleyicilerini Optimize Edin : Olay işleyicilerinin (tıklama veya dokunma etkinlikleri gibi) verimli olduğundan ve uzun gecikmelere neden olmadığından emin olun. Olay işleyicilerde karmaşık hesaplamalardan veya DOM manipülasyonlarından kaçının.
3. Düzenin Çarpıtılmasından Kaçının : Eşzamanlı düzenleri zorlamaktan kaçının (JavaScript, tarayıcıyı düzeni kısa bir süre içinde birden çok kez yeniden hesaplamaya zorlar). Bu genellikle okuma ve ardından hemen yazma stilleri sırasında ortaya çıkar.

CLS (Kümülatif Düzen Kayması)

CLS'yi geliştirmek için beklenmedik düzen değişikliklerini önlemek için çok çalışın. Bu olduğunda, önemli öğeler ve stiller beklenmedik zamanlarda yükleniyor ve ekranda her şeyin zıplamasına neden oluyor.

Şu şeylere odaklanmayı deneyin:

1. Resimler ve Videolarda Açık Genişlik ve Yükseklik Ayarlayın : Yükleme sırasında yer ayırmak amacıyla resimlere ve videolara her zaman genişlik ve yükseklik nitelikleri ekleyin (veya CSS en boy oranını kullanın). Bu, içeriğin etrafta dolaşmasını önler.
2. Reklamlar ve Gömülü İçerik için Yer Ayırın : Boyutu değişebilecek reklamlar veya yerleştirmeler kullanıyorsanız, yer tutucular veya iskelet yükleyiciler kullanarak bunlar için yeterli alan ayırın.
3. Mevcut İçeriğin Üstüne İçerik Eklemekten Kaçının : Kullanıcı etkileşimine yanıt olmadığı sürece, mevcut içeriğin üzerine dinamik olarak içerik eklemeyin.

FCP (İlk İçerikli Boya)

Kötü FCP puanları, içerik çok hızlı bir şekilde görünmediğinde ortaya çıkar. Bu da sayfanın yüklenmeyebileceği izlenimini verir.

FCP sorunlarını çözmek için şu öğelere odaklanın:

1. İşlemeyi Engelleyen Kaynakları Ortadan Kaldırın : İşlemeyi engelleyen CSS ve JavaScript'i en aza indirin veya ortadan kaldırın. CSS ve JavaScript dosyalarını küçültün ve sıkıştırın. Satır içi kritik CSS (ekranın üst kısmındaki içeriği oluşturmak için gereken CSS) ve kritik olmayan CSS'yi erteleyin. Erteleme veya eşzamansız niteliklerini kullanarak kritik olmayan JavaScript'i erteleyin.
2. Sunucu Yanıt Süresini Optimize Edin : Daha hızlı bir TTFB, FCP'yi doğrudan iyileştirir. Aşağıdaki TTFB önerilerine bakın.
3. Kaynak Yükleme Sırasını Optimize Edin : Kritik kaynakların (CSS ve ekranın üst kısmındaki içerik için gereken yazı tipleri gibi) erken yüklenmesine öncelik verin.

TTFB (İlk Bayt Süresi)

Yukarıdakine benzer şekilde kullanıcılar bir sayfanın yüklenmesini beklemektedir. Ancak TTFB, tek bir sayfanın ne kadar iyi yüklendiğinden ziyade sunucu yapılandırmanızla ilgilidir. TTFB, sitenizdeki herhangi bir sayfayı göstererek sunucunuzun yanıt verme yeteneğini gösterir.

Sunucu yanıt sürelerini ele almak için bu öğeleri gerçekten inceleyin:

1. Sunucu Performansını Optimize Edin : Bu genellikle en etkili faktördür.
   1. Barındırma planınızı daha güçlü bir sunucuya yükseltmek (veya daha güçlü bir barındırma sağlayıcısına güncellemek).
   2. Kullanıcılara daha yakın olan statik varlıkları önbelleğe almak için bir İçerik Dağıtım Ağı (CDN) kullanma.
   3. Sunucu tarafı kodunuzu ve veritabanı sorgularınızı optimize etme.
2. Önbelleğe Alma Kullanın : Sunucunuzdaki yükü azaltmak için uygun önbelleğe alma mekanizmalarını (GZIP, tarayıcı önbelleğe alma, sunucu tarafı önbelleğe alma, nesne önbelleğe alma) uygulayın.
3. Hızlı Arama Sürelerine Sahip Bir DNS Sağlayıcı Kullanın : Hızlı bir DNS sağlayıcı, alan adınızı bir IP adresine çözümlemek için gereken süreyi azaltabilir.

WordPress Web Sitesi için Sayfa Hızı Nasıl Düzeltilir

WordPress, sitenizi ihtiyaç duyduğunuz şekilde optimize etmenize olanak tanıyan mükemmel bir platformdur. Wix ve Squarespace gibi web sitesi oluşturucuları bu işi sizin yerinize halleder, ancak bu maliyetler aboneliğinize yansıtılır. Performansı düşürmeyi veya fiyatları artırmayı seçerlerse kilitlenirsiniz. Bu durum bir barındırma sağlayıcısı veya eklentiyle gerçekleşirse (WordPress kullanırken), performansı istediğiniz fiyatta korumak için sağlayıcıları kolayca değiştirebilirsiniz.

PageSpeed ​​Insights raporunuzda gösterildiği gibi, Önemli Web Verilerini geliştirmek için kullanmanızı önerdiğim temel platformlar, hizmetler ve eklentileri burada bulabilirsiniz. CWV'ler birbiriyle iç içe olduğundan bazen birini düzeltmek diğerlerini de iyileştirir. Önerilerimizden bazılarının birden fazla ölçüme yardımcı olabileceğini fark edeceksiniz.

TTFB Nasıl Geliştirilir?

TTFB, sunucunuzun yanıt verme hızını ölçer. Daha hızlı bir TTFB, web sitenizin daha erken yüklenmeye başlayacağı anlamına gelir. Bunu düzeltmek için sunucu tarafında bazı çalışmalar yapmanız gerekir.

SiteGround Barındırma

Optimize edilmiş sunucu yapılandırmalarıyla güvenilir barındırma, hızlı bir TTFB için çok önemlidir. SiteGround, WordPress için optimize edilmiş mükemmel performans ve özellikler sunar.

SiteGround'u edinin

Cloudflare CDN'si

Cloudflare gibi bir İçerik Dağıtım Ağı (CDN), web sitenizin statik varlıklarını dünya çapındaki sunucularda önbelleğe alır, veri yolculuk mesafesini azaltır ve dünya çapındaki kullanıcılar için TTFB'yi geliştirir. Ücretsiz sürüm önemli avantajlar sunar.

Cloudflare'i edinin

FCP, CLS ve LCP Nasıl Geliştirilir?

Bu CWV'ler, içeriğinizin ne kadar hızlı yüklendiğinden ve yükleme sırasında düzeninizin ne kadar kararlı olduğundan büyük ölçüde etkilenir. Önbelleğe alma ve görüntü optimizasyonu çok önemlidir.

Nitro Paketi

NitroPack, akıllı önbelleğe alma, optimize edilmiş kaynak dağıtımı ve tembel yükleme ve WebP dönüşümü gibi gelişmiş görüntü optimizasyon teknikleriyle web sitesi verimliliğini en üst düzeye çıkarır. Bundan bahsetmek istiyorum çünkü önbelleğe alma işlemini gerçekleştiriyor ve bir CDN ve görüntü yeniden boyutlandırma sunuyor (plana bağlı olarak). Bu, ihtiyaç duyacağınız üç önemli şey (önbelleğe alma, görüntü optimizasyonu ve CDN) için tek adresli bir mağaza olduğu anlamına gelir.

NitroPack'i edinin

W3 Toplam Önbellek

W3 Total Cache, sayfa önbelleğe alma, küçültme ve tarayıcı önbelleğe alma dahil olmak üzere yükleme sürelerini iyileştirmek için kapsamlı bir seçenekler paketi sunan uzun süredir devam eden bir WordPress önbellek eklentisidir.

W3 Toplam Önbelleği Alın

WP Roketi

WP Rocket, sayfa önbelleğe alma, ön yükleme ve dosya değiştirme gibi özelliklerle optimizasyonu kolaylaştıran kullanıcı dostu bir önbellek eklentisidir. Çok sayıda takipçisi var ve kullanımı oldukça kolaydır. Bir CDN için eklentileri vardır veya tonlarca farklı konfigürasyonla iyi çalışır.

WP Roketini Alın

EWWW Görüntü Optimize Edici

EWWW Image Optimizer, gözle görülür bir kalite kaybı olmadan dosya boyutlarını azaltarak görsellerinizi otomatik olarak optimize eder. Bu, yükleme sürelerini iyileştirir ve CLS'yi önler. Modern web için daha iyi yüklenen yeni nesil görsel formatlarının yanı sıra görsel boyutlandırmaya da yardımcı olur.

EWWW Image Optimizer'ı edinin

LCP ve INP Nasıl Geliştirilir?

Hem LCP hem de INP kodunun kırılması, sayfanın ilk yüklenmesinde veya sonraki herhangi bir etkinlikte sitenizin içeriği hızlı bir şekilde göstermesi gerektiği anlamına gelir. Performanslı bir WordPress teması bunun gerçekleşmesine yardımcı olabilir.

Divi Teması

Divi, değişiklik yapılmadan önce bile her sayfaya yüklenen CSS ve JavaScript miktarını en aza indirecek şekilde tasarlanmıştır. Herhangi bir Divi Modülünü kullandığınızda, onun iyi kodlandığına ve sunucunuzu yormayacağına güvenebilirsiniz. Divi'den daha da fazla performans elde etmek amacıyla bir sayfa için gereken CSS miktarını daha da azaltmak amacıyla genel tasarım ön ayarlarını kullanın. Tüm bunlar, iyi görünen ve iyi çalışacağına güvenebileceğiniz daha iyi sayfalar oluşturmanıza olanak sağlamak için bir araya gelir. Divi'yi tamamen optimize etme hakkında daha fazla bilgi edinin.

Divi Pro'yu edinin

Hepsini Bir Araya Getirmek

Web sitenizi Önemli Web Verileri (CWV'ler) için optimize etmek, çevrimiçi başarınıza yapılan bir yatırımdır. Çok fazla olduğunu biliyorum, ancak LCP, INP, CLS, FCP ve TTFB'ye odaklanarak doğrudan kullanıcı deneyimini geliştiriyor, web sitenizi daha keyifli ve ilgi çekici hale getiriyorsunuz. Bu, daha düşük hemen çıkma oranları, sitede geçirilen sürenin artması ve sonuçta daha fazla dönüşüm anlamına gelir.

Ayrıca Google, bu ölçümlerin önemli olduğunu düşünmektedir; dolayısıyla Önemli Web Verilerinizi iyileştirmek, arama motoru görünürlüğünüzü iyileştirebilir. Bu ölçümler sıralama faktörleri olmasa da, sıralama faktörleri olan türlere yardımcı olurlar. Umarım bu iyileştirmelerin sitenize daha fazla organik trafik çektiğini görürsünüz.

Bugün Yüksek Puanlı Bir WordPress Sitesi Oluşturun

Henüz web sitenizi oluşturmadıysanız şu sırayla odaklanacağım şeyler:

1. Güvenilir barındırma edinin (Siteground'u öneririz)
2. Muhteşem performans sunmak için en iyi uygulamalar kullanılarak oluşturulmuş Divi gibi bir tema seçin.
3. İyi bir önbellek eklentisi ve CDN ile işlemi tamamlayın.

Test Divi Sayfası (Canlı Demo)

Divi'yi Bugün Alın

Sıkça Sorulan Sorular