≡ Menu

Memaksimalkan Kecepatan Loading Blog dengan Minify, Caching, CDN dan RailGun

in Hacking

Setiap webmaster sepertinya sudah paham jika kecepatan blog merupakan salah satu faktor SEO yang penting, Google mengumumkan hal ini tahun 2010 lalu pada webmaster central.

Tulisan ini juga adalah update dari dua tulisan saya pada tahun 2012 tentang mempercepat loading blog. Dua tulisan saya tentang mempercepat blog sebelumnya yaitu:

Mempercepat website/blog merupakan hal yang sangat penting untuk pemilik blog dan juga untuk pembaca. Blog yang cepat membuat pengunjung senang dan berlama-lama di blog. Hal ini akan membuat potensi konversi yang lebih tinggi.

Kali ini saya akan menunjukan bagaimana cara yang saya lakukan untuk mempercepat loading blog. Meskipun pada studi kasus ini saya memakai WordPress, tetapi dengan teori yang sama bisa diterapkan pada berbagai platform.

Oh ya, ada tiga web pengujian yang saya pakai kali ini, yaitu Google PageSpeed Inshight, Webpagetest, dan GTMetrix.

Berikut ini adalah hasil pengujian blog wordpress yang belum dilakukan optomasi sama sekali. Pada blog yang saya uji, saya memakai kilathosting, thesis theme, dan plugin aktif berjumlah 21.

Skor yang saya dapatkan pada Google PageSpeed tidak terlalu bagus, malah cenderung buruk. Untuk Desktop saya mendapat score 69/100 sedangkan mobile 59/100.

Score Google PageSpeed

Demikian pula pada webpagetest, semua penilaian yang ada saya mendapat skor terburuk, yaitu F. Pengujian saya lakukan dari browser firefox di lokasi San Jose, CA.

Webpagetest

Tidak jauh berbeda dari pengujian sebelumnya, score pada GTMetrix pun mendapat hasil yang cukup buruk.

pengujian pada GTMetrix

Apa yang Saya Rubah?

Untuk meningkatkan kecepatan dan performa, saya mengikuti saran-saran yang diberikan oleh Google PageSpeed dan hasil benchmarking webpagetest.

Jelas bahwa ada empat faktor yang menjadi kekurangan, yaitu minify, caching, compressing, dan CDN. Saya akan breakdown satu per satu, kecuali untuk compressing.

Khusus untuk firstbyte, tidak ada cara untuk mengakali hal ini, satu-satunya cara untuk mendapatkan first byte yang bagus adalah hosting yang bagus dan lokasi visitor. Semakin dekat visitor dengan server, maka semakin cepat firstbyte.

Minify

Sebenarnya apa itu minify?

Minify sederhananya adalah menghilangkan kode-kode yang tidak terpakai yang ada pada css, html, js, atau file lain yang ada pada website. Contoh kode yang tidak terpakai adalah komentar pada syntax/kode.

Untuk mengatasi hal ini, pada WordPress saya memiliki dua plugin favorit, pertama adalah W3TC yang kedua adalah BWP-Minify. Untuk tutorial W3TC saya sudah menulisnya di cara memakai W3TC.

BWP-Minify saya pilih pada tutorial ini karena cara pemakaiannya yang sederhana, mudah dipahami. Cara menggunakan BWP-Minify sangat mudah, setelah berhasil install plugin tersebut, saya membiarkan semua pengaturan secara default, kecuali untuk pengaturan di bawah, saya ceklist.

  • Minify bloginfo() stylesheets?
  • Leave external files at their original positions?
  • Enable bubble CSS import?

Pada menu advanced options, saya mengaktifkan Enable friendly Minify urls. Karena saya akan memakai CDN, dan hostname CDN yang saya pakai adalah cloud.arsip.pabelog.com, maka saya mengaktifkan Enable CDN support, dan mengisi hostname dengan hostname CDN saya, cloud.arsip.pabelog.com.

BWP CDN

Pengaturan BWP CDN

Berikut adalah skor yang saya dapatkan setelah melakukan setting minify dengan plugin BWP-Minify.

Setelah menginstall dan melakukan beberapa tweek, skor yang saya dapatkan dari google PageSpeed adalah 61/100 dari 59/100 untuk mobile dan 73/100 dari 69/100 untuk Desktop.

Google Page Speed Setelah Minify

Google Page Speed Setelah Minify

Skor pada webpagetest juga mengalami peningkatan, hanya saja untuk kecepatan loading menjadi lebih lama. Kecepatan loading ini bisa diatasi dengan cache dan CDN yang akan saya bahas selanjutnya.

