Google PageSpeed ​​Insights'ta 100'e Nasıl Ulaşılır (WordPress'te)

Web sitenizi daha hızlı yapmanıza yardımcı olacak bir araç olsa harika olmaz mıydı? Peki, var! Google PageSpeed ​​Insights, adıdır ve yavaş web sitesi sorunlarınızı çözmek için elinizin altında olan ücretsiz bir hizmettir. Bu yazıda ne olduğuna, nasıl çalıştığına ve WordPress'te yakalanması zor Google PageSpeed ​​Insights 100 / 100 puanına nasıl ulaşabileceğinize bakacağız.

Google PageSpeed ​​Insights nedir?

Google PageSpeed ​​Insights, web sitenizin hızını ve kullanıcı deneyimini ölçmek için kullanılan çevrimiçi bir araçtır. Bir sitenin masaüstü ve mobil cihazlarda yüklenme süresini ölçer ve sitenin performansıyla ilgili çeşitli ölçümler görüntüler. Metriklerin optimumun altında olduğuna karar verilirse araç, bunların nasıl iyileştirileceğine dair önerilerde bulunur.

Google PageSpeed ​​Insights'a gidin, bir URL girin ve Analiz Et'e basın. Google, sitenizi hem mobil hem de masaüstünde değerlendirir. Birinde diğerinden daha iyi puan aldığınızı görebilirsiniz.

Google eskiden bir web sayfası için 100 üzerinden genel bir puan verirdi, ancak artık vermiyorlar.

Bunun yerine Google, Önemli Web Verileri adını verdiği üç istatistiği ölçer. Bunlar:

• En Büyük İçerikli Boya (LCP) : sitenin ana içeriğinin ne kadar hızlı yüklendiği. İyi bir kullanıcı deneyimi için bu süre 2,5 saniye veya daha az olmalıdır.
• İlk Giriş Gecikmesi (FID) : sitenin kullanıcı girişine ne kadar duyarlı olduğu. FID 100 milisaniye veya daha az olmalıdır.
• Kümülatif Düzen Kayması (CLS) : bir web sayfasının görsel kararlılığını ölçer. 0.1 veya daha düşük bir CLS puanı tercih edilir.

Ayrıca, Google aşağıdakileri ölçer:

• First Contentful Paint (FCP) : web sayfasının ekranda görüntülenmeye başlaması için geçen süre. İyi bir FCP puanı 1,8 saniye veya daha azdır.
• Sonraki Boyayla Etkileşim (INP) : sayfanın kullanıcı etkileşimlerine ne kadar duyarlı olduğunu ölçer. Gerçekten duyarlı bir web sitesinin INP'si 200 milisaniye veya daha azdır.
• Time to First Byte (TTFB) : Bir sunucu isteğinden sonra verilerin ilk baytının gönderilmesi için geçen süre. 0,8 saniye veya daha kısa bir TTFB idealdir.

Bunun altında, Performans sorunlarını teşhis et bölümünde, Google PageSpeed ​​Insights size dört puan verir: Performans, Erişilebilirlik, En İyi Uygulamalar ve SEO. 90 veya üstü iyi bir puandır, 50 ila 89 arası iyileştirme yapılabileceğini ve 50'nin altındaki herhangi bir puan kötüdür.

Bunun altında Google'ın Fırsatlar ve Teşhis var. Bunlar, Performans puanınızı dolaylı olarak iyileştirmenin yollarıdır. Performans metriği, sitenizin hızı üzerinde en fazla etkiye sahiptir.

Web sitenizin performansını nasıl iyileştireceğinize geçmeden önce, web sitesi hızının neden önemli olduğuna bir göz atalım.

Web sitesi hızı neden önemlidir?

Web sitesi hızının, kullanıcı ve tüketici davranışları üzerinde büyük etkisi vardır.

Bir mobil açılış sayfasının tamamen yüklenmesi için geçen ortalama süre 22 saniyedir [1] .

Sayfa yükleme süresi 1 saniyeden 3 saniyeye [2] çıktıkça hemen çıkma olasılığı %32 artar .

Bir mobil sitenin yüklenmesi 3 saniyeden uzun sürerse ziyaretlerin %53'ü terk ediliyor [3] .

Açıkçası, bir e-ticaret sitesi işletiyorsanız, yavaş bir site dönüşümlerin azalmasına neden olur ve bu, ele almak isteyeceğiniz bir şeydir. Bir sitenin yüklenmesi için geçen süre ile dönüşüm oranı düşer [4] :

• 2,4 saniyede yüklenen sayfaların dönüşüm oranı %1,9'du
• 3,3 saniyede dönüşüm oranı %1,5 oldu
• 4,2 saniyede dönüşüm oranı %1'den azdı
• 5,7+ saniyede, dönüşüm oranı %0,6 idi

Gerçek sayfa hızına karşı yüksek PageSpeed ​​Insights puanı

Google, PageSpeed ​​Insights puanını hem laboratuvar verilerinden (kontrollü koşullar altında toplanan) hem de saha verilerinden (doğal ortamda gerçek kullanıcılardan toplanan) hesaplar.

Gerçek sayfa hızınızı test etmek için GTmetrix veya Pingdom's hız testi gibi çevrimiçi araçları kullanabilirsiniz.

Bu araçları kullanarak sitenizi farklı konumlarda test edebilirsiniz.

GTmetrix'te San Antonio, Teksas'taki bir test sunucusu için sayfa yükleme süresinin 666 ms olduğunu görebilirsiniz – çok iyi bir puan.

Hong Kong'da sayfa yükleme süresi biraz daha uzundur - 1,4 sn.

Pingdom ayrıca Washington DC'deki bir test için 850ms'lik hızlı bir yükleme süresi, ancak Tokyo, Japonya'daki 1.06s'lik daha yavaş bir yükleme süresi gösteriyor.

Artış Trendleri aracı, mobil ve masaüstünde test etmenize olanak tanır. İşte iPad Air'de Paris, Fransa'dan WP Shout sitesinin sonucu – 1,9 saniyelik yükleme süresi:

Dolayısıyla, Google PageSpeed ​​Insights puanı ile gerçek sayfa hızı arasında bir korelasyon var gibi görünüyor.

WordPress'te ideal Google PageSpeed ​​Insights 100 puanı nasıl alınır?

Artık yüksek bir Google PageSpeed ​​Insights puanının neden önemli olduğunu bildiğinize göre, bunu iyileştirmenin yollarına bakmanın zamanı geldi.

Google PageSpeed ​​Insights puanını yükseltmenin yolları

1. Görüntüleri optimize edin

Görüntülerinizi Web için optimize etmek, Performans puanınızı artırmanın kolay bir yoludur.

Optimole gibi bir görüntü sıkıştırma eklentisine ihtiyacınız olacak.

Bu eklenti, resimlerinizi daha hızlı yüklenmeleri için daha küçük bir dosya boyutuna sıkıştırabilir. Bunları tüm yeni resim yüklemelerinizin yanı sıra mevcut olanlarınız için de kullanabilirsiniz. Optimole ile ilgili harika olan şey, görüntülerinizi bir CDN aracılığıyla teslim ederek daha da hızlı bir teslimat yapmasıdır.

Ayrıca resimlerinizi JPG veya PNG dosyalarından daha küçük olan WebP formatına dönüştürebilir. Bu , görüntüleri yeni nesil biçimlerde sun önerisini iletmenize yardımcı olacaktır. Ek olarak, sahip olduğunuz daha büyük resimleri, onlar için maksimum genişlik ayarlayarak yeniden boyutlandırabilirsiniz.

Resimlerinizin , Açık Genişlik ve Yükseklik fırsatına sahip olmayan Resim öğelerini tatmin etmek için belirtilen genişlik ve yükseklik özelliklerine sahip olduğundan emin olun.

Optimole eklentisi, yalnızca bir kullanıcı onları aşağı kaydırdığında görüntüleri veya videoları yükleyen yavaş yüklemeyi de içerir. Bu, aşağıda gösterilen Ekran dışı görüntüleri ertele fırsatına yardımcı olur.

Görüntü dosyasının boyutunu küçültmenin başka bir yöntemi de SVG görüntüleri kullanmaktır. SVG'ler vektör dosyalarıdır, dolayısıyla dosya boyutlarını etkilemeden kolayca yeniden ölçeklendirilebilirler. WordPress'te yerel olarak desteklenmezler ancak bunları SVG Desteği veya Güvenli SVG gibi bir eklentiyle Medya Kitaplığınıza ekleyebilirsiniz.

2. Aşırı DOM boyutundan kaçının

DOM nedir? DOM, Belge Nesne Modeli anlamına gelir ve sayfanın tüm HTML öğelerini, niteliklerini ve metnini içeren ağaç benzeri bir yapıdır.

DOM boyutunu küçültmek için birkaç strateji, uzun web sayfalarını daha küçük bölümlere ayırmak ve DOM düğümlerini CSS'de {display:none;} bildirimi ile gizlemekten kaçınmaktır.

DOM boyutunu artırabilen faktörlerden biri, bir sayfa oluşturucu kullanmaktır. Sayfa oluşturucular, bir sayfadaki <div> öğelerinin sayısını artırma eğilimindedir.

Elementor kullanıyorsanız, sürüm 3.0'dan bu yana, DOM'un boyutunu azaltan bazı HTML sarmalayıcıları kaldırılmıştır.

Ya da Chris Lema'nın yaptığı gibi sayfa oluşturucu yerine Gutenberg'i kullanmaya geçebilirsiniz.

Bu gönderide aşırı DOM boyutundan kaçınmayla ilgili daha fazla ipucu bulabilirsiniz.

3. JavaScript ve CSS'yi Optimize Edin

Performansı artırmak için CSS ve JS dosyaları küçültülebilir ve sıkıştırılabilir . Küçültme, bir CSS veya JS dosyasındaki tüm boşlukları kaldırırken, GZIP sıkıştırması { gibi tekrarlanan karakterleri kaldırır.

CSS veya JS'yi küçültmenize izin veren WordPress eklentileri arasında Autoptimize (ücretsiz) ve WP Rocket (ücretli) bulunur.

Küçültme sitenizi bozabilir, bu nedenle küçültücü eklentiler, bir sorununuz varsa dosyaları küçültme dışında bırak seçeneğine sahiptir.

WP Rocket, CSS ve JS dosyalarınızı tek bir dosyada birleştirerek istekleri azaltma seçeneğine de sahiptir. Ancak web sunucunuz HTTP/2 kullanıyorsa bunu yapmak istemeyeceksiniz. Önce kontrol etmek için sunucunuzun HTTP/2 çalıştırıp çalıştırmadığını test edebilirsiniz.

Çoğu önbellekleme eklentisiyle GZIP sıkıştırmasını etkinleştirebilirsiniz. Web sunucunuz Apache veya LiteSpeed ​​ise, eklenti doğrudan .htaccess dosyanıza yazabilir veya kopyalayıp yapıştırmak için satırlar sağlayabilir. NGINX veya IIS kullanıyorsanız, Hummingbird ayrıca bu sunucularda sıkıştırmayı etkinleştirmek için yapılandırma sağlar.

Sitenizde kullanılmayan herhangi bir CSS veya JS varsa, onu kaldırmanın zamanı geldi. Büyük olasılıkla bir eklentiden gelen kullanılmayan CSS ve JS'yi bulmak için Chrome DevTools'u kullanabilirsiniz.

Web sitenizden hangi CSS'leri kaybedebileceğinizi görmek için Rapidload'ın CSS Saver'ını da kullanabilirsiniz:

4. Oluşturmayı engelleyen kaynakları ortadan kaldırın

İşleme engelleyici CSS ve JS, web sayfanızın ilk boyasını engelliyor olarak işaretlenen dosyalardır.

Autoptimize eklentisi bu sorunu çözebilir ve sonuç olarak First Contentful Paint ve Largest Contentful Paint puanlarınızı iyileştirebilir.

5. İlk sunucu yanıt süresini azaltın

Sunucu yanıt süresi birkaç faktöre bağlıdır: kullandığınız tema ve eklentiler ve sahip olduğunuz web barındırma türü.

Kullanmadığınız fazla eklentileri kaldırmayı veya Astra gibi hafif bir temaya geçmeyi düşünün.

Barındırma için, paylaşılan web barındırma yerine yönetilen WordPress barındırma öneririz. Yönetilen WordPress ana bilgisayarları, hizmetin bir parçası olarak sunucu optimizasyonunu içerir.

6. Web yazı tipi yüklemesi sırasında metnin görünür kalmasını sağlayın Web yazı tipi yüklemesi sırasında metnin görünür kalmasını sağlayın

Web yazı tiplerini kullanırsanız, Google'ın tavsiyesi sayfalarınızın metninin yüklenirken görünmez olmasını engelleyecektir.

Öneri, font-display: swap; stil sayfanızdaki @font-face bildiriminize.

Aşağıdaki ekran görüntüsü, Asset CleanUp eklentisi kullanılarak bu özelliğin nasıl ekleneceğini gösterir.

7. İstek sayılarını düşük tutun ve aktarım boyutlarını küçük tutun

Google PageSpeed ​​Insights, web sunucusu tarafından talep edilen dosya sayısını ve bu dosyaların boyutunu günlüğe kaydeder.

Burada büyük sayılarınız varsa, bunları şu şekilde azaltabilirsiniz:

• Resimlerinizi ve medya dosyalarınızı optimize etme. Animasyonlu GIF'ler yerine video dosyalarının kullanılması önerilir.
• CSS ve JS'nizi optimize etme
• Yazı tiplerinizi ve üçüncü taraf komut dosyalarınızı optimize etme
• HTML dosyasının boyutunu küçültme

8. Kritik istekleri zincirlemekten kaçının

Kritik istekler, sayfanın yüklenmesi için gerekli olan isteklerdir. Örneğin, bir logo kritik bir talep olabilir.

Uzun zincirler ve büyük indirmeler içeren zincirler, web sitenizin hızı için kötü kabul edilir. İlk Zengin İçerikli Boya ve En Büyük İçerikli Boya üzerinde etkilidirler.

Google'a göre, kritik istekleri zincirlemekten kaçınmak için şunları yapmalısınız:

• Kritik kaynakların sayısını en aza indirin: bunları ortadan kaldırın, indirilmelerini erteleyin, zaman uyumsuz olarak işaretleyin vb.
• İndirme süresini (gidiş dönüş sayısı) azaltmak için kritik bayt sayısını optimize edin.
• Kalan kritik kaynakların yüklenme sırasını optimize edin: kritik yol uzunluğunu kısaltmak için tüm kritik varlıkları mümkün olduğunca erken indirin.

Bunu şu şekilde yapabilirsiniz:

• Onlara başvuran HTML'de "link rel="preload" kullanarak anahtar isteklerini, resimleri ve yazı tiplerini önceden yükleme.
• CSS ve JavaScript'inizi küçültme.
• Oluşturmayı engelleyen kaynakları ortadan kaldırın.

Bu görevleri sizin için gerçekleştirmek için WP Rocket gibi bir eklenti kullanabilirsiniz.

9. Uzun ana iş parçacığı görevlerinden kaçının ve ana iş parçacığı işini en aza indirin

Uzun ana iş parçacığı görevleri, kullanıcı için Etkileşim Süresini geciktiren JavaScript görevleridir (50 ms'den fazla).

Ana iş parçacığı çalışmasını en aza indirmek, JS'yi ayrıştırma, derleme ve yürütme süresini kısaltmak anlamına gelir.

JavaScript görevlerinin uzunluğunu ve süresini şu şekilde azaltabilirsiniz:

• şişirilmiş eklenti kullanımınızı en aza indirme
• yazı tiplerinizi ve analiz komut dosyalarınızı yerel olarak barındırma
• JS ve CSS'yi küçültme veya erteleme
• tembel yükleme arka plan resimleri

WordPress'te ana iş parçacığı çalışmasını en aza indirmeye ilişkin daha fazla ipucu için aşağıdaki makaleye bakın.

10. Büyük yerleşim değişikliklerinden kaçının Büyük yerleşim değişikliklerinden kaçının

Düzen kaymaları, Kümülatif Düzen Kayması metriğine katkıda bulunur ve kullanıcılara sayfa atlama izlenimi verir.

Bu sorunu şu şekilde çözebilirsiniz:

• Medyanıza boyutlar ekleme
• Yazı tiplerinizi önceden yükleme
• Bülten kayıt formları gibi dinamik içeriğinizi optimize etme

Daha fazla bilgi için, WordPress'te kümülatif düzen kaymasını düzeltme hakkındaki bu kılavuzu okuyun.

11. Üçüncü taraf kodunun etkisini azaltın

Üçüncü taraf komut dosyaları, Google Analytics izleme veya YouTube yerleştirmeleri gibi başka yerlerde barındırılan komut dosyalarıdır.

Mümkün olduğunda, betikleri yerel olarak barındırmayı deneyin. Bunu YouTube ile yapamazsınız ancak analitik kodunuzu ve yazı tiplerinizi yerel olarak barındırabilirsiniz.

Google Yazı Tiplerini kendi sunucunuzda barındırmak için Yerel Google Yazı Tipleri eklentisini kullanabilirsiniz.

WordPress için Yerel Google Analytics - harici istekleri önbelleğe alır eklentisi, Google Analytics'inizi yerel olarak barındırır.

12. CDN kullanın

İçerik Dağıtım Ağı, web içeriğini depolayan ve kullanıcılara sunan uzak bir sunucu ağıdır.

Bir CDN, statik dosyaları (ör. HTML, CSS ve JavaScript) önbelleğe alarak ve bunları yakın bir konumdan bir kullanıcıya sunarak sitenizin hızını artırabilir. Bu, First Contentful Paint ve En Büyük Contentful Paint puanlarınızı düşürmenize yardımcı olur.

WP Shout'ta Cloudflare CDN kullanıyoruz. Ücretsiz olarak başlayabilirsiniz.

Neden bir CDN kullanmanız gerektiği ve en iyi seçenekler hakkında daha fazla bilgi edinin.

Google PageSpeed ​​Insights 100 puanına nasıl ulaşılacağına dair sonuç

Site hızını belirleyen oyunda epeyce faktör olduğunu gördük. Bu ipuçları, mükemmel bir puan elde etmenize yardımcı olacaktır.

Yine de 100 puan almaya çok takılmamalısınız - 90+ puan yine de çok iyi. Puanlarımızı iyileştirmek için neler yaptığımızı görmek için David'in site performansını optimize etme hakkındaki gönderisini okuyun.