Senin, 14 Maret 2016

Cara Mengoptimasi CSS Delivery pada Template Klasik Blogspot

Untuk menyenangkan pembaca blog juga sekaligus penulis, kita menginginkan blog yang bekerja secara cepat alias loading cepat. Beberapa situs yang dapat kita gunakan untuk mengetes kecepatan loading blog kita yaitu dengan membuka laman berikut ini :


Speed and Perfomance Optimizen by GTMetrix

Cek kecepatan loading kamu di mari.

Situs ini gunanya untuk mengecek kecepatan blog kita sampai termuat sempurna atau 100%. GTMetrix menilai kecepatan blog kita dari segi Page Speed Score atau dinilai berdasarkan skore google dan juga dari segi YSlow Score atau dinilai berdasarkan skore yang diberikan oleh Yahoo! Selain kecepatan loading disertakan juga ukuran halaman blog kita (dalam MB), serta total request ketika blog kita diakses. GTMetrix juga memberi masukan / saran untuk meningkatkan performa blog kita, tapi sayangnya kalau kita tidak mendaftar menjadi pro member maka akan diberi batasan hanya boleh 20 kali test dalam sehari.

Pingdom Tools by Pingdom

Cek kecepatan loadingmu di sini.

Mirip dengan GTmetrix, hanya saja di pingdom kita tidak diberi batasan mengetest speed blog dalam satu harinya tidak seperti di GTmetrix yang hanya boleh 20 kali dalam sehari. Dari keterangan setiap request masing-masing bagian akan dipaparkan beserta kecepatan loadingnya. Seringnya kecepatan loading paling besar adalah ketika kita menggunakan gambar (termasuk yang menggunakan gambar sebagai header blog). Gunakan situs-situs online untuk mengkompress gambar kita tanpa mengurangi kualitas gambar.


Page Speed Insight by Google

Cek kecepatan loading kamu di sini

Bukan google namanya kalau apa-apa tidak punya, segala macam kebutuhan internet dia punya. Termasuk alat untuk mengetes kecepatan loading blog kita. Tinggal masukkan link blog kamu akan keluar kecepatan loading kita kalau diakses dari desktop ataupun dari mobile.

Juga akan keluar pemecahan permasalahannya dan bagian mana-mana yang harus diperbaiki.

Seperti pada punya saya berikut ini.

Optimize CSS Delivery

Sebagai catatan saya menggunakan template klasik kepunyaan blogspot di mana hostingannya juga milik blogspot. Mungkin kita memiliki permasalahan yang sama. Maka kali ini saya akan membahas kesalahan blog saya di bagian yang harus diperbaiki versi PageSpeed Insight.

Leverage browser caching


Show how to fix

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 3 blocking CSS resources. This causes a delay in rendering your page.
None 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:
https://www.blogger.com/…/v1/widgets/3375562265-css_bundle_v2.css
http://fonts.googleapis.com/…bb53t8j-Mo-vYa23n5hsOEr0Xhq90-5rzohUON8I
https://www.blogger.com/…&zx=a150e689-a53a-414c-aeee-290cda91ab3f
Maka mari kita bahas Cara Mengoptimasi CSS Delivery pada Template Klasik (Bawaan) Blogspot.

Bagi pemakai template BUKAN bawaan dari blogger biasanya ada kode CSS yang tidak terpakai dan menambah berat kinerja blog kita walaupun sebetulnya saya yakin tidak ada kode CSS yang tidak mungkin tidak terpakai dalam suatu template. Kode-kode CSS itu bisa saja dihilangkan dari template dengan tetap melihat perubahan template.

Sedangkan untuk yang memakai template bawaan dari blogger, kode CSS itu sebetulnya tidak masalah sayang tetap terindeks oleh PageSpeed Insight sebagai kode CSS yang harus dioptimasi. Kita bisa mengakali dengan menonaktifkan bundle.css tersebut. 

