Cara Optimalkan Pengiriman CSS pada Blogspot

Ini bukan sekedar teori, tapi ini adalah praktek tentang bagaimana cara mengoptimalkan pengiriman CSS pada Blogspot. Teknik ini dapat 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 tepat 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 masalah 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, lantaran karakteristiknya yang terkesan tersembuyi, kedua nya dijuluki sebagai stylesheet siluman oleh para Blogger. Kedua stylesheet itu adalah 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, karena pelukisan halaman baru dimulai setelah 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 agar 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 menu perayapan lalu pilih menu Ambil sebagai google. Klik Ambil, setelah itu klik tanda panah pada url yang baru saja diambil. Pada halaman baru akan terlihat kode page source, kemudian cari kode yang mirip dengan kode di bawah ini (masing-masing blog memiliki 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 tepat 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 bagian menempel, menyusut, atau mungkin melebar. Biasanya bagian menu 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 menu laman

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

Tambahan untuk anda yang sudah mengikuti tutorial cara membuat 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 bagian lain yang mengalami perubahan, silahkan gunakan cara yang sama untuk mengembalikan tampilannya.

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

Anda juga bisa menggunakan 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 adalah pekerjaan yang cukup melelahkan, silahkan gunakan, bila dirasa perlu. Berikut cara menyebariskan CSS penting pada template default Blogger.

1. Ganti semua kode CSS yang menggunakan 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 seperti 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 memiliki 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 adalah 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 penutup ]]></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, lalu hapus pembungkusnya.

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

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