TeknoJurnal
  • Data
  • Tentang TeknoJurnal
    • Tim TeknoJurnal
    • Layanan Kami
  • Kontak Kami
TeknoJurnal
Reading now
Web Development

Optimalkan Performa CSS Situs Web Berbasis WordPress-mu dengan Cara Ini

Sep 11, 2017
Gaming PC

Ingin Rakit PC Gaming Sendiri Yang Murah? Coba Rekomendasi Rakitan ini

Sep 07, 2017
Indonesia Android Kejar Hackathon Logo

Google Resmi Umumkan Jawara Indonesia Android Kejar Hackathon 2017

Sep 07, 2017
ASUS Zenfone 4 Max Pro

ASUS Resmi Luncurkan Ponsel ZenFone 4 Max Pro

Sep 06, 2017
Sertifikasi Google Mobile Web Specialist

Google Luncurkan Program Sertifikasi untuk Pengembang Aplikasi Web

Sep 05, 2017
Lapor

Punya Keluhan Tentang Instansi Pemerintahan Atau Lainnya? Langsung Aja Gunakan LAPOR!

Sep 04, 2017
gojek

Jumlah Pengguna Tranportasi Online Hampir Mencapai 50% dari Total Pengguna Internet

Load more

Optimalkan Performa CSS Situs Web Berbasis WordPress-mu dengan Cara Ini

Featured Panduan By Firman Nugraha / September 12, 2017
next
Use ← → keys to navigate
  • A+ A-

Web Development[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.

Baca Juga:

  • Cari Tahu Tentang Pengembangan Web dengan AMP di AMP Roadshow Jakarta
  • Ingin Mencari inspirasi Produk Internet of Things? Cek Situs Ini Saja
  • Buat Desain Prototype Aplikasi Mobile dan Web Secara Interaktif Dengan Tools Marvel

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.

TwitterFacebookWhatsAppGoogle+LinkedIn
Tags: Critical Path CSS, CSS, website, wordpress

You may also like

Enkripsi Web
Aplikasi Featured Panduan By Firman Nugraha / November 25, 2016

Cara Membuat dan Memasang Sertifikat SSL pada Website Dengan Gratis

Berita ziliun By Sukindar / October 21, 2016

Hive – Platform Kolaborasi yang Gabungkan Trello, Slack, dan Dropbox

Berita ziliun By Sukindar / May 13, 2016

WordPress akan Rilis Ekstensi Domain .blog pada Tahun 2016

Copyright © 2021 by TeknoJurnal.
Proudly powered by WordPress. Theme by DesignWall.
Tutup Iklan X