Avoid CSS Import

Google Page Speed merekomendasi agar menghindari impor CSS karena impor CSS dapat mengakibatkan kecepatan loading situs web berkurang. Padahal slogan Google Page Speed adalah “Make your web site faster”. Dengan demikian “Avoid CSS @import” menjadi aspek penilaian dalam Google Page Speed.

Pada Child Themes Twenty Twelve perintah @import digunakan untuk menggabungkan CSS induk dengan CSS anak (child). Kode CSS pada child theme ditulis hanya bagian yang ingin diubah dari CSS induk, namun kedua fungsi dari dua CSS tetap dieksekusi browser.

Salah satu keuntungan impor CSS adalah tidak perlu menulis ulang semua kode dalam CSS, cukup tambahkan kode @import CSS yang diimpor namun kedua kode tetap diekseskusi. Kode CSS kedua yang ditambahkan lalu digabungkan dari CSS impor. Metode @import merupakan pengubahan kode CSS tetapi tanpa menyentuh kode CSS induk yang diimpor. Apabila menggunakan theme yang sering di-update CSS-nya, modifikasi di child theme CSS tidak ikut berubah, meskipun CSS yang diimpor telah berubah.

Makna CSS @import

Perintah @import menyuruh browser agar menginput style sheet dari alamat URL kemudian menggunakan CSS dari kedua sumber bersama-sama untuk memformat tampilan halaman web. Contoh perintah @import sebagai berikut:

 Kerugian @import CSS adalah menambah waktu tunggu untuk memanggil kode CSS, dari yang sebelumnya satu file menjadi dua file. Karena jumlah file yang dipanggil bertambah, maka disarankan oleh Google Page Speed agar dihindari agar situs makin cepat.

Cara menghindari impor CSS atau “Avoid CSS @import”

Salah satu cara menghindarinya gampang yaitu hapus @import lalu panggil alamat URL file CSS dari functions.php. Kemudian dihubungkan dengan memberi tautan pada elemendari dokumen HTML untuk memanggil URL tersebut. Tetapi cara ini masih memanggil dua file sehingga kurang efisien. Cara paling praktis untuk mencegah “Avoid CSS @import” Google Page Speed  adalah menggabung dua kode CSS menjadi satu file. Kode yang ingin ditambah atau dikurangi ditulis langsung pada file CSS induk (tidak dibuat child themes). Risikonya jika theme di-update kode yang telah ditulis akan tertimpa dan harus menulis ulang kode modifikasi tampilan theme.

Apabila kode CSS pendek atau ukuran file kecil Google Page Speed memberi solusi terbaik “Inline Small CSS”. Pengecilan kode dapat dilakukan dengan memisah kode CSS pada laman home page, single pege, archive, dan lain-lain. Ketika pengujung mengakses laman home, dipanggil hanya kode yang digunakan untuk memformat home saja, begitu pula ketika akses single page dan lain-lain.

Sedangkan “Inline Small CSS” yaitu menempatkan kode style sheet disisipkan (embed) pada elemendi dokumen HTML.  Contoh perintah

Tetapi menyisipkan kode CSS pada dokumen HTML bukan merupakan cara terbaik, terutama CSS berukuran besar. Padahal kelebihan file CSS yang telah diunduh oleh browser akan disimpan pada cache dan digunakan berulang-ulang untuk memformat seluruh halaman web di komputer pengunjung. Sedangkan jika menyisipkan kode pada dokumen HTML, setiap buka halaman web akan mengunduh kode CSS.

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *