WP Rocket 3.11 – Meluncurkan CSS Baru Hapus yang Tidak Digunakan

Diterbitkan: 2022-04-26

Di WP Rocket, kami berkomitmen untuk secara konsisten membuat produk kami lebih kuat dan lebih sederhana. Kami ingin menawarkan kepada Rocketeers plugin terbaik yang pernah ada untuk kinerja dan kesederhanaan – dan tidak pernah berhenti meningkatkannya.

Kami juga mengetahui pengoptimalan mana yang dapat membuat perbedaan dalam kinerja situs Anda dan mana yang sulit untuk diatasi. Menghapus CSS yang tidak digunakan adalah salah satunya. CSS yang tidak digunakan dapat sangat memengaruhi waktu pemuatan dan metrik kinerja penting, termasuk Cat Konten Terbesar dan Cat Konten Penuh Pertama. Dengan menghapus atau mengurangi CSS, Anda akan mendapatkan kesempatan untuk meningkatkan skor PageSpeed ​​Insights Anda secara dramatis dan membuat situs Anda lebih cepat.

Itu sebabnya WP Rocket 3.11 berfokus pada fitur baru Hapus CSS yang Tidak Digunakan yang akan membantu Anda mencapai sasaran kinerja dengan lebih mudah.

Teruslah membaca dan cari tahu apa arti fitur yang ditingkatkan untuk hasil kinerja Anda. Anda akan mempelajari bagaimana WP Rocket 3.11 akan meningkatkan kecepatan situs Anda – dan masih banyak lagi yang akan datang!

Apa yang Baru di WP Rocket 3.11

WP Rocket 3.11 berfokus pada perombakan Hapus CSS yang Tidak Digunakan dari tiga sudut: ketersediaan, kinerja, dan kompatibilitas. Hapus CSS yang Tidak Digunakan yang baru tetap dalam versi beta untuk saat ini, tetapi kami sudah memiliki garis waktu untuk itu – baca hingga akhir artikel untuk mempelajari lebih lanjut tentangnya.

Saat mengunduh rilis utama baru kami, Anda akan mendapat manfaat dari aspek-aspek berikut:

  • Ketersediaan yang lebih baik – Hapus CSS yang Tidak Digunakan hadir dengan metodologi asinkron untuk mencegah layanan tidak berfungsi saat mengoptimalkan pengiriman CSS Anda. Akibatnya, Anda juga akan menemukan sesuatu yang sedikit berbeda di UI.
  • Performa yang lebih baik – Rilis baru ini memperkenalkan perubahan signifikan dalam cara kami menangani fitur Preload Font saat menghapus CSS yang tidak digunakan. Anda akan melihat dampak positif pada skor Anda apakah Anda menggunakan Hapus CSS yang Tidak Digunakan sebelumnya atau tidak!
  • Kompatibilitas yang lebih baik – Jika Anda khawatir tentang potensi Hapus bug CSS yang Tidak Digunakan dan berapa lama waktu yang dibutuhkan untuk memperbaikinya, ini untuk Anda.

Anda dapat menonton video kami atau melompat ke bagian berikutnya untuk mempelajari lebih lanjut tentang perubahan dan bagaimana Anda akan memanfaatkan setiap perubahan untuk mengoptimalkan kinerja situs Anda.

Apa Ketersediaan Lebih Baik Berarti?

WP Rocket 3.11 hadir dengan Hapus CSS yang Tidak Digunakan yang dibangun kembali dari awal. Mengapa? Karena empati dan kerendahan hati adalah dua nilai inti kami — dan kami berpegang teguh pada nilai tersebut.

Sejak kami meluncurkan Hapus CSS yang Tidak Digunakan dengan WP Rocket 3.9, kami belum dapat menyingkirkan mode beta. Kami tidak puas dengan fitur itu sendiri dan cara kerjanya. Ketersediaannya tidak bagus, dan layanannya sering turun. Oleh karena itu, kami memutuskan untuk membangun kembali fitur tersebut dan beralih dari metode sinkron ke metode asinkron. Mode asinkron akan meng-cache halaman, membuat panggilan API dan menghasilkan CSS yang digunakan setelah 60 detik.

Sakelar metodologi ini adalah pengubah permainan karena dua alasan:

  1. Anda akan mendapatkan keuntungan dari ketersediaan yang lebih baik. Dengan kata lain, Anda tidak akan terjebak lagi ketika WP Rocket mencoba menghasilkan CSS yang digunakan. Anda akan menghasilkan CSS Bekas untuk 100 URL setiap 60 detik.
  1. Metode asinkron membuka kemungkinan untuk banyak peningkatan baru yang tidak pernah terpikirkan saat menggunakan metodologi sinkron. Kami sekarang dapat mengerjakan fitur-fitur canggih baru yang terjadi pada saat yang sama kami memproses CSS yang digunakan, dengan mengandalkan panggilan API. Pertimbangkan Hapus CSS yang Tidak Digunakan sebagai cuplikan masa depan WP Rocket!

