Cara Optimalkan Pengiriman Css Pada Blogspot

Ini bukan sekedar teori, tapi ini yaitu praktek wacana bagaimana cara mengoptimalkan pengiriman CSS pada Blogspot. Teknik ini sanggup meningkatkan kecepatan loading blog sekitar 20% - 30% pada hasil PageSpeed Insights dan YSlow. Di sini akan dijelaskan dua teknik cara optimalisasi pengiriman CSS khusus untuk pengguna template standar Blogger. Silahkan ikuti tutorial ini, dan jangan lupa unduh / cadangkan template terlebih dahulu.

Update 3 Mei 2017 : Baru-baru ini pihak Blogger memindahkan salah satu CSS stylesheet eksternalnya dari dalam tag <b:skin>, yaitu dyn_css/authorization.css?. Jika dilihat pada pada page source terbaru, letaknya berpindah sempurna di atas kode </head> . Untuk sementara biarkan saja, cukup tunda pemuatan css_bundle_v2.css saja.

Update 5 September 2017 : Tutorial ini sudah tidak efektif lagi. Silahkan ikuti cara terbaru mengatasi problem CSS Bundle di Blogger.

Cara Menunda Pemuatan CSS Bundle pada tag head

Tahukah anda, di dalam tag <b:skin> terdapat dua CSS stylesheet eksternal yang hanya bisa dilihat pada page source, karena karakteristiknya yang terkesan tersembuyi, kedua nya dijuluki sebagai stylesheet siluman oleh para Blogger. Kedua stylesheet itu yaitu CSS bundle dan dyn. autorization CSS. Keduanya sangat penting dalam mengatur tampilan pada blogspot. Hanya saja CSS tersebut merupakan salah satu penyebab terbesar lambatnya loading blog, alasannya yaitu pelukisan halaman gres dimulai sesudah pengunduhan kedua sumber daya stylesheet tersebut selesai. Dan akan sangat terasa pada jaringan internet yang lambat. Berikut ini cara menyembunyikan / menunda pemuatan CSS bundle pada template Blogspot.

1. Menghentikan pemuatan CSS bundle pada tag head.

