How to Create URL CSS Asynchronous - Replace CSS to Script Async

Seperti yang telah kita ketahui bersama bahwa untuk meningkatkan kecepatan loading blog perlu tindak lanjut ekstra. Seperti salah satunya adalah dengan merubah Script standar menjadi Asinkron.

Untuk penerapan Script Asynchronous saya rasa tidak menjadi kendala, kita cuma perlu menambahkan async didalam elemen kode HTML script.
Ex. <script async="async" src="code.js" type="text/javascript"></script>

Lantas, bagaimana cara membuat CSS Asynchronous ?

Ketika kita coba mengecek situs di Google page speed, maka akan ditemukan beberapa penyebab yang membuat situs tidak maksimal ketika diload di beberapa perangkat, seperti desktop dan mobile/seluler.

Google sangat ingin membuat kita para blogger menjadi lebih tahu dengan kondisi blog kita, untuk itu dia menciptakan alat-alat yang dapat memudahkan kita memperbaiki beberapa kesalahan yang mungkin ada didalam blog dengan lebih mudah.

Coba Anda perhatikan screenshot hasil perbaikan situs ini:

Pada gambar diatas hasilnya sudah lumayan bukan?
Hampir tidak ada kesalahan ( 97% & 99%)

Ada beberapa perubahan yang saya buat, salah satunya adalah menghapus memperbaiki CSS yang memblokir perenderan.
  1. Silahkan Anda cari CSS yang memblokir tersebut
  2. Masukkan kode berikut ini diatas </body>
  <script>
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'style.css'; //ganti dengan URL CSS Style
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
    </script>
Info Lanjutan
Ada kemungkinan bakal terjadi perbedaan skor pada beberapa halaman blog Anda.
Hal ini dikarenakan penilaian dilakukan untuk satu halaman penuh.
**Jika situs Anda yang beralamat page.html hanya berisi artikel saja & tanpa gambar maka otomatis akan lebih ringan ketimbang page2.html yang memuat beberapa gambar sekaigus.
Source: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini