Bazı WordPress site yöneticileri PageSpeed Insights veya GTmetrix'e kafayı takmış durumda. Benim ve bu konuda çok daha fazla bilgi sahibi olan diğer birçok kişinin tavsiyesi, bu ölçümlere sahip olduklarından daha fazla önem vermemeniz gerektiğidir.
Algılanan yükleme hızı iyiyse, her şeyi "yeşile" koymak gerekli değildir. Çoğu durumda bu ters etki bile yaratabilir çünkü aşırı optimizasyona düşebilirsiniz ya da daha kötüsü, bir şeyi düzeltmeye çalışırken farklı şeyleri mahvedebilirsiniz.
Yine de, ister bir WPO meraklısı, ister optimizasyon meraklısı olun ya da sadece sitenizin yanıt verebilirliğini iyileştirmeye çalışın, bu araçlar neredeyse vazgeçilmezdir. Sorun şu ki, harici sunuculardan alınan "hareketsiz resimler" sunuyorlar. Peki ya siz bir yönetici olarak sitenizde gezinirken, geç yüklenen reklamlar ya da tam tıklamak üzereyken atlayan menü ne olacak?
Köken
Speed Auditor, birkaç basit ama güçlü yerel tanılama aracına sahip olma ihtiyacına bir yanıt olarak doğdu. Bu bir optimizasyon eklentisi değil (kodunuzda hiçbir şeyi değiştirmez), gerçek zamanlı bir denetim eklentisidir.
WPO için değişiklik ve ince ayar yapabileceğiniz iyi, muhtemelen en iyi ücretli eklentiyi arıyorsanız Perfmatters'a bir göz atın. Öte yandan, ayarlar ve ayarlamalarla kafanızı karıştırmadan, ancak birçok olasılıkla ücretsiz ve basit bir şey arıyorsanız, WordPress deposunda bulunan Fernando Tellado'nun WPO Rocket Tweaks 'ini deneyebilirsiniz.
DOM düğümü veya gecikme metriğinin ne olduğunu bilmiyorsanız endişelenmeyin. Speed Auditor, web sitenizi bir bakışta anlamanıza yardımcı olmak için tasarlanmıştır:
- Akıllı gösterge: Yönetici çubuğunuzda renk değiştiren bir simge görünecektir. Yeşil ise, LCP'niz (en önemli şeyleri görmek için gereken süre) idealdir. Turuncu veya Kırmızıya dönerse, bir şeylerin dikkatinizi çekmesi gerekir.
- Siz gezinirken denetleyin: Karmaşık bir şey yapılandırmanız gerekmez. Eklentiyi etkinleştirirsiniz ve siz yazılarınızı kontrol ederken o arka planda çalışarak resimlerinizin çok ağır olup olmadığını veya sunucunuzun yavaş yanıt verip vermediğini analiz eder.
- Daha fazla insan raporu: Tek bir tıklamayla, geliştiricinize gönderebileceğiniz veya değişiklikleri uyguladıktan sonra sonuçları karşılaştırmak için kaydedebileceğiniz bir .txt dosyası indirin.
Kaputun altında
Sürüm 1.1.8, tarayıcı konsolunda uğraşma süresinden tasarruf etmek için bazı tanılama derinlikleri sağlamaya çalışır.
- Hassas LCP tanımlama: Eklenti tam olarak hangi öğenin (resim veya metin bloğu) En Büyük İçerik Boyamasını tetiklediğini tespit eder.
- DOM derinlik analizi: "Aşırı DOM boyutu "ndan kaçınmak için çok önemlidir. Speed Auditor, düğüm sayısını bölgelere (Üstbilgi, İçerik, Altbilgi) göre ayırır ve iç içe geçme 15-20 seviyeyi aşarsa sizi uyarır.
- Medya Gecikme Monitörü: Görüntülerin gerçek aktarım süresini (Kaynak Zamanlama API'si) ölçer. Bir görüntünün indirilmesi 500 ms sürerse, eklenti bunu kritik olarak işaretler.
- Sunucu üzerinde sıfır etki: Tüm işlemler istemci (tarayıcı) tarafında gerçekleşir. Siteyi yavaşlatan ağır veritabanı sorguları veya PHP işlemleri yoktur.
Büyük sıçrama. Çok yakında: Hız Denetçisi 1.1.9 ("Radar CLS" ile)
Şimdiye kadar, Kümülatif Yerleşim Kayması (CLS) bir rapordaki soyut bir rakamdı. Bir şeyin hareket ettiğini biliyordunuz, ancak ne olduğunu her zaman bilmiyordunuz. Çok yakında, 1.1.9 sürümünde bu durum değişecek.
Radar veya Görsel CLS "Vurgulayıcı" düğmesi tanıtılacaktır.
Kaydırma sırasında hareket eden herhangi bir öğenin üzerine kırmızı kutular çizen bir "radar" modunu etkinleştirdiğinizi düşünün. Bazı uzantıların az ya da çok başarıyla zaten yaptığı bu, bazen gözden kaçan "taşmaları" yakalamaya çalışmak için her zaman çok yararlı bir görsel yardımdır.
- İçeriğinizi öne çıkaran bir AdSense banner'ı mı? Kırmızı bir kutu ile göreceksiniz. Bu sorunu burada daha derinlemesine inceleyebilirsiniz.
- Tanımlanmış boyutları olmayan bir görüntü mü? Radar onu yakalayacaktır.
- Tam kalıcılık: Radar açıkken web sitenizin tamamına göz atabileceksiniz; eklenti her köşeyi görsel olarak denetlemeye devam etmek istediğinizi hatırlayacaktır.
Bu güncelleme aynı zamanda WordPress kontrol panelinize entegre edilecek ipuçları ve öğreticileri içerecek şekilde genişletilecek kısa bir teknik sözlük de içerecek, böylece ins, iframe veya figure gibi terimler artık bir gizem olmaktan çıkacak.
Buradaki fikir, farklı senaryolarda test ettikçe ve herhangi bir iyileştirme önerisi veya hata uyarısı aldıkça hem analizin yanıtını hem de oluşturulan raporları iyileştirmektir.
Metriklerinizi düzenlemek için 1.1.8 sürümü artık kullanılabilir durumda ve yakında 1.1.9 WordPress'in görsel kararlılığını düzeltmeyi daha da kolaylaştıracak. Şimdi yüklerseniz, kısa süre içinde güncellemeyi alacaksınız.
Nasıl çalışıyor?
Kod bu üç adımı takip eder:
1. PerformansGözlemcisi
Tarayıcı (Chrome, Edge, Opera) Performance API adında yerel bir API'ye sahiptir. Eklenti, özellikle düzen kaydırma giriş türü için yapılandırılmış PerformanceObserver adlı bir "izleyici" kaydeder.
Bir şey ilk boyandıktan sonra ekranda her hareket ettiğinde, tarayıcı bir olay oluşturur. Eklenti bu olayı yakalar ve iki önemli veri parçasını çıkarır:
- Ofsetin değeri: (Bu sayı 0,0145'tir ).
- Suçlu öğe: Tarayıcı, eklentiye tam olarak hangi HTML düğümünün taşındığını söyler.
2. "Son Etkileşim" filtresi
Eklentinin zekice davranmaya çalıştığı yer burasıdır. Tüm hareketler "kötü" değildir. Bir açılır menüye tıklarsanız ve içerik aşağı kaydırılırsa, bu kullanıcı tarafından beklenen bir harekettir.
Eklenti hadRecentInput adlı bir özelliği kontrol eder. Son 500 ms içinde bir tuşa dokunduysanız veya tıkladıysanız, tarayıcı bu hareketi "beklenen" olarak işaretler ve eklenti yanlış pozitifleri önlemek için bunu yok sayar. Yalnızca beklenmedik şekilde ortaya çıkan hareketleri algılar (aniden beliren bir reklam gibi).
3. Görsel işleme (Kırmızı kutular)
Eklenti taşınan öğeye sahip olduğunda, görsel kısım devreye girer:
- Koordinat hesaplama: getBoundingClientRect() adlı bir işlev kullanarak söz konusu öğenin o anda ekranda nerede olduğunu (piksel yukarı, piksel sol) bulur.
- Çerçeve enjeksiyonu: Her şeyin üstüne çizmek için mutlak konuma, 2px kırmızı kenarlığa ve çok yüksek bir
z-indeksinesahip birdivoluşturun. - Etiket: Kırmızı kutunun sol üst köşesine etiketin adını (ins, img, div) ve birikmiş CLS değerini içeren küçük bir kutu ekleyin.
Bu neden harici bir rapordan daha iyidir?
PageSpeed gibi araçlar bazen CLS'yi tespit edemezler çünkü aşağıya doğru kaydırma yapmazlar veya belirli reklamların yüklenmesini beklemezler.
Eklenti, kalıcılığı kullanarak, gerçek kullanıcının tarama oturumu boyunca biriken CLS'yi ölçer. Bir öğe başlangıçta biraz ve kaydırma sırasında biraz hareket ederse, eklenti bunu toplar ve vurgular, böylece Google'ın"Chrome Kullanıcı Deneyimi" (CrUX) raporunda göreceği en yaklaşık gerçek rakamı verir.
