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 h...
https://tutorialcarapintar.blogspot.com/2019/02/trik-dan-tips-cara-mengatasi-javascript.html
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 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 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.
<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 serpihan 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 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.
<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 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.
