Memahami CSS WordPress
Sebelum kita masuk, mari kita pahami cara kerja CSS biasa di WordPress.
Setiap tema WordPress terdiri dari style.css yang berisi semua kode yang diperlukan untuk menata situs Anda. Pengembang tema harus mendukung semua fitur WordPress yang mencakup posting blog, komentar, halaman produk, halaman keanggotaan, formulir, dll. Plugin lain yang Anda instal juga dapat menambahkan lembar gaya css serupa.
Hal ini bisa membuat file css membengkak dan berukuran besar hingga 200kb atau bahkan lebih.
Apa itu CSS Jalur Kritis?
Saat file CSS Anda berkembang, browser Anda perlu mengunduh file besar itu, menguraikannya, dan merendernya. Juga dikenal sebagai pemblokiran render. Ini juga akan menambah render bermakna pertama dan render bermakna pertama.
Critical Path CSS adalah CSS yang diperlukan untuk merender konten di atas pada setiap halaman web. Seperti namanya, CSS "kritis", yang membantu browser menggambar dan merendernya dengan cepat sebelum memuat file CSS lengkap.
Biasanya css dari jalur kritis disematkan di header dan file css sumber dimuat secara asinkron atau di footer untuk kemudahan penggunaan.
Mengapa CSS Jalur Kritis begitu penting?
Anda pasti sudah melihat peringatan dari alat seperti Google PageSpeed Insights atau GTmetrix yang mengatakan "optimalkan pengiriman css" atau "tunda css yang tidak digunakan".
CSS penting tidak ada hubungannya dengan waktu buka halaman. Itu tidak menambah/mengurangi waktu pemuatan. Tetapi memberikan pengalaman pengguna yang jauh lebih baik. Ini membantu untuk cepat "render" atau "mewarnai" halaman web.
- Meningkatkan Pengundian Konten Pertama (FCP)
- Meningkatkan Pembayaran Signifikan Pertama (FMP)
- Hapus CSS yang tidak digunakan (secara teknis jangan hapus, tetapi prioritaskan CSS "berguna")
Berikut adalah dua tangkapan layar blog saya dengan dan tanpa CSS kritis.
Seperti yang Anda lihat di bagian "tidak ada jalur css kritis", butuh hampir 5 detik untuk menunjukkan kepada pengguna sesuatu yang berguna di perangkat seluler. Peramban harus membuat permintaan HTTP tambahan ke file css, mengunduhnya, menguraikannya untuk mulai merender. Tetapi ketika menggunakan css kritis, semua css yang diperlukan harus sebaris dan browser dapat mulai merender segera setelah memuat file HTML dalam satu detik atau kurang.
Bagaimana cara membuat CSS penting di WordPress?
Ada beberapa cara untuk menghasilkan CSS penting di WordPress.
Menggunakan plugin caching
WP Rocket adalah plugin caching premium yang bekerja dengan sangat baik.
Salah satu alasan saya menggunakan WP Rocket di setiap situs adalah generasi CSS yang penting itu sendiri. Mereka menghasilkan CSS Kritis secara terpisah untuk halaman beranda, halaman posting, halaman kategori, halaman produk, dll. dan menyematkannya. Mereka akan mengembalikan CSS penting jika ada perubahan pada tema atau pengaturan.
Semuanya bisa dilakukan dengan satu sentuhan tombol.
Plugin caching lain yang dapat menghasilkan CSS penting
Swift Performance dan LiteSpeed (memerlukan server LiteSpeed/OpenLiteSpeed) adalah plugin serupa yang dapat menghasilkan CSS Kritis. Kedua plugin ini memiliki cloud dan cache penuh yang terpasang di server mereka.
Menggunakan Pengoptimalan Otomatis + Generator CSS Kritis Gratis
Ada alat online pihak ketiga yang menyediakan css penting dengan memasukkan URL situs Anda. pegasaa adalah alat gratis yang hebat.
Berikut cara melakukannya:
Langkah 1. Buka https://pegasaas.com/critical-path-css-generator/ dan masukkan URL Anda. Salin "Critical Path CSS" yang dihasilkan.
Langkah 2 Dalam pengaturan optimasi otomatis (aktifkan pengaturan lanjutan), di bawah "Opsi CSS", centang "Sebaris dan Tunda CSS" dan rekatkan CSS yang disalin.
Kelebihan:
- Bebas
Minus:
- Tidak ada CSS penting yang terpisah untuk jenis halaman yang berbeda (mis: halaman beranda, halaman posting, halaman kategori, halaman produk, dll.)
- Jangan membangun kembali secara otomatis pada perubahan tema/pengaturan
Mengapa WordPress sendiri tidak dapat menghasilkan CSS penting?
Seperti yang mungkin Anda perhatikan, membuat jalur kritis css memungkinkan layanan eksternal. Jadi mengapa WordPress sendiri tidak bisa membuatnya?
Membuat CSS Kritis dimungkinkan oleh proyek sumber terbuka seperti Kritis (oleh Google), CriticalCSS atau penthouse. Semua proyek ini didasarkan pada NodeJS, bukan PHP. Jadi, Anda perlu menginstal NodeJS di server Anda. Sebagian besar penyedia hosting bersama/terkelola tidak mengizinkan ini karena beberapa alasan.
