CSS Penting di WordPress: Apa Artinya dan Bagaimana Mengoptimalkan Pengiriman CSS

Saat menjalankan audit kinerja di Google PageSpeed ​​Insights, Anda akan menemukan bahwa Google menyarankan Anda untuk "menghilangkan sumber daya yang memblokir render" hampir setiap saat. Artinya Anda harus selalu memuat CSS dan JavaScript penting dalam prioritas.

Tetapi bagaimana memutuskan CSS mana yang penting dan mana yang tidak? Bagian mana dari situs web Anda yang harus Anda "tunda" untuk mempercepat yang lain? Ini semua tentang prioritas dan menemukan sumber daya CSS mana yang penting dan bagaimana mengoptimalkan pengirimannya.

Mari selami.

Apa itu CSS Kritis dan Mengapa Penting untuk Performa?

CSS kritis adalah teknik yang mengekstrak CSS di paro atas untuk menampilkan halaman secepat mungkin. Ini seperti mengambil CSS minimum untuk menampilkan konten yang dilihat oleh pengunjung.

Dengan kata lain, CSS penting adalah kunci untuk mengoptimalkan kinerja. Sebelum merender halaman, browser Anda perlu mengunduh dan mengurai file CSS, menjadikan file tersebut sebagai sumber daya pemblokiran render. Semakin besar file CSS Anda, semakin lama waktu yang dibutuhkan browser untuk memprosesnya. Semua permintaan yang dibuat oleh file CSS yang berat akan menambah waktu pemuatan halaman web, membuat pengunjung kesal dan Google.

Kecepatan halaman juga dapat memengaruhi kinerja SEO Anda karena faktor peringkat baru, termasuk Data Web Inti. Mereka adalah serangkaian faktor yang diterapkan oleh Google untuk mengukur pengalaman pengguna — termasuk seberapa cepat suatu halaman. Semakin baik pengalamannya, semakin baik peringkat Anda.

Apakah Anda akrab dengan enam metrik Lighthouse yang mengukur kinerja? Dua di antaranya – First Contentful Paint (FCP) dan First Input Delay (FID) – mengukur kecepatan yang dirasakan situs web Anda. Jika metrik tersebut dalam kondisi yang baik, pengalaman pengguna Anda akan diukur oleh Google. Namun, jika kedua KPI berwarna merah, Anda sebaiknya mengoptimalkan CSS penting Anda.

CSS Penting Dijelaskan dalam Bahasa Inggris Biasa

Dalam bahasa Inggris sederhana, CSS penting adalah tugas pengoptimalan. Ini seperti memberi tahu browser Anda untuk memuat hanya CSS yang dilihat oleh pengunjung. Ini membantu meningkatkan kecepatan yang dirasakan, yang berarti seberapa cepat situs web tampak bagi pengunjung.

Mari kita lakukan latihan cepat dengan gambar di bawah ini. Bayangkan Anda adalah pengguna seluler yang mengakses situs web.

Skenario #1 – Di atas, ada halaman dengan CSS yang memblokir render. Anda melihat halaman kosong sampai seluruh file CSS dimuat.

Skenario #2 – Di bagian bawah, CSS kritis dirender terlebih dahulu. Anda mulai melihat cara halaman lebih awal karena browser sudah mulai memuat stylesheet yang paling penting.

Pertanyaan: Skenario mana yang “terasa” lebih cepat bagi Anda?

Jawaban: Kita semua setuju bahwa kecepatan yang dirasakan dari garis bawah lebih baik.

Pengunjung Anda akan merasakan penurunan yang dirasakan dalam waktu pemuatan halaman karena rendering halaman yang lebih cepat bila dilakukan dengan benar.

Mengapa CSS Penting?

Memuat lembar gaya CSS biasanya adalah cara Anda menata situs WordPress Anda. CSS adalah bahasa yang digunakan untuk mendeskripsikan halaman web, seperti warna, tata letak, dan font. Tanpa CSS, web akan terlihat seperti kolom kiri kita di bawah ini:

Situs WP Rocket tanpa CSS	Situs WP Rocket dengan CSS

Apa Arti Jalur Rendering CSS Penting?

Jalur Rendering Kritis adalah serangkaian tugas yang harus dilakukan browser untuk merender halaman di layar pengunjung. Misalnya, tugas-tugas itu termasuk mengunduh foto, font, dan teks untuk ditampilkan di halaman web.

