Google Sayfa Hız Testinde% 100 puan nasıl puan alınır: WordPress Edition
Web sayfalarınızı en kısa sürede nasıl yükleyeceğinizi merak ediyor musunuz? Bu yazıda, Tribe SEO tarafından Google Pagespeed’in hücresel puanlarından% 37 ila% 100 mükemmel geçiş yapmak için atılan doğru adımları göstereceğim. Bu nedenle, Google’da daha üst sıralarda yer almak, ziyaretçileriniz için olağanüstü bir kullanıcı deneyimi sunmak ve Google PagePeed Insights testinde ustalaşırsanız, doğru yerdesiniz. Üstesinden gelinen tüm engelleri belirleyeceğim ve bizi%100 Google sayfası hız hücresel puanı olan beş önemli kilometre taşı haline getireceğim:
Kodun temiz olduğundan emin olun.
Eklenti sayfalarını yükleyin.
Hosting’i artırın.
İçeriğin en büyük içeriğini artırın.
Etkileşime süreyi artırın.
Şimdi, girmeden önce, biraz dayatma. Bu yazının yayınlanmasında, Tribe SEO ana sayfası Google PagePeed hücresel skorunu yarı yarıya% 100 puanladı. Bu oldukça tipik, çünkü sayfa hız testini çalıştırırken genellikle bazı varyasyonlar göreceksiniz. Tamam, o zaman içine atlayalım. Milestone #1: Kodun temiz olduğundan emin olun, web sayfanız site sayfalarınızın hızını etkileyen bir dizi komut dosyasından oluşur.
En basit WordPress sitesi için, kullanıcı sunucudan web sayfaları istediğinde PHP ve MySQL komut dosyaları çalıştırılır.
Ancak bu, tüm sayfa yapımcılarının daha ince anlamına gelmez, çünkü WP Bakery, Beaver Builder ve oksijen üreticisi 494 kb, 59 kb ve 34 kb daha küçük bir dosya boyutuna sahiptir. Oksijen üreticisinin en ince CSS ve JavaScript koduna sahip olduğu açıkça görülmektedir. Pro ile karşılaştırıldığında toplam boyutun yaklaşık% 4’ü ve Brzy Pro ile karşılaştırıldığında% 2 elementörlerdir. Bunun nedeni, oksijen üreticisinin öncül üzerine inşa edilmesidir, sadece ihtiyaç duyulan şeyleri içerir. Oksijen üreticisi de çok temiz bir HTML kodu yapar. Diğer inşaatçılar, kodlamaya katkıda bulunan H1 başlığı gibi basit içerik öğeleri için çok sayıda div yuvası yaparlar.
Tersine, oksijen gereksiz div üretmez. Buna ek olarak, oksijen üreticisi, çok ince bir kod üretmek için bir tema ve sayfa üreticisi olarak hareket eder ve bir site üreticisi olarak daha doğru bir şekilde tanımlanabilir. Slim kod ve destekleyici Facebook topluluğu nedeniyle, Tribe Seo yeni sitemizi geliştirmeye yardımcı olmak için Oxygen Builder’ı seçti. Ücretsiz bir eklenti seçmeye de dikkat ediyoruz. Örneğin, WP akıcı formlar çok küçüktür. Milestone #2: Eklenti Sayfaları Hızını Yükle Bazı WordPress sayfa hız eklentilerini denedikten sonra, WP roketine karar verdim, çünkü sadece en iyi sayfa hız puanlarını üretmekle kalmadı, kullanımı kolay ve web sitesi ayarlarımızla mükemmel uyumluluğa sahip. Kutunun dışında, bazı isimler için sayfa ve tarayıcı önbelleği ve GZIP sıkıştırma gibi harika özellikler sunar. Ancak, en önemli etkiyi yaratan “WP roket dosyası optimizasyonu özelliği. Ama önce, WP roketini kurmadan SEO kabilesi evinin performansının nasıl performansını inceleyelim. Google sayfası hız hücresel puanı% 37 hafife alınmıştır. Google, en büyük içerik boyası, etkileşimli zamanı ve toplam engelleme süresi için “kırmızı üçgen” i vurgular. Yani, bu alanın geliştirilmesi gerektiğini biliyorum.
PagePeed Insights’ın hücresel puanlarının Google tarafından artırılması gerekiyor, aynı zamanda kırmızı bir üçgen ile üç fırsatı işaret ediyor, bu da bunun iyileştirilmesi en yüksek öncelik olduğunu gösteriyor. Bunlar şunları içerir:
Ekranın dışındaki görüntüleri erteleme Oluşturma engelleme kaynağını ortadan kaldırın (WP Rocket tarafından ele alınacak)
Kullanılmayan JavaScript’i silin.
Fırsatlar Listesi – İlginç sayfalar, ekran dışındaki görüntüleri geciktirmek ve kullanılmayan JavaScript’i silmek için iyileştirmeler aynıdır. Kullanılmayan JavaScript’i kaldırma hakkında daha fazla bilgi için tıkladığımda, Google not etmek için üç JavaScript dosyasını vurgular.
Kullanılmayan JavaScript’i Sil – İlk PagesPeed Insight, doğrudan sohbet widget’ımız Chatra içindir. İkincisi, e -posta yakalamak için kullandığımız ConvertBox içindir. Ve üçüncüsü, video oynatıcı olarak kullandığımız Spotlight için. Spotlight, ekranın dışında video küçük resim olarak görüntüler içeren dokuz video için kullanılır. Peki, gelişme nedir? Bunun üstesinden nasıl gelinir JavaScript’i üç dosyadan geciktirmektir. WP roketinde bunu yapmak kolay, ama biraz çabaya ihtiyacım var. Yani, bunu yaptığım bu: Rocket WP’de “Dosya Optimizasyonu” sekmesine çarptım ve sonra JavaScript bölümüne geçtim. “Yenilen bir JavaScript kurma” etkinleştirdim, ancak mucize aslında “JavaScript’in yürütülmesini erteleyerek” etkinleştirerek oldu. WP Rocket birkaç varsayılan JavaScript dosyası ekler ve ayrıca kendi komut dosyalamanızı eklemenize olanak tanır. Listeye Chatra, Convertbox ve Spotlight eklediğimi görebilirsiniz.
JavaScript Yürütme Gecikme Özellikleri – WP Roket Ama WP Roket ne kadar yardımcı olur? JavaScript’i ertelemekten daha fazlası. Bu, Google PagesPeed’in hücresel puanından% 37 ila% 97 arasında kabile SEO ana sayfasını artırıyor. Şaşırtıcı bir şekilde, WP roket yapılandırmasının hazırlanması yaklaşık beş dakika sürer. WP Roket – Önceki ve sonra sonuçlarımızda JavaScript’i geciktirmenin veya ertelemenin ne kadar önemli olduğunu vurgulamak istiyorum. JavaScript gecikme özelliğini devre dışı bırakırsam, Google sayfa hız puanımız%50’ye düşer. MILESTONE # 3: Aralık 2020’de barındırmayı artırın, yeni oksijen yapımı web sitemizi Kinsta Web sunucusunda başlattık. Kinsta, oruç tutan özel WordPress barındırma çözümlerinden biri olarak bilinir ve genel olarak mükemmel destek ve deneyim buldum. Ancak, birkaç ay sonra, başka bir önde gelen web barındırma şirketi olan Cloudways, sayfa deneyimi üzerinde bir web semineri yapmam için bana yaklaştı. Web seminerini onaylıyoruz ve ayrıca site sayfalarımızın hızını sunucularında test edeceğimi kabul ediyoruz. İlk başta, performansın Kinsta ile yaşadığımızdan daha düşük olduğu görülüyordu. Google PagePeed Cellolels puanımız% 97’den% 94’e düştü. Ama bir şeyler yanlış gibi görünüyor. En büyük oruç boyası ve etkileşimli artış süresi, ancak kümülatif düzen kayması 0’dan 0.781’e yükseldi. Bu garip çünkü değişen CSS veya HTML yok. Bu yüzden, birkaç pacing’den sonra “WP Roket Dosyası Optimizasyonu’na geri döndüm ve” CSS Teslimatını Optimize Etmek “i devre dışı bırakarak denedim. Önbelleği hızlı bir şekilde kaldırın, CLS sorunu düzeltildi ve Google Hücresel Sayfa Hız Puanımız Kinsta ile% 97’den Cloudways ile tatmin edici% 99’a yükseldi.
Web ana bilgisayarını taşımanın en büyük içerik boya skorumuzu 2.4’ten 2.1 saniyeye çıkardığını görünce şaşırdım. Cloudways ile hangi paketi seçtiğimizi merak ediyorsanız, ayda 26 $ değerinde olan 2GB RAM yüksek frekanslı bir vultr, Kinsta ile ödediğimizden biraz daha ucuz. Şimdi, hücresel skorları% 99’dan% 100’e nasıl artıracağınızı anlamak için, deniz feneri puanlama hesap makinesi sayfasını açıyorum ve değerlendirme düğmesiyle oynuyorum. Son cesarete odaklanın. Milestone #4: En büyük içerikli boyanın (LCP) en büyük içeriğini artırın, Google sayfasının web sayfasından en büyük içerik öğesini tamamen yüklemek için ne kadar sürdüğünü ölçen bir hız metriğidir. Şimdi, JavaScript’in gecikmesi ile iyi LCP’nin ilerlemesini gördük ve web ana bilgisayarımızı geliştirdik – ama başka ne yapabiliriz? Ana sayfamızın LCP öğesi bir görüntüdür. Bu, “Seo Mount” için bir SVG görüntüsüdür. LCP öğeniz bir görüntü ise, işte bizim için başarılı olan bazı şeyler: 1. LCP görüntüsünüz bir PRAMUAD kaynağıdır. Doğrudan görülebilir ve gecikme minimum. WP Rocket, yazı tipleri yüklemek için işlevsellik sağlar, ancak resimler için değil, gördüğüm kadarıyla. Sitemize ücretsiz kod snippet eklentisini zaten yükledim ve bu, ‘link rel = “preload’ ‘özniteliğini kullanarak SEO Mount SEO görüntülerini yüklemek için özel ana sayfa kuralları yapmama izin verdim: Bunun en büyük içerik boya puanlarının artırılması üzerinde önemli bir etkisi vardır, ancak biraz hackleme gibi hisseder ve sitenizdeki her sayfa için deşarj edilemez.2. Kabile SEO ana sayfası için sunucu tarafı sıkıştırma, LCP öğe formatımız iyi olduğundan emin olun, çünkü SVG genellikle vektör tabanlı grafikler için çok küçük bir dosya boyutuna sahiptir.Dosya boyutu 13 kb’dir.Verandamızı GTMetrix üzerinden çalıştırdığımda ve şelale diyagramına baktığımda, SEO Dağı görüntüsünün yüklenen ilk dosya olduğunu görmek istiyorum.Bu, görüntünün önceden yüklemenin düzgün çalıştığını gösterir.
GTMetrix Şelale Diyagramı Ancak, sunucudan indirilen görüntü dosyasının boyutu hala 13 KB’dir, bu da web sunucusunun sıkıştırmadığını gösterir. Bu garip çünkü WP roket sunucusunun sıkıştırma tarafı, sitemizdeki sıradan görüntüler ve metinler için çalışıyor. Cloudways’e bir web ana bilgisayar destek bileti gönderdim, bu da SVG sıkıştırmasının varsayılan olarak sunucularında etkinleştirilmediğini, ancak o zamandan beri benim için etkinleştirdiler. Sonuç, 13 kb dosyasının sadece 3.9 kb’ye düşürülmesidir. Ayrıca sitemizdeki diğer tüm SVG görüntülerini sıkıştırmaya yardımcı olur. Örneğin, SEO hızlı görüntüsümüz sunucu yan sıkıştırma olmadan 205 kb ve onunla 42.7 kb’dir. 3. Yavaş LCP yükleme öğeleri için tembel yüklemeyi devre dışı bırakın, birçok sayfa hız metrikine yardımcı olduğu için WP roketinde varsayılan olarak etkinleştirilmesi iyi bir şeydir. Ancak yavaş yükleme, resimler için en büyük içerik boya puanlarınızı yavaşlatıyor mu? Kesinlikle söyleyemem, ancak bu sorun hakkında bunu önermek için yeterli teori var. Yani, iyi bir boyut için, WP roketine yüklemek için tembel olmayacak şekilde SEO SVG Dağı’nı devre dışı bıraktım. Lazyload özelliği – WP Roket Bir kez daha, sitenizdeki her sayfa için pratik LCP görüntüsünüz için yavaş yüklemeyi devre dışı bırakacağından emin değilim.Belki de bu, gelecekte WP Roket tarafından değerlendirilebilecek bir özelliktir.Öyleyse, LCP görüntü temizimiz, sunucu tarafı sıkıştırmasını sağlıyor ve LCP görüntüleri için yavaş yüklemeyi devre dışı bırakmak en büyük içerik boya puanlarımızı artırmaya yardımcı oluyor mu?Evet doğru!LCP’yi 2.1 saniyeden 1.8 saniyeden artırıyoruz.Test ettikten sonra, en büyük içerik boya puanlarımız üzerinde en büyük etkiyi yaratmak için LCP görüntüümüzü içerdiğimiz ortaya çıktı.Bu, Google sayfası hız hücresel puanlarımızı%100’e kadar itmek için yeterli değildir, ancak eminim ihtiyacımız olana yaklaşıyorum.
Milestone #5: Etkileşimli etkileşimli zaman (TTI) için süreyi artırmak hayati bir web çekirdeği değildir, ancak bu bir bütün olarak Google sayfası hız bilgilerinize katkıda bulunur. Bu, tam olarak etkileşimli olmanın ne kadar süre gerekli olduğunu ölçer. Hayati bir web çekirdeği olan ilk giriş gecikmesi (FID) ile karıştırılmayın. FID ayrıca etkileşimi ölçer, ancak kullanıcının bir sayfa ile ilk etkileşimine odaklanırken, TTI tüm web sayfaları tamamen etkileşimli hale geldiğinde odaklanır. Şimdi, bir deniz feneri değerlendirme hesap makinesi kullanarak küçük bir dedektif çalışması yapıyorum ve%100 cep telefonu hızı puanı alma şansı elde etmek için TTI’mizi 2,5 saniyeden 2 saniyenin altına artırmam gerektiğini söyledi. Ama bunu nasıl yapabilirim? Benim tarafımdan çok fazla deneme yanılma var. Temettü ödeyen temel test, başlıklarımızı ve altbilgilerimizi web sitemizden devre dışı bırakmaktır.
% 100 Hücresel Skor PageSpeed Insights Bu, anlaşılması zor olan% 100 Google sayfası hızlı bir hücresel puan üretir! TTI ayrıca 2.5’ten 1.7 saniyeye yükseldi. Ama sorunlara neden olan bir üstbilgi mi yoksa altbilgi mi? Bir başlık iade ettim ve% 100 puan kaldı. Alt altbilgiyi tekrar gördüğümde, dağlardan oldukça büyük bir SVG görüntüsü var ve ilginç olan Tribe SEO sitesinin tek arka plan görüntüsü. Bu yüzden, altbilgiyi geri koydum ama bir resim olmadan ve sayfa% 100 Google sayfası hızlı bir hücresel puanı koruyor. WP roket destek belgelerini kazdıktan sonra, yavaşça yüklenebilmesi için bir arka plan görüntüsünün belirli bir formatta olması gerektiğini buldum. Ben bir web geliştiricisi değilim ve doğru arka plan görüntü formatını almak için mücadele ediyorum. Yani, hayatı kolaylaştırmak için, sadece standart bir görüntü olarak geri ekliyorum ve hey presto, WP Rocket tembel yükleme büyüsü yapabilir ve% 100 Tribe SEO mobil sayfa puanları korunur. Merak ediyorsanız, bu, yukarıda belirtilen tüm adımları gösteren videodur: WP Rocket Sürüm 3.9 güncellendi Bu blog gönderisini en son yazdığımdan beri, Google Founespeed Insights puanınızı hesaplamak için Lighthouse V7’den V8’e geçti. Google ağırlığı sıkılaştırır, böylece%100 yazdırmak daha zordur. Aslında, önceki puanımı mevcut deniz feneri puanının hesap makinesine manuel olarak eklersem,% 100 sonucum% 99’a düşürülecek. Lighthouse V8 ama korkmayın, tek başına değişiklik yapmadan, sadece WP Rocket V 3.9’a güncelleyin% 100 mükemmel hücresel puanımı geri yükleyin ve yanımda herhangi bir eylem olmadan. Artış oldukça olağanüstü. Aşağıdaki grafikten, LCP’nin% 22 ve TTI artışını% 29 oranında görebilirsiniz. WP Roket V3.8 Vs. v3.9: Olağanüstü performansı iyileştirme Farkı neyin oluşturduğunu tahmin edemem. Yeni özelliği kullanılmayan CSS’yi silmek için etkinleştirsem de, hala aynı puanı alıyorum, bu yüzden perde arkasında olan başka bir mucize olmalı. Oksijen üreticisi, WP Rocket ve Cloudways’in Tribe SEO’nun%100 sayfa hız puanına ulaşmasına nasıl yardımcı olduğu için beni çok minnettarım. Ancak, tamamlamak için, en büyük sayfa hızımla ilgili iki ipucu var: 1) Sunucu tarafı komut dosyasının ve tarayıcı tarafının optimizasyonuna çok dikkat edin. WP Rocket, JavaScript’i optimize etmek için çok iyi bir WordPress önbellek eklentisidir. 2) Meraklı kalın ve hangi ayarların sayfa hız puanlarınızı artırmada en büyük etkiye sahip olduğunu görmek için birçok farklı testle deneyin. Ve tüm web siteleri farklı olduğu için bilmek istiyorum. En büyük sayfa hız ipucunuz nedir? Lütfen bana aşağıdaki yorumlarda söyleyin.
