WordPress Core Web için SSS Hayati Performans Stratejisi

Google’ın yeni web performans metriği son zamanlarda herkesin zihninde. Bu yılın başlarında, bu ana konuyu web semineri sırasında tartıştık – temel web verilerini optimize ettik. Oturumdan bu yana, çekirdek web hayati gereği hakkında birçok önemli soruyu cevapladık – aşağıdaki SSS’yi okuyun. Ayrıca AMA’yı Google, XWP ve WordPress VIP’den web performans uzmanlarıyla doğrudan Twitter alanlarında tutuyoruz. Kayıtları buradan dinleyin: Önemli Sorular Çekirdek Web sık sık sorulur
Çekirdek Web Verileri Metriği Gelecekte Değişecek mi? Google, her yıl temel web canlılarını güncellemeyi planladığını söyledi. Frekans, kullanıcı deneyiminin en son ve en iyisini takip etmek ve web sitelerine ve işletme sahiplerine planlamak için yeterli alan vermek arasında iyi bir denge sağlar.
Sitemizin saha verilerinde iyi bir puanı var, ancak laboratuvar verilerimiz etkileyici değil. Endişelenmeli miyiz? Alan verileri veya gerçek kullanıcı metrik verileri (ROM), site sahipleri için daha anlayışlı ve değerli verilerdir. Bu, kullanıcıların sitenizi gerçekten nasıl deneyimlediğini söyler. Bu, kullanıcılarınızın çoğunun, kullanıcıların sitenize ne zaman erişmesi, hafta sonunu ziyaret etse de ve daha fazlasından etkilenebilir. Site sahipleri genellikle test ortamlarında dikkate almadıkları faktörlerden şok olurlar. Sitenizi nasıl oluşturduğunuz, gerçek kullanıcılar tarafından gerçekten nasıl deneyimlendiğine göre belirlenmelidir.
İlk baytın (TTFB) zamanının önemli olduğunu biliyorum. Kabul edilen eşik nedir? İlk bayt için zaman nasıl artırılır? TTFB, tüm metriklerin ilk ve en temeldir. TTFB’niz yavaşsa, temel web verileri de dahil olmak üzere diğer metrikleri artırarak telafi etmeniz gerekir. Artan TTFB platform veya ana bilgisayar düzeyinde gerçekleştirilir. İçeriği kullanıcınıza mümkün olduğunca yakın sunmak en iyisidir – ve yalnızca bunu yapabilecek küresel bir veri merkezi ağına sahip ana bilgisayarlar. Ayrıca, performansı dikkate alarak kesinlikle güvenilir bir WordPress uygulamasına sahip olmak istiyorsunuz. Örneğin, sayfayı ve nesne önbelleğini kullanmak, karmaşık istekleri hızlı hissettirebilir. Dünyanın genelinde iyi bir performansa sahip olmak önemlidir, çünkü temel web veri metriği sitenizin sahip olduğu gerçek kullanıcı için ölçülür. Dünyanın her yerinden ziyaretçileriniz varsa, tüm dünyada ölçülürsünüz; Bu, birkaç merkezi performans testi konumunda değildir. Google sayfası hız bilgilerindeki alan verilerinde bu verilere ve Google arama konsolundaki temel web verilerine bakın. Google’ın TTFB için son önerileri: • İyi: 1500ms
Web sitesi ölçeklendirme nasıl çalışıyoruz?CWV puanını yüksek tutmak için trafik arttığında web sitesi kaynakları otomatik olarak artırılabilir mi?Gerçek kullanıcı metrikleri (ROM) temel web verilerinin performansı için önemli olduğundan, web siteniz trafik artışını yerine getirmezse, muhtemelen puanınızda bir azalma göreceksiniz.Bu nedenle, tüm site ziyaretçilerine tutarlı bir şekilde iyi bir deneyim sunmak önemlidir.En iyi trafik gününüzde bile iyi performans göstermesi için otomatik ölçeklendirme yapan bir web sitesi platformu arayın.
En büyük içerik boya skorum (LCP) çok yüksek. Nasıl artırılır? İlk olarak, sitenizde bir LCP olarak kabul edilen şeyleri belirleyin. Bu, kahramanların, kayma, büyük metin, video veya animasyonun bir resmi olabilir. Garip bir şekilde, suçlu beklenmedik bir şey olabilir – çerezlerin veya reklamların bildirilmesinin görünümü. LCP teslimatını artırmak için doğru öğeleri yaptığınızdan emin olun. LCP’niz bir kahraman resmiyse, ipuçları: • Üçüncü bir taraf veya doğuştan gelen tarayıcı tarafından yayınlanmadığından emin olun (istekli bir yükleme kullanmak yerine). • Pramuian’ı oraya uygulayın – daha önce tarayıcı tarafından bulunacak şekilde. • Meta Viewport bildiriminin önünde olduğundan emin olun. Piksel yoğunluğu, cihazın maksimum genişliğine karşı maksimum genişlik nedeniyle, yanlış CSS kahraman görüntüsü sayfadaki ilk olarak tanımlanmayabilir. • 200KB’nin altında kaydedin – uygun boyutları ve yeni nesil formatını kullanın. • Kritik yolun diğer unsurlarını araştırın. Kahramanın imajıyla rekabet ederek bant genişliğini paylaştılar. Çoğu zaman, üst yarı yaşam için bant genişliğini boşaltmak için ne alabileceğinizi görmek mantıklıdır. Örneğin, büyük CSS dosyaları ikiye bölünebilir veya yazı tipleri kritik yoldan kaldırılabilir. LCP ölçümleri için Web Yöneticisi, Google’ın onu belirlemesine izin vermek yerine sayfadaki “en önemli içeriği” belirleyebilir mi? LCP, en büyük eleman ekranda görüntülendiğinde temeldir, bu nedenle neredeyse hepsi boyuta bağlıdır. Son zamanlarda, vücudun unsurlarının bir arka planı olarak belirlenen tüm geniş görüntüyü göz ardı ederek tahmini çıkarları dikkate almaya başladı.
Sitemizi gözden geçiriyoruz ve yazı tipinin gecikmelere katkıda bulunduğu görülüyor, ancak markamız bu estetiği gerektiriyor. Reklam materyallerinin ihtiyaçlarını sayfa hızı performansı ile nasıl dengeliyorsunuz? Performans bir zihniyettir: bunu sadece küçük bir kararı birbiriyle dengelediğiniz bir proje değil, uzun vadeli bir hedef olarak ele almalısınız. Kötü sayfa performansına başka neler katkıda bulunabileceğinin tam resmini anlamalısınız. Katkıda bulunan tüm faktörleri belirleyemiyorsanız, reklam materyali ihtiyaçları için performansı nereden feda etmeniz gerektiğine dair verilere dayanarak kararlar veremezsiniz. Yazı tipleri için sorun yok – Google’ın yazı tipleri için en iyi uygulamasından başlayarak. Diğer birçok yükleme stratejisine de başvurabilirsiniz. Başlamak için bazı teknikler: • Basit bir soru ile başlayın: Onu kullanıyor muyuz? Hiçbir yerde kullanılmayan yazı tiplerini yüklemediğinizden emin olun. Bu aynı zamanda görüntüler, videolar, stil sayfaları, komut dosyaları için de geçerlidir – kullanmadığınız her şeyi çözmek. • Hangi yazı tiplerinin kritik yükleme yolunun bir parçası olduğunu öğrenin – mümkün olduğunca erken (erken kullanın) ve diğer yüklemeyi erteleyin. • Tüm yazı tiplerini yerel olarak barındırmayı hedefleyin (örneğin kendi etki alanınızdan). • Yazı tipi ekranını kullandığınızdan emin olun: takas;
Özel/üçüncü taraf yazı tipi yüklenmeden önce yerel sistem yazı tipini yüklemek için özellik, uzun mesafeli yazı tipi yüklendiğinde metnin görünür kalması için yüklenir. Özel yazı tipiniz olarak Karting, Alan ve diğer öğelere yaklaşan bir sistem yazı tipi almak için yazı tipi tarzı-Matcher gibi araçları kullanmanızı öneririz. Ayrıca, yazı tipinizi yüklerken kaldıraç vaadine yardımcı olmak için FontfaceObserver.js kullanabilirsiniz. • Simge yazı tipleri duruma bağlıdır: Blokları yazı tipi ekran değerleri olarak kullanın, yalnızca kullanılan simgeleri yüklemek için alt yazı tipleri yapın, hatta SVG olarak “çevrimiçi” kümülatif düzen kaymaları (CLS) için metrikler 0.10 ila 0, 25 arasındadır. Bu sayılarla temsil edilen nedir? Kümülatif düzen kayması, bahçe ömrü boyunca meydana gelen tüm beklenmedik düzen değişikliklerinin en fazla patlamasını ölçer. Görüntüler, reklamlar, yazı tipleri, semanan vb. Yüklendiğinde sayfanızın düzenini ayarlayabilir. Geliştiriciler, editoryal içeriğin bir parçası olmayan alanlara genişlik ve yükseklik eklemesini kaçırmadıklarından emin olmalıdır. CLS metriği güncellendi. Şimdi, en büyük değişimi artırdığınızda, metrik puan bir sonraki en büyük patlama değerine geçiyor. Bu bir öncekine çok benzeyebilir, bu nedenle tüm büyük sıçramaları düzeltene kadar puanlarda önemli bir artış görmeyeceksiniz.
Sitem neden Google Arama Konsolu (GSC) ve Deniz Feneri’nde iyi sonuçlar aldı? İyi bir deniz feneri puanı genellikle hedefinize ulaşmanız anlamına gelir – belirli koşullarla laboratuvar izleme açısından, bu puan belirli bir puana ulaşır. Ancak, belirttiğimiz gibi, laboratuvar testleri sırasında ölçülemeyen birkaç husus vardır. Örnekler, kullanıcı etkileşimi sırasında FID ve CLS’dir. Buna ek olarak, ağ gecikmesi, cihaz donanımı ve yüklemedeki karmaşıklık gibi diğer faktörler, gerçek kullanıcınızın optimal sitenizden daha yavaş olabileceği anlamına gelir. Hata ayıklama verilerini analitik olarak göndermenize yardımcı olacak ve daha sonra hayati web raporunda görülebilen bir yangın var. Bu, GSC ve Deniz Feneri arasındaki farka neden olan sorunlara neden olan sorunları bulmanıza yardımcı olacaktır. Google, GSC’de ve PagePeed Insights’ta (PSI) Chrome Kullanıcı Deneyimi Rapor Verilerini (Crux) kullanır. Tüm kullanıcılarınızın 75. yüzdesi için “iyi” bir puan almayı hedeflemelisiniz. Varyasyonlar göz önüne alındığında, kullanıcılarınızın laboratuvar durumundan daha yavaş (veya daha hızlı) yaşayabileceği koşullar vardır – ve uyguladıktan sonra etkileme çabalarınızı sağlamak için gerçek kullanıcı metrik verilerini (ROM) kullanmanız gerekir.
WordPress neden artık JQuery’nin eski sürümünü kullanmıyor? Bu, IE11’den de geçiş yapan temel web canlılarına uygun mu? Youumightnotneedjquery.com ne olacak? JQuery, Web’e gelişmiş özellikler sunmada çok önemlidir. Bununla birlikte, bu, LCP, TTI ve FID üzerinde genellikle büyük bir performans etkisi olan büyük bir kütüphanedir (yüklendiğinde ve sayfada başka neler olduğuna bağlı olarak.) Web ve WordPress ekosisteminde kullanımını azaltmak için devam eden bir çaba vardır. yeni temaların bağımlılık olarak kullanmaması ve genellikle JetPack gibi kullanılan WordPress eklentilerinden silin. Sürümün yapmak bu bağlamda çok endişe duymaz, ancak – performans açısından, ana sorun, ortaya çıkan belirli bir versiyonda değil, kritik yolda jQuery içermektir. Tüm CWV’lerimiz iyi görünür. Ancak performans eklentisini kullandıktan sonra, ilk giriş gecikmemiz (FID) hala yüksektir. Bunu nasıl artırabiliriz? Kontrol ettiğiniz şeyi geliştirin. Bu, verilen cezaya karşı elde edilen değer için üçüncü taraf eklentilerinin değerlendirilmesini içerebilir. Chrome Devtools’daki performans profili arkadaşınızdır. Yüklenmesini düşük CPU kullanım süresine erteleyerek yoğun üçüncü taraf komut dosyalarının etkisini en aza indirin. CPU, 15 farklı görev yaparak bunalmazsa, eklentilerin web sitesinin etkileşimi üzerindeki etkisi en aza indirilebilir.

Google Manager Tag (GTM) ve diğer üçüncü taraf komut dosyaları deniz feneri raporlarımızı engeller. Puanımızı nasıl artırabilir ve GTM’yi koruyabiliriz? Analytics komut dosyaları genellikle web sitesi sayfalarının hızını önemli ölçüde etkilemez, ancak yine de optimize ederek kullanabilirsiniz. Temel olarak, gerektiğinde daha önce değil, ekleyin. Bu deseni izleyin: 1. GTM komut dosyasını başlangıçta değil, HTML’nizin sonuna yerleştirin. 2. HTML işlendikten sonra indirin ve ayrıştırma (gecikmeli komut dosyaları). 3. Belge Nesne Modeli (DOM) yüklendikten sonra 1-3 saniye içinde çalıştırın. Bu şekilde, GTM veya diğer analitik komut dosyaları engellenmeyecek ve yine de gerekli verileri toplayabilirsiniz. Hala önemli bir performans başarısı elde ederseniz, GTM’nin dışında kazın – belki bir etiket yöneticisinin hatası değil, kullanmanın bir yoludur. Bu konuşmada iyi bir strateji var: üçüncü tarafların birçoğu derinlemesine performansı. Örneğin, GTM’den önemli bir senaryo yayınlayabilir ve şelalenin sonuna kadar yüklemeyi erteleyebilirsiniz. Reklamlar aracılığıyla para kazanan web siteleri için ne gibi önerileriniz var? Reklam yöneticisi ve genel olarak reklam (özellikle programlanmış), TTI ve TBT’yi büyük ölçüde etkileyebilir. Kullanıcı etkileşimlerine göndermek için reklamların yüklenmesini ertelemeli miyiz? Fırsatları kaybetmeden performansı nasıl geliştiririz?
Bu seçim, site hızını ve gelirini dengelemek kadar zor görünebilir, ancak durum böyle olmamalıdır. Buradaki amaç, reklamı bir rahatsızlık olarak değil, kullanıcı deneyiminin bir parçası haline getirmenin yaratıcı yollarını bulmaktır. O zaman gelir ve performans arasında seçim yapmak zorunda değilsiniz. Aşağıdakiler öneriler: • Beklenen içerik her zaman öncelik almalıdır. • Reklam (ve görünüm) bölümünün organik göründüğünden emin olun. • Reklamın aniden sayfanın ortasında görünmediğinden ve düzende değişikliklere neden olmadığından ve kullanıcı etkileşimine müdahale etmediğinden emin olun. JavaScript kullanarak daha önce onlar için boşluk tahsis edin ve ambalaja minimum yüksekliği düzenler. • Aynı anda çok fazla şey yüklemeyin. Ana UTA’lar çok fazla çalışır ve düşük ödenir ve daha küçük bir parçada servis edilirse daha hızlı çalışabilir. İki yaklaşım öneriyoruz: tarayıcıda yerleşik olan RequestIdleCallback yönteminin yaratıcı kullanımı ve DOM’un daha fazla öğe yüklemeden önce yüklemeyi tamamlamasını bekleyin. • Kullanıcılar mantıklı olmayan sayfalarla etkileşime girdikten sonra reklam yükleme – dahil oldukları için cezalandırılmış gibi görünüyor, bu iyi bir kullanıcı deneyimi değil. Sunulan içerik, tek iş parçacıklı olan tarayıcının gerçekliğine saygı duyduktan sonra reklamlar içerir. Bir çözüm bulmak yerine, kullanıcıların her zaman metrik yanıt gelişse bile uzun vadede hayatta kalmasını sağlayacağını düşünen sağlam bir strateji uygulamak.
Sitemizde yeni özellikler yayınladığımızda değişiklikleri ölçmek istiyoruz. GitHub Eylemleri gibi CI/CD sisteminin bir parçası olarak bu metriği girmek için bir yol veya mekanizma var mı? Çekirdek web verileri, örneğin CI/CD sisteminde laboratuvar testi için uygun değildir. Laboratuvar ayarlarının gerçek kullanıcıların karşılaştığı koşulları yeniden üretmesi zordur ve bu metrik çok durumsaldır. Bu, bu durumda deniz feneri kullanabileceğinizi kullanmalısınız. Github eylemleriyle entegre olmak için, yapılmış ve kullanıma hazır birkaç popüler mekanizma vardır. Onları aksiyon pazarında bulun. Web performansında uzman olmayan yazarlarımız var. “Burada 100 KB JPG yerine 2 MB PNG yüklemek istediğinizden emin misiniz?” Bir kontrol listesine sahip olmak bir yaklaşımdır. Başka bir yaklaşım da bunu otomatik hale getirmektir. Bazı WordPress özel platformları, ortamı yükleme hızı için otomatik olarak optimize eden uyarlanabilir medya özellikleri oluşturarak bu KG görevini yayınlama iş akışından kaldırır.
CWV hakkında daha fazla bilgiyi web seminerimizde, hayati temel web siteleri için optimize edin.