WP Rocket 3.11 – Yepyeni Bir Kaldır Kullanılmayan CSS'yi Başlatma

Yayınlanan: 2022-04-26

WP Rocket'te, ürünümüzü sürekli olarak daha güçlü ve daha basit hale getirmeye kararlıyız. Rocketeer'larımıza performans ve basitlik için şimdiye kadarki en iyi eklentiyi sunmak istiyoruz - ve onu geliştirmeyi asla bırakmayız.

Ayrıca, hangi optimizasyonların site performansınızda fark yaratabileceğini ve hangilerinin ele alınmasının zor olduğunu da biliyoruz. Kullanılmayan CSS'yi kaldırmak bunlardan biridir. Kullanılmayan CSS, yükleme süresini ve Largest Contentful Paint ve First Contentful Paint dahil olmak üzere önemli performans ölçümlerini büyük ölçüde etkileyebilir. CSS'yi kaldırarak veya azaltarak, PageSpeed ​​Insights puanınızı önemli ölçüde artırma ve sitenizi daha hızlı hale getirme fırsatı elde edersiniz.

Bu nedenle WP Rocket 3.11, performans hedeflerinize daha kolay ulaşmanıza yardımcı olacak yepyeni bir Kullanılmayan CSS'yi Kaldır özelliğine odaklanır.

Okumaya devam edin ve performans sonuçlarınız için geliştirilmiş özelliğin ne anlama geldiğini öğrenin. WP Rocket 3.11'in sitenizin hızına nasıl ekstra bir destek sağlayacağını öğreneceksiniz - ve daha fazlası da var!

WP Rocket 3.11'deki Yenilikler

WP Rocket 3.11, Kullanılmayan CSS'yi Kaldırma yenilemesine üç açıdan odaklanır: kullanılabilirlik, performans ve uyumluluk. Yeni Kullanılmayan CSS'yi Kaldır şimdilik beta sürümündedir, ancak bunun için zaten bir zaman çizelgemiz var - hakkında daha fazla bilgi edinmek için makalenin sonuna kadar okuyun.

Yeni ana sürümümüzü indirirken aşağıdaki yönlerden yararlanacaksınız:

  • Daha iyi kullanılabilirlik – Kullanılmayan CSS'yi Kaldır, CSS teslimatınızı optimize ederken hizmetin kapalı olmasını önlemek için eşzamansız metodolojiyle birlikte gelir. Sonuç olarak, kullanıcı arayüzünde biraz farklı bir şey de bulacaksınız.
  • Daha iyi performans – Bu yeni sürüm, kullanılmayan CSS'yi kaldırırken Yazı Tipi Önyükleme özelliğini işleme biçimimizde önemli bir değişiklik getiriyor. Daha önce Kullanılmayan CSS'yi Kaldır'ı kullanmış olsanız da olmasanız da puanlarınız üzerinde olumlu bir etki görmelisiniz!
  • Daha iyi uyumluluk – Olası Kullanılmayan CSS'yi Kaldırma hataları ve bunları düzeltmenin ne kadar zaman alacağı konusunda endişeleriniz varsa, bu tam size göre.

Değişiklikler ve sitenizin performansını optimize etmek için her birinden nasıl yararlanacağınız hakkında daha fazla bilgi edinmek için videomuzu izleyebilir veya sonraki bölüme geçebilirsiniz.

Daha İyi Kullanılabilirlik Ne Demektir?

WP Rocket 3.11, yeniden sıfırdan oluşturulmuş Kullanılmayan CSS'yi Kaldır ile birlikte gelir. Niye ya? Çünkü empati ve alçakgönüllülük temel değerlerimizden ikisidir ve onlara bağlıyız.

WP Rocket 3.9 ile Kullanılmayan CSS'yi Kaldır'ı başlattığımızdan beri, henüz beta modundan kurtulamadık. Özelliğin kendisinden ve nasıl çalıştığından memnun değildik. Müsaitlik iyi değildi ve hizmet genellikle kapalıydı. Bu nedenle, unsuru yeniden oluşturmaya ve senkron yöntemden asenkron yönteme geçmeye karar verdik. Eşzamansız mod, sayfayı önbelleğe alır, bir API çağrısı yapar ve 60 saniye sonra kullanılan CSS'yi oluşturur.

Bu metodoloji anahtarı, iki nedenden dolayı oyunun kurallarını değiştirir:

  1. Daha iyi kullanılabilirlikten yararlanacaksınız. Başka bir deyişle, WP Rocket kullanılmış CSS'yi oluşturmaya çalıştığında artık takılıp kalmayacaksınız. Her 60 saniyede bir 100 URL için Kullanılmış CSS üreteceksiniz.
  1. Asenkron yöntem, eşzamanlı metodolojiyi kullanırken asla düşünemeyeceğimiz birçok yeni geliştirme olasılığını açar . Artık, API çağrılarına dayanarak, kullanılan CSS'yi işlerken aynı anda gerçekleşen yeni güçlü özellikler üzerinde çalışabileceğiz. Yeni Kullanılmayan CSS'yi Kaldır'ı WP Rocket'in geleceğine kısa bir bakış olarak düşünün!

