Membuat Blog Fast Loading (Page Speed Insights)

Sobat "Bermanfaat", melanjutkan pembahasan kita tentang Membuat Tema Blogger Dari Nol - 100% Bisa, kali ini kita telah sampai pada Bagian #5 yaitu Membuat Blog Fast Loading (Page Speed Insights).

Sesuai namanya, Page Speed Insights adalah sebuah web tools besutan Google yang berfungsi untuk menganalisa kecepatan loading sebuah laman website dan selanjutnya dia memberikan saran untuk mengoptimalkan pengaturan website tersebut agar kecepatan loading lebih meningkat (Fast Loading).

Page Speed Insights akan memberikan laporan nyata tentang performa sebuah website untuk perangkat mobile dan desktop dalam bentuk skor dengan 0 / 100. Semakin tinggi skornya berarti performa web tersebut semakin baik (cepat).

Selain menunjukkan skor hasil penilaian, Page Speed Insights juga akan memberikan laporan tentang kesalahan yang mengakibatkan loading website kita menjadi lambat yang disertai saran bagaimana cara memperbaiki agar performa web kita menjadi semakin baik dan skor yang dihasilkan bisa meningkat menjadi lebih baik atau Fast Loading.

Berikut ini adalah poin pokok yang menjadi sorotan Page Speed Insights:

• Skor Kecepatan.
• Skor Pengoptimalan.
• Saran Pengoptimalan.

Untuk lebih jelasnya tentang Page Speed Insights bisa sobat pelajari di sini: http://developers.google.com/speed/docs/insights/about/

Oke, demikian tadi sedikit pengenalan tentang Page Speed Insights, sekarang kembali kepada pokok pembahasan kita yaitu Membuat Blog Fast Loading.

Oya, sebelum kita mulai pembahasannya saya ingin menyampaikan kembali rangkaian tutorial mengenai Membuat Tema Blogger Dari Nol - 100% Bisa. Adapun bagian - bagian dari rangkaian tutorial tersebut adalah sebagai berikut:

• Bagian #1
  Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) #1.
  Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) #2.
• Bagian #2
  Merapikan Tampilan Dasar Blog.
• Bagian #3
  Membuat Menu Navigasi.
• Bagian #4
  Membuat Menu Drop Down.
• Bagian #5
  Membuat Blog Fast Loading (Page Speed Insights). Aktif.
• Bagian #6
  Membuat Widget Untuk Banner Pada Header Sebelah Kanan.
• Bagian #7
  Membuat Widget Footer Tiga Kolom.
• Bagian #8
  Membuat Blog Resposive (Mobile Friendly Test) & SEO Friendly.
• Bagian #9
  Merapikan Tampilan Layout.

Membuat Blog Fast Loading (Page Speed Insights).

