Cara Menghasilkan CSS Kritis di WordPress (2 Metode)

Orang yang mengunjungi situs web Anda tidak ingin menunggu lama untuk melihat konten Anda. Jika Anda tidak mengoptimalkan kode, sumber daya yang memblokir perenderan seperti CSS dapat berkontribusi pada persepsi pengunjung tentang waktu muat yang lebih lambat.

Untungnya, Anda dapat dengan mudah membuat CSS penting untuk situs web Anda. Dengan memasang plugin seperti Jetpack Boost, Anda akan dapat mengekstrak semua CSS yang diperlukan untuk menampilkan konten paro atas. Ini bisa menjadi kunci untuk membuat situs web Anda tampil lebih cepat dan lebih ramah pengguna.

Dalam postingan ini, kami akan menjelaskan CSS penting dan mengapa Anda harus mempertimbangkan untuk membuatnya untuk situs web Anda. Kemudian, kami akan menunjukkan kepada Anda dua cara berbeda untuk melakukan ini di WordPress.

Apa itu CSS kritis di WordPress?

Setelah pengunjung mengeklik tautan ke situs web Anda, browser mereka harus memproses serangkaian tugas untuk merender konten sepenuhnya. Semua langkah yang terlibat dalam mengunduh, memproses, dan mengonversi kode menjadi piksel membentuk Jalur Rendering Kritis.

Browser membaca kode HTML, CSS, dan JavaScript situs dari atas ke bawah selama proses pemuatan ini. Karena tidak secara otomatis mengetahui sumber daya mana yang paling penting dalam merender halaman, browser dapat macet saat memproses kode yang tidak perlu.

Jika file CSS tertentu menghentikan perenderan situs web Anda, itu menjadi sumber pemblokiran perenderan. Meskipun tidak diperlukan untuk menampilkan halaman, pengunjung tidak akan melihat konten hingga CSS pemblokiran perenderan ini diproses sepenuhnya.

CSS kritis mengacu pada kode CSS yang diperlukan untuk konten web paruh atas. Pada dasarnya, ini adalah kode minimum yang dibutuhkan browser untuk menampilkan bagian pertama konten kepada pengunjung.

Manfaat menghasilkan CSS kritis

Membuat CSS penting untuk halaman web Anda melibatkan penghapusan CSS yang memblokir perenderan dan memungkinkan browser hanya memproses apa yang diperlukan.

1. Optimalkan pengiriman konten

Saat Anda mengoptimalkan pengiriman CSS untuk situs web WordPress Anda, ini dapat meningkatkan proses rendering. Bagi pengunjung front-end, sepertinya halaman Anda dimuat lebih cepat.

Saat seseorang membuka situs web Anda, hal pertama yang akan mereka lihat adalah konten paro atas. Ini semua ditampilkan di halaman depan tanpa perlu menggulir.

Dengan mengekstraksi CSS penting, Anda mengoptimalkan file CSS yang diperlukan untuk menampilkan bagian awal ini. Tanpanya, pengguna mungkin melihat sebagian elemen yang belum sepenuhnya dirender.

Kesalahpahaman yang umum adalah bahwa CSS kritis mengurangi waktu pemuatan Anda. Meskipun ini tidak benar, teknik pengoptimalan dapat meningkatkan kinerja yang dirasakan .

Pada dasarnya, pengguna akan menganggap halaman Anda memuat lebih cepat karena browser dapat dengan mudah menampilkan elemen paro atas dengan lebih efisien.

Dengan menghasilkan CSS kritis WordPress, pengunjung akan memiliki Pengalaman Pengguna (UX) yang lebih baik di situs Anda. Hasilnya, Anda dapat mengurangi rasio pentalan dan mendorong kunjungan kembali.

2. Tingkatkan Data Web Inti

Meskipun CSS kritis WordPress tidak menambah atau mengurangi waktu pemuatan halaman, CSS ini dapat meningkatkan Data Web Inti Anda. Metrik ini menganalisis pengalaman pengguna situs web.

Berikut adalah Data Web Inti:

• Largest Contentful Paint (LCP) : Performa pemuatan situs web
• First Input Delay (FID) : Interaktivitas situs web
• Pergeseran Tata Letak Kumulatif (CLS) : Stabilitas visual situs web

Setelah memindai situs Anda untuk laporan Data Web Inti, Anda mungkin melihat metrik tambahan seperti First Contentful Paint (FCP) atau Time to First Byte (TTFB). Ini memengaruhi LCP dan memainkan peran penting dalam proses pemuatan.

CSS kritis berdampak langsung pada FCP. Sederhananya, FCP mengukur waktu yang diperlukan untuk merender elemen pertama di halaman web setelah mulai memuat. Jika situs Anda memiliki skor FCP yang buruk, pengunjung akan sering melihat halaman kosong untuk sementara waktu.

Sebagai pemilik situs web WordPress, Anda harus berusaha mendapatkan FCP di bawah 1,8 detik, tetapi banyak elemen yang dapat berdampak negatif pada skor ini, termasuk:

• JavaScript dan CSS yang memblokir render
• Server yang lambat
• File font besar
• Ukuran Model Objek Dokumen Besar (DOM).

Karena CSS pemblokiran render berkontribusi pada FCP, menghasilkan CSS kritis dapat meningkatkan skor ini. Selama proses ini, Anda akan menyejajarkan semua CSS yang diperlukan untuk merender konten paruh atas.

Cara menguji situs web Anda untuk CSS yang memblokir perenderan

Sebelum menghasilkan CSS kritis WordPress, Anda harus tahu apakah itu diperlukan untuk situs web Anda. Karena file CSS berukuran besar dianggap sebagai sumber daya yang memblokir perenderan, Anda dapat memindainya dengan alat pengoptimalan kecepatan.

Untuk memulai, masukkan URL situs web Anda ke PageSpeed ​​Insights. Perangkat lunak Google ini akan menganalisis kinerja situs Anda dengan berbagai audit kecepatan.

Di bagian atas halaman, Anda akan melihat penilaian Data Web Inti Anda. Ini mencakup metrik untuk Cat Konten Terbesar, Penundaan Input Pertama, Pergeseran Tata Letak Kumulatif, Cat Konten Pertama, Interaksi ke Cat Berikutnya, dan Waktu ke Byte Pertama.

Seperti yang Anda pelajari sebelumnya, CSS pemblokiran render terkait erat dengan skor FCP. Pastikan hasil penilaian seluler dan desktop Anda 1,8 detik atau kurang.

Jika Anda menerima skor buruk, Anda mungkin memiliki file CSS yang besar dan tidak dioptimalkan di situs web Anda. Untuk memverifikasi apakah ini benar, gulir ke bawah ke Peluang . Bagian ini memberikan saran khusus untuk meningkatkan waktu pemuatan situs web Anda.

Di sini, Anda mungkin melihat lansiran yang memberi tahu Anda untuk Menghilangkan sumber daya pemblokiran perenderan . Meskipun pesan ini dapat merujuk ke file JavaScript, mungkin juga menandakan bahwa Anda perlu membuat CSS penting.

Cara menghasilkan CSS kritis di WordPress

Sekarang setelah Anda memahami lebih banyak tentang CSS kritis WordPress dan mengapa itu penting, saatnya untuk membuatnya! Terlepas dari tingkat keahlian Anda, Anda dapat dengan mudah mempelajari cara mengoptimalkan pengiriman CSS di WordPress dengan mengikuti tutorial ramah pemula kami.

Metode 1: Hasilkan CSS kritis dengan plugin

Meskipun Anda dapat membuatnya sendiri, mengoptimalkan pengiriman CSS dengan plugin WordPress seringkali lebih mudah. Alat yang tepat dapat secara otomatis menunda CSS yang kurang penting. Plus, Anda tidak perlu mengedit kode apa pun secara manual.

Jetpack Boost dapat dengan cepat meningkatkan kinerja pemuatan situs Anda. Setelah proses penyiapan sederhana, Anda dapat menggunakan plugin ini untuk membuat CSS penting, menunda JavaScript yang tidak penting, dan banyak lagi.

Untuk mulai menggunakan Jetpack Boost, instal dan aktifkan di WordPress. Kemudian, Anda akan menerima skor berdasarkan kinerja situs web Anda saat ini.

Dengan plugin gratis, Anda akan melihat opsi untuk Mengoptimalkan pemuatan CSS . Alternatifnya, Anda dapat meningkatkan ke langganan berbayar untuk menghasilkan CSS penting secara otomatis. Ini akan membantu menghindari keharusan membuat ulang CSS setiap kali Anda membuat perubahan.

Untuk mengaktifkan CSS kritis, cukup gunakan sakelar di sisi kiri. Demikian pula, Anda dapat menunda JavaScript yang tidak penting dan mengaktifkan pemuatan lambat untuk gambar. Gabungan, pengaturan ini dapat secara signifikan mengurangi waktu pemuatan halaman dan memungkinkan pengunjung melihat konten Anda lebih awal.

Metode 2: Menghasilkan CSS kritis secara manual

Jika Anda tidak ingin menggunakan plugin, Anda juga dapat membuat CSS kritis secara manual. Penting untuk diingat bahwa metode ini melibatkan pengeditan kode situs Anda, sehingga bisa menjadi proses yang lebih rumit bagi pemula.

Langkah 1: Cadangkan situs web Anda

Untuk memulai, Anda ingin membuat cadangan situs WordPress Anda. Jika Anda membuat kesalahan pada file situs, Anda dapat dengan mudah kembali ke versi tersimpan ini. Dengan cara ini, Anda tidak akan kehilangan data penting apa pun.

Jika Anda perlu mengelola cadangan dengan mudah, Anda dapat menginstal plugin Pencadangan Jetpack VaultPress. Alat ini menyimpan cadangan di luar situs dan menyediakan pemulihan sekali klik, meskipun situs Anda benar-benar mati.

Berikut cara memulainya:

Buka Plugin → Tambahkan baru di dasbor WordPress Anda. Cari “Jetpack VaultPress Backup” dan klik Install now → Activate .

Kemudian, Anda akan melihat jendela baru yang memungkinkan Anda menyiapkan plugin. Klik Siapkan Jetpack .

Kemudian, hubungkan situs Anda ke akun WordPress.com Anda. Setelah Anda diarahkan kembali ke situs Anda, klik Tingkatkan sekarang untuk melihat beberapa opsi untuk paket Pencadangan Jetpack VaultPress.

Minimal, Anda memerlukan rencana Pencadangan, tetapi Keamanan dan Lengkap memberikan alat tambahan untuk melindungi, mengembangkan, dan mempercepat situs Anda.

Pencadangan pertama Anda akan dimulai secara otomatis, dan Anda dapat memeriksa progresnya dengan membuka Jetpack → Pencadangan di dasbor WordPress Anda.

Jika terjadi kesalahan selama beberapa langkah berikutnya, cukup kembali ke laman ini dan tekan Pulihkan ke titik ini . Ini akan mengembalikan situs Anda ke versi lama, menghilangkan kesalahan yang terjadi.

Langkah 2: Gunakan generator CSS kritis

Setelah mengetahui bahwa situs web Anda dicadangkan, Anda dapat mulai membuat CSS penting. Salah satu cara termudah untuk melakukannya adalah dengan generator CSS kritis. Alat ini akan secara otomatis menghasilkan CSS penting Anda, mencegah Anda membuat kode secara manual.

Pertama, buka Generator CSS Kritis CoreWebVitals. Masukkan URL untuk situs web Anda atau halaman tertentu yang ingin Anda optimalkan. Lalu, tekan Generate critical CSS .

Setelah selesai memuat, Anda akan melihat kode CSS dibuat di kotak teks. Salin kode ini.

Setelah Anda menyimpan kode ini, Anda dapat menyisipkannya di situs web Anda!

Langkah 3: Sebariskan CSS kritis

Saat seseorang mengunjungi situs web Anda, browser mereka akan mengambil file situs Anda dari server. Ini pertama-tama akan memeriksa bagian <head> untuk konten yang diperlukan selama proses penguraian. Kemudian, itu akan melanjutkan merender konten <body>.

Untuk memprioritaskan CSS penting, letakkan di bagian <head> file Anda. Ini disebut inlining. Saat Anda menyisipkan CSS, browser meminta agar lembar gaya ini diambil sebelum merender halaman lainnya.

Intinya, menyisipkan CSS akan menempatkan kode di tempat yang perlu digunakan. Jadi, browser pengunjung tidak perlu mengurai file yang memblokir render sebelum menampilkan konten target.

Setelah Anda menyalin CSS penting yang dihasilkan, Anda dapat memasukkannya ke dalam file Anda. Arahkan ke folder public_html Anda melalui FTP. Lalu, buka konten-wp → tema → tema aktif Anda dan buka file header.php .