Seperti yang terlihat sebelumnya, browser juga perlu mengunduh file CSS Anda untuk membuat tata letak halaman yang tepat. Jika file Anda sangat besar, pengunjung akan menunggu sampai seluruh file telah diunduh.

Tetapi bagaimana jika browser dapat mulai merender CSS saat unduhan berlangsung?

Bayangkan cara untuk mengurangi pemblokiran dan memulai pengiriman CSS sesegera mungkin. Teknik ini justru dikenal sebagai optimasi jalur rendering kritis.

Peramban mengikuti lima langkah hingga menampilkan laman kepada pengunjung. Banyak yang bisa terjadi selama proses ini. Itu sebabnya kita harus memastikan bahwa setiap langkah diselesaikan secepat mungkin.

Dua pertanyaan sekarang muncul: bagaimana cara mengoptimalkan setiap langkah? Bagaimana memastikan bahwa kami memiliki pengiriman CSS yang paling efisien?

Pertanyaan-pertanyaan ini membawa kita ke bagian berikutnya. Anda akan mempelajari cara meningkatkan waktu rendering dengan teknik CSS penting (mengoptimalkan pengiriman CSS) dan menghilangkan kesalahan CSS yang memblokir render.

3 Langkah untuk Mengoptimalkan Pengiriman CSS

CSS mengontrol format dan gaya visual situs WordPress Anda, tetapi jika file CSS tidak dikirimkan secara optimal, Anda mungkin akan mendapatkan halaman web yang lambat.

Jadi salah satu cara terbaik untuk meningkatkan kinerja situs WordPress Anda adalah dengan mengoptimalkan bagaimana dan kapan kode CSS dikirimkan. Ada tiga langkah utama untuk mengoptimalkan pengiriman CSS untuk situs WordPress Anda, yaitu:

Langkah 1: Temukan dan buat CSS penting — yang mengidentifikasi kode CSS minimum yang Anda perlukan untuk menampilkan konten paruh atas. Anda perlu mencari tahu apa yang dapat dilihat pengguna di viewport saat mereka pertama kali memuat halaman. Menentukan CSS penting yang tepat untuk sebuah halaman bisa jadi rumit karena pengunjung menggunakan banyak ukuran layar yang berbeda, seperti desktop, tablet, dan seluler.

Bagaimana menemukan CSS penting

WebDev memberi Anda tiga alat yang dapat Anda gunakan untuk mengidentifikasi CSS penting:

• Kritis – mengekstrak CSS paruh atas (dan juga menyelaraskan dan memperkecilnya)
• CriticalCSS – modul lain yang mengekstrak CSS penting
• Penthouse – pilihan yang baik jika situs Anda memiliki banyak CSS

Langkah 2: Sejajarkan CSS penting ini — yaitu menambahkan CSS penting di <head> dokumen HTML untuk menghilangkan semua permintaan tambahan untuk mengambil gaya ini.

Dalam contoh WebDev di bawah, mereka telah menggarisbawahi CSS penting dalam file <head> sehingga browser dapat mengirimkannya lebih cepat dan merender sesuatu kepada pengguna sesegera mungkin.

Langkah 3: Muat sisa CSS secara asinkron — yang menunda CSS non-kritis sehingga dapat dimuat setelah pengunjung Anda dapat melihat konten halaman web Anda. Teknik ini juga dikenal sebagai "pemuatan yang ditangguhkan". WebDev menjelaskan seluruh proses manual dengan sangat baik.

Dengan mengikuti tiga langkah manual tersebut, Anda akan mengoptimalkan pengiriman CSS dan jalur rendering penting Anda. Namun, ada metode yang lebih mudah untuk mengoptimalkan pengiriman CSS WordPress: dengan menggunakan plugin WordPress!

Cara Menghasilkan CSS Kritis dan Mengoptimalkan Jalur Rendering Kritis Dengan Plugin

Untungnya, Anda dapat mengoptimalkan pengiriman CSS penting Anda dan menunda sumber daya yang kurang penting menggunakan plugin WordPress. Itu akan menghemat waktu Anda dan menghindari memodifikasi file kode Anda secara manual. Kami telah menyusun daftar sehingga Anda dapat menguji alat mana yang terbaik untuk Anda.

• WP Rocket – Plugin cache terlengkap yang mendeteksi CSS penting Anda untuk inline dan menangguhkannya dengan cara yang paling sederhana. Anda akan membahas contoh praktis di bagian berikutnya.

