Cara Mengatasi Optimize CSS Delivery di PageSpeed

Cara Mengatasi Optimize CSS Delivery di PageSpeed

Apa itu CSS Delivery?


CSS Delivery atau dalam bahasa Indonesianya pengiriman CSS adalah sebuah proses dimana suatu CSS eksternal diantarkan ke blog anda, lalu CSS tersebut bekerja. Contohnya seperti ketika anda menambahkan FontAwesome atau font tambahan kedalam blog.

Lalu, mengapa Google PageSpeed Insights membuat saran "Optimize CSS Delivery"?


Dikarenakan apapun itu bentuknya, kalau dibuat eksternal, pasti lebih berat ketimbang dibuat inline. Terlebih lagi biasanya orang menghosting diluar, pasti akan semakin melambat.

Jadi Google meminta anda untuk mengoptimasi sedemikian rupa CSS eksternal di blog anda agar terhindar dari:
  1. Pengunjung melihat laman blank/putih saat sedang loading
  2. Masalah baru di PageSpeed Insights, yaitu Prioritize Visible Content
  3. CSS diload lebih lambat dari biasanya

Kalau anda mendapatkan masalah ini di PageSpeed Insights, sudah pasti skor kecepatan blog anda berkurang.

Cara Mengatasinya?


Cara mengatasinya ada 3 menurut saya. Tetapi sebelum anda lanjut ke cara mengatasinya, ada baiknya untuk membackup terlebih dahulu template agar bila terjadi sesuatu bisa dikembalikan seperti semula.

Pertama, silakan anda cek terlebih dahulu CSS mana yang membuat masalah. Disini saya beri contoh linknya (hanya contoh):

http://www.kodejarwo.com/style/08.08.2002/main-blog.css
Pastikan bahwa akhiran dari url tersebut adalah (.css) atau nomor.

Kemudian simpan link tersebut karena akan digunakan untuk memperbaikinya nanti.

Cara 1: Penambahan atribut ASYNC


Sekarang, anda lihat struktur HTML dari link tersebut. Pasti mirip seperti ini:

<link rel="stylesheet" href="link.css"  type="text/css">

Lalu tambahkan atribut async didepannya, sehingga menjadi seperti ini:

<link async='async' rel="stylesheet" href="link.css"  type="text/css">

Simpan template, lalu cek kembali kecepatan blog anda di PageSpeed Insights.

Kegunaan dari penambahan atribut asynchronous ini adalah supaya CSS diload ketika blog sudah diload sepenuhnya. Jadi CSS baru akan diload ketika loading blog sudah selesai. Cara ini dibilang cukup ampuh juga untuk mengatasi masalah Render Blocking serta agar tidak terjadi layar blank ketika blog loading.

Bila cara diatas masih belum dapat mengatasi masalah, lanjut cara kedua.

Cara 2: Pemindahan Script


Silakan anda cek kembali, dimana script CSS anda tersebut ditempatkan. Bila ditempatkan didaerah ini:

<html>

  <head>
        scriptnya 
  </head>

  <body>
  </body>

</html>

Segera pindahkan menjadi disini (diatas </body>):

<html>

  <head>
  </head>

  <body>
        scriptnya 
  </body>

</html>

Simpan template, dan lihat kembali hasilnya. Bila masih belum work juga, silakan lanjut ke cara ketiga.

Cara 3: CSS Ready


Cara ini sebenarnya mirip dengan cara pertama, hanya saja menggunakan Javascript. Sekarang, silakan anda catat semua link CSS eksternal yang membuat masalah di kecepatan blog di notepad. Lalu, hapus semua link tersebut di HTML anda.

Setelah itu, silakan anda tambahkan kode dibawah ini tepat diatas kode </body>

<script type='text/javascript'>//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("link CSS eksternal");
//]]></script>

Silakan anda ganti tulisan yang di highlight dengan link CSS eksternal yang sudah dicatat di notepad tadi.

Bila link CSS terdapat lebih dari satu, anda cukup menambah kodenya menjadi seperti ini:

<script type='text/javascript'>//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("link CSS eksternal 1");
loadCSS("link CSS eksternal 2");
loadCSS("link CSS eksternal 3");
//]]></script>

Setelah itu, simpan template dan cek kembali skor blog anda.

Bagaimana? Apakah ketiga cara diatas dapat menyelesaikan masalah anda?

Minggu, November 19, 2017 - tanpa komentar

0 komentar untuk Cara Mengatasi Optimize CSS Delivery di PageSpeed.

Silakan masukkan komentar anda. Jangan habiskan waktu hanya untuk melakukan SPAM disini.


Perlihatkan Semua Komentar Tutup Semua Komentar