[ilustrasi oleh Boskampi]

Bermula dari notifikasi dari Google yang mengingatkan saya untuk mengoptimalkan lebih lanjut mengenai web berbasis WordPress yang saya miliki, saya pun bereksperimen untuk mengoptimalkannya dari sisi CSS.

Membuat situs web dengan menggunakan WordPress memang bukan hal yang sulit. Namun begitu di luar proses instalasi WordPress yang sederhana, sebetulnya masih banyak yang perlu dioptimalkan setelah webnya dibuat dan salah satunya adalah CSS.

Seperti yang sudah umum diketahui, CSS adalah komponen web yang bertugas untuk mengatur tampilan dari sebuah web. Biasanya, mayoritas kodingan CSS disimpan dalam file terpisah yang kemudian diimpor ke halaman yang diinginkan.

Nah, file CSS eksternal ini akan menjadi masalah jika diimpor dalam jumlah banyak atau berukuran besar karena ini akan dapat memperlambat proses penampilan web ke pengguna web. Solusi untuk ini adalah dengan mengimpor file CSS secara asynchornous dan mengabungkan file-file tersebut ke dalam satu atau beberapa file saja.

Untuk melakukan hal tersebut tidaklah sulit di WordPress karena sudah banyak plugin yang menyediakan fungsi tersebut. Namun ketika memproses file CSS secara asynchronous, masalah lain muncul yaitu web ketika detik-detik awal dibuka akan nampak berantakan dan banyak area kosong. Ini karena file CSS belum diproses secara penuh.

Oleh karena itu selain perlu mengimpor secara asynchronous, kita juga perlu menggunakan metode Critical Path CSS untuk mendesain layout web. Critical Path CSS adalah kodingan CSS yang diperlukan untuk medesain bagian awal sebuah web, sehingga pengguna web tidak melihat webnya berantakan.

Bagian bawah web sebetulnya masih agak berantakan ketika menggunakan metode ini namun itu tidak masalah karena pengguna web sudah pasti akan membaca konten bagian atas web terlebih dahulu sembari server memproses kesuruhan CSS dari belakang.

Simak video ini untuk lebih lanjut tentang Critical Path CSS:

Optimalisasi seperti ini masuk akal untuk pengguna web yang tidak memiliki kecepatan internet yang cepat dan stabil seperti di Indonesia. Ini membuat pengguna web tidak perlu menunggu lama untuk menikmati sebuah halaman web.

Untuk melakukan optimalisasi ini di WordPress, ada 2 plugin yang bisa dicoba yaitu:

• Autooptimize, untuk mengkombinasikan file CSS dan JavaScript sehingga lebih optimal ketika diimpor ke dalam halaman web.
• Above the Fold Optimization, untuk mengimpor file CSS dan JavaScript secara asynchronous serta mengeset Critical Path CSS.

Langkah-langkah untuk memulai proses optimalisasi CSS di WordPress ini adalah sebagai berikut:

1. Cari dan buka file CSS yang bertanggung jawab sebagai pengatur utama dari layout web kamu (biasanya ada di wp-content/themes/[NAMA THEME]/style.css situs kamu).
2. Jika kamu menggunakan child theme, cari dan buka juga file CSS-nya.
3. Jika file CSS yang ditemukan ada lebih dari satu, gabungkan kodingan CSS dari seluruh file CSS tersebut ke dalam sebuah teks editor.
4. Kopikan kodingan CSS tersebut ke dalam tool Critical Path CSS Generator (jangan lupa untuk memasukkan URL lengkap web kamu dalam tool tersebut).
5. Klik tombol Create Critical Path CSS dan lalu hasilnya di-minify agar kodingan CSS tidak memakan tempat (bisa menggunakan tool cssminifier.com untuk minify).
6. Simpan Critical Path CSS yang dihasilkan dan yang sudah di-minify tersebut ke dalam teks editor. Sekarang saatnya untuk setup plugin WordPress terlebih dahulu.
7. Instal dan aktivasikan plugin Autoptimize.
8. Centang bagian Optimize HTML Code, Optimize JavaScript Code, Optimize CSS Code, dan Inline and Defer CSS.
9. Klik tombol Save Changes and Empty Cache.
10. Instal dan aktivasikan plugin Above the Fold Optimization.
11. Di setelan Above the Fold Optimization pada tab CSS, centang bagian Optimize CSS Delivery, Enhanced loadCSS, Optimize Web Fonts, dan Auto-detect enabled. Lalu set bagian webfont.js Load Method ke Async dan Load Position ke Footer.
12. Klik tombol Save.
13. Buka tab Critical CSS dan saatnya memasukkan kodingan critical path CSS yang telah dibuat sebelumnya ke dalam input teks Critical Path CSS.
14. Klik tombol Save.

Jika kamu melakukan hal ini, niscaya skor webmu di Google Page Insight akan meningkat. Namun begitu perlu diperhatikan juga karena tiap situs web adalah unik, ada kemungkinan butuh setelan tersendiri agar web dapat tetap tampil dengan baik.