Metodolojide geçiş aynı zamanda CSS optimizasyon sürecinin kullanıcı arayüzünde sunulma şeklini de etkiler.

WP Rocket 3.10'a kadar, Kullanılmayan CSS'yi Kaldır seçeneği size CSS işleminin nasıl gittiğini gösterirdi:

Kullanılmayan CSS'yi Kaldır - WP Roket 3.10

CSS süreci sırasında, CSS süreci tamamen tamamlanana kadar PageSpeed ​​Insights'taki olası iyileştirmeleri izlemek mümkün değildi. Ayrıca, CSS optimizasyonu birkaç saat kadar sürebilir ve aşırı yüklenmiş sunucu nedeniyle yine de çalışmayabilir. Bunlar, yalnızca müşterilerin performanslarını iyileştirmelerini engelleyen değil, aynı zamanda sunmak istediğimiz ürüne layık olmayan kritik konulardı. Bu yüzden onları ele almak için çok çalıştık.

Öncelikle, asenkron metodoloji ve yeni sunucu altyapısı aşırı yüklenmeleri önleyecek ve geçmişte karşılaşılan sorunları önemli ölçüde azaltacaktır. Ana sayfa işlendikten sonra (90 saniye sayılır) CSS optimizasyon işlemi, sayfalarınızın geri kalanı için her 60 saniyede bir gruplar halinde yapılır. Bu, performans iyileştirmelerinizi ölçmek için sürecin tamamen tamamlanmasını beklemeniz gerekmediği anlamına gelir. Her 60 saniyede bir devam eden CSS optimizasyonundan yararlanacaksınız ve bunun PageSpeed ​​Insights denetimine hemen yansıdığını göreceksiniz.

Bu değişikliği her zamankinden daha basit yapan şey, WP Rocket 3.11'de bulacağınız geri sayım sayacıdır.

Kullanılmayan CSS'yi Kaldır seçeneğini etkinleştirirken, sayfanın üst kısmında, özelliğin ana sayfanızı işlemesinin ne kadar sürdüğünü söyleyen bir zamanlayıcı bulacaksınız.

Kullanılmayan CSS sayacını kaldır

Ana sayfa tamamlandığında, sitenizin tamamında devam eden Kullanılmayan CSS'yi Kaldırma işlemi hakkında yeni bir mesaj alacaksınız:

Kullanılmayan CSS'yi Kaldır - İşlemle ilgili güncel bilgiler
Kullanılmayan CSS'yi Kaldır - İşlemle ilgili güncel bilgiler

Önbellek Ön Yüklemesini henüz etkinleştirmediyseniz, seçeneği etkinleştirmenizi öneren bir mesaj görürsünüz.

Önceki sürümde olduğu gibi, “Ön Yüklemeyi Etkinleştir” ve “Site haritası tabanlı önbellek ön yüklemesini etkinleştir” seçeneklerini işaretlediğinizde, kullanılan CSS'yi oluşturmak için bir kullanıcının bir sayfayı ziyaret etmesini beklemekten kurtulursunuz.

Bu, tüm web sitesi için kullanılan CSS'nin oluşturulmasını hızlandıracaktır.

Önyükleme önbelleği - WP Rocket
Önyükleme önbelleği – WP Rocket

Birbiriyle ilişkili iki avantaj elde edeceğiniz için, Kullanılmayan CSS'yi Kaldır ve önbellek önyüklemesini birlikte kullanmanızı şiddetle öneririz:

  1. CSS boyutunu önemli ölçüde azaltacaksınız.
  2. Sonuç olarak, Önemli Web Verileri notlarınızın yanı sıra PageSpeed ​​Insights puanınızı da iyileştireceksiniz.

En popüler sayfa oluşturuculardan bazılarıyla birkaç test yaptık. Yeni Kullanılmayan CSS'yi Kaldır özelliğini etkinleştirdik ve iyileştirmeleri izledik. Gördüğünüz gibi, CSS tasarrufu çok büyük ve genel performans üzerinde bir etkisi olacak:

WooCommerce ile birlikte kullanılan Sayfa Oluşturucu Öncesi CSS (KB) CSS Sonrası (KB) CSS Tasarruf %'si
eleman 924 113 -88
Kunduz Oluşturucu 733 87 -88
Gutenberg 554 64 -88
Görsel Besteci 820 115 -86%
Böl 1.262 303 -76%

CSS tasarrufu sadece bunun iyiliği için değil. Bu tür geliştirmelerin nasıl daha iyi performans sonuçları getirebileceğini görebiliriz.

Elementor ve Astra kullanarak bir test sitesi oluşturduk. WP Rocket'i etkinleştirdik ve LazyLoad'u etkinleştirdik. İlk PageSpeed ​​Insights testini yaptık ve 67 puan aldık.

PageSpeed ​​Insight Score - WP Rocket etkinleştirildi + LazyLoad
PageSpeed ​​Insight Skoru – WP Roketi etkinleştirildi + LazyLoad

Ardından, Delay JS özelliğini etkinleştirdikten sonra başka bir test yaptık. Genel performans notu çok iyileşti, ancak puan yeşile dönmedi ve Lighthouse metriklerinden bazıları da değişmedi:

