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?