• Autoptimize – Menyuntikkan CSS di kepala halaman secara default dan juga dapat menyejajarkan dan menunda CSS penting.

• Pembersihan Aset – Menyejajarkan File CSS (secara otomatis & dengan menentukan jalur ke lembar gaya).

Cara Mengoptimalkan Pengiriman CSS dengan WP Rocket

Di WP Rocket 3.10, opsi Load CSS Asynchronously membahas rekomendasi kecepatan halaman yang kita lihat sebelumnya: "Hilangkan sumber daya yang memblokir render". WP Rocket mencakup dua pengoptimalan CSS utama:

1. Ini menghasilkan CSS penting yang diperlukan untuk merender bagian yang terlihat dari situs web Anda (konten paruh atas).
2. Ini memuat semua file CSS lainnya secara asinkron (memprioritaskan mana yang harus dimuat terlebih dahulu).

Untuk mengoptimalkan pengiriman CSS, cukup ikuti langkah-langkah di dasbor WP Rocket:

• Buka Pengaturan > WP Rocket
• Klik pada tab Pengoptimalan File .
• Gulir ke bawah ke bagian File CSS dan klik kotak berlabel Optimalkan pengiriman CSS .
• Pilih opsi Hapus CSS yang Tidak Digunakan (opsi yang disarankan ). Ini hanya akan mengekstrak CSS yang diperlukan di halaman, dan juga akan membuat inline.

Atau, WP Rocket juga memungkinkan Anda memuat CSS secara asinkron dan menawarkan opsi mundur untuk CSS penting. Gunakan bidang fallback ini jika plugin tidak dapat menghasilkan CSS kritis yang benar.

Last but not least, WP Rocket juga membahas rekomendasi “Kurangi CSS yang tidak digunakan” dari PageSpeed ​​Insights.

CSS yang tidak digunakan memengaruhi waktu pemuatan halaman karena browser masih harus memuatnya. Metrik kinerja Google seperti Cat Terbesar Contentful (LCP) dan Total Blocking Time (TBT) juga akan terpengaruh. LCP dan TBT memiliki bobot total 55% pada nilai Google PageSpeed ​​dan Core Web Vitals, jadi sangat penting untuk menjaga metrik tersebut tetap sehat.

Mari kita uji opsi WP Rocket tersebut di situs WordPress dengan nilai buruk di PSI (seluler). Anda akan melihat bagaimana WP Rocket akan membantu kami dalam proses pengoptimalan kecepatan halaman kami.

Sebelum mengoptimalkan CSS kritis saya, nilai kinerja saya hanya 43/100, yang menempatkan situs seluler saya dalam warna merah:

Saya juga mendapatkan dua peringatan: "Kurangi CSS yang tidak digunakan" dan "Hapus sumber daya yang memblokir render".

Sekarang, mari kita instal WP Rocket dan aktifkan opsi “ Hapus CSS yang Tidak Digunakan”.

Hasil kinerja sekarang sangat bagus di ponsel . Kami telah mencapai 94/100 hanya dalam beberapa klik. WP Rocket telah mengoptimalkan jalur rendering saya dan juga menangani CSS kritis saya.

Peringatan “Hilangkan sumber pemblokiran render” dan peringatan “Kurangi CSS yang tidak digunakan” sekarang ada di bagian “audit yang lulus”.

Sama seperti saya, Anda dapat menggunakan WP Rocket untuk mengoptimalkan pengiriman CSS penting kami. Ini adalah plugin yang andal dan efisien yang membantu saya mencapai sasaran kinerja yang luar biasa dalam beberapa klik.

Membungkus

Mengoptimalkan CSS penting Anda tampaknya menakutkan, tetapi tidak perlu seperti ini, berkat plugin seperti WP Rocket. Kami melihat bahwa WP Rocket membantu menghilangkan peringatan merah terkait sumber daya pemblokiran render di Google PageSpeed ​​Insights.

Anda akan menghemat waktu berharga karena WP Rocket secara otomatis menerapkan 80% praktik terbaik kinerja web — dan Anda akan melihat peningkatan kecepatan instan setelah aktivasi .

Terlebih lagi, Anda selalu dapat mengandalkan jaminan uang kembali 100% kami. Meskipun menurut kami Anda tidak akan pernah menginginkannya, kami akan dengan senang hati memberikan pengembalian dana jika Anda memintanya dalam waktu 14 hari setelah pembelian.