Mengatasi Kecepatan Situs di Google PageSpeed Insight

Hallo teman-teman Bersosial moga-moga gak bosen ya liat tulisan ane yang aneh2 hehhehe.

Kali ini saya mau coba nulis soal memperbaiki kecepatan situs dengan bantuan alat Google PageSpeed Insight, cara ini berhasil saya lakukan di Blog saya, tapi mungkin bisa tidak berhasil di Blog kalian, jadi perlu ada sedikit diskusi untuk mengatasinya bersama-sama.

Apa pentingnya sih kecepatan blog?

Penting banget loh, coba bayangkan saat kita lagi mau buka blog seseorang, eh waktu loading blognya lelet banget, apa lagi sampe gak kliatan sama sekali, bete dong kalo gitu pasti langsung kita tutup trus cari yang lain Bener Gak?

Perasaannya gmana kalo hal itu menimpa situs kita, pasti bakal menurunkan trafik blognya kan. Ujung-ujungnya trafik blog sepi kita jadi males blogging hehehe.

Bahkan penelitian yang dilakukan seorang Pakar Google mengatakan, orang yang tidak sabaran pasti akan menutup sebuah halaman situs itu jika dalam waktu Sekedipan Mata belum terload pasti akan ditutup weeeee.

Langsung aja yu kita bahas.

Pertama kita tes dulu Blog/Website/Situs kita dengan tool Google PageSpeed Insight, lalu tunggu hasilnya, kalau blog saya hasilnya seperti ini:


Mudah-mudahan kalau situs agan juga sama ya gak banyak warna merah ataupun kuning dalam hasilnya hehehe.

Tapi kalau masih ada yang gagal dalam beberapa hal bisa coba cara di bawah ini.

1. Prioritaskan konten yang terlihat.

Maksudnya bisa saya artikan seperti ini, usahakan hal yang pertama kali diload adalah isi/konten dari blog tersebut, bukan widget author, arsip, entry populer, ataupun apalah apalah. Jadi ketika pengunjung mencoba masuk blog dan membutuhkan waktu sekitar 6 detik agar blog tersebut nampak seutuhnya, pada detik2 awal harus kontennya terlebih dahulu yang diperlihatkan.

Jadi cara mengatasinya bagaimana?

Kalau menggunakan template buatan orang biasanya gak usah merisaukan hal ini, karena susunannya biasanya sudah benar. Tapi kalau salah bagaimana? ya kita benarkan penempatan susunan kode HTML nya di badan template.

Kalau pake Blogger bisa dengan cara melihat dengan fitu lompat ke widget/jump to widget, lalu cek urutannya benar atau tidak, karena urutan yang benar seperti ini. >Header>>Blog1>>Footer, jangan sampai terbalik ya,


Kalau terbalik cut saja widgetnya lalu pindahkan ke tempat seharusnya, tapi jangan lupa untuk kembali menyesuaikan CSS maupun JS nya ya gan.

2. Memperkecil Javascript.

Kalau yang ini bisa langsung dikompress aja dengan alat online, blog saya ada alatnya jadi mungkin bisa kawan-kawan Bersosial gunakan. Tapi perlu diingat, mengompress kode javascript ataupun Css, akan mempersulit kita dalam melakukan pengeditan di dalam template kita nantinya, dikarenakan cara penulisannya yang menghilangkan spasi maupun komentar.

Untuk yang penghapusan komentar, ada baiknya setelah mengkompress kode, kita buat lagi komentar tersebut, yang berkaitan dengan hak cipta.

3. Memperkecil CSS.

Caranya sama dengan point 2 di atas, bisa gunakan alat online di Blog saya jika kalian ingin lebih cepat.

4. Aktifkan Pemampatan.

Usahakan blog untuk melakukan kompress otomatis sebelum akhirnya konten dari blog tersebut diunduh untuk dapat dilihat oleh pengunjung. Server yang melakukan kompres pada susunan kodenya, akan sangat membantu untuk mempercepat waktu perenderan dariRobot Indeks.

Jika kalian pengguna CMS Blogger, biasanya hal ini telah diterapkan secara otomatis pada server Blogger, namun jika belum bisa menggunakannya, bisa menggunakan server-server terkemuka seperti:

Apache bisa menggunakan Mod_deflate.
IIS dapat menggunakan Tehchnet.
Ngink lakukan dengan HttpGzipModule.

5 Optimalkan gambar.

