Atasi Masalah Render-Blocking Javascript and CSS

Masalah render-blocking Javascript and CSS berlaku apabila, browser perlu download keseluruhan file Javascript atau CSS tersebut terlebih dahulu, dan barulah rupa webpage atau blog tersebut dapat di paparkan dengan sempurna.

Masalah mula muncul apabila browser kena tunggu lama untuk dapatkan file CSS atau Javascript tu sedangkan yang lain dah siap download dari Blogger. Blog akan kelihatan lambat untuk dipaparkan.

Cara Atasi

Ada 3 cara untuk mengatasinya.

1. Letakkan file CSS dan Javascript itu sebelum </body> tag.
2. Menggunakan kaedah defer.
3. Memasukkan code CSS dan Javascript itu ke dalam fail HTML utama.

Kaedah Defer

Gantikan defer.js dengan skrip JS luaran. Dengan cara ini, skrip ini hanya akan di download setelah keseluruhan web page di paparkan dengan sempurna.

Oops!

Tapi ingat ye, cara yang pertama tidak sesuai pada fail Javascript dan CSS yang diperlukan untuk menampakkan rupa web atau blog. Lazimnya file Jquery.

Tapi, code Javascript dan CSS seperti Facebook dan Syntax Highlighter atau widget-widget yang beri fungsi extra lazimnya boleh diletakkan di hujung file HTML (sebelum </body>).

Cara yang ketiga lebih ideal tetapi kena hati-hati sebab code Javascript yang kita extract keluar dari file .js nya adalah tidak di 'encode'. Kang, nanti Blogger report kata ada tag yang tak tutup.

Ada dua solusi

1. Encode file tersebut menggunakan servis HTML Encoder / Decoder
2. Menggunakan CDATA untuk escape. Contoh penggunaan CDATA adalah seperti di bawah

Kadangkala, cara CDATA tak dapat selesaikan masalah ini 100%. Tapi cara ini lebih baik sebab code Javascript itu lebih mudah untuk dibaca.

So, Nak Pakai Yang Mana?

Pada aku, cara yang terbaik adalah cara yang ketiga. Semuanya datang dari satu server.

Lagi sikit blog kita 'request' sumber-sumber luaran, lagi kurang kebergantungan blog kita dengan sumber luaran dan secara tidak langsung lebih cepat dan kurang risiko.