Mengatasi Kecepatan Situs di Google PageSpeed Insight

Discussion in 'Search Engine Optimization' started by mugianto, Mar 28, 2016.

  1. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    [​IMG]
    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:
    [​IMG]

    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,
    [​IMG]

    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.
     
  2. blidee19

    blidee19 Member

    Joined:
    Feb 18, 2016
    Messages:
    89
    Likes Received:
    19
    Trophy Points:
    8
    Google+:
    Pertama, nice info mastah.. *bagus*
     
  3. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    Masih pemula saya kang bukan MasMas hehehe
     
  4. Vitus

    Vitus Member

    Joined:
    May 21, 2015
    Messages:
    215
    Likes Received:
    18
    Trophy Points:
    18
    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.
     
    arief munandar likes this.
  5. Musthafa Kamal

    Musthafa Kamal Active Member

    Joined:
    Jun 15, 2015
    Messages:
    603
    Likes Received:
    100
    Trophy Points:
    43
    IyA bingung gan *pusing*
     
  6. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    Nanti tak coba deh bikin pake camtasia, lepi ane dah mau meleduk soalnya, artikel soal bikin template Blogger aja jadi tersendat gan hikz
     
  7. Musthafa Kamal

    Musthafa Kamal Active Member

    Joined:
    Jun 15, 2015
    Messages:
    603
    Likes Received:
    100
    Trophy Points:
    43
    Di tunggu gan, template blog ane berat banget pdhal templatenya bagus :(

    Ane cek di GTmetrix sekitar 5 MB o_O
     
  8. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,244
    Likes Received:
    2,714
    Trophy Points:
    413
    Sekedar menambah saja. Tes google.com saja menghasilkan nilai:
    78/100 untuk mobile dan 92/100 untuk desktop
     
  9. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    Iya @KangAndre makasih tambahannya
     
  10. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    Mungkin isinya juga bermanfaat jadi besar2 gan hehehhe
     
  11. Yuyutsu

    Yuyutsu Member

    Joined:
    Mar 22, 2015
    Messages:
    312
    Likes Received:
    34
    Trophy Points:
    28
    Maksud dari angka (contoh) 91/100 yang tampil di Google PageSpeed itu apa, ya?
     
  12. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,244
    Likes Received:
    2,714
    Trophy Points:
    413
    Hasil nilai (skor) 91 dari yang tertinggi 100
     
  13. Yuyutsu

    Yuyutsu Member

    Joined:
    Mar 22, 2015
    Messages:
    312
    Likes Received:
    34
    Trophy Points:
    28
    Kalo angka 100 adalah yang tertinggi apa mungkin berarti ada 100 acuan untuk tahu situs web/blog itu cepat menurut Google PageSpeed?
     
  14. Vitus

    Vitus Member

    Joined:
    May 21, 2015
    Messages:
    215
    Likes Received:
    18
    Trophy Points:
    18
    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.
     
  15. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,244
    Likes Received:
    2,714
    Trophy Points:
    413
    Benar. Angka 100 adalah kecepatan sempurna versi Google, yang bisa saja berbeda jika menggunakan tools lain seperti GTMetrix
     
  16. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,244
    Likes Received:
    2,714
    Trophy Points:
    413
    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.
     
  17. siprof

    siprof Member

    Joined:
    Dec 4, 2015
    Messages:
    108
    Likes Received:
    10
    Trophy Points:
    18
    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 :)
     
  18. Yuyutsu

    Yuyutsu Member

    Joined:
    Mar 22, 2015
    Messages:
    312
    Likes Received:
    34
    Trophy Points:
    28
    @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?
     
  19. ngeblogasyikk

    ngeblogasyikk Well-Known Member

    Joined:
    Feb 1, 2015
    Messages:
    1,201
    Likes Received:
    175
    Trophy Points:
    63
    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 :)
     
  20. AndroidApkApps

    AndroidApkApps Member

    Joined:
    Dec 11, 2015
    Messages:
    693
    Likes Received:
    68
    Trophy Points:
    28
    Kalo optimasi lewat blogger memang rada susah :D, tetapi kalo di wordpress kyaknya lebih mudah soalnya di integrasikan sama plugin" hehe
     
Loading...

Share This Page