Bu WordPress Geliştirme Teknikleriyle Her CWV ve PageSpeed ​​Insights Testini Geçin

2021'de, Birleşik Krallık merkezli eksiksiz bir dijital ajans olan StrategiQ'da, Google'ın Önemli Web Verileri (CWV) ve PageSpeed ​​Insights (PSI) performansını geçmek için geliştirdiğimiz ve kullanıma sunduğumuz her web sitesini geliştirmeye başlamayı hedefimiz haline getirdik. rapor.

Önemli Web Verileri, web sitenizin çeşitli şekillerde nasıl performans gösterdiğini gösterir. Buna, bir sayfadaki ilk içeriğin yüklenme hızı (Birinci ve En Büyük İçerikli Boyama), bir kullanıcının onunla etkileşime geçmeden önce ne kadar beklemesi gerektiğinin hızı (Etkileşim Süresi) ve düzen kaymaları (Kümülatif Mizanpaj Kayması) dahildir. .

CWV'nizi test etmek çok kolay – sadece https://pagespeed.web.dev/ adresine gidin ve adresinizi girin. En üstteki alan, son 28 güne ait en son gerçek dünya verilerini görüntülerken, alt kısım (hem mobil hem de masaüstü için 100 üzerinden bir puan) laboratuvar tarafından oluşturulan verilerdir.

Bu neden önemli? Eh, çünkü Google öyle diyor.

Temmuz 2018'de Google, bir sitenin özellikle mobil cihazlarda Arama sonuçlarında nasıl görüneceği konusunda hızın bir faktör olduğunu duyurdu. Kaynak.

2020'de ayrıca, siteleri sıralamalarında artık kullanıcı deneyimi metriklerinin (Önemli Web Verilerini / CVW'yi oluşturan) kullanıldığını duyurdular. Kaynak.

Çok basit: Bir site ne kadar hızlı ve iyi performans gösterirse, sıralaması o kadar iyi olur.

Böylece StrategiQ'daki geliştirme ekibi, SEO departmanına yardım etme sıramızın bizde olduğuna karar verdi. SEO uzmanları, küçük serserilerini olabildiğince sıkı bir şekilde çalıştırabilirler, ancak korkunç bir performans sergileyen bir site, yarardan çok zarar verebilir. Bununla birlikte, CWV ve PSI'yi geçen bir site, mükemmel çalışmalarının mükemmel bir sıçrama tahtası olmasını sağlayacaktır.

Kayda değer olan şey, CWV ve PSI'yi geçmenin çok zor olduğudur. Sitelerin büyük çoğunluğu, hatta dünyanın en yüksek profilli web sitelerinin çoğu bunu yapmıyor. YouTube'un, BBC'nin ve hatta WP Engine'in kendilerinin hem mobil hem de masaüstünde geçiş yapmak için mücadele ettiğini düşünün ( üzgünüz çocuklar ).

Peki o enfes yeşil geçişli lokum çöreklerini gördüğümüzden emin olmak için ne yaptık?

Her şeyi geri aldık ve basit bir mantra üzerinde çalıştık:

Mümkün olduğunca az, mümkün olduğunca çabuk yükleyin.

En küçük ayrıntılara girmeyecek olsam da, ısmarlama WordPress temalarımızı olabildiğince akıcı tutmak için birincil yöntemlerimizi gözden geçireceğim.

Öncelikle donanımdan bahsedelim. Öncelikle WP Engine'den bahsetmeden devam edemeyiz. Şüphesiz, WordPress'e özgü en iyi barındırma tedarikçilerinden biri olmasalar da bunlardır. Etkileyici destek, çalışma süresi, her yükleme için ortamlar, yedeklemeler ve diğer birçok özellik arasında SSL sertifikası ve alan adlarının ne kadar kolay yönetilmesinden memnunuz. Ek olarak, önbelleğe alma ve sabit hız optimizasyonu, sitenin sunucu düzeyinde olabildiğince hızlı çalışmasını sağlar.

Özünde yüksek performanslı bir sunucu bulunduğundan, bir web sitesini olabildiğince hızlı bir şekilde çalıştırmanın artık bize bağlı olduğunu biliyoruz.

Çoğu ajans gibi, tüm ısmarlama web sitelerimiz için başlangıç ​​noktası olarak kullandığımız kendi el yapımı temel şablonumuz var. Oluşturduğumuz her site, önceden oluşturulmuş bir tema değil, şirket içinde tasarlanır ve kodlanır.

Temel şablonumuz, her projede ihtiyaç duyduğumuz bir dizi akıllı işlev ve yeniden kullanılabilir bileşenlerin yanı sıra, hız optimizasyon yöntemlerimizi de içerir. Bu başlangıç ​​noktasına sahip olmak, uzun vadede bize zaman kazandırır ve her sitenin, geliştiricinin gerektirdiği çok az ek yük ile elinden gelenin en iyisini yapmasını sağlar.

Ne düşündüğünüzü biliyorum - iyi şeylere gidin!