Score Webpagetest

Score Webpagetest

Score GTMetrix pun mengalami peningkatan, request yang tadinya berjumlah 55 setelah dilakukan minify menjadi 49. Ukuran blog yang semula 1.29 MB menjadi 1.21 MB. Hanya saja kecepatan loadingnya menjadi naik, dari 6.43s menjadi 8.33s.

Score GTMetrix

WordPress Caching

Caching adalah metode yang dipakai untuk meningkatkan kecepatan loading dengan cara menyimpan file-file yang sering diakses di tempat yang mudah diakses, sehingga untuk request yang sama tidak perlu lagi memanggil ke sumber.

Untuk caching di wordpress, ada banyak plugin yang bisa kamu manfaatkan. Seperti WP Super Cache, Quick Cache, Hyper Cache, W3TC, dll. Favorit saya sampai saat ini adalah W3TC.

Saran saya, coba semua plugin yang saya sebut tadi, lalu bandingkan hasilnya, karena untuk setiap blog, memiliki hasil yang berbeda-beda. Khusus untuk blog ini, yang paling baik adalah W3TC, tetapi beberapa blog saya misalnya, lebih baik lagi menggunakan Quick Cache.

Saya melakukan pengaturan cache pada W3TC memakai cara seperti yang saya tulis pada, cara optimasi W3TC.

Setelah melakukan pengaturan caching dengan W3TC, score pada Google PageSpeed kembali meningkat, 69/100 dari 61/100 untuk Mobile dan 81/100 dari 73/100 untuk Desktop.

Score Google PageSpeed setelah caching

Score Google PageSpeed setelah caching

Begitupun untuk webpagetest, semua aspek yang diuji mengalami peningkatan performa. Kamu bisa melihat detail webpage test setelah caching pada halaman berikut.

Score Webpagetest setelah caching

Score Webpagetest setelah caching

Pada pengujian yang dilakukan GTMatrix setelah dilakukan caching, baik speed dan skor yang didapat sekarang menjadi lebih baik. Page Load time menurun sekitar 50% dari 8.33s menjadi 4.98s.

Score GTMetrix setelah caching

CDN dan RailGun

Langkah selanjutnya untuk meningkatkan kecepatan blog adalah dengan memakai CDN. Kali ini saya akan mencoba menggabungkan dua layanan CDN, yaitu CDNLion dan CloudFlare. Saya akan membahas tentang CDN Lion pada tulisan lain selanjutnya.

CDN adalah metode yang digunakan untuk menyebarkan file statis ke berbagai lokasi server, nantinya request file statis dari pengunjung akan di-serving oleh server terdekat dari lokasi pengunjung.

Sebenarnya saya bisa saja memakai hanya CloudFlare, tetapi untuk mengoptimalkan kinerja, saya menggabungkan dengan CDNLion yang memiliki datacenter lebih luas dari CloudFlare. Nantinya CDNLion bertugas sebagai CDN Server dan CloudFlare bertugas mengoptimasi keamanan dan kecepatan.

Baca: CDN Memakai CloudFlare.

Jika kamu tertarik dengan CDNLion, gunakan kupon Nadiar2014 untuk mendapatkan potongan harga.

CDNLion

Pertama saya aktifkan CDNLion dengan plugin W3TC, Performance ? General Setting ? CDN. Lalu pada bagian CDN Type saya pilih Generic Mirror.

Generic Mirror CDN

Generic Mirror CDN

Selanjutnya saya mengatur semua hal tentang file yang akan saya sebar di berbagai server CDN pada menu CDN, masih di plugin W3TC.

Jenis-jenis file yang akan saya sebar ke server CDN

Jenis-jenis file yang akan saya sebar ke server CDN

Langkah terakhir adalah mengatur CNAME agar sesuai dengan domain yang saya pakai. Tutorial lengkapnya bisa kamu baca di website CDNLion.

konfigurasi CNAME CDN

Saya juga kedepan akan membuat tutorial mengenai integrasi CDNLion dengan WordPress, sementara jika kamu berminat memakai CDNLion, bisa mengikuti tutorial yang mereka sediakan atau kontak saya jika kesulitan.

CloudFlare dan Railgun

Untuk memanfaatkan fasilitas cloudflare, kita harus mengganti NS domain saya dengan NS domain yang mereka sediakan. Caranya mudah, kita tinggal mendaftar sebagai anggota lalu masukan website yang ingin kita optimasi.

Pada pengaturan DNS di CloudFlare, saya mem-bypass hostname yang saya gunakan untuk CDN di CDNLion. Artinya khusus request konten statis tidak akan di-serving oleh CloudFlare, tetapi oleh CDNLion. Sebaliknya, selain hostname untuk CDNLion saya memakai proxy CloudFlare.

bypass CloudFlare

Lalu apa yang akan dihosting/caching oleh CloudFlare?

Di sini saya akan memanfaatkan salah satu senjata pamungkas dari CloudFlare, yaitu RailGun. Hanya saja, RailGun tidak gratis, setidaknya kita harus menjadi anggota CloudFlare Business (200 USD) untuk bisa memanfaatkannya.

Akan tetapi, Railgun ini bisa dipakai secara gratis khusus untuk Optimized Hosting Partners mereka, salah duanya adalah Arvixe dan CloudKilat.

Jadi apa itu Railgun?

RailGun akan membuat koneksi khusus antara server Cloudflare dengan server Optimized Hosting Partners mereka. Koneksi antara keduanya akan diakselerasi secepat mungkin. Menariknya, Railgun bisa men-cache konten-konten yang selama ini tidak mungkin di-cache. Artinya, untuk website yang sangat dinamis pun tidak masalah.

Railgun CloudFlare

CloudFlare mengklaim, dengan teknologi compressing yang railgun miliki, mereka bisa mengkompress halaman sampai 99.6% dan mempercepat koneksi sampai 700%.

RailGun CF

Cara mengaktifkan CloudFlare sangat mudah, pada halaman Settings overview, pada bagian Railgun™ origin network optimizer, kita tinggal menggeser bar untuk mengaktifkan RailGun.

Berikut adalah skor yang saya dapatkan setelah menggunakan CDNLion dan CloudFlare Railgun. Skor di bawah adalah skor tertinggi dari beberapa kali pengujian yang saya lakukan.

Pada pengujian Google PageSpeed, skore tertinggi yang saya dapatkan adalah 74/100 pada bagian mobile dan 86/100 pada bagian desktop. Sebelum mengkatifkan CDN dan Railgun, skor yang saya dapatkan adalah 69/100 mobile dan 73/100 desktop.

PageSpeed Final

Untuk webpage test, pada bagian first byte dan compress images tetap mendapatkan skor F. Tetapi sekcara keseluruhan mengalami peningkatan performa.

pengujian Webpagetest terakhir

Terakhir, pada GTMetrix terlihat jelas peningkatan memakai CDN dan RailGun. Load time yang sebelumnya 4.98s menjadi 0.98s, besar halaman menurun dari 1.12 MB menjadi 548 KB, dan request dari 49 menjadi 25.

GTMetrix

**

Bagaimana? ternyata CDN dan Railgun CloudFlare memiliki peranan penting dalam mempercepat loading blog. Jika dalam mobil, bisa dibilang CDN ini adalah ban yang bisa menyesuaikan kondisi jalan sedangkan RailGun adalah turbo/NOS.

Pekerjaan minify dan caching sebenarnya bisa kita serahkan ke CloudFlare juga, tetapi untuk memudahkan pekerjaan CloudFlare, sebelum kita menyerahkan ada baiknya kita optimalkan terlebih dahulu.

Metode lain yang tidak saya bahas adalah image compressing. Image compressing sebenarnya tidak cocok unuk blog WordPress yang memakai shared hosting. Karena pekerjaan ini termasuk pekerjaan berat.

Saya harap tulisan ini bisa memnjawab semua pertanyaan yang pernah masuk ke komentar blog ini atau juga email yang saya terima. Jangan lupa untuk berkomentar dan membagikan tulisan ini juga ya.

About the author: Halo, saya pengelola sekaligus pemilik blog ini. Saya suka blogging, programing, makan, dan tidur. Kontak saya di twitter saya, Google+ saya. Yakin gak komentar? blog ini do-follow loh!

Comments on this entry are closed.

  • widagdo dipto santiko May 6, 2015, 7:38 pm

    setting minify di nginx gimana ya?
    ga ketemu2 nih mas yang sesuai :|

    • Nadiar AS May 8, 2015, 11:44 am

      Memang ada Rules lain, saya pakai mod_pagespeed.

  • iKurniawan April 10, 2015, 2:01 pm

    Sudah pake W3C sama minify ini tapi masih kurang page load nya mas.
    Ada saran?

  • arrlando March 20, 2015, 6:54 pm

    Kak diar, sekarang web pabelog pake hosting mana sih? loading nya cepat amat… ;)
    saya udah coba pake ocean digital,tapi kok masih agak macet.

    • Nadiar AS April 7, 2015, 5:46 pm

      DigitalOcean yang 1024, tapi pakai CloudFlare juga.

  • Saudy Rantau Dama Gufa March 14, 2015, 2:02 pm

    Gan tolong post tutor cara memperpanjang cache blog ya

  • verta March 12, 2015, 10:31 am

    gan, saya mau tanya..setelah saya pakai cludflare 9 sub domain saya tidak bisa diakses… tolong bantuannya, caranya gimana agar bisa diakses kembali…
    thanks sebelumnya..

    • Nadiar AS April 7, 2015, 5:01 pm

      Bikin A Record baru dengan subdomain yang hilang.

  • proherba February 19, 2015, 6:44 pm

    Salam,
    Saya punya dua website dengan setting yang sama persis kenapa ditest yang satu grade A yang satu grade B? dua-duanya via cloudflare, pluginnya sama conten hampir sama. pencerahanya gan.

  • sikonyols February 18, 2015, 2:41 pm

    Ada yang sudah tahu, ada juga yang belom tahu.
    Dapet banyak pengetahuan dari sini..

    Salam kenal masbro :)

    • Nadiar AS February 18, 2015, 3:05 pm

      :) you are very welcome. Saya suka sama blog mu yang konyol. Udah jarang liat blog kayak itu.

  • adit February 1, 2015, 8:01 pm

    Saya mencoba cloudflare yang gratis baru kemarin. Hanya saja, setiap mau membuka preview artikel menjadi lebih lambat dari sebelumnya. Apa ini karena cloudflare yang saya gunakan versi gratis?

    • Nadiar AS February 18, 2015, 2:14 pm

      Bukan, saya kira memang ada yang salah dengan pengaturan atau servernya. Coba diperiksa kembali.

  • Diky Arga January 30, 2015, 1:14 am

    Saya coba pakai BWP Minfy, Speedtest meningkat. Tapi, tampilan jadi kacau, awalnya panik, terus aku deactive dan uninstall, normal lagi. Kira-kira kenapa ya, Mas ?
    Terimakasih.

    • Nadiar AS February 18, 2015, 2:35 pm

      File CSS dan JavaScript-nya tidak terbaca, ada kesalahan di penulisan alamatnya.

  • Code Ipank January 22, 2015, 8:01 pm

    sudah saya lakukan tahap diatas dan website saya akhirnya naik ratenya begitu juga loading website saya jadi lumayan cepat. terima kasih mas tipsnya…

  • enas nasrudin January 14, 2015, 1:38 am

    pengen di ikutin step by step, tapi bingung saya harus mulai dari mana,
    soalnya pagespeed saya kecil bgd

  • Taufiq Zuhdi December 21, 2014, 10:41 pm

    Saya masih newbie di bidang website, jadi saya akan belajar sedikit2 untuk mengoptimalkan website saya. Terimakasih gan informasinya. Sangat membantu :))

  • arieski agustria December 20, 2014, 8:35 pm

    Kok saya ga nemu railgun pada cloudflare saya dari cloudkilat ya mas Nadiar…

    • Nadiar AS December 22, 2014, 12:21 am

      Apa url nya?

  • fadlye December 1, 2014, 11:35 pm

    mantap blognya , saya cek blognya di http://gtmetrix.com emang cepat nilainya juga bgus arsip.pabelog.com servernya menggukanan vps cloudkilat atau vps shard hosting

    yang menjadi pertanyaan,saya beli theme/template toko online yang biasa di jual di theme.id.com untuk jualan prodak gtu dengan server cloudkilat , bagai mana dengan ceo kedepanya ??

    lalu suka ada trable ga nantinya di kemudian hari masalah server di pvs cloudkilat soalnya saya ga bisa setting2 server atau control panel di pvs , bisanya cuma upload prodak saja :D

    dan terakir saya liat harga sewa pvs cloudkilat itu sebulan 50rb artinya 600.000/th , yang jadi pertanyaan server di hostgator yang pake babyplan itu bisa 450.000/th , bagai mana menurut admin kira-kira baiknya membuat server di mana untuk pemula apa bagusan di cloudkilat langsung atau di hostgator ?? dan apa alesanya ??

    itu saja pertanyaanya maaf aga banyak , sekalian ngobrol2 dan salam kenal saja dari fadlye

    • Nadiar AS December 4, 2014, 6:23 am

      CEO apa maksudnya? saya tidak mengerti.

      Saya sangat puas dengan CloudKilat, kalaupun ada masalah tim mereka selalu siap membantu. Anda bisa menyewa jasa managed mereka jika kurang paham konfigurasi VPS.