Dalam pembuatan Tema Blogger dari nol atau optimasi tema yang lain, sebenarnya step ini (bagian #5) tidak begitu penting. Tapi bagi Sobat yang ingin membuat nilai skor pada Page Speed Insights atau bisa dikatakan tema yang Fast loading, maka tidak ada salahnya bila sobat mencoba cara ini, siapa tahu bermanfaat.

Kenapa saya katakan tidak begitu penting karena, sebagaimana yang dikatakan oleh Google webmaster, yang terpenting dalam sebuah website atau blog adalah konten yang benar - benar bermanfaat dan memenuhi harapan bagi setiap pengunjung blog tersebut. Adapun kecepatan loading adalah hal kedua setelah konten. Asal tidak terlalu banyak scrip - script atau gambar yang terlalu besar yang memberatkan loading halaman blog maka saya rasa kecepatannya sudah cukup.

Oke, sekarang mari kita bahas bersama. Bila ada yang keliru saya harap Sobat sekalian berkenan untuk mengkoreksi.

Pertama sebelum kita kustomasi tema blog, kita harus lihat dahulu berapa skor kecepatan blog tersebut, nanti setelah ada hasil skornya maka dalam web Page Speed Insights akan memberi kita saran apa yang harus kita lakukan untuk membuat blog menjadi Fast loading.

Kunjungi alamat ini: https://developers.google.com/speed/pagespeed/insights/?hl=id dan masukkan alamat URL blog sobat pada kolom yang tersedia (contoh: http://templateku-v01.blogspot.co.id) kemudian klik "ANALISIS".

Setelah Sobat klik "ANALISIS" tunggu prosesnya hingga 100%, dan dari tema yang sudah saya kerjakan dari nol hasilnya seperti ini:

Versi Sellular / Mobile skornya 21 / 100 (Low)

Sedangkan versi Desktop skornya 86 / 100 (Good)

Dari hasil ANALISIS di atas kita bisa melihat bahwa skor untuk blog tersebut sangat lambat pada versi mobile yaitu 21 / 100. Setelah tahu hasilnya, silahkan scorl ke bawah halaman tersebut hingga sobat menemukan tulisan "Rekomendasi Pengoptimalan" dan pada baris "Menghilangkan JavaScript dan CSS" klik "Tampilkan cara memperbaiki".

Dan akan muncul saran:
Optimalkan Pengiriman CSS yang berikut:
https://www.blogger.com/static/v1/widgets/3332739511-widget_css_bundle.css

Sobat, salah satu penyebab dari lambatnya loading pada blog tadi adalah saat loading halaman terjadi penguraian pengiriman CSS off-page tersebut di atas, sehingga proses menjadi lambat. Dan solusi mudahnya adalah kita harus memblokir CSS tersebut agar tidak dimuat saat loading halaman.

Caranya:
Masuk pada akun Blogger untuk blog yang kita optimalisai >> Tema >> Edit HTML. Cari kode "<head> " (tanpa tanda petik) kemudian ganti kode tersebut menjadi " &lt;head&gt; " (perhatikan! penulisannya harus sama).

Setelah itu ganti juga (tag penutupnya) kode " </head> " menjadi " &lt;!--<head/>--&gt; ", sehingga bila kita lihat dalam gambar akan seperti ini:

Kemudian "Simpan tema".

Setelah tema berhasil di simpan silahkan cek kembali skornya. Berikut ini adalah skor dari http://templateku-v01.blogspot.co.id setelah CSS bundle bawaan blogger diblokir.

Bisa Sobat lihat, pada hasil ANALISA yang ke dua setelah kita lakukan pemblokiran CSS bundle, nilai dari skornya sekarang menjadi 99 / 100 pada peramban Sellular dan Desktop. Berarti bisa dikatakan blog ini sekarang Fast Loading.

Sobat, nilai 99 sangat bagus sekali menurut saya, tapi perlu Sobat ketahui nilai ini sangat wajar karena pada blog ini belum begitu banyak konten yang tersedia, maklum karena blog ini (http://templateku-v01.blogspot.co.id) khusus untuk percobaan saja. Dan mungkin hasilnya akan berbeda setelah ada penambahan - penambahan lain yang seperti gambar atau widget yang lain.

Mengatasi Masalah.

Sobat, sebagaimana telah kita ketahui bahwa fungsi sebuah CSS adalah untuk mengatur style elemen HTML. Jadi apabila CSS kita blokir atau kita hilangkan maka pasti akan mempengarui tampilan (style) elemen tersebut. Lebih - lebih CSS tersebut adalah CSS bundle yang mengatur standar tampilan blog pada Blogger, pasti akan terjadi mal-fungsi pada tema bawaan.

Masalah yang paling pokok menurut saya adalah:

1. Tidak berfungsinya tombol Expand dan Collapse (munculkan atau ciutkan) pada widget Arsip Blog.
2. Icon "Edit" (gambar tang dan obeng) yang akan tetap muncul meskipun pengunjung blog bukan Admin blog.
3. Kolom "Message" (pesan) notifikasi pada halaman - halaman tertentu pada blog, seperti saat melihat Arsip, Label, Pencarian dll.

Akibat CSS bundle yang diblokir tadi maka akan muncul banyak sekali masalah (khususnya dari segi tampilan / style) karena CSS bundle berisi banyak sekali kode. Untuk mengetahui kode apa saja yang terdapat dalam CSS bundle silahkan sobat kunjungi alamat URL CSS bundle tadi, yaitu https://www.blogger.com/static/v1/widgets/3332739511-widget_css_bundle.css

Meskipun banyak sekali  kode CSS dalam bundle yang kita blokir, namun menurut saya ada tiga masalah pokok (sebagaimana yang saya sebut di atas) yang perlu kita perbaiki. Masalah tersebut seperti yang terlihat pada gambar di bawah ini atara sebelum dan sesudah CSS bundle diblokir.

Untuk mengatasi masalah ini caranya adalah:

Pertama, masuk pada akun Blogger untuk blog yang kita optimalisai >> Tema >> Edit HTML.

Kedua, copy kode CSS yang mengatur Label dll. yang terdapat di dalam CSS bundle, kemudian pastekan (tempelkan) kode yang kita copy tadi tepat diatas &lt;!--<head/>--&gt;

Kalau Sobat bingung mencarinya, silahkan copy saja kode di bawah ini dan letakkan tepat diatas &lt;!--<head/>--&gt;

<style type='text/css'> a:link {color:#3094db;} a:hover {color: #4d4544;} a {color: #3094db; text-decoration:none;} #ArchiveList .toggle{cursor:pointer;font-family:Arial,sans-serif} #ArchiveList .toggle-open{_font-size:1.7em;line-height:.6em} #ArchiveList{text-align:left} #ArchiveList a.post-count-link,#ArchiveList a.post-count-link:link,#ArchiveList a.post-count-link:visited{text-decoration:none} #ArchiveList a.toggle,#ArchiveList a.toggle:link,#ArchiveList a.toggle:visited,#ArchiveList a.toggle:hover{color:inherit;text-decoration:none} .BlogArchive #ArchiveList ul li {background:none;list-style:none;list-style-image:none;list-style-position:outside;border-width:0;padding-left:15px;text-indent:-15px;margin:.25em 0;background-image:none} .BlogArchive #ArchiveList ul ul li{padding-left:1.2em} .BlogArchive #ArchiveList ul{margin:0;padding:0;list-style:none;list-style-image:none;border-width:0} .BlogArchive #ArchiveList ul.posts li {padding-left:1.3em} #ArchiveList .collapsed ul{display:none} #blog-pager-newer-link {float: left;} #blog-pager-older-link {float: right;} #blog-pager {text-align: center;margin: 20px 0px 0px 1px;} .clear{clear:both} .clear:after {visibility:hidden;display:block;font-size:0;content:&quot; &quot;;clear:both;height:0;} .status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative} .status-msg-border{border:1px solid #000;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative} .status-msg-bg{background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1} .status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4} .status-msg-hidden{visibility:hidden;padding:.3em 0} .status-msg-wrap a{padding-left:.4em;text-decoration:underline} .feed-links{display: none;} .blogger-iframe-colorize {display: block !important;} img.icon-action, a.quickedit {display: none;} </style>

Dengan menambahkan kode CSS di atas, maka ketiga masalah yang saya sebutkan tadi sudah bisa teratasi. Semoga bisa Sobat pahami dan praktekkan.

Penutup.

Selain CSS bundle, sebenarnya masih banyak sekali faktor yang mempengaruhi kecepatan loading sebuah blog. Yang terpenting, agar loading blog bisa cepat adalah kita harus bisa meminimalisasi kode HTML, CSS, JavaScript dan ukuran media. Namun demikian yang dapat membuat blog kita berkualitas bukanlah faktor Fast Loading-nya tetapi lebih kepada konten yang padat bermanfaat dan bisa memberi kepuasan pada pengunjung.

Semoga Sobat sekalian bisa puas pada apa yang telah saya sampaikan di kesempatan kali ini. Share, saran, komentar dan like dari Sobat sangat berarti bagi blog ini.

Akhir kata "Semoga bermanfaat dan Sukses selalu untuk kita semua. Aamiin..."

Share:

Artikel Bermanfaat Lainnya: