Tips Tutorial 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 duduk kasus 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 sehabis 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, sehabis itu klik tanda panah pada url yang gres saja diambil. Pada halaman gres akan terlihat kode page source, kemudian cari kode yang menyerupai 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 belahan menempel, menyusut, atau mungkin melebar. Biasanya belahan 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 belahan 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 menyerupai 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, kalau tampilannya sudah rapi, klik Simpan template.

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