Cara Ririn Belajar SEO, Membuat Blog, Mendapatkan Uang
R: Halo Mas Dory, terimakasih atas kesediaannya untuk saya wawancarai. Saya tertarik dengan loading blog anda yang super ringan. Kira-kira apa rahasianya kok bisa secepat itu?
D: Halo Mbak Ririn dan salam kenal dan hormat saya untuk sahabat blogger sekalian. Pertanyaannya super sekali mbak. Hanya satu kalimat tapi membutuhkan jawaban yang sangat panjang untuk pertanyaan ini. Yang saya lakukan untuk membuat loading blog saya lebih cepat adalah mematuhi sebanyak mungkin pagespeed rules di developer google insights. Setidaknya ada 10 rules yang harus kita pahami dan sudah seharusnya untuk tidak di langgar. Di antaranya adalah sebagai berikut:
1. Avoid landing page redirect.
2. Enable compression.
3. Improve server response time.
4. Leverage browsing caching.
5. Minify resources.
6. Optimize image.
7. Optimize CSS Delivery.
8. Prioritize visible content.
9. Remove render-blocking JavaScript.
10. Use asynchronous scripts.
Untuk lebih lengkapnya tentang pagespeed rules ini sendiri bisa di lihat di https://developers.google.com/speed/docs/insights/rules.. Untuk sahabat yang menggunakan hosting dan platform gratis dari blogger (blogspot.com) seperti saya, tentu jauh lebih sulit dilakukan untuk tetap berpedoman pada 10 rules di atas daripada sahabat yang menggunakan hosting dan domain sendiri. Hal ini karena pada draft blogger kita tidak tersedia control panel seperti .htaccess file untuk penempatan scripts eksternal yang berguna juga untuk mengatur waktu kadaluarsa (set expired time) cookies untuk scripts tersebut. Yang bisa kita lakukan hanya menggunakan Edit HTML template untuk mengatur itu semua.
Setidaknya ada 4 rules yang saya ketahui paling sering di langgar untuk blog yang menggunakan platform blogger ini. Saya tidak seberapa paham untuk wordpress apakah cara saya ini bisa berhasil atau tidak. Harapan saya sich mudah-mudahan berlaku juga buat wordpress. Berikut ini adalah 4 rules yang paling sering dilanggar oleh sahabat blogger dan cara mengatasinya:
Saya sangat menyarankan untuk Backup terlebih dahulu template anda untuk jaga-jaga jika terjadi error nantinya.
1. Optimize CSS Delivery.
Saat anda cek blog anda di speed insights google, pernahkah anda menjumpai kalimat seperti di bawah ini:
“Your page has 2 blocking CSS resources. This causes a delay in rendering your page.”
Dibawah dari kalimat tersebut biasanya berisi url dari ekstenal css (default blogger css) seperti contoh berikut:
https://www.blogger.com/static/v1/widgets/[no-id-widget]-widget_css_2_bundle.css.
https://www.blogger.com/dyn-css/authorization.css?targetBlogID=[no-blog-id]&zx=dba695cf-d934-46c6-b881-5d89054e5547.
Sebelumnya saya info kan setahu saya cara saya ini berhasil jika anda menggunakan template download an dan bukan template bawaan yang telah di sediakan blogger. Karena template bawaan blogger rata-rata menggunakan template versi 2 (bisa dilihat di bawah kode <b:skin>…</b:skin> terdapat kode <b:template-skin>…</b:template-skin>). Kita tidak bisa menghilangkan blocking css resources jika terdapat kode <b:template-skin>…</b:template-skin>. Jika memaksa untuk menghilangkan kode tersebut, maka tampilan blog akan berubah 100% dari semula.
Unuk menghilangkan blocking css resource ini lakukan langkah di bawah ini:
1. Ganti kode <head> menjadi <head>.
2. Ganti kode </head> menjadi <!–<head/>–>.
3. Klik “Preview” jika tidak terjadi error, silahkan “Save template” anda. You are done.
Dengan cara ini setidaknya anda telah menambah 8 sampai 12 poin sendiri dari skor 100 yang terdapat di speed insights.
1. Remove render-blocking JavaScripts.
<script src=”http://bla-bla-bla.com/js/bla-bla.js” type=”text/javascript”></script>
Jika terdapat script seperti diatas di antara kode head template anda. Sudah bisa saya pastikan speed loading blog anda akan berkurang. Hal ini di karenakan anda telah meng inline url dalam javascript. Rekomendasi saya jangan pernah inline url dalam kode javascript. Yang harus anda lakukan adalah inline kode javascript yang kecil dalam tag html template anda.
Cara inline kodenya adalah seperti di bawah ini:
1. Silahkan copy url yang terdapat dalam javascript tersebut dan pastekan ke dalam new tab browser anda dan klik enter. Selanjutnya anda melihat source dari kode javascript tesebut.
Sebagai contoh jika url nya seperti contoh di atas http://bla-bla-bla.com/js/bla-bla.js. Dan source dari url tersebut seperti ini:
( function() {
var nav = document.getElementById( ‘bla-bla’ ), button, menu;
if ( ! Bla-bla)
return;
} )();
Maka yang harus anda lakukan adalah ganti:
<script src=”http://bla-bla-bla.com/js/bla-bla.js” type=”text/javascript”></script>
dan di ganti dengan kode
<script type=”text/javascript”>
( function() {
var nav = document.getElementById( ‘bla-bla’ ), button, menu;
if ( ! Bla-bla)
return;
} )();
</script>
2. Klik “Save Template” and you are done.
Cek kembali url blog anda di speed insights dan lihat hasilnya nilai anda sudah bertambah. Melakukan cara ini bisa menambah 5 sampai 7 poin dari nilai 100 speed insights google.
Saran saya jangan inline kode javascript yang mempunyai size besar seperti plusone.js, ajax.js, analytics dan lain sebagainya karena biasanya akan menambah masalah baru (prioritize visible content). Hanya lakukan cara ini jika source .js nya mempunyai size kecil.
3. Prioritize Visible Content.
Saat kita memasang script atau image di atas atau di tengah konten blog anda, maka kemungkinan anda akan melanggar rules yang satu ini. Karena browser akan loading script atau image terlebih dahulu sebelum loading artikel blog anda. Saran saya letakkan script atau image di bagian paling bawah html template anda (baik sebelum kode </body> ataupun setelah kode </body>, yang jelas letakkan sebelum kode </html>).
Maksimalkan penggunaan CSS dan div class untuk mengatur letak script atau image nya tapi tetap letakkan kodenya di bagian paling bawah html template.
4. Optimize image.
Gunakan base64 image online untuk mengganti <image alt=”bla-bla-bla” src=”bla-bla-bla.com/bla.jpg” width=”nilai-pixle” height=”nilai-pixle”/> dengan
<image alt=”bla-bla-bla” src=”data:image/png;base64,bla-bla-bla” width=”nilai-pixle” height=”nilai-pixle”/>
Base64 image online sangat berguna untuk mengurangi leverage browsing caching dari url image anda. Sebagai contoh dalam homepage url blog saya, di bagian paling bawah anda akan jumpai gambar tanda panah ke atas (back to top). Untuk url image tersebut saya ganti dengan base64 online (Tekan Ctrl+U lihat paling bawah dan anda akan melihat sorce dari gambar tersebut).
Jika anda mempunyai masalah selain 4 rules di atas, jangan ragu-ragu untuk hubungi saya. Saya akan bantu semaksimal mungkin sesuai dengan pengalaman yang saya miliki.
Sangat menginspiratif.
trims
wow…
lumayan rumit juga yah.. tpi patut untuk di coba
boleh banget caranya 🙂
sangat menyenangkan yaa mbak wawancaranya, selain untuk menambah ilmu mendapatkan pengalaman yang tak ternilai, kapan – kapan saya mau wawancarin adminnya cara-ririn deh
😀 😀
wkwkwkwk ada-ada aja nih master 🙂
imu baru semangat mbak ririn..
Wah jadi inspirasi nih mbak…loading blog yang ringan memang menjadi dambaan setiap pemblogger ya saya juga…saya mau cek kesana mbak
Bisa ditiru blognya nih.. Kalo loading cepet yang baca juga enak terutama buat yg internetnya lelet
Kecepatannya ngeri banget, ane cek di numion cuma butuh waktu 0,535 detik (kurang dari 1 detik) untuk ngeload halaman depannya.
Inspiratif sekali blognya ya Mba.
Salam
Menarik sekali, blog sobat juga kenceng. .kayak tuleeboo. Hehe
kalau blog sy belum bisa 100 mbak, terlalu sulit… sekarang baru bisa 97/100 , hehehe
Sudah baca sampe tuntas, dan kesimpulannya…
saya masih gak mudeng, h-hee… mungkin krn pengetahuan saya ttg html, dkk yg masih sangat minus.
semua jawabannya benar-benar bijaksana untuk pengembangan suatu blog, bisa menjadi inspirasi yang baru nih 🙂
kayanya harus pake hosting ama domain sendiri ya mb biar bisa dapet kecepatan loading blog dengan score 100 🙂
pakai blogspot juga bisa kok 🙂
iy ya mbak saya sudah berkunjung kesana.. walah enteng banget cuma tinggal mengedipkan mata udah langsung ke buka.. pdhl polos banget blognya gak macem2.. memang master orang ini mbk 🙂
kebetulan blog saya yang satunya lemot abis.
sama mbak blog saya juga lemot, mau benerin nggak ngerti caranya hehe…
mudah-mudahan lewat artikel ini bisa membantu mengatasi masalah loading blog yang lemot 🙂
iya silahkan diperbaiki lagi kak 🙂
bm dulu 🙂 …
makasih ya kak… sudah berbagi ilmu bermanfaat ni.
ilmu baru lagi nih mbak..
bermanfaat sekali..
saya juga mau membuat blog saya agar loading lebih cepat
waw lengkap sekali mbak tutorialnya. pengalaman pribadi ya mbak
Pas banget nih mba, saya lagi otak-atik template, soalnya berat sekali.. lg mau di kompres dulu
Waduh, mulai berpikir widget mana yang mesti di eyahkan, hheehee
tampaknya ane,, mw bikin kopi dulu nih…pembahasannya seru…sekalian ngeronda sementara di blog…ini…maap y mba rin..ane permisi dolo…kalau ntr malam ada suara kresek2 di blog ini…tau ajalah itu ane…heheheh
kalau soal loading blog sya undur diri.. cuma tmbus 79/100
maklum gk phm..
sekedar info.. 2hr ini saya tdk bsa akses blog ini dengn PC, dlm perbaikn kah???
Admin: hekos soft
mungkin kemarin server nya sedang error mas 🙂
tambah ilmu lagi, thanxs mbak ririn infonya kebetulan mau belajar loading blog
blog saya sih seperti cepat…
ini pembahasan Blog SEO Friendly, berhubung saya gak ngerti soal gini… bisa lah tambah-tambah ilmu…
artikelnya sangat bermanfaat sekali mbak, saya memang mengalami masalah dalam hal loading blog dan sudah berusaha untuk memeperbaikinya tapi masih bingung, dengan tips di atas pastinya sangat membantu sekali mbak, makasih 🙂
duh tambah keren aj postinganya si mbAK RIRIN
ikut nyimak aja gan.. pembhasan mengenai loading blog menarik juga.
Untuk optimize image semua gambar yang sudah ada dipostingan sebaiknya di ganti mbak Ririn ? thks
capek edit-edit nya mas 😀
Apa betul kalau base64 kurang pengaruh jika ukuran gambar diatas 10 kb ? Thks
saya kurang tahu mas 😀
Puas dan lega sudah selesai baca 5 tulisan berturut mbak ririn, dipikir-pikir, dianalisa sampai 3 jam juga saya bacanya. Mantab
masih saya masih jauh, harus diperbaiki lagi mbak 😀
sangat berguna hasil dari wawancara ini untuk kita praktikkan.. saya masih kurang jelas mengenai fungsi speed insight itu, sukar juga untuk mematuhi 10 rules yang telah ditetapkan..
Saya ikut nyimak aja dulu ya mbak. Mudah-mudahan bisa nambah pengalaman baru lagi tentang cara membuat halaman blog lebih cepat loading.
Ada satu hal yg jadi pikiran mbk ririn,, saya heran kenapa kalau dicek di insight google & pingdom, mereka punya hasil yg berbeda, bahkan jika insight google bagus, di pingdom malah jatuh, begitu juga sebaliknya. ada yg bisa bantu memberi penjelasan?
Jika yang di maksud Mas Ahsan adalah tools pingdom dot com. Situs ini menyajikan timeline atau waktu yang diperlukan browser untuk loading dari masing-masing url http request eksternal (bisa berupa elemen html, script(js), image, style , atau elemen lainnya) yang terdapat dalam html template blog kita.
Pendapat saya mengurangi jumlah http request dalam blog kita akan berdampak sangat baik untuk kecepatan loading halaman blog tersebut. Bagaimana cara nya ? Semua sudah di atur dalam rules pagespeed insights.
Misalnya kita ingin minimalkan timeline dari js (script) yang ada dalam blog kita, yang bisa kita lakukan mungkin dengan mematuhi rules pagespeed insights: Remove Render-Blocking Javascripts, atau bisa juga dengan cara Use Asynchronous Scripts.
Sedangkan untuk score tools pingdom melihat dari 2 aspek:
1. Performance grade atau pagespeed performance: Adalah usaha apa saja yang telah kita lakukan untuk meningkatkan kecepatan loading blog kita dari mematuhi rules yang terdapat di speed insights. Saya rasa tools pingdom sendiri melihat performance speed dengan pedoman yang ada dalam speed insights.
2. Score yang kedua tools pingdom di ambil dengan membandingkan loading time yang di perlukan blog kita dengan semua situs yang pernah di cek di tools pingdom itu sendiri. Misalnya your website is faster than 80% of all tested websites, saya misalkan saja website yang pernah di tes di tools pingdom sebanyak 100.000 websites dan skor yang kita dapat adalah 80% maka kecepatan loading blog kita lebih cepat dari 80.000 website yang pernah di tes.
Kesimpulannya terdapat keterkaitan yang erat antara antara score yang di berikan tools pingdom dengan rules speed insights. Semakin banyak kita bisa mematuhi rules yang ada di speed insights, semakin sedikit waktu yang di perlukan browser untuk load blog kita dan ini bisa terlihat di laporan tools pingdom.
Tapi semua ini hanya pendapat saya. Semoga bisa membantu Mas Ahsan.
Benar sekali Mas Dory. Penjelasannya panjang sekali, terimakasih banyak tipsnya. ^_^
Saya sempat mikir mungkin algoritma di mesin punya pingdom sedikit beda dengan insight, alias gak up to date dengan rules insight karena saya perhatikan di pingdom ternyata tidak mempermasalahkan kompresi maksimal untuk pengoptimalan gambar saat saya lihat di perf. grade sedangkan score insight ikut menghitung semua nilai persenan dari kompresi maksimal gambar yg bisa dimampatkan, jadi jatuhnya ternyata disitu.-_-‘
wah belum berani main seo-seoan, karena beli domain aja baru kemarin, jadi masih takut dikira nyepam ama pak dhe G, baydeway thank mbak Ririn, very usefull knowledge nih
Sangat menarik sekali isi wawancaranya. Top markotop baik yang mewawancarai n narasumbernya =)
iya terimakasih 🙂
mantap artikel nya
hmm.. seo riendly 🙂
salam – garisbuku.com
inline kode kode js memang sangat membantu ya mbak dalam meningkatkan pagespeed, tapi ada kalanya kita tidak bisa menggunakan trik tersebut untuk mengakali pagespeed semisal jika js tersebut berukuran besar maka kita tidak bisa melakukan inline mbak, karena hasilnya justru malah akan memperkeruh suasana, itu menurut pengalaman saya
mantap sekali mba ririn 😀 SEO OH SEO….
mantap gan, terima kasih banyak atas tips SEOnya 😀
terima kasih banyak ilmunya, saya coba dulu ya 😀
mantap, trima kasih banyak !
woww keren sekaleeh, 100% cepetnya kayak ngeklik folder di komputer 😀 sayangnya bukan untuk wordpress 🙁
Wah menarik sekali…. 🙂
o iya…barusan iseng mengunjungi blog yg lama neh…..Tapi yang tampil Pesan dibawah ini….mungkin ada manfaat nya.
Blog ini terbuka hanya untuk pembaca yang diundang saja
cara-ririn.blogspot.com
Sepertinya Anda belum diundang untuk membaca blog ini. Jika Anda merasa ini adalah kesalahan, Anda mungkin ingin menghubungi penulis blog dan meminta sebuah undangan.
keren dah artikelnya saya suka
acemaxs31.com
acemaxs86.com
apotekgumilar.com
Terima kasih mbak