Trik Dan Tips Cara Mengatasi Javascript Dan Css Yang Memblokir Rendering Halaman

Cara Mengatasi Javascript dan CSS Yang Memblokir Rendering Halaman - Mengatasi duduk perkara javascript dan css yang memblokir rendering halaman paruh atas situs blog harus dilakukan secara perlahan dan teliti lantaran kesalahan dalam menghapus atau menghilangkan blokir rendering dari javascript dan css sanggup merusak beberapa serpihan situs (tampilan situs). Kamu mungkin khawatir dengan kata "blokir" dan berfikir itu akan mensugesti keberadaan situs anda di serp. Sebenarnya yang dimaksud dengan memblokir rendering halaman paruh atas yaitu penundaan pemuatan halaman sebelum sumber daya javascript maupun css tersebut dimuat. Ini merupakan duduk perkara umum dan tidak terlalu mensugesti index situs di serp namun jikalau terlalu banyak sumber daya javascript dan css yang memblokir rendering halaman akan mengakibatkan waktu pemuatan situs (loading) menjadi lebih usang dan alhasil secara tidak eksklusif hal tersebut memperlihatkan dampak jelek terhadap SEO (Search Engine Optimization).

Nah, kini saya akan membagikan cara mengatasi sumber daya javascript dan css yang paling umum mengakibatkan pemblokiran terhadap render halaman paruh atas dan berikut pola nya;

• <script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'type='text/javascript'/>

• <link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>

• <link href='//fonts.googleapis.com/css?family=Oswald' rel='stylesheet'/>

• <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"><\/script>

• <link href='//www.blogger.com/static/v1/widgets/2437439463-widget_css_bundle.css' type='text/css' rel='stylesheet'/>

Untuk mengetahui javascript dan css apa saja yang meblokir render halaman paruh atas pada situs anda silahkan gunakan tool Google PageSpeed Insights. Tempelkan url situs kemudian klik tombol analyze dan lihat hasil analisa yang ditampilkan apakah terdapat sumber daya javascript maupun css yang meblokir rendering situs anda menyerupai terlihat pada pola gambar di bawah ini.

Sumber daya javascript dan css yang memblokir rendering halaman paruh atas

Setelah mengetahui secara terang sumber daya javascript dan css yang memblokir rendering halaman paruh atas pada situs maka langkah selanjutnya yaitu mencari dan menemukan sumber daya tersebut di dalam html situs. Untuk situs blog (platform blogger) silahkan ikuti langkah ini.

1. Login ke Blogger > Template > Edit Html
2. Klik instruksi area kemudian tekan ctrl+f
3. Masukkan keyword pada kolom teks finder sesuai dengan javascript maupun css yang memblokir render misal;ajax.googleapis
4. Kemudian tekan enter untuk mencari

Setelah ditemukan maka tambahkan kode async='async' atau defer='defer' di belakang kode src=' sehingga script akan terlihat menyerupai pola dibawah ini;

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Atau

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Harus diingat bahawa asynchronous semua file .js (javascript) tidak selalu berjalan mulus dan sanggup mengakibatkan beberapa widget berubah bentuk bahkan tidak berfungsi. Makara sebelum menambahkan kode async='async' maupun defer='defer' silahkan backup template blog anda terlebih dahulu kemudian lakukan asynchronous javascript satu persatu (perlahan). Jika itu mengakibatkan perubahan yang berarti pada tampilan situs maka batalkan perubahan dengan menakan tombol undo (ctrl+z).

Lalu jikalau asynchronous javascript tidak sanggup dilakukan apakah kita berhenti atau membiarkan submer daya tersebut memblokir render halaman paruh atas situs? tentu saja tidak selain cara diatas masih ada trik lain untuk mengatasi duduk perkara javascript dan css yang memblokir render halaman paruh atas yaitu dengan cara memindahkan letak script tersebut.

Jika sebelumnya script contoh; ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js berada di area body maka pindahkan ke area head. Tepatnya diantara instruksi <head> dan </head>. Sebaliknya jikalau sebelumnya script berada di area head maka silahkan pindahkan ke area body (antara <body> dan </body>), tanpa menambahkan code asyncr.

Penting: Lihat pertinjau situs setiap melaksanakan perubahan dan uji kembali situs anda di Google PageSpeed Insights. Speed mungkin saja tidak berubah impulsif lantaran terkadang tool tersebut akan merefresh data situs dalam kurun waktu satu minggu. Namun kau sanggup eksklusif melihat apakah sumber daya javascript dan css yang memblokir rendering halaman paruh atas situs anda sudah hilang atau tidak.