Pergantian metodologi juga berdampak pada cara proses pengoptimalan CSS ditampilkan di antarmuka pengguna.

Hingga WP Rocket 3.10, opsi Hapus CSS yang Tidak Digunakan akan menunjukkan kepada Anda bagaimana proses CSS berjalan:

Hapus CSS yang Tidak Digunakan – WP Rocket 3.10

Selama proses CSS, tidak mungkin melacak potensi peningkatan apa pun di PageSpeed ​​Insights hingga proses CSS selesai sepenuhnya. Selain itu, pengoptimalan CSS dapat memakan waktu hingga beberapa jam dan masih tidak berfungsi karena server yang kelebihan beban. Ini adalah masalah kritis yang tidak hanya mencegah pelanggan meningkatkan kinerja mereka tetapi juga tidak layak untuk produk yang ingin kami tawarkan. Itu sebabnya kami bekerja keras untuk menangani mereka.

Pertama, metodologi asinkron dan infrastruktur server baru akan mencegah kelebihan beban dan secara dramatis mengurangi masalah yang dihadapi di masa lalu. Setelah beranda diproses (hitung 90 detik), proses pengoptimalan CSS akan dilakukan secara berkelompok untuk sisa halaman Anda – setiap 60 detik. Artinya, Anda tidak perlu menunggu hingga proses selesai sepenuhnya untuk mengukur peningkatan kinerja Anda. Setiap 60 detik, Anda akan mendapat manfaat dari pengoptimalan CSS yang sedang berlangsung dan Anda akan segera melihatnya tercermin dalam audit PageSpeed ​​Insights.

Apa yang membuat perubahan ini lebih mudah dari sebelumnya adalah penghitung waktu mundur yang akan Anda temukan di WP Rocket 3.11.

Saat mengaktifkan opsi Hapus CSS yang Tidak Digunakan, di bagian atas halaman, Anda akan menemukan pengatur waktu yang mengatakan berapa lama waktu yang dibutuhkan fitur untuk memproses beranda Anda.

Hapus penghitung CSS yang tidak digunakan

Setelah beranda selesai, Anda akan mendapatkan pesan baru tentang proses Hapus CSS yang Tidak Digunakan yang terjadi di seluruh situs Anda:

Hapus CSS yang Tidak Digunakan - Informasi terbaru tentang prosesnya
Hapus CSS yang Tidak Digunakan – Informasi terbaru tentang prosesnya

Jika Anda belum mengaktifkan Cache Preload, Anda akan melihat pesan yang menyarankan Anda untuk mengaktifkan opsi tersebut.

Seperti pada versi sebelumnya, saat Anda mencentang opsi "Aktifkan Pramuat" dan "Aktifkan pramuat cache berbasis peta situs", Anda tidak perlu menunggu pengguna mengunjungi halaman untuk menghasilkan CSS yang digunakan.

Ini akan mempercepat pembuatan CSS yang digunakan untuk seluruh situs web.

Pramuat cache - WP Rocket
Cache pramuat – WP Rocket

Kami sangat menyarankan untuk menggunakan Hapus CSS yang Tidak Digunakan dan pramuat cache secara bersamaan karena Anda akan mendapatkan dua manfaat yang berkorelasi:

  1. Anda akan secara dramatis mengurangi ukuran CSS.
  2. Hasilnya, Anda akan meningkatkan skor PageSpeed ​​Insights, serta nilai Core Web Vitals Anda.

Kami menjalankan beberapa pengujian dengan beberapa pembuat halaman paling populer. Kami mengaktifkan fitur Hapus CSS yang Tidak Digunakan dan melacak peningkatannya. Seperti yang Anda lihat, penghematan CSS sangat besar, dan itu akan berdampak pada kinerja keseluruhan:

Pembuat Halaman yang digunakan dengan WooCommerce CSS Sebelumnya (KB) CSS Setelah (KB) % Penghematan CSS
elemen 924 113 -88%
pembangun berang-berang 733 87 -88%
Gutenberg 554 64 -88%
Komposer Visual 820 115 -86%
divisi 1,262 303 -76%

Penghematan CSS bukan hanya untuk kepentingan itu. Kita dapat melihat bagaimana peningkatan tersebut dapat membawa hasil kinerja yang lebih baik.

Kami membangun situs pengujian menggunakan Elementor dan Astra. Kami mengaktifkan WP Rocket dan mengaktifkan LazyLoad. Kami menjalankan pengujian PageSpeed ​​Insights awal dan mendapatkan nilai 67.

Skor Wawasan PageSpeed ​​- WP Rocket diaktifkan + LazyLoad
Skor Wawasan PageSpeed ​​– WP Rocket diaktifkan + LazyLoad

Kemudian, kami menjalankan tes lain setelah mengaktifkan fitur Delay JS. Nilai kinerja keseluruhan meningkat pesat, tetapi skornya tidak berubah menjadi hijau, begitu pula beberapa metrik Lighthouse:

Skor Wawasan PageSpeed ​​- Tunda JS diaktifkan, Hapus CSS yang tidak digunakan tidak diaktifkan
Skor Wawasan PageSpeed ​​– Penundaan JS diaktifkan, Hapus CSS yang tidak digunakan tidak diaktifkan

Kami akhirnya mengaktifkan Hapus CSS yang Tidak Digunakan dan menjalankan tes ketiga. Skor PageSpeed ​​Insights kami mendapat nilai 94, dan First Contentful Paint dan Largest Contentful Paint juga mendapat skor hijau.

Skor Wawasan PageSpeed ​​- Tunda JS + Hapus CSS yang Tidak Digunakan diaktifkan
Skor Wawasan PageSpeed ​​– Tunda JS + Hapus CSS yang tidak digunakan diaktifkan

Apa yang Baru untuk Performa

Rilis besar baru ini juga mengubah cara kerja fitur font Preload. Hingga WP Rocket 3.10, ketika Hapus CSS yang Tidak Digunakan aktif, plugin akan mengabaikan informasi yang disertakan dalam tab Preload Fonts.

Sekarang, ada perubahan penting. Saat mengaktifkan opsi Hapus CSS yang Tidak Digunakan dan menghasilkan CSS yang digunakan, WP Rocket secara otomatis mengidentifikasi semua font dan memuatnya secara otomatis. Mengapa? Karena menurut pengujian kami, situs bisa mendapatkan skor PageSpeed ​​Insights yang lebih baik.

Lihatlah hasil pengujian kami dan lihat sendiri bagaimana tingkat kinerja keseluruhan dan metrik spesifik meningkat berkat opsi Preload Fonts:

Skenario #1 – Hapus CSS yang tidak digunakan yang diaktifkan tanpa font yang dimuat sebelumnya

PageSpeed ​​Insights - Hapus CSS yang tidak digunakan yang diaktifkan tanpa font yang dimuat sebelumnya

Skenario #2 – Hapus CSS yang tidak digunakan yang diaktifkan dengan Font yang Dimuat sebelumnya

PageSpeed ​​Insights - Hapus CSS yang Tidak Digunakan yang diaktifkan dengan Font yang Dimuat sebelumnya

Apa yang Hadir dengan Kompatibilitas yang Lebih Baik

Rilis besar ini tidak hanya tentang memberikan UI baru dan ketersediaan yang lebih baik untuk Hapus CSS yang Tidak Digunakan. Jika Anda mencoba fitur Hapus CSS yang Tidak Digunakan sebelumnya dan menemukan masalah atau bug, Anda harus tahu bahwa WP Rocket 3.11 memiliki kompatibilitas dan akurasi yang lebih baik.

Dalam bahasa Inggris yang sederhana, WP Rocket 3.11 secara otomatis memperbaiki 90% dari masalah Remove Unused CSS yang diketahui . Yang tersisa dan yang baru dapat diperbaiki dengan mudah tanpa memerlukan versi WP Rocket kecil. Itu langkah maju yang besar, bukan?

Berapa Lama Versi Beta Akan Bertahan?

Kami yakin Anda bertanya-tanya bagaimana hasilnya dengan versi beta Hapus CSS yang Tidak Digunakan. Segera berkata: kami akan menyimpannya selama 3 atau 4 minggu untuk memeriksa server kami dalam skala penuh. Tujuan kami adalah agar opsi Hapus CSS yang Tidak Digunakan berfungsi tanpa masalah dalam 95% kasus. Karena ini adalah fitur yang sangat kuat, kami bertujuan untuk mengaktifkan Hapus CSS yang Tidak Digunakan secara default dalam waktu dekat.

Tentu saja, kami membantu Anda. Menjadi Rocketeer, Anda akan mendapatkan email saat kami menghapus versi beta.

Membungkus

WP Rocket 3.11 hadir dengan fitur Remove Unused CSS merek baru yang kuat yang memungkinkan Anda mengoptimalkan pengiriman CSS tanpa khawatir tentang bug atau masalah yang membutuhkan waktu untuk diperbaiki.

Berkat Hapus CSS yang Tidak Digunakan dan Font Preload yang baru, Anda akan meningkatkan kecepatan situs dan mengoptimalkan metrik kinerja Lighthouse – tidak perlu khawatir tentang apa pun!

Berkat perubahan yang dibuat dalam rilis utama ini, dimungkinkan untuk mengembangkan fitur luar biasa baru yang akan membuat pengoptimalan kinerja lebih mudah dan lebih cepat. Siap untuk melihat masa depan WP Rocket?