Cara termudah adalah dengan menggunakan tool online seperti: Compresor[dot]io, Compresspng[dot]com, ataupun tool Compressjpg[dot]com, tinggal upload lalu hasilnya kita download.

Atau mau pake Photoshop ataupun alat lainnya seperti Firework, GIMP dan yang lain-lain, usahakan simpan jenis filenya yang cocok dengan web atau device, biasanya tulisannya kaya gini Save for Web & Device (Ctrl+Shift+Alt+S).

6. Hindari pengalihan laman landas.

Kalau yang ini solusinya, gunakan template desain responsif, agar kalau nanti pengunjung datang dengan menggunakan gadget seperti android, ipod, ataupun telp koin, mereka gak akan dialihkan/redirect ke halaman situs versi mobilenya, atau lebih parah diarahkan ke versi GoogleWebLight ehhehe.

7. Mengurangi waktu respon server.

Kalau untuk point yang ini saya gak bisa kasih caranya (Blom tau) cuma saran aja, kalo pengguna Blogger biasanya masalah soal server gak keluar (Blog saya kok kena ya). Kalau selain Blogger coba pilih penyedia jasa Hosting yang mempunyai nama baik di Waktu Respon Servernya, itu aja maaf.

8. Memperkecil HTML.

Banyak cara untuk memperkecil HTML, point 2, 3 dan juga point 4 salah satunya, lalu hindari penggunaan plugin-plugin pembantu seperti Boostrap, Foundation, Jquery, Googleapis, Font Awsome, dll. Jika masih memungkinkan menggunakan kode sendiri hindari penggunaan-penggunaan Library pendukung seperti tertulis di atas.

9. Manfaatkan penyimpanan cache browser.

Point ini punya maksud seperti ini, saat masuk kesebuah situs, pendownloadan sumber daya (gambar,css,js,dll) akan dilakukan secara otomatis, untuk bisa menampilkan situs tersebut secara utuh. Nah penyimpanan cache browser berguna jika, kita datang kembali ke situs itu (halaman yang sama), kita tidak perlu lagi mendownload ulang sumber dayanya, jadi isitilahnya kaya mode off line (Sotoy mode on).

Sayangnya flatform Blogger hanya menyediakan batas kadaluarsa sumberdaya selama 1 hari (24 jam), jadi jika kita kembali ke situs yang berflatform Blogger lebih dari 24 jam, kita wajib mendownloadnya dari ulang lagi Y_Y.

Cara mengatasinya gmana?

Tetapkan tanggal kadaluarsa pada tiap2 sumber daya tersebut, jika selain Blogger bisa menggunakan bantuan file Htacces untuk menyetel tanggal kadaluarsanya maksimal 1 tahun.

Kalau Blogger gak bisa melakukan hal itu, tapi ada triknya biar point ke-9 ini kita atasi, namun trik ini ada sisi negatifnya seperti beberapa fitur bawaan Blogger bisa tidak berfungsi.

Masih pengen tau caranya gmana meski ada efek sampingnya?
Bisa intip artikel di blog saya.

10. Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas.

Pada kasus ini flatform Blogger disulitkan oleh external source default kepunyaan Blogger itu sendiri, namun anehnya, kita yang harus memperbaikinya bukan mereka Y_Y.

Hampir sama dengan point 8 di atas, melakukan perubahan untuk yang satu ini akan ada konsekuensinya tersendiri, bahkan akan sangat besar dibandingkan point 9.

Jika kita lihat di Google PageSpeed Insight, akan membuka beberapa kesalahan yang harus kita perbaiki, hasilnya akan berbeda-beda di tiap blog seperti:

Hapus JavaScript yang memblokir render:

• https://ajax[dot]googleapis[dot]com/ajax/libs/jquery/1[dot]10[dot]2/jquery[dot]min[dot]js.

Optimalkan Pengiriman CSS yang berikut:

• http://fonts[dot]googleapis[dot]com/…0|Raleway:400,600&subset=latin,latin-extp://netdna[dot]bootstrapcdn[dot]com/…t-awesome/4.0.3/css/font-awesome[dot]min[dot]css.
• https://www[dot]blogger[dot]com/static/v1/widgets/1535467126-widget_css_2_bundle[dot]csshttps:
• //www[dot]blogger[dot]com/dyn-css/authorization[dot]css

Untuk mengatasi problem ini bisa baca artikel saya yang ini:

[Wajib Tahu] Cara Mempercepat Loading Blog PageSpeed Insight

Saya kira cukup sekian, kurang lebihnya kualitas artikel yang saya buat ini, saya harap kawan2 Bersosial mau memakluminya.