Mari kita lakukan langkah-langkah sebagai berikut.
1. Buka blogger.com
2. Edit Template
3. Edit HTML. Biasakan untuk membackup template terlebih dahulu untuk menjaga resiko dari apapun.
4. Cari kode di bawah ini dengan menggunakan CTRL+F
<b:skin><![CDATA[
5. Blok kode CSS dari <b:skin><![CDATA[ sampai sebelum ]]></b:skin> lalu cut/pindahkan/CTRL+X ke notepad terlebih dahulu
6. Kini kita hanya memiliki <b:skin><![CDATA[ ]]></b:skin>
7. Ganti kedua kode tersebut dengan menggunakan kode
&lt;!<b:skin><![CDATA[]]></b:skin>
8. Kemudian tambahkan di bawahnya
<style type="text/css"> CSS yang ada di Notepad </style>
9. Pratinjau template terlebih dahulu.
10. Jika sudah puas silakan disimpan lalu kita cek kembali menggunakan PageSpeed Insight kembali.

Lalu apakah blog ranirtyas.com ini sudah menerapkan cara di atas? Terus terang saja saya tidak menerapkan cara di atas karena tampilan blog saya tidak menjadi syantik lagi. Memang dengan menonaktifkan bundle.css otomatis tampilan template kita bisa saja berubah atau bahkan rusak ataupun error.

Masih banyak langkah menuju Roma selain cara menonaktifkan bundle.css di atas. Jika bertemu lagi, lain kali akan kita bahas rame-rame di sini.

Lagipula langkah ini sejatinya hanyalah untuk membuat agar tidak terbaca oleh browser hanya untuk menambah score di PageSpeed Insight.

Source :www.segitigabermuda.com
comments

23 komentar:

  1. kalau saya cek kecepatan loading blog saya di PageSpeed Score hasilnya 92% Mbak, itu artinya sudah baguskan??

    BalasHapus
    Balasan
    1. wah itu mah udah bagus banget Mbak Ira.. wuss.. wuss laju blognya

      Hapus
  2. punya saya masih berat karena banyak transferan yang lama dengan gambarnya yang berat. Ini blog baru, masih kerja rodi :D. Makasih ya Ran.

    BalasHapus
    Balasan
    1. gambarnya nggak pengen diperkecil Mbak Lidha?

      Hapus
  3. Huaaaa istilahnya banyak yg baru, nanti tak berguru duluk ah ma dikau mb rani ^_^

    BalasHapus
    Balasan
    1. jangan nanya yg susyah-susyah ya Nita, aku juga masih belajar nih

      Hapus
  4. memang salah satunya cara supaya cepat hanya dari gambar headernya ya? page speed score saya cuma 83% bagus gak? Yslow score itu apa ya mba Rani? mksh infonya

    BalasHapus
    Balasan
    1. 83% mah udah bagus banget Mbak Santi.

      Bukan cuma dari gambar header aja Mbak Santi, gambar dari komunitas-komunitas juga perlu dikecilkan.

      Yslow score itu jika web kita dibuka dari situs pencarian yahoo. CMIIW

      Hapus
  5. Mlongo aja hahahaa nggak ngerti. Kapan2 kalau pengin tanya2 optimasi blogku boleh japri kan?

    BalasHapus
    Balasan
    1. iya Mbak Lusi kalau bisa aku jawab kalau tidak bisa nanti aku panggil tim sekompi buat bantuin jawab hehehe

      Hapus
  6. Udah lah mending biarin ajah..hahaha. btw tampilan blog sekarang lebih cantik

    BalasHapus
    Balasan
    1. Makasih.. cantik kayak empunya ya :D *lalu digeplak sandal
      iya daripada membundle CSS yang bikin font-font kita jadi kaku mending biarin aja ya Nay. Seperti katamu, optimasi pada gambarnya saja.

      Hapus
  7. Mak rani.. manfaat banget ini infonya.. trimakasih yaaaa...

    BalasHapus
    Balasan
    1. alhamdulillah kalau bermanfaat Mbak Prima..^^

      Hapus
  8. Kalau saya masih bingung nih mbak milih template blog yang simple dan enak dilihat, dari sekian banyak template yang saya dowload ga ada yang srek di hati, gimana ya tips dari mbak nih. ?

    BalasHapus
    Balasan
    1. Kalau saya lebih demen menggunakan template klasik bawaan blogger tinggal dimodif background dan header serta menambahkan ini itu di widgetnya karena takutnya ya itu tadi jadi memberatkan proses loading blog kita.

      Hapus
  9. wah punya saya cuma 64% di desktop dan 74% di mobile
    sepertinya foto banyak yang harus di mampetkan

    BalasHapus
    Balasan
    1. iya cara itu lebih mudah ya Mbak daripada harus membundle css dan kawan-kawan

      Hapus
  10. wa wa wa wa....

    punya saya 72% seluler 59% desktop. :'(

    sik, sik. ta baca ulang lagi ya mbak Ran. nyari sekeping pemahaman dulu. but thanks anyway sudah membangunkan saya ya!

    semangat!!

    BalasHapus
  11. thanks mbak infonya, tadi aku test punyaku > pagespeed: 95 , Yslow : 80 :( , masih jelek ya? :(

    BalasHapus
    Balasan
    1. udah bagus itu Mbak.. yg penting jangan sampe merah

      Hapus
  12. Hallo mbak Rani. Sebelumnya termakasih sudah mau sharing penggunakan CSS yang mengalami render pada PageSpeed Insight. Namun, sedikit saran saja. Penggunakan cara yang mbak sampaikan di atas, memang bekerja pada penerapan template yang dibuat sudah menggunakan CSS style.

    Namun, kebanyakan template masih menggunakan b:skin yang selalu dirender. Nah, problemnya cara di atas tidak cukup bekerja pada template default dan hanya beberapa template yg bekerja. Itupun, harus benar-benar mengerti tentang coding.

    Saran saya, coba sampaikan saja mbk. Penggunaan panduan di atas belum benar-benar bisa mengatasi render CSS itu.

    Karena, saya sendiri sudah keliling2 forum Indonesia dan luarpun mereka mengatakan yg bisa hanyalah platform wordpress.org itupun menggunakan tools.

    Btw, salam kenal, ya mbak.

    BalasHapus

Komentarnya sementara dimoderasi ya 😁 dan jangan tinggalkan link hidup. Nanti BW baliknya lewat profil teman-teman. Terima kasih untuk tidak menggunakan "ANONIM".

Recommendations by Engageya