PageSpeed ​​Insight Score - JS'yi Geciktirme etkinleştirildi, Kullanılmayan CSS'yi Kaldır etkinleştirilmedi
PageSpeed ​​Insight Score – JS'yi Geciktirme etkinleştirildi, Kullanılmayan CSS'yi Kaldır etkinleştirilmedi

Sonunda Kullanılmayan CSS'yi Kaldır'ı etkinleştirdik ve üçüncü bir test yaptık. PageSpeed ​​Insights puanımız 94 puan aldı ve First Contentful Paint ve En Büyük İçerikli Boya da yeşil puan aldı.

PageSpeed ​​Insight Score - JS'yi Geciktir + Kullanılmayan CSS'yi Kaldır etkin
PageSpeed ​​Insight Score – JS'yi Geciktir + Kullanılmayan CSS'yi Kaldır etkin

Performanstaki Yenilikler

Bu yeni ana sürüm, yazı tiplerini önceden yükle özelliğinin çalışma şeklini de değiştirir. WP Rocket 3.10'a kadar, Kullanılmayan CSS'yi Kaldır açıkken, eklenti Yazı Tiplerini Önceden Yükle sekmesinde bulunan bilgileri görmezden gelirdi.

Şimdi önemli bir değişiklik var. Kullanılmayan CSS'yi Kaldır seçeneğini etkinleştirirken ve kullanılan CSS'yi oluştururken, WP Rocket tüm yazı tiplerini otomatik olarak tanımlar ve bunları otomatik olarak önceden yükler. Niye ya? Çünkü testlerimize göre siteler daha iyi PageSpeed ​​Insights puanları alabilir.

Testlerimizin sonuçlarına bir göz atın ve Yazı Tiplerini Önceden Yükle seçeneği sayesinde genel performans derecesinin ve belirli ölçümlerin nasıl geliştiğini kendiniz görün:

1. Senaryo – Önceden Yüklenmiş yazı tipleri olmadan etkinleştirilen Kullanılmayan CSS'yi kaldırın

PageSpeed ​​Insights - Önceden Yüklenmiş yazı tipleri olmadan etkinleştirilen Kullanılmayan CSS'yi kaldırın

2. Senaryo – Önceden Yüklenmiş Yazı Tipleriyle etkinleştirilen Kullanılmayan CSS'yi Kaldırın

PageSpeed ​​Insights - Önceden Yüklenmiş Yazı Tipleriyle etkinleştirilen Kullanılmayan CSS'yi Kaldır

Daha İyi Bir Uyumluluk ile Gelenler

Bu büyük sürüm, yalnızca yeni bir kullanıcı arayüzü ve Kullanılmayan CSS'yi Kaldır için daha iyi kullanılabilirlik sunmakla ilgili değildir. Önceki Kullanılmayan CSS'yi Kaldır özelliğini denediyseniz ve herhangi bir sorun veya hatayla karşılaştıysanız, WP Rocket 3.11'in daha iyi uyumluluk ve doğruluğa sahip olduğunu bilmelisiniz.

Sade İngilizce olarak, WP Rocket 3.11, bilinen Kullanılmayan CSS'yi Kaldır sorunlarının %90'ını otomatik olarak düzeltir . Kalan ve yenileri, küçük bir WP Rocket sürümü gerektirmeden kolayca sabitlenebilir. Bu ileriye doğru büyük bir adım, değil mi?

Beta Sürümü Ne Kadar Sürecek?

Kullanılmayan CSS'yi Kaldır beta sürümüyle nasıl gideceğini merak ettiğinize bahse gireriz. Yakında dedi ki: Sunucumuzu tam ölçekte kontrol etmek için 3 veya 4 hafta tutacağız. Amacımız, Kullanılmayan CSS'yi Kaldır seçeneğinin vakaların %95'inde sorunsuz çalışmasını sağlamaktır. Çok güçlü bir özellik olduğu için, Yakın gelecekte Kullanılmayan CSS'yi Kaldır'ı varsayılan olarak etkinleştirmeyi hedefliyoruz.

Tabii ki, seni koruduk. Bir Rocketeer olarak, beta sürümünü kaldırdığımızda bir e-posta alacaksınız.

toparlamak

WP Rocket 3.11, CSS dağıtımını, düzeltilmesi zaman alan hatalar veya sorunlar hakkında endişelenmeden optimize etmenize olanak tanıyan yeni marka, Kullanılmayan CSS'yi Kaldır özelliğiyle birlikte gelir.

Yeni Kullanılmayan CSS'yi Kaldır ve Yazı Tipi Ön Yüklemesi sayesinde site hızınızı artıracak ve Lighthouse performans ölçümlerini optimize edeceksiniz - hiçbir şey için endişelenmenize gerek yok!

Bu büyük sürümde yapılan değişiklikler sayesinde, performans optimizasyonunu daha kolay ve daha hızlı hale getirecek yeni şaşırtıcı özellikler geliştirmek mümkün olacak. WP Rocket için geleceğin neler getireceğini görmeye hazır mısınız?