Di file header ini, cari tag <title>. Di bawahnya, tambahkan CSS penting menggunakan tag <style>. Terakhir, pilih Perbarui File .

Pertanyaan yang sering diajukan (FAQ)

Sejauh ini, kita telah membahas CSS kritis dan cara membuatnya. Jika Anda masih memiliki pertanyaan tentang menyisipkan CSS di situs web Anda, kami akan menjawabnya di sini!

Bisakah menghasilkan CSS kritis merusak tampilan situs Anda?

Jika dilakukan dengan tidak benar, membuat CSS penting dapat berdampak negatif pada tampilan dan tata letak situs Anda. Untungnya, Anda dapat membalikkan perubahan apa pun hanya dengan mengembalikan cadangan yang disimpan dari situs WordPress Anda. Menggunakan Cadangan Jetpack VaultPress, Anda dapat melihat log aktivitas dan memulihkan versi lama situs Anda dengan satu klik.

Selain itu, Anda dapat menggunakan plugin seperti Jetpack Boost untuk mengaktifkan dan menonaktifkan CSS penting kapan pun diperlukan. Pengaturan sederhana ini dibuat sesuai dengan praktik terbaik WordPress, sehingga kecil kemungkinannya untuk memengaruhi situs Anda di bagian depan.

Apa lagi yang bisa saya lakukan untuk mengoptimalkan kode CSS saya?

Jika Anda ingin lebih mengoptimalkan CSS di situs Anda, pertimbangkan untuk mengecilkannya. Anda akan menghapus kode yang tidak diperlukan selama minifikasi CSS untuk mengurangi ukuran file CSS.

Kode CSS Anda kemungkinan besar memiliki spasi dan jeda baris agar lebih mudah dibaca. Karena browser dapat memproses kode tanpa elemen tambahan ini, Anda dapat menghapusnya. Ini mengurangi sumber daya dan waktu yang diperlukan untuk menjalankan file.

Anda juga dapat menghapus CSS yang tidak digunakan sama sekali. Dengan mengurangi file Anda menjadi kode yang diperlukan saja, situs web Anda akan mulai memuat lebih cepat.

Apa lagi yang bisa saya lakukan untuk meningkatkan kecepatan halaman saya?

Salah satu cara terbaik untuk mempercepat situs Anda adalah dengan meningkatkan Core Web Vitals Anda. Menggunakan alat seperti Wawasan PageSpeed, Anda dapat mengidentifikasi elemen yang tidak dioptimalkan seperti sumber daya yang memblokir perenderan.

Karena browser memuat kode situs Anda dari atas ke bawah, proses pemuatan dapat dengan mudah diinterupsi oleh JavaScript. Dengan menunda penguraian JavaScript, pengunjung tidak perlu menunggu skrip dimuat sebelum mereka melihat konten Anda.

Selain itu, pertimbangkan untuk menerapkan pemuatan lambat untuk gambar. Dengan pengaturan ini di Jetpack Boost, gambar di paro bawah tidak akan dimuat hingga pengunjung menggulir ke bawah. Ini dapat mencegah situs web Anda memuat setiap gambar secara bersamaan, menunda proses rendering.

Terakhir, Jaringan Pengiriman Konten (CDN) dapat mempercepat situs web Anda secara signifikan. Alih-alih mengandalkan satu server, CDN menggunakan sistem pusat data di seluruh dunia. Opsi seperti CDN Jetpack dapat meningkatkan pengiriman konten untuk gambar dan file statis.

Optimalkan pengiriman CSS di WordPress

Jika Anda mencoba meningkatkan pengiriman konten situs web, penting untuk menghilangkan sumber daya yang memblokir perenderan. Karena CSS yang tidak dioptimalkan dapat menunda proses rendering, ada baiknya membuat CSS kritis. Meskipun melakukan ini tidak akan secara langsung meningkatkan waktu pemuatan, ini akan memungkinkan pengunjung untuk melihat konten paruh atas lebih cepat.

Untuk mengulasnya, berikut cara generate critical CSS di WordPress:

1. Hasilkan CSS kritis dengan plugin seperti Jetpack Boost.
2. Gunakan Generator CSS Kritis.

Dengan Jetpack Boost, Anda dapat mengoptimalkan CSS tanpa mengedit kode apa pun. Setelah mengunduh dan mengaktifkan plugin, Anda dapat menghasilkan CSS penting hanya dengan satu klik!