Hapus kode <b:skin><![CDATA[ lalu, ganti dengan kode di bawah ini.

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[

Kode ini berfungsi untuk menginstruksikan kepada peramban semoga tidak mengunduh sumber daya stylesheet eksternal yang ada di dalam tag <b:skin>.

2. Memasang kembali kode CSS bundle secara manual di dalam tag body.

Masuk ke Google Search console >> pilih blog >> klik sajian perayapan kemudian pilih sajian Ambil sebagai google. Klik Ambil, sesudah itu klik tanda panah pada url yang gres saja diambil. Pada halaman gres akan terlihat kode page source, kemudian cari kode yang ibarat dengan kode di bawah ini (masing-masing blog mempunyai kode yang berbeda).

<link href='https://www.blogger.com/static/v1/widgets/12345673-css_bundle_v2.css' rel='stylesheet' type='text/css'/>  <link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2792098066877777777&amp;zx=2905b4e4-b826-4119-9ce4-d69db21ec37a' rel='stylesheet' type='text/css'/>

Copy kemudian pastekan sempurna di atas </body>.

Simpan template, kemudian lihat tampilan blog Anda pada perangkat desktop dan seluler. Anda akan melihat sedikit perubahan pada tampilan blog Anda. Mungkin ada cuilan menempel, menyusut, atau mungkin melebar. Biasanya cuilan sajian laman yang mengalami hal itu. Untuk menormalkannya kembali, anda perlu menambahkan keterangan !important pada CSS dari bagian-bagian yang mengalami perubahan. Biasanya pada margin dan padding.

Contoh :

Mengembalikan tampilan sajian laman

.tabs-inner {   margin: .5em $(tabs.margin.sides) $(tabs.margin.bottom)!important;   padding: 0!important; }

Tambahan untuk anda yang sudah mengikuti tutorial cara menciptakan template default Blogger responsive di blog ini. Agar posisi blog kembali ke tengah pada layar desktop, ubah CSS ini.

body { width : 1100px; margin:0 auto!important; }

Jika nanti masih ada cuilan lain yang mengalami perubahan, silahkan gunakan cara yang sama untuk mengembalikan tampilannya.

Untuk hasil yang lebih maksimal, baca juga tutorial cara gampang meningkatkan kecepatan loading blog.

Anda juga bisa memakai cara di bawah ini untuk menormalkan kembali tampilan blog dan meringkas / memperkecil ukuran bita pada tag head.

Cara Menyebariskan CSS Penting pada template blogspot

Ini yaitu pekerjaan yang cukup melelahkan, silahkan gunakan, bila dirasa perlu. Berikut cara menyebariskan CSS penting pada template default Blogger.

1. Ganti semua kode CSS yang memakai nilai perwakilan "$(....)". Sesuaikan dengan nilai (value) pada variabel name / definitions.
Contoh :

<Variable name="body.font" description="Font" type="font" default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/> <Variable name="body.text.color" description="Text Color" type="color" default="#333333" value="#333333"/> <Variable name="body.background" description="Body Background" type="background" color="$(body.background.color)" default="#111111 url(//themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="#dddddd url(//themes.googleusercontent.com/image?id=1fupio4xM9eVxyr-k5QC5RiCJlYR35r9dXsp63RKsKt64v33poi2MvnjkX_1MULBY8BsT) repeat-x fixed bottom center"/> <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/> body { font: $(body.font); color: $(body.text.color); background: $(body.background); } .tabs-inner .widget li:first-child a { border-$startSide: none; }

Setelah diubah akan menjadi ibarat ini.

body { font: normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif; color: #333333; background: #dddddd url(//themes.googleusercontent.com/image?id=1fupio4xM9eVxyr-k5QC5RiCJlYR35r9dXsp63RKsKt64v33poi2MvnjkX_1MULBY8BsT) repeat-x fixed bottom center; } .tabs-inner .widget li:first-child a { border-left: none; }

Jika anda mempunyai kemampuan untuk mendesain blog, anda tidak harus mengikuti apa yang ada pada variabel name.

2. Tambahkan keterangan !important pada beberapa CSS berikut.
Di bawah ini yaitu kode CSS pada template Jendela Gambar (1), untuk jenis template lain mungkin akan berbeda penempatannya. Jika nanti tampilannya masih ada yang aneh, coba Anda tambahkan keterangan !important pada margin / padding dari element tersebut, dan jangan ikut-ikutan dicoret ya.

.content-outer {         margin: 30px auto!important;       } .tabs-inner {         margin: 0.5em 0 0!important;         padding: 0!important;       } .main-inner {         padding: 15px 5px 20px!important;       } .main-inner .column-center-inner {         padding: 0 0!important;       } .main-inner .column-left-inner {         padding-left: 0!important;       } .main-inner .column-right-inner {         padding-right: 0!important;       } .footer-inner {         padding: 10px 5px 20px!important;       }  Pada template responsive  body {         width:1100px;margin:0 auto!important;       } .main-inner .column-center-inner, .main-inner .column-right-inner {padding:0!important} (cari yang serupa,tergantung letak sidebar template anda)

3. Setelah tahap nomor 1 dan 2 selesai. Hapus semua variabel di dalam tag b:skin. Sisakan identitas pembuat Template, kemudian pasang epilog ]]></b:skin> di bawahnya.

4. Bungkus CSS dengan pembungkus baru.
<style type='text/css'>
Jangan lupa hapus kode ]]></b:skin> yang lama, ganti dengan kode </style>.

Gambaran akhir

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[  /*----------------------------------------------- Blogger Template Style Name:     Simple Designer: Josh Peterson URL:      http://noaesthetic.com ------------------------------------------------*/      ]]></b:skin>      <style type='text/css'>  ......  semua kode CSS ada di sini.  ......      </style>

5. (Boleh diikuti boleh tidak.) Pindahkan semua isi CSS di dalam tag <b:template-skin> atau tag <style> yang lain ke dalam tag style di atas, kemudian hapus pembungkusnya.

6. Format template, kemudian klik Pratinjau, jikalau tampilannya sudah rapi, klik Simpan template.

Sekian tutorial cara menyembunyikan stylesheet CSS bundle Blogger tanpa menyebabkan error, untuk mengoptimalkan pengiriman CSS.