Salam
Mugianto.

 

Pertama, nice info mastah..

 

Masih pemula saya kang bukan MasMas hehehe

 

Menarik artikelnya, dan layak diujicoba, namun pengalaman saya sulit mempraktekkan jika hanya dengan tulisan seperti ini. Karena bisa diartikan dna dipraktekkan dengan cara yang berbeda, karena dipahami secara berbeda oleh pembaca. Akan sangat membantu jika ada video tutorialnya sehingga bisa dilihat secara live bagaimana praktek sesungguhnya. Terima kasih telah berbagi.

 

IyA bingung gan

 

Nanti tak coba deh bikin pake camtasia, lepi ane dah mau meleduk soalnya, artikel soal bikin template Blogger aja jadi tersendat gan hikz

 

Di tunggu gan, template blog ane berat banget pdhal templatenya bagus

Ane cek di GTmetrix sekitar 5 MB

 

Sekedar menambah saja. Tes google.com saja menghasilkan nilai:
78/100 untuk mobile dan 92/100 untuk desktop

 

Iya @KangAndre makasih tambahannya

 

Mungkin isinya juga bermanfaat jadi besar2 gan hehehhe

 

Maksud dari angka (contoh) 91/100 yang tampil di Google PageSpeed itu apa, ya?

 

Hasil nilai (skor) 91 dari yang tertinggi 100

 

Kalo angka 100 adalah yang tertinggi apa mungkin berarti ada 100 acuan untuk tahu situs web/blog itu cepat menurut Google PageSpeed?

 

100/100 menurut pemahaman saya adalah nilai|scor yang dimiliki, ibarat ujian lulus, dan bisa dijawab semua. Ketika nilainya masih 91/100 artinya masih ada masalah yang bernilai 9 yang perlu diperbaiki, apa yang perlu diperbaiki, ditunjukkan dalam laporan page speed insight. Jadi 100 bukan soal jumlah acuan atau aturan yang harus dipenuhi, tetapi menyangkut nilai. Itu yang saya pahami.

 

Benar. Angka 100 adalah kecepatan sempurna versi Google, yang bisa saja berbeda jika menggunakan tools lain seperti GTMetrix

 

Setidaknya, dengan melihat nilai yang diperoleh kita mendapat gambaran tentang kecepatan situs menurut Google. Namun, tidak dapat dijadikan patokan sebenarnya. Situs google.com yang sangat cepat karena sederhana, namun skor hanya 78 untuk mobile dan 91 untuk desktop. Saya pernah punya blog dengan nilai 95, tapi saat dibuka sangat lambat.

Yang paling praktis adalah kita coba sendiri membuka blog dengan koneksi internet yang lambat. Jika blog dibuka dengan cepat meskipun skor merah, abaikan saja.

 

Jangan lupa, skor pagespeed itu di cek dari mana dulu, kalau dari server negara maju ya tentu hasilnya beda kalo dicek dari server negara dunia ketiga

 

@mugianto berhubung judul threadnya 'Mengatasi Kecepatan Situs di Google PageSpeed Insight', Kecepatan Situs yang optimal itu seperti apa? Kedua, apakah saran yang udah dijabarin panjang lebar memang efektif untuk mencapai Kecepatan Situs 100/100?

@KangAndre, apa perlu ya melakukan perbandingan hasil dari Google PageSpeed Insight dan GTMetrix?

 

Berhubung @KangAndre lagi sibuk nyusun artikel wkwk, coba saya jawab. *asal nebak

Sebenarnya nggak perlu, selama load blog mas sudah mas anggap cepat, nggak pakai 2 tools online itu sebenarnya nggakpapa. fungsi kedua tools itu hanya sebagai sinyal atau peringatan bagi blog mas, mana2 saja yg harus diperbaiki.


Coba tengok dan cek blog saya yang disignature. Nilainya nggak sempurna.

Kang Andre juga sudah menulis di atas bahwa google sendiri memiliki angka tidak sempurna, tp kenyataannya tetap berdiri dinomor satu. Sebenarnya problem terbesar bukan di load, selama loadingnya masih normal2 saja, kecuali memang sudah lemotttttttt bangetttt itu perlu diperbaiki. Artikel anda lah yang terpenting. Percuma load cepet tp isinya 0 BESAR.

Sekian

 

Kalo optimasi lewat blogger memang rada susah , tetapi kalo di wordpress kyaknya lebih mudah soalnya di integrasikan sama plugin" hehe