ASynchronous File CSS

Asynchronous pada file css harus dicoba meskipun tidak selalu berhasil untuk beberapa file css, untuk mengatasinya kita sanggup memakai metode preload css dengan menerapkan prinsip preload pada serpihan file css khusus maka kita sanggup mengatasi duduk perkara blokir render halaman paruh atas. Berikut pola nya;

Default css file
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian sesudah menerapkan prinsip preload, file css akan menjadi menyerupai dibawah ini

Css +  preload
<link rel="preload" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> [Cek Script Update]

Kode rel="preload" akan memisahkan file css dari sumber daya nya sehingga duduk perkara blokir rendering sanggup teratasi. Link external css dengan penambahan preload umumnya diletakkan pada antara <head> dan </head>. Setelah menerapkan preload silahkan buka situs dan lihat apakah terjadi perubahan yang berarti pada situs kemudian uji kembali situs dengan tool google pagespeed insights.

Menghilangkan CSS Bundle (Style Defaul Blogger)

Pada platfom blogger umumnya terdapat 2 jenis css bundle yaitu css_bundle.css untuk tampilan dekstop dan widget_css_mobile_bundle.css untuk tampilan mobile. Jika dicari html template blogger css bundel tidak akan terlihat (file css bundle not found). Untuk mengatasi nya atau menghapus css_bundle_v2.css dan widget_css_mobile_2_bundle.css maka ikuti langkah berikut ini.

Menghapus mobile_2_bundle.css

1. Pastikan situs memakai template responsive (menerapkan @media only screen)
2. Non-aktifkan template seluler (mobile templete), Login ke Blogger > Template kemudian klik logo gear pada template seluler dan pilih non-aktifkan.

Menghapus mobile_2_bundle.css

Dengan menonaktifkan mobile template maka css_mobile_2_bundle akan hilang dan tidak akan mensugesti situs lagi. Itu sebabnya sangat disarankan untuk memakai template responsive "mobile frindly" biar tampilan situs sanggup menyesusaikan di banyak ukuran layar.

Menghilangkan css_bundle_v2 (Dekstop)

Jika situs memakai template hasil download atau membeli dari desain tertentu maka cobalah untuk tidak memakai widget default menyerupai popular post, follow by email dll. Akan tetapi jika css_bundle_v2 masih mensugesti situs sehingga mengakibatkan pemblokiran rendering maka lakukan trik ini.

1. Login ke Blogger > Template > Edit Html
2. Pada serpihan awal tag html tambahkan kode b:css='false'

Lihat pola berikut ini.

<!DOCTYPE html>
<html b:css='false' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

Dengan menambahkan kode b:css='false' pada tag awal html maka css_bundle_v2.css versi dekstop tidak akan mensugesti render halaman paruh atas situs blog anda. Namun menghilangkan default css bundle akan mengakibatkan widget default berubah bentuk. Jika template situs yang dipakai menyediakan fitur widget maka trik ini sangat efektif untuk menghilangkan css bundle yang memblokir rendering halaman paruh atas situs dan mempercepat loading situs.

Pro dan kontra memang selalu ada untuk pemecahan duduk perkara ini hingga 100%, pada alhasil kita sendiri yang harus bijak dalam mempertimbangkan kebutuhan dan performa situs. Bagi saya Optimasi Speed dan css default blogger (css bundle) sama-sama penting untuk perkembangan situs, meningkatkan secara optimal kecepatan loading situs (speed optimizer) bermanfaat untuk meningkatkan SEO (Search Engine Optimization), sedangkan css bundle untuk style widget default situs blogger. Inilah yang mengakibatkan kebanyakan pengelola situs blogger lebih menentukan mengorbankan tampilan situs mereka demi mendapat speed loading yang optimal. Saya sendiri masih menentukan mempertahankan css default untuk sementara lantaran widget follow by email yang saya gunakan. Untuk widget post saya tidak khawatir lantaran template situs ini tersedia banyak widget yang tidak terpengaruh terhadap css default (css_bundle_v2.css).

Demikian klarifikasi saya mengenai cara mengatasi duduk perkara javascript dan css yang memblokir rendering halaman paruh atas situs blogger. Saya harap ini bermanfaat dan menambah pengetahuan bagi kita semua, jangan lupa follow situs ini untuk mendapat trik-trik blogger lainya dan hingga jumpa kembali.