Home » Tips Blogging » CARA MENGATASI MASALAH CSS BUNDLE MOBILE DI BLOGGER

CARA MENGATASI MASALAH CSS BUNDLE MOBILE DI BLOGGER

Optimalkan pengiriman CSS di blogger

CSS (Cascading Style Sheet) eksternal di blogger biasanya terdapat di antara kode <head> dan </head> dalam html template. Sebagai contoh setiap user yang menggunakan platform blogger setidaknya terdapat 2 CSS eksternal dengan kode yang mirip seperti di bawah ini:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/> (Kode CSS ekstenal yang terdapat dalam blog ini)
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/> (Kode CSS eksternal yang terdapat dalam blog ini)

dan penempatan CSS eksternal tersebut dalam html template adalah seperti di bawah ini:

<!DOCTYPE html>
<HTML>
<head>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/>
<b:skin>...</b:skin>
</head>
<body>
Kode elemen html dalam body.
</body>
</HTML>

Untuk mengoptimalkan pengiriman CSS eksternal blogger anda tidak cukup hanya menghapus:
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/>
dan
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/>
dari html template blog anda. Karena menurut pengalaman saya browser akan tetap load 2 CSS eksternal ini walaupun telah di hapus dari html template blog.

Jika anda ingin mengoptimalkan pengiriman CSS blogger lakukan 2 langkah mudah di bawah ini:
1. Ganti kode <head> menjadi &lt;head&gt;.
2. Ganti kode </head> menjadi &lt;!--< head/ >--&gt; (hilangkan spasi antara <, > dan head/. Klik Save Template.


Catatan:
1. Mengoptimalkan pengiriman CSS blogger hanya bisa dilakukan dengan template non default blogger.
2. Cara memaksimalkan pengiriman CSS blogger ini kemungkinan akan mengubah tampilan dari blog anda. Hal ini mungkin terjadi karena skin yang terdapat dalam html template blog anda tidak mewakili semua kode elemen (div class yang terdapat dalam elemen html blog anda tersebut).

 CARA MENGATASI MASALAH CSS  BUNDLE ERROR DI BLOGGER

Mungkin bagi sebagian narablog yang hobi bermain kode mengerti dengan bundle.css yang akan muncul di Page View Source (Ctrl + U). Kode tersebut adalah default CSS dari Blogger, jika memakai template bukan bawaan Blogger maka akan ada kode CSS yang tidak terpakai sehingga menambah berat loading blog tersebut. Bagi pengguna template klasik hal itu tidak jadi masalah. Menonaktifkan bundle.css adalah solusi terbaiknya. Berikut langkah-langkahnya :


  1. Buka Blogger.com > Edit HTML > Backup template terlebih dulu untuk keamanan jika terjadi kesalahan.
  2. Ctrl + F kemudian cari kode <b:skin><![CDATA[
  3. Blok kode CSS dari <b:skin><![CDATA[ sampai sebelum ]]></b:skin> kemudian pindahkan (Ctrl + X) ke notepad untuk sementara.
  4. Sekarang hanya ada kode <b:skin><![CDATA[ dan ]]></b:skin>
  5. Ganti kedua kode tersebut dengan kode
    &lt;!<b:skin><![CDATA[]]></b:skin>
  6. Kemudian tambahkan dibawahnya :
    <style type="text/css"> CSS yang ada di Notepad </style>
  7. Dan dibawah kode  <style type="text/css"> letakkan kode CSS yang tadi ditaruh di Notepad.
  8. Save Template.
Link Bundle.css akan berwarna hitam atau hijau, itu tandanya anda berhasil menonaktifkannya. Cobalah cek blog anda di GTmetrix.com maka anda tidak akan menemukan bundle.css dan skornya pun bertambah.

NB :
  • Menonaktifkan kode tersebut dapat mengakibatkan template anda rusak atau error.
  • Jika anda tidak mengerti dengan kode tersebut jangan mencobanya.
  • Langkah ini bukan menonaktifkan sebenarnya, tetapi hanya membuat agar tidak terbaca oleh browser.
  • Efeknya juga dapat menambah Page Speed Score anda di GTmetrix.
Categories:
Pin It

Related Post:



18 komentar:

  1. god slayer16 September 2015 at 23:06

    makasih informasinya.

    ReplyDelete
    Replies
    1. Admin Jalur Lintas22 November 2015 at 07:52

      sama sama semoga berhasil mengatasi css bundlenya gan biar loading blognya cepat

      Delete
  2. Abdul Hamid7 February 2016 at 10:02

    Sudah saya coba... dan hasilnya
    test di page insight sangat menakjubkan
    tapi kemudian muncul saran dari rekan rekan
    bahwa memparse head menjadi <head> akan mengakibatkan hilangnya share blog
    saya sendiri kurang tahu apa maksudnya itu??/
    dan kelihatannya punya segitigabermuda juga menggunakan head dan bukan <head>

    tolong donk kasi tahu juga keuntungan dan kerugiannya memparse head dan juga skin c!data
    makasih sebelumnya

    ReplyDelete
  3. Info Medsos18 February 2016 at 12:16

    Kok ane masih tetep gan Gini

    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Your page has 2 blocking CSS resources. This causes a delay in rendering your page.
    Approximately 7% of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
    Optimize CSS Delivery of the following:

    http://fonts.googleapis.com/css?family=Oswald
    https://www.blogger.com/…widgets/3028179046-widget_css_bundle.css


    ada cara mengatasinya gak gan ? Makasi

    ReplyDelete
    Replies
    1. Admin Jalur Lintas18 February 2016 at 20:59

      mungkin ada bagian yang terlewatkan, atau cek versi mobile dan dekstopnya mana yang belum bisa diatasi, jika versi mobile, silahkan ubah menjadi khusus, pasti bisa

      Delete
  4. Glitch19 March 2016 at 02:42

    scriptnya sukses tapi membuat banyak eror di w3c. ada cara lain gan ?

    ReplyDelete
    Replies
    1. Admin Jalur Lintas23 October 2016 at 20:25

      saya sudah coba, tapi tidak ada error di w3c, kalau error terjadi, ganti CSS yang valid dari validasi di w3c dengan css template blog sobat.

      Delete
  5. mugianto19 March 2016 at 09:43

    Gagal paham saya mas, kalo kita parse tagnya bukannya akan merusak tampilan?

    ReplyDelete
  6. Sang Alam14 April 2016 at 10:50

    Sebelumnya salam kenal mas Josmas Boniman..
    saya sofyan pemilik blog alamsemesta19.blogspot.com
    Saya sudah mengganti kode headnya dengan saran diatas

    Tpi kecepatan Mobilenya masih tetep lambat....mungkin ada cara lain mas???Mohon bantuannya...
    Terima Kasih.

    ReplyDelete
    Replies
    1. Admin Jalur Lintas14 April 2016 at 21:26

      salam kenal, untuk mempercepat loadingnya mohon digunakan gambar yang sudah dikompress agar lebih ringan loadingnya, karena blog sobat banyak gambarnya,

      Delete
  7. Sang Alam14 April 2016 at 10:52

    sebelumnya salam kenal mas..
    saya sudah mengganti kode headnya dengan kode diatas..
    tp kecepatan mobilenya masih tetap lambat...mungkin ada cara lain mas??
    Terima Kasih.

    ReplyDelete
    Replies
    1. Admin Jalur Lintas4 November 2016 at 20:00

      ubah dulu di pengaturan templatenya menjadi khusus untuk versi mobile

      Delete
  8. Unknown21 May 2016 at 03:11

    Bisa di cek mas blog saya.. berat banget.ngatasinya gimana ya??buat versi mobile 63%...
    Pusing saya

    ReplyDelete
    Replies
    1. Admin Jalur Lintas29 October 2016 at 18:32

      untuk versi mobilenya sepertinya tidak perlu lagi, yang terpenting template blog harus responsive, agar kecepatan blognya naik, kurangi penggunaan javascript dan gambar yang tidak perlu pada blog

      Delete
  9. Unknown24 October 2016 at 09:11

    Mantap. Perlu dipraktekkan agar error css bundle bisa diperbaiki. Loading blog saya lama x.

    ReplyDelete
    Replies
    1. Admin Jalur Lintas29 October 2016 at 18:28

      terima kasih semoga bermanfaat dan masalah error css nya bisa cepat diperbaiki

      Delete
  10. Unknown26 January 2017 at 11:03

    gun tlng knp setelah sy terapkan sarannya,,, template nya jadi error tampilannya

    ReplyDelete
  11. Unknown26 January 2017 at 11:22

    gun setelah sy ikuti sarannya knp tampilan template jd error

    ReplyDelete

Silahkan Berkomentar Sesuai Dengan Topik, Jangan Menggunakan Kata-Kata Kasar, Komentar Dengan Link Aktif Tidak Akan Dipublikasikan

ttd

Admin Blog