Cara Menghilangkan Render-Blocking Scripts dan CSS Blogger
Karena kecepatan dalam loading atau memuat sebuah halaman blog sangat penting, inilah yang menjadi alasan saya menulis tentang bagaimana membuat blog atau situs memuat lebih cepat
Apa itu Render-Blocking Scripts dan CSS?
Render blocking script biasanya merupakan skrip dari sumber eksternal yang disebut dengan tag <srcipt src="...../files/style.css"/> dan masalahnya terletak pada URL atau penyimpanan file javascript. Beberapa masalah umum dengan skrip eksternal adalah:
1. URL yang berisi file Javascript dialihkan ke beberapa URL dan kemudian mencapai file Javascript.
2. URL yang berisi file Javascript merespon secara perlahan karena kesalahan server.
3. URL yang berisi file Javascript terkadang tidak merespon karena status server down.
Mirip dengan file Javascript, ada beberapa file CSS yang tersimpan secara eksternal memiliki masalah yang sama seperti yang disebutkan di atas.
Cara Mengidentifikasi Render-Blocking Scripts
Untuk mengidentifikasi skrip pemblokiran atau css, Kamu perlu menggunakan PageSpeed Insights. Ini akan menunjukkan file script dan css yang menghalangi dan membuat load halaman Kamu lambat.
Cara Hapus Render-Blocking Scripts Dan CSS Dari Blogger
Langkah 1: Temukan skrip render-blocking dengan menggunakan Google PageSpeed Insights seperti yang ditunjukkan pada gambar di atas.
Langkah 2: Pergi ke dashboard blogger> Template> Edit Html.
Langkah 3: Cari script atau CSS dengan menggunakan CTRL + F di kode yang Kamu temukan untuk diblokir di alat PageSpeed Insights.
Langkah 4: Lakukan hal-hal berikut:
Untuk Javascript:
1. Tambahkan Tag "Defer"
Tag defer adalah tag yang menghentikan skrip saat memuat sehingga meningkatkan kecepatan pemuatan halaman blog. Untuk menambahkan tag defer ke javascript Kamu cukup tambahkan defer='defer' seperti yang ditunjukkan pada contoh di bawah ini:
<Script defer="defer" src="...file/code.js"/>
2. Tambahkan Javascript Eksternal secara internal:
Jika kamu melihat javascript saat memuat di blog, yang di alihkan atau membutuhkan waktu yang lama untuk memuat daripada menambahkan kode di atas </head> lebih baik memindahnya ke host lain seperti GitHub. baca caranya di sini
3. Hapus Blocking Code:
Jika kamu sudah mencoba cara di atas dan masih merasa bahwa skrip tersebut masih terasa berat maka hapus skrip atau salin dan tambahkan di Tata Letak sebagai gadget.
4. Gunakan "async" Tag:
Tag ini memberi tahu halaman bahwa kode yang disinkronkan akan dijalankan saat tersedia (avalible) dan tidak akan dijalankan bila tidak tersedia sehingga meminimalkan kecepatan pemuatan halaman. Untuk menambahkan tag async ke kode template cukup tambahkan async='async' karena blogger tidak menerima async saja. Berikut adalah contohnya:
<Script async="async" src="...file/code.js"/>
Untuk CSS:
1. Tambahkan CSS di <head>:
Jika kamu memiliki kode CSS yang tersimpan secara eksternal namun kamu memasukkannya ke dalam body dengan menggunakan kode di bawah ini:
<Link href="...file/code.css" rel ="stylesheet" type="text/css"/>
Cukup pindahkan di bawah <head> di template blog
2. Gunakan Github:
Jika hosting milikmu tidak merespons pada waktunya atau memiliki banyak pengalihan (seperti pada GOOGLE DRIVE), gunakan Github untuk menyimpan kode.
Langkah 5: Simpan template Anda dan Anda berhasil dilakukan.
Apa yang Harus Dilakukan Untuk Memblokiran Internal Javacript Atau CSS?
Jika kamu memiliki kode internal yang memblokir halamanmu saya sarankan untuk mencopotnya/membuangnya, karena kamu tidak dapat mengubahnya.
Dengan mengikuti langkah-langkah di atas kamu dapat menghapus pemblokiran javascript dan css namun jika kamu memerlukan kode tersebut dan kamu ingin menyimpannya namun meminimalkan kecepatan pemuatan maka jangan hapus kode tapi simpan di github atau di tata letak. kamu mungkin tidak melihat peningkatan alat di Google PageSpeed Insights namun pasti akan ada beberapa perbaikan yang akan kamu amati saat memuat halaman blog.
Saya harap posting ini bermanfaat bagi kalian, Terima kasih telah mengunjungi UNDI LIFE EPISODE. Jangan sungkan untuk meninggalkan komentar di bawah. keep blogging
Keyword Tag: Cara Menghilangkan Render-Blocking Scripts Dan CSS - Blogger, Blogger blog page loading speed, cara menghapus script dan css dari blog blogger, cara mempercepat blog, cara membuat blog lebih cepat loading.
No comments:
Post a Comment