JS yürütmeyi erteleme ve tıklamadan önce sayfayı yükleme: WP Rocket 3.7’ye hoş geldiniz
Temmuz ve Ağustos aylarında ürün geliştirmeye adanmış yedinci yıldönümü kutlamalarımızdan sonra Eylül ayında Festival: Welcome WP Rocket 3.7! Bu yeni ana sürümdeki değişiklik iyileştirme açısından zengindir ve kaçırmamalısınız. Bu makalede, 3.7’nin iki Kraliçe özelliğine odaklanacağız: JS ve Pramuar Link yürütme ertelenmesi. Onlar hakkında daha fazla bilgi sahibi olmak merak ediyor musunuz? Sadece okumaya devam etmelisin! WP Rocket 3.7’de Yenilikler Bu yeni ana sürümü zenginleştiren birçok özellik var. Kullanıcı deneyimi üzerinde daha hafif bir etkisi olacak değişim günlüğümüzde bulmak için merakınızı bırakıyoruz.
Web siteniz tarafından pagespeed puanınızda, yükleme sürenizde ve hızınızda büyük bir artış sağlayacak iki özelliğe odaklanmak istiyoruz:
JavaScript yürütmede gecikmeler
Pramuian bağlantısı
Ayrıca, kullanıcı arayüzümüzü her zaman mümkün olduğunca temiz ve net tutmak istediğimiz için, arka uç WP roketinden birkaç seçeneği sildik: Bu değişikliği bu makalede belirteceğiz. Bu sürümde yeni olanlarla ilgili önizleme videolarını görmeyi tercih ediyorsanız, sunum videomuz:
V3.7’yi ayrıntılı olarak bulmak için okumaya devam edin! JavaScript Yürütülmesini Gecikme Tembel yükleme konseptine aşina mısınız? Görüntü yönetimi ve optimizasyonu açısından duymuş olabilirsiniz. Görüntüler için yavaş yükleme, WP Rocket’e eklediğimiz ilk özelliklerden biridir ve şimdi WordPress’in en son sürümü, 5.5 “Eckstine” varsayılan olarak tanıttı.
Yavaş yüklemenin arkasındaki ilke, dosyaları yalnızca sayfaları ziyaret eden kullanıcıların bunlara ihtiyaç duyduğunda yüklemektir. WP Rocket 3.7 ile aynı prensibi JavaScript dosyasına uyguluyoruz. Tüm komut dosyaları, başlangıç için uygun değildir ve postponers yükleme süresini artırabilir. Örneğin, niyetin açılır penceresini yöneten komut dosyasını düşünün: ilk sayfanın yüklenmesi sırasında komut dosyası ilgisizdir, çünkü yalnızca kullanıcı sayfayı terk edeceği zaman tetiklenecektir. JS’den çıkma niyetinin görünümü Rocket WP web sitesi web sitesi ertelenebilir. Sonuç olarak, JavaScript yürütme süresini azaltacaksınız. Büyük bir performans avantajı elde edebilirsiniz.
Daha önce WP roket ayarlarında doldurulmuş olan komut dosyası alanı, ertelenecek dosyayı tanımlayan anahtar kelimeleri belirler ve Rocket WP anahtar kelimeyi arar. Eklentimiz, sadece URL değil, sayfada bulunan tüm komut dosyalarını analiz edecektir. Bu, komut dosyası etiketine veri özniteliklerini veya diğer öznitelikleri hedefleyen anahtar kelimeler ekleyebileceğiniz anlamına gelir; Satırdaki JavaScript için, kodun kendisinde herhangi bir anahtar kelimeyi kullanabilirsiniz. Dikkat etmeniz gereken tek şey benzersiz anahtar kelimelerin seçilmesidir, böylece WP roket komut dosyasının tanımlanmasıyla karıştırılmamıştır. WP Rocket, ertelenmesi güvenli olan bazılarını belirlerken bu metin alanını birkaç komut dosyası ile doldurur. Örneğin, bu, web sitemizde ertelediğimiz üçüncü taraf komut dosyalarının bir listesidir: – Google Analytics – Facebook Pixel – Pixel LinkedIn – Twitter Pixel – Optinmonster – OLARKIKA CHAT. ? Belgelerimizle bu yeni özellik hakkında daha fazla bilgi edinin. Bu seçenekle ne başarabilirsiniz? Tüm web siteleri için geçerli olan sayıyı tahmin edemesek de (bunun hız testi açısından ne kadar zor olduğunu biliyorsunuz!), WP Rocket web sitesinde elde ettiğimiz sonuçları size gösterebiliriz. JS yürütme seçeneğinin gecikmesini etkinleştirmeden önce, Rocket WP web sitesinin hızını GTMetrix ile test ettik:
JS’nin yürütülmesini geciktirmeden önce GTMetrix Hız Testi birkaç sayfa test testi yaptık. Sitemizin masaüstü sürümünün puanı çok iyi olsa da (97), hücresel sürüm için oldukça düşük bir puandan başladık:
JS’nin yürütülmesini geciktirmeden önce WP roket hücresel siteleri için sayfa skorları, JS yürütme gecikmesi seçeneğini etkinleştirdiğimizde ne olacağını görmeye hazır? ? Roket WP JS yürütmesini ertelemeye başladıktan hemen sonra, GTMetrix raporu yeşil bir alana dönüştü. JS yürütmesini geciktirdikten sonra GTMetrix Hız Testi PagePeed Puanına ne dersiniz? Kendine bir bak. JS yürütme süresini geciktirdikten sonra WP roket hücresel siteleri için sayfa skorları bu tablodaki sonuçları özetledik ve bir bakışta değerlendirmeyi kolaylaştırdık:
>
>
Gördüğünüz gibi,% 65’lik bir azalma elde ederiz (2.6 saniyeden 0,9 saniye) ve hücresel sayfa skorlarında% 87’lik bir artış! Her gün Google ve arama motorlarının gözünde hücresel hızın giderek daha önemli olduğu düşünüldüğünde, bu sonuçtan çok memnunuz?
Pramuep Bağlantı Sitenizin performansını optimize etmenin ve objektif olarak daha hızlı yüklemenin birçok yolu vardır; WP Roketinde büyük bir rol oynadı. Peki psikolojik olarak daha hızlı yüklenecek şekilde sitenizi optimize etmeye ne dersiniz? Algılanan performans, kullanıcının web sitenizi ne kadar hızlı düşündüğünün bir ölçüsüdür, hız hız testinin ne kadar hızlı söylediği gerekmez. Amaç, web sitenizi geliştirmektir, böylece objektif yükleme süresinden daha hızlı hisseder. Algılanan performansı artırmak için Pramuar bağlantı seçeneğini geliştirdik. O nasıl çalışır? Teknik bir bağlantı içeren ön çekim bağlantısı denir. Bunun anlamı ne? MDN Web Dokümanlarında iyi bir tanım bulunur: Link PrefetingChing, yakın gelecekte kullanıcılar tarafından ziyaret edilebilecek belgeleri indirmek veya almak için boş tarayıcı zamanını kullanan bir tarayıcı mekanizmasıdır. Bir web sayfası, tarayıcıya bir dizi önceden yazma talimatı sağlar ve tarayıcı sayfayı yüklemeyi bitirdikten sonra, belirli belgeleri gizlice almaya ve önbelleğe saklamaya başlar. Kullanıcı daha önce alınan belgelerden birini ziyaret ettiğinde, belge önbellek tarayıcısından hızlı bir şekilde sunulabilir. Nasıl çalışılır ön planlama – WP Rocket 3.7 kaynağı, bir sonraki kullanıcı dinavigasyonunun hangi sayfaları öngörmek için ilk ön getirme stratejisini kullanacaktır. Sonuç olarak, kullanıcılar URL tarafından bağlantılı sayfayı doğrudan yükleme olarak görecektir. Bu, şimdi geleceği tahmin edebileceğimiz anlamına mı geliyor? Hemen hemen. ? WP Rocket, sayfada meydana gelen eylemin mükemmel bir gözlemcisi haline geldi: kullanıcı fareyi bağlantıya yönlendirdiğinde veya kaydırma, yuvarlama veya büyütülürken bağlantıya dokunduğunda hissediyor. Kullanıcıların URL ile ilgilendiklerini tespit ettiğimizde, sayfayı otomatik olarak yükleriz.Ön yük sekmesinde, önceden yükleme bağlantılarına adanmış yeni bir bölüm bulacaksınız. Bu, seçeneği etkinleştirmek/devre dışı bırakmak için bir onay kutusudur:
WP Rocket’teki Pramuar Bağlantı Seçeneği Beklenmedik sonuçları önlemek için, WP Rocket 3.7 tarafından hariç tutulan URL türlerinin listesini de bu davranıştan otomatik olarak düşünüyoruz: Tüm WP-Admin URL’leri veya Giriş/Oturum Açma Sayfaları
URL, WP roket yapılandırmanıza göre önbellekten hariç tutuldu
Görüntü dosyasına bağlantıBağlantılar bir sorgu veya çapa dizesi içerir Harici url
En önemli: Şimdi, bu özellik yalnızca Chrome’da işlev görür. Safari, Opera, IE ve Edge şu anda bağlantı koleksiyonunu desteklemiyor. Firefox, bağlantılar için bir ön plan isteği yapar; Bununla birlikte, Firefox’ta, FF önbelleğinden sunulmayacak şekilde prefetingch sayfasını engelleyen bir hata var. Belgelerimizle bu yeni özellik hakkında daha fazla bilgi edinin. Geçtiğimiz birkaç ay içinde hayati web çekirdeğini artırarak, Google’ın temel web verilerinin evrimini dikkatlice takip ettik ve WP Rocket’in bu yeni standardı karşıladığından emin olmak için çalıştık. Sürüm 3.7, çekirdek web canlılarının artırılmasında iyi ilerleme kaydetmiştir. ? Örneğin, yazı tipleri içeren CSS dosyasına otomatik olarak yazı tipleri: takas ekleriz. Bu özelliği yazı tipine ekleyerek, tarayıcıya özel yazı tipi indirilirken sistem yazı tipini kullanmasını söyleriz. Özel yazı tipi indirme tamamlandıktan sonra, sistem yazı tipi özel bir yazı tipi ile değiştirilir. Bu, kullanıcınızın yazı tipinin indirilmesini beklemeden web siteleriyle daha hızlı etkileşime girebileceği anlamına gelir. Aynı zamanda, bu artış en büyük render ve boya süresini (LCP) arttırır. Ayrıca kullanıcının deneyimini geliştirir, çünkü “görünmez metin” i önler, metin yazı tipi yüklemesi sırasında görünmezdir. Öte yandan, önceki paragrafta az önce açıkladığımız yeni bağlantı özelliği, ilk içerikli boya ve etkileşimli zaman gibi metrikleri artıracaktır;
Ayrıca genellikle bir sonraki navigasyonun anında yüklendiğini görür.Ve bu sadece başlangıç!Bundan sonra ne olacağına bir bakış??WP Rocket’in bir sonraki sürümü için, kullanılmayan CSS’yi kaldırma veya yükleme ve webfont oluşturma optimize etmek için asenkron yazı tiplerini yükleme gibi bazı iyi haberler üzerinde çalışıyoruz.?Cleaner kullanıcı arayüzü: Seçenek, kullanıcı arayüzünden silinir «bir seçenek değil», burada WP Rocket’te geliştirme felsefemizi en başından itibaren yönlendiren slogan.Hazırlığı tamamlamadan önce yapılması gereken düzinelerce seçenek ve seçenekten bunalmış hissettiğimiz eklentileri kullanan kişilerin istemiyoruz.Bu felsefeyi takiben, yıllarca her zaman temel ve gelişmiş seçenekler ile temiz kullanıcı arayüzleri arasında bir denge kurmaya çalıştık.WP Rocket 3.7 ile bu iki özelliğe odaklanma ve odaklanma fırsatını değerlendiriyoruz: Google yazı tipini optimize edin
Sol html
Google yazı tipini optimize et Bundan sonra, Google yazı tipi özelliği WP roketinde varsayılan olarak etkinleştirilir. Verilerimize dayanarak, müşterilerimizin yaklaşık% 94’ü bu seçeneği etkinleştirmeye devam etmektedir. Bu seçeneği etkinleştirmeyen diğer kullanıcılar Google yazı tipini sitelerinde kullanmayabilir veya bir nedenden dolayı gönüllü olarak devre dışı bırakabilir. Uyumsuzluk çünkü bu özellik nadirdir ve bir elin parmaklarıyla birlikte aldığımız destek biletini sayabiliriz. Bu faktörler, bu seçeneği kullanıcı arayüzünden silmemize ve arka planda otomatik olarak etkinleştirmeye devam etmemize yardımcı olur. ? Daha önce seçeneği etkinleştirmediyseniz, V3.7’ye güncellendikten sonra etkinleştirmezsiniz. Etkinleştirmek için Araç sekmesini ziyaret edebilir ve “Optimize edilmiş Google Yazı Tipi” düğmesini kullanabilirsiniz: Google Yazı Tipi Optimizasyonu Nasıl Etkinleştirilir HTML Bu özelliği WP Rocket’ten hiç silmeye karar verdik, çünkü şimdi modası geçmiş. GTMetrix nihayet HTML’yi azaltmak için önerilerini durdurdu, çünkü genel performans üzerindeki etki artık anlamlı değildi. PagePeed Insight ve Pingdom Tools gibi performans araçları bu öneriyi bir süredir görmezden geldi, bu nedenle Minify HTML seçeneğinin artık gerekli olmadığından eminiz. Bu değişikliği takiben, Dosya Optimizasyonu sekmesindeki temel ayar alanını sileceğiz:
