≡ Menu
Pabelog

Cara Mempercepat Loading Blog lebih Advanced

in Hacking

Cara mempercepat loading blog dengan mudah yang saya yakin semua orang bisa sudah saya bahas kemarin di sini. Sekarang saya akan coba membahas bagaimana cara mempercepat loading blog dengan lebih advanced.

Cara mempercepat loading blog yang saya akan tulis sekarang tidak akan memakai cache plugin seperti w3 total cache atau wp super cache. Namun saya akan langsung menuliskan bagaimana plugin itu bekerja.

Sayangnya untuk blogger tidak bisa melakukan hal ini, cara mempercepat loading blog ini khusus untuk wordpraess atau kamu yang punya akses root.

Kenapa kamu harus tahu cara mempercepat loading blog ini?

Untuk melakukan cara mempercepat blog ini, kamu tidak harus punya VPS/Dedicated/Cloud server. Shared hosting juga bisa kamu maksimalkan, dan saya sarankan kamu memakai hosting yang tepat. Jika boleh kamu bisa membacanya tulisan saya di sini:

Cara yang saya gunakan untuk mempercepat loading blog adalah memaksimalkan .htaccess dan header.php. Dengan memaksimalkan dua file itu, blog kamu bisa lebih cepat 50% sampai 70%.

Jangan anggap bahwa loading blog adalah hal yang sepele atau tidak penting. Di dunia bisnis kecepatan berhubungan dengan tingkat penjualan yang dihasilkan dan sama pula di blogger. Kecepatan blog yang semakin cepat menurunkan bounce rate.

Mungkin kamu masih belum merasakannya, tapi untuk website besar seperti google, 500 mili detik mengakibatkan pencarian yang lebih sedikit.

Untuk Yahoo!, 400 mili detik yang lebih lambat mengakibatkan 5%-9& orang melakukan klik balik. Dan untuk amazon, 100 mili detik bisa mengakibatkan peningkatan atau penurunan penjualan mereka sebesar 1%-2%.

Dan google sudah menuliskan di blog dia, bahwa blog dengan loading yang cepat berpengaruh pada SERP. Baca di sini.

Cara Mempercepat loading blog dengan .htaccess dan header.php

Oke, langsung saja. Saya akan mulai menulis bagaimana cara mempercepat loading blog dengan cara ini step by step.

Step 1. Gzip File Compression

Dengan mengkompres, kita bisa menurunkan respon time. Prinsipnya yaitu dengan menurunkan besar file dari respon HTTP.

Yang akan kita kompres adalah html dan css. Tapi mungkin bisa juga digunakan untuk file gambar dan pdf.

Oh yah, sayangnya tidak semua hosting memiliki fitur ini, tanyakan terlebih dahulu apakah mereka mendukung gzip file compression atau tidak. Untuk Hawkhost dan Site5 saya sudah coba dan mereka mendukungnya.

Dengan .htaccess
Sekarang kita mulai, buka .htaccess yang ada di root hosting kamu. Biasanya di hide, coba unhide dulu untuk melihatnya. Lalu klik edit.

Untuk server apache 1.3x kamu gunakan mod_gzip, tetapi untuk apache 2.0x (hawkhost) kamu gunakan mod_deflate. Lalu paste kode dibawah di baris paling atas .htaccess.


ModPagespeed on # using commands,filters etc
 

Dengan header.php
Cara ini merupakan alternatif, jika server yang kamu pakai tidak support mod_deflate atau mod_gzip. Caranya mudah, tinggal paste kode di bawah pada header.php.

Step 2. Disable ETags

ETag atau Entity Tags adalah sebuah string yang digunakan untuk memvalidasi cache pada browser apakah sama dengan kode aslinya. ETag ini berpengaruh pada pengujian YSlow!, dengan tidak adanya ETag, skor Yahoo! Slow blog kita bisa bertambah.

Caranya mudah, tinggal paste kode dibawah pada .htaccess

Header unset ETag  
FileETag None
Step 3. Browser Caching