"Tembel yükleme resimleri" gibi her blog yazısında gördüğünüz olağan sıkıcı şeyleri listelemekle uğraşmayacağım. Ama yapmazsanız, bu gerçekten bir zorunluluktur - srcset ve size etiketleriyle (duyarlı resimler olarak bilinir) yüklenen tembel yüklenen resimlerimizi yazdıran bir resim işlevimiz var.

Hemen konuya girelim.

Yöntem 1: parçala ve kuyruğa al

Çok olur: bir projede sadece bir css dosyası ve bir js dosyası vardır ve sonunda küçük bir gezegen boyutunda şişirilirler. Sıradaki ne? Google size “neden bu sayfada stiller yüklüyorsunuz ve javascript kullanılmıyor?” diye soruyor. Niye ya? Niye ya?!

Bu geçerli bir nokta. Sayfa başına bunun yalnızca bir kısmına ihtiyacınız varken neden bir web sitesinin tamamı için yığınla css ve javascript yükleyesiniz?

Tüm sitelerimiz tamamen Gutenberg blokları ile inşa edilmiştir. Bu, her blok için css ve js dosyalarınızı sıraya koymanın muhteşem gücünü kullanabileceğiniz anlamına gelir.

Her blok için sadece o dosya için ayrı bir css ve js dosyası oluşturuyoruz (gerekirse). Bunlar daha sonra küçültülür (daha fazla bilgi için bir sonraki noktaya bakın) ve blok bazında sıraya alınır.

Sonuç? Her sayfada yalnızca gerçekte orada olanı yüklüyoruz.

Yöntem 2: varlıklarınızı birleştirmek ve küçültmek için yudum gibi bir görev çalıştırıcı kullanın

Oluşturulan tüm varlıklar, bir yudum işlevi tarafından küçültülür (diğerleri, örneğin homurdanma gibi). Aylar önce, Google'ın birleştirmeyi küçültmeye tercih edeceğini belirtmekte fayda var (5 küçük istek yerine büyük bir istek tercih edilirdi), ancak HTTP/2'nin (bir kerede birden çok isteği çoğullayan) yükselişinden bu yana, bu artık bir sorun.

Yine, dosyaları mümkün olduğunca küçük tutmak için bunu yapıyoruz. Yani şimdi yalnızca sayfada bulunan varlıkları yüklemekle kalmıyoruz, aynı zamanda boyutları da çok küçük.

Yöntem 3: varlıkları engellemeyi durdur

Kuyruğa alınan tüm bu varlıkların sayfanın alt kısmında olmasını ve bu nedenle engelleme oluşturmamasını sağlıyoruz.

Hatta WordPress ile birlikte gelen jQuery'yi de sıraya koyuyoruz ve yeni bir sürümü (güvenlik açıkları olmayan bir sürüm) kuyruğa alıyoruz, yine sayfanın alt kısmında.

Peki ya bir FOUC (Tarzlandırılmamış İçeriğin Flaşı) dediğinizi duyar gibiyim?

Yöntem 4: kat css'nin üstünde

Stilsiz İçeriğin Flaşı, stil sayfası sayfanın altında olduğundan, bir sayfa başlangıçta herhangi bir stil olmadan yüklendiğinde oluşur. Stil sayfası yüklendikten sonra stiller uygulanır, site yanıp söner ve sonunda doğru görünür.

Bunu düzeltmek için, yukarıdaki katlama stillerini böldük ve onu head içine satır içi <style> etiketi olarak ekledik. Bu, oluşturmayı engelleyen bir varlık değildir ve bir FOUC alamıyoruz.

Yöntem 5: WP Roketi

Bulmacanın son parçası, sınıfının en iyisi performans eklentisi WP Rocket'tir. WP Engine mühendisleriyle birlikte oluşturulmuş, barındırma platformlarında izin verilen tek önbelleğe alma eklentisidir.

Sonuçlar?

Eh, puanlar kendileri için konuşur.

SportsAidEastern, İngiliz sporcuları destekleyen bir yardım kuruluşudur. PSI'ya göre, onlar için geliştirdiğimiz site mobilde 97/100 ve masaüstünde 100/100 puan alıyor.

Calligo dönüştürücü veri hizmetleri sunar ve site puanları SportsAid'den bile daha iyidir; mobilde mükemmele yakın bir 99/100 ve masaüstünde 100/100 ile geliyor.

Çözüm

Umarım bu, diğer tüm aynı-ol 'aynı-ol' "WordPress'inizi nasıl hızlandırırsınız" site yayınlarından temiz bir nefes olmuştur ve bir geçiş almakta zorlanıyorsanız, belki de altını çizmişizdir. deneyebileceğiniz bir şey.

StrategiQ, strateji odaklı pazarlama ajansıdır. Değerli pazar içgörülerini ortaya çıkararak, rakipleri yenme fırsatlarını ortaya çıkararak, etkili pazarlama stratejileri tanımlayarak ve sunarak ekibimiz, danışmanlık, yaratıcı, pazarlama ve teknoloji yoluyla iddialı markaların hedeflerini aşmasına yardımcı olur.
Stratejiye, tavsiyeye, kaynaklara veya uzmanlığa ihtiyacınız olsun, ilk adımı atın. Bize kendinizden bahsedin, nasıl yardımcı olabileceğimizi görelim.