Cara Meraih Skor Kecepatan > 90 dan Melejitkan Waktu Muat Website < 2 Detik

Hindari CSS Yang Menghalangi Konten

Render-Blocking CSS adalah CSS yang menghalangi suatu halaman web untuk bisa ditampilkan secara cepat. Setiap file CSS yang ada akan menunda tampilnya halaman web karena browser akan menunggu untuk semua CSS dimuat sampai bisa menampilkan isinya. Google menyarankan untuk melakukan optimalisasi pengiriman CSS agar konten bagian atas (above-the-fold) yang bisa langsung dilihat oleh pengunjung tanpa harus menggulung layar tidak terhalang.

Semakin besar file CSS, semakin lama penundaan terjadi. Dan semakin banyak file CSS yang dipergunakan, semakin lama juga halaman dimuat. CSS penghalang ini buruk untuk website karena akan membuatnya menjadi lebih lambat.

Cara mengurangi CSS Penghalang Konten
Ada beberapa hal yang bisa Anda lakukan untuk mengatasi hal ini :

  1. Menggunakan file-file CSS secara tepat
    Ada banyak cara untuk menggunakan CSS, dan beberapa diantaranya kurang tepat dilakukan di era mobile ini.

    • Jangan menggunakan @import untuk pemanggilan file CSS
    • Jangan menggunakan CSS dalam tag HTML (seperti div atau h1)
    • Gunakan tidak lebih dari satu file CSS external dengan ukuran yang wajar (kurang dari 75k)
    • Beri label secara tepat pada CSS, sebagai misal :
      <link href=”print.css” rel=”stylesheet” media=”print”>

      <link href=”other.css” rel=”stylesheet” media=”(min-width: 40em)”>
  2. Mengurangi jumlah file CSS di jalur kritis
    Jalur kritis adalah serangkaian peristiwa yang harus diproses sebelum menampilkan suatu halaman web. Memberi label secara tepat pada CSS adalah merupakan salah satu cara untuk mengurangi file CSS di jalur kritis. Secara prinsip ada 2 cara untuk mengurangi file CSS, yaitu :

    • Menggabungkan beberapa file CSS menjadi satu file CSS
    • Memasukkan isi file CSS dalam bagian kepala HTML (inline CSS)
  3. Menggunakan sesedikit mungkin file CSS di semua halaman web

Jika Anda tidak menguasai pengkodean CSS, pergunakanlah plugin WordPress berikut ini untuk mengurangi CSS yang menghalangi konten :

  1. Defer CSS Addon for BWP Minify
  2. CSS Above The Fold
  3. WP Rocket (Premium)

{ 4 comments… add one }
  • Jhon September 10, 2016, 2:49 pm

    Terima kasih banyak atas informasinya. Sangat informatif bagi saya yang sedang membangun website.

    Reply
  • Azhar MZ March 17, 2016, 9:09 pm

    Maksudnya gimana gan Google menyarankan agar website Anda memiliki waktu respon kurang dari 2 detik (2 ms), padahal di https://developers.google.com/speed/docs/insights/Server rekomendasinya di bawah 200 milisekon/milidetik, jika dikonversi ke detik maka 200 ms = 0,2 s (detik)

    Reply
  • kayzip October 8, 2015, 11:05 am

    apa metode keep alive bisa juga diterapkan untuk joomla? mohon pencerahannya?

    Reply
    • PLACESIANA October 9, 2015, 9:57 am

      Metode Keep-Alive bisa dipergunakan dengan CMS apa saja, termasuk Joomla.
      Bahkan website yang dibuat dengan HTML editor biasa juga bisa memanfaatkan metode ini … asalkan mempunyai akses ke konfigurasi web server.

      Reply

Leave a Comment

{ 4 comments }