Cara mempercepat loading blog yang ke tiga ini merupakan cara yang paling bisa dirasakan oleh user. Tanpa alat uji yang saya sebutkan di “Cara Mempercepat Loading Blog bag 1” pun kita bisa menilai apakah blog kita cepat atau tidak.

Untuk user yang pertama kali mengakses blog kita, pasti tidak akan begitu merasakannya. Tetapi, untuk pembaca setia, pasti akan merasakannya.

Konsepnya, browser akan menyipan file-file yang didownload di blog kita selama periode tertentu. Jadi, ketika user kembali mengakses blog kita, dia tidak akan mendownload lagi.

Lagi-lagi saya bicara tentang server apache, untuk server NGINX saya tidak membicarakannya karena mayoritas server memakai apache.

Server apache mendukung modul mod_expires dan mod_headers. Singkatnya penjelasan mengenai keduanya adalah seperti berikut:

mod_expires digunakan untuk menentukan lama periode file yang disimpan di browser user.

mod_headers digunakan untuk mengatur respon HTTP apakah file tersebut masih ada atau sudah dihapus.

Untuk melakukan seting, kamu hanya perlu mendambahkan kode di bawah pada .htaccess.

# BEGIN Expire headers
 
 ExpiresActive On
 ExpiresDefault "access plus 5 seconds"
 ExpiresByType image/x-icon "access plus 2592000 seconds"
 ExpiresByType image/jpeg "access plus 2592000 seconds"
 ExpiresByType image/png "access plus 2592000 seconds"
 ExpiresByType image/gif "access plus 2592000 seconds"
 ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
 ExpiresByType text/css "access plus 604800 seconds"
 ExpiresByType text/javascript "access plus 216000 seconds"
 ExpiresByType application/javascript "access plus 216000 seconds"
 ExpiresByType application/x-javascript "access plus 216000 seconds"
 ExpiresByType text/html "access plus 600 seconds"
 ExpiresByType application/xhtml+xml "access plus 600 seconds"
 
 # END Expire headers

 # BEGIN Cache-Control Headers
 
 
 Header set Cache-Control "public"
 
 
 Header set Cache-Control "public"
 
 
 Header set Cache-Control "private"
 
 
 Header set Cache-Control "private, must-revalidate"
 
 
 # END Cache-Control Headers

Pengujian

Nah, setelah kamu melakukan cara mempercepat loading blog di atas, kamu tinggal mengujinya di GTMetrix. Saya yakin skor yang kamu dapat akan lebih besar.

Ini skor yang saya dapat dulu.

GTmetrix score

GTmetrix score

Untuk meningkatkan skor YSlow! saya akan membahasnya nanti di bagian “cara mempercepat loading blog bag 3”. Jadi jangan sampai ketinggalan.


Tulisan “cara mempercepat loading blog lebih advanced” ini merupakan kelanjutan dari “Mempercepat Blog dengan Cara Mudah“.

Jangan sampai ketinggalan tulisan selanjutnya, jadi jangan lupa subscribe. Jika kamu merasa terbantu, saya akan senang jika kamu memberikan plus, like, atau tweetnya.

Jika ada hal yang ingin kamu tanyakan tentang cara mempercepat loading lebih advanced ini, kamu tinggal berkomentar. ;>

Jika kamu tahu cara mempercepat blog dengan cara yang lain, kasih tahu saya yah.

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.

  • Iwan March 20, 2015, 1:00 pm

    saya sudah semua tutorial diatas mas! udah di tes hasilnya juga bagus, tapi yang jadi pertanyaan knapa tanpilan websitenya jadi berubah tidak sesuai tema!! mhon pencerahanya… terima kasih

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

      coba deaktivasi minnify-nya.

  • dynu01 February 7, 2015, 9:01 pm

    mas Nadir cara penempatan yg di header.php gmn ya..? paling atas kah atau paling bawah atau dimana mas? saya coba paling atas…malah muncul kodenya di bagian header..saya masukin di tengah setelah juga sama muncul di blog…

    mohon pencerahannya mas

    • Nadiar AS February 18, 2015, 1:36 pm

      Tutorial ini sudah lawas, saya membuatnya tahun 2012. WordPress sekarang sudah versi 4.x. Saya kurang menyarankan cara ini sekarang.

  • arieski agustria November 18, 2014, 3:39 pm

    mas nadiar saya mencoba ikuti cara mas nadiar cuma karena host saya tidak bisa gzip compresion jadi ini yang saya masukkan ke htaccess :

    Header unset ETag  
    FileETag None
    
    
     ExpiresActive On
     ExpiresDefault "access plus 5 seconds"
     ExpiresByType image/x-icon "access plus 2592000 seconds"
     ExpiresByType image/jpeg "access plus 2592000 seconds"
     ExpiresByType image/png "access plus 2592000 seconds"
     ExpiresByType image/gif "access plus 2592000 seconds"
     ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
     ExpiresByType text/css "access plus 604800 seconds"
     ExpiresByType text/javascript "access plus 216000 seconds"
     ExpiresByType application/javascript "access plus 216000 seconds"
     ExpiresByType application/x-javascript "access plus 216000 seconds"
     ExpiresByType text/html "access plus 600 seconds"
     ExpiresByType application/xhtml+xml "access plus 600 seconds"
    
    
    
     
     Header set Cache-Control "public"
    
    
     Header set Cache-Control "public"
    filesMatch "\.(js)$">
     Header set Cache-Control "private"
    
    
     Header set Cache-Control "private, must-revalidate"
    
    
    
    ada kode yang salah ga ya mas? karena setelah saya masukan kode ini di htaccess yang saya dapatkan :
    
    The server encountered an internal error or misconfiguration and was unable to complete your request.
    
    Please contact the server administrator, [email protected] and inform them of the time the error occurred, and anything you might have done that may have caused the error.
    
    More information about this error may be available in the server error log.
    
    Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request.

    apa yang harus saya lakukan ya agar work?

    • Nadiar AS November 19, 2014, 11:32 am

      Saya kira eTag-nya tidak didukung juga. Coba yang dimasukan hanya code ini

       ExpiresActive On
       ExpiresDefault "access plus 5 seconds"
       ExpiresByType image/x-icon "access plus 2592000 seconds"
       ExpiresByType image/jpeg "access plus 2592000 seconds"
       ExpiresByType image/png "access plus 2592000 seconds"
       ExpiresByType image/gif "access plus 2592000 seconds"
       ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
       ExpiresByType text/css "access plus 604800 seconds"
       ExpiresByType text/javascript "access plus 216000 seconds"
       ExpiresByType application/javascript "access plus 216000 seconds"
       ExpiresByType application/x-javascript "access plus 216000 seconds"
       ExpiresByType text/html "access plus 600 seconds"
       ExpiresByType application/xhtml+xml "access plus 600 seconds"
      • arieski agustria November 21, 2014, 1:00 pm

        sep udah naik dari C D menjadi B(81%) dan A(90%) di GTmetrix

        apakah semakin lama expired nya makin bagus mas nadiar?

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

          Ya, semakin lama semakin bagus. Tapi sesuaikan juga dengan frekuensi editnya. Atau solusinya flush-cache ketika update.

  • kempung October 8, 2014, 7:57 am

    Mas klo webservernya nginx gmn mas, kan g bisa bc htacces

    • Nadiar AS October 9, 2014, 9:12 am

      Di nginx, ada di nginx.conf atau di virtual-hostnya. Tapi biasanya, default virtual host wordpress sudah teroptimasi.

  • Muhamad Yusuf Ramdhan March 19, 2014, 6:54 am

    Subhanallah !

    Barusan cek di GTMetrix. Nilai Page Speednya jadi A pointnya 99 . YSlownya A pointnya 100.

    Saya uda lama mau praktekin ini tapi takut salah, takut kenapa kenapa. Sebelum ini saya belum pasang CDN Cloudflare.

    Point saya sebelum di edit .httacces sama wp-blog-header.php di GTMetrix : PageSpeed A pointnya 93, tapi YSlownya C pointnya 79.

    Pernah browsing, ada sih artikel yang kaya gini, cuma bahasa inggris, ane ga paham, tapi pas baca disini, langsung paham,

    Makasi ya Nadiar, ilmunya bermanfaat.

    Oh ya, di .htacces, apa bedanya “<” dengan”” ?
    soalnya saya ganti ke “” …takut eror aja

  • Della December 21, 2013, 11:45 pm

    Hallo mas Nadiar
    mau tanya… apakah kita harus lakukan step 1 – step 3 atau boleh 1 saja untuk mempercepat loading blog?
    score website2 saya kurang bagus :(

    kalau di bandingkan dengan memasang plugin, cara ini yang lebih bagus kan ya?
    jadi kalau sudah pakai cara ini, tidak perlu instal plugin kan?

    Thanks ya sebelumnya

  • Ahmad Dahlan November 7, 2013, 3:08 pm

    Step 1. Gzip File Compression << yang step saya masih nda ngerti mas,,ini ada file yang di download ya?
    maaf banyak nanya soalnya masih baru,,hehehe

    • Nadiar AS November 7, 2013, 3:17 pm

      Cukup tambah kode


      ModPagespeed on
      # using commands,filters etc

      di baris paling atas .htaccess , .htaccess ada di folder htdocs atau public_html.

  • caratik September 9, 2013, 3:52 am

    terimakasih gan ane sudah pasang script

    ModPagespeed on
    # using commands,filters etc

    di file .htaccess
    dan berhasil, terimakasih banget gan, salam sukses yak!!

  • Amri July 24, 2013, 8:44 am

    Langsung saya praktekin dan hasilnya meningkat. Cuma kendalannya sama plugin2nya ini mas. “Remove query strings from static resources” bagian ini yang ganjel mas kalo di cek lewat gtmetrix.com

    • Nadiar AS July 25, 2013, 7:07 pm

      Oke, sebenarnya saya juga lagi membuat beberapa post cara mempercepat blog lebih keren lagi. Trik yang ini sudah agak ketinggalan sebenernya. Saya sepenuhnya memakai w3 total cache, tunggu saja, saya post tidak lama lagi kok.

      • Amri July 25, 2013, 9:31 pm

        w3 total cache gak masalah tuh mas sama adsense ? diforum sebelah ada yg ngatakan klo penggunaan w3tc ini ngelanggar TOS GA klo minify nya di aktifin atau apalah. Soalnya itu bakalan merubah script js GA yg dimana TOS nya gak boleh mengubah/modifikasi script GA.

        • Nadiar AS July 28, 2013, 1:55 pm

          ngak kok, saya pakai w3 total cache di sini. di w3 total cache kita bisa mengatur konfigurasi minnify sepenuhnya. saran saya, jangan pakai minnify yang auto.

  • sigit June 21, 2013, 8:11 am

    sekali lg mas…mungkin ada cara lbh khusus u/compress web yang banyak menyajikan gambar format jpg. sekali lg,..Tks

    • Nadiar AS June 21, 2013, 11:05 am

      Saya mengkompress gambar memakai WP-SMUSH it, jika blog/web kamu terdapat banyak gambar, saya sangat menyarankan untuk memakai host yang dekat dengan pengunjung kebanyakan atau memakai CDN.

  • sigit June 21, 2013, 8:08 am

    Terimakasih mas saran dan triknya…tp skor sy di gt metric kok tetep kurang bagus ya mas…tlg kl bs bantu saran mas dan untuk tutor terdahulu yang kemarin pakai gzip kok nggak bs buat web sy ya ya..

    • Nadiar AS June 21, 2013, 11:03 am

      Coba pakai cloudflare, caranya saya tulis di //arsip.pabelog.com/cara-setting-cloudflare/

  • portal informasi terlengkap January 24, 2013, 12:15 pm

    aduh mumet ya, lumayan udah bertambah ilmu saya trima kasih ya ilmunya