Tips Tutorial Cara Terbaru Mengatasi Persoalan Css Bundle Di Blogger
Artikel ini merupakan update terbaru cara optimalkan pengiriman css pada template Blogger. Dimana cara usang sudah tidak efektif lagi untuk...
https://tutorialcarapintar.blogspot.com/2019/11/tips-tutorial-cara-terbaru-mengatasi.html
Artikel ini merupakan update terbaru cara optimalkan pengiriman css pada template Blogger. Dimana cara usang sudah tidak efektif lagi untuk mengatasi duduk perkara CSS Bundle yang memblokir perenderan konten di paruh atas, karena pihak Blogger telah mengeluarkan kedua css eksternalnya dari tag
Untuk ketika ini, pada hasil laporan analisis PageSpeed Insights hanya terdapat satu css eksternal yang memblokir perenderan, khususnya pada perangkat mobile / seluler, yaitu widget Bundle css. Untuk mengatasi duduk perkara ini, ada dua pilihan yang sanggup ditempuh.
1. Menghilangkan CSS Bundle sepenuhnya
Jika Anda menentukan opsi ini, anda harus benar-benar bakir dalam mendesain ulang blog. karena, akan terjadi berbagai perubahan pada tampilan blog, hampir semua widget terkena dampak akhir dari pemutusan link css eksternal tersebut. Dan perubahannya berlaku pada semua perangkat, seluler maupun desktop. Kecuali, template dan widget yang Anda gunakan bukan bawaan Blogger.
Untuk menghilangkan pemuatan stylesheet eksternal Blogger (CSS Bundle), caranya sangat mudah, cukup pasang instruksi
2. Menunda Pemuatan CSS Bundle
Opsi ini bukan tanpa resiko, perubahan tampilan mungkin tetap ada, khususnya pada tampilan versi seluler dan hanya pada template Blogger yang sudah responsive. Tapi berdasarkan saya, ini merupakan solusi paling gampang untuk mengatasi duduk perkara CSS Bundle pada Blogger.
Sebelum menghilangkan CSS Bundle pada tag
Contoh instruksi CSS Bundle
Di atas ialah teladan instruksi CSS Bundle dari template blog saya. Untuk melihat instruksi tersebut Anda sanggup memakai PageSpeed Insights atau melalui Google search console > pilih properti > perayapan > ambil sebagai Google > ambil > klik tanda dua panah pada url yang telah di ambil. Dengan catatan instruksi pemutus link CSS Bundle belum tersimpan. Salin instruksi CSS Bundle milik Anda, kemudian pastekan sempurna di atas instruksi
Selanjutnya, pasang instruksi
Baca juga : Cara mempercepat loading blog
Catatan :
Tambahkan keterangan
Contoh : Pada template Simple Blogger, nilai padding pada elementmengkered menyusut. Untuk mengatasinya, tambahkan keterangan
<b:skin>. Hal ini mengakibatkan menurunnya performa kecepatan loading blog yang sangat signifikan, apalagi jikalau dilihat memakai alat Google PageSpeed Insights, hasil laporan performa kecepatan blog sanggup jadi pada level kismin (poor).Untuk ketika ini, pada hasil laporan analisis PageSpeed Insights hanya terdapat satu css eksternal yang memblokir perenderan, khususnya pada perangkat mobile / seluler, yaitu widget Bundle css. Untuk mengatasi duduk perkara ini, ada dua pilihan yang sanggup ditempuh.
1. Menghilangkan CSS Bundle sepenuhnya
Jika Anda menentukan opsi ini, anda harus benar-benar bakir dalam mendesain ulang blog. karena, akan terjadi berbagai perubahan pada tampilan blog, hampir semua widget terkena dampak akhir dari pemutusan link css eksternal tersebut. Dan perubahannya berlaku pada semua perangkat, seluler maupun desktop. Kecuali, template dan widget yang Anda gunakan bukan bawaan Blogger.
Untuk menghilangkan pemuatan stylesheet eksternal Blogger (CSS Bundle), caranya sangat mudah, cukup pasang instruksi
b:css='false' ke dalam tag html. Pada template Blogspot, penampakannya akan terlihat ibarat di bawah ini.<html b:css='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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'> 2. Menunda Pemuatan CSS Bundle
Opsi ini bukan tanpa resiko, perubahan tampilan mungkin tetap ada, khususnya pada tampilan versi seluler dan hanya pada template Blogger yang sudah responsive. Tapi berdasarkan saya, ini merupakan solusi paling gampang untuk mengatasi duduk perkara CSS Bundle pada Blogger.
Sebelum menghilangkan CSS Bundle pada tag
<head>, sebaiknya salin terlebih dahulu instruksi CSS Bundle milik Anda. Kode tersebut hanya sanggup dilihat pada page source. Terakhir saya lihat, letaknya sempurna di bawah instruksi <head>.Contoh instruksi CSS Bundle
<link href='https://www.blogger.com/static/v1/widgets/521441841-css_bundle_v2.css' rel='stylesheet' type='text/css'/>
Di atas ialah teladan instruksi CSS Bundle dari template blog saya. Untuk melihat instruksi tersebut Anda sanggup memakai PageSpeed Insights atau melalui Google search console > pilih properti > perayapan > ambil sebagai Google > ambil > klik tanda dua panah pada url yang telah di ambil. Dengan catatan instruksi pemutus link CSS Bundle belum tersimpan. Salin instruksi CSS Bundle milik Anda, kemudian pastekan sempurna di atas instruksi
</body>.Selanjutnya, pasang instruksi
b:css='false' ibarat pada opsi pertama. Simpan Tema.Baca juga : Cara mempercepat loading blog
Catatan :
Tambahkan keterangan
!important pada nilai atribut dari class atau id yang mengalami perubahan akhir dari penundaan pemuatan css eksternal Blogger.Contoh : Pada template Simple Blogger, nilai padding pada element
main dan footer dalam @media tidak bekerja dengan semestinya. Akibatnya tampilan untuk versi mobile jadi !important pada CSS berikut..footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;} 
