Cara Mengatasi Javascript dan CSS Yang Memblokir Rendering Halaman - Mengatasi problem 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 kepingan situs (tampilan situs). Kamu mungkin khawatir dengan kata "blokir" dan berfikir itu akan mempengaruhi 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 problem umum dan tidak terlalu mempengaruhi index situs di serp namun bila terlalu banyak sumber daya javascript dan css yang memblokir rendering halaman akan menjadikan waktu pemuatan situs (loading) menjadi lebih usang dan akibatnya secara tidak eksklusif hal tersebut menawarkan dampak jelek terhadap SEO (Search Engine Optimization).
Nah, kini saya akan membagikan cara mengatasi sumber daya javascript dan css yang paling umum menjadikan pemblokiran terhadap render halaman paruh atas dan berikut teladan nya;
Setelah mengetahui secara terperinci 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.
Lalu bila 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 problem 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 bila 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.
Dengan menonaktifkan mobile template maka css_mobile_2_bundle akan hilang dan tidak akan mempengaruhi situs lagi. Itu sebabnya sangat disarankan untuk memakai template responsive "mobile frindly" supaya tampilan situs sanggup menyesusaikan di banyak ukuran layar.
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 mempengaruhi situs sehingga menjadikan pemblokiran rendering maka lakukan trik ini.
Pro dan kontra memang selalu ada untuk pemecahan problem ini hingga 100%, pada akibatnya 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 menjadikan 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 problem 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.
Nah, kini saya akan membagikan cara mengatasi sumber daya javascript dan css yang paling umum menjadikan pemblokiran terhadap render halaman paruh atas dan berikut teladan nya;
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 teladan gambar di bawah ini.
- <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'/>
 |
| Sumber daya javascript dan css yang memblokir rendering halaman paruh atas |
- Login ke Blogger > Template > Edit Html
- Klik instruksi area kemudian tekan ctrl+f
- Masukkan keyword pada kolom teks finder sesuai dengan javascript maupun css yang memblokir render misal;ajax.googleapis
- Kemudian tekan enter untuk mencari
<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 menjadikan 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 menjadikan perubahan yang berarti pada tampilan situs maka batalkan perubahan dengan menakan tombol undo (ctrl+z).
Lalu bila 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 problem 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 bila 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 kepingan file css khusus maka kita sanggup mengatasi problem blokir render halaman paruh atas. Berikut teladan nya;Default css fileKemudian sesudah menerapkan prinsip preload, file css akan menjadi menyerupai dibawah ini
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>
Css + preloadKode rel="preload" akan memisahkan file css dari sumber daya nya sehingga problem 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.
<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]
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
- Pastikan situs memakai template responsive (menerapkan @media only screen)
- 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 |
Menghilangkan css_bundle_v2 (Dekstop)
- Login ke Blogger > Template > Edit Html
- Pada kepingan awal tag html tambahkan kode b:css='false'
<!DOCTYPE html>Dengan menambahkan kode b:css='false' pada tag awal html maka css_bundle_v2.css versi dekstop tidak akan mempengaruhi render halaman paruh atas situs blog anda. Namun menghilangkan default css bundle akan menjadikan 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.
<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#'>
Pro dan kontra memang selalu ada untuk pemecahan problem ini hingga 100%, pada akibatnya 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 menjadikan 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 problem 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.
Comments
Post a Comment