Cara Mempercepat PageSpeed di Blog WordPress

PageSpeed sekarang sudah masuk dalam salah satu faktor yang memepengaruhi SERP website kita di Google. PageSpeed di ukur  lebih pada optimal tidak nya script, image, dan juga efisiensi penempatan script. Untuk WordPress sendiri score PageSpeed akan sangat tergantung pada theme yang di gunakan. Biasanya theme yang sudah agak jadul akan mempunyai score page speed yang rendah meskipun blog masih kosong. Hal ini karena theme tersebut biasanya belum memperhatikan msalah pengoptimalan image, CSS dan juga Javascript.

Sebelum lanjut ke cara meningkatkan score PageSpeed install dulu page speed untuk Firefox atau Chrome. Bagi yang males install silahkan kunjugni saja gtmetrix.com

Bagi yang mau membuat blog baru sebaiknya cek dulu theme yang akan di digunakan, karena ada theme yang score PageSpeednya terlalu rendah meskipun blog masih kosong (dibawah 60). Theme seperti ini biasanya akan sulit menaikkan score yang 90 meskipun sudah di optimalkan. Alahkah baiknya memilih theme dengan score PageSpeed di atas 80.

Lalu, pakah harus coba satu- satu dulu ?

Tidak. Untuk mengetes page speed theme buka preview theme di new tab.

Theme Preview

Beikut ini merupakan faktor – faktor yang mempengaruhi score PageSpeed cara mengoptimalkannya untuk meningkatkan scroe PageSpeed.

Masukan dulu URL ke http://gtmetrix.com. Yang di bahas di bawh ini hanya beberapa faktor yang sering menjadi masalah.

1. Enable Keep-Alive

Ini berkaitan di server, tidak ada yng bisa kita lakukan jika tidak punya kases ke server.

2. Use efficient CSS selectors

Misal padding:2px 2px 4px 3px akan jauh lebih efisien dari pada harus menulis padding-top:2px; padding-right:2px; padding-bottom:4px; padding-left:3px; Urutannya adalah atas, kanan, bawah, kiri.

3. Minify CSS

Ini berkaitan dengan space pada CSS misal :

.kota{
padding:3px 0 0 0;
border:1px solid blue;
}

Akan lebih efisien bila

.kota{padding:3px 0 0 0;border:1px solid blue;}

Untuk mengoptimalkannya tidak perlu edit satu – satu, cukup download saja optimized version, kedian replace CSS lama. Ingat backup dulu.

4. Optimize images

Image yang di pakai di theme kadang masih di compress lagi ukurannya tanpa terlalu banyak mengurangi kualitas image. Sama seperti yang css tadi tinggal download optimized version saja.

5. Leverage browser caching

Sialhkan ganti .htaccess dengan kode di bawah ini

# BEGIN Compress text files
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>
# END Compress text files

# BEGIN Expire headers
<ifModule mod_expires.c>
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 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers

# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

6. Serve scaled images

Hal ini terjadi karena image berukuran besar dipaksa di tampilkan dalam ukuran kecil, misal image utkuran 500×400 di tpakasa di tampilkan dalam width 50×40. Sebaiknya jika ingin menampilkan image sebagai thumbnail di buat ukuran masing – masing atau memakai thimbthumb.

7. Specify image dimensions

Setiap kali menampilkan image pasti width dan height di set, contoh :

<img src="gambar.gif" width="100" height="100" />

Selain parameter – parameter di atas, pengoptimalan penempatan css dan Javascript juga di perlukan. Contoh plugin Contact Form 7. Plugin ini akan memanggil CSS Contact Form 7  dan Jquery jika di aktifkan. CSS dan Jquery ini seharusnya hanya di butuhkan saat halaman Contact di buka, tetapi kenyataannya di setiap halaman CSS dan Jquery dari Contact Form 7 ini diload di semua halaman. Nah hal seperti ini juga dapat mnegurangi PAge Speed karena menambah load script tetapi script tersebut tidak di butuhkan di halaman tersebut.

Mengoptimalkan Contact Form 7

Tambahkan kode ini di function.php

/**
 * Functions:	Optimize and style Contact Form 7 - WPCF7
 *
 */
function deregister_cf7_js() {
   if ( !is_page('contact') ) {
	wp_deregister_script( 'contact-form-7' );
     }
}
add_action( 'wp_print_scripts', 'deregister_cf7_js', 100 );

function deregister_ct7_styles() {
	wp_deregister_style( 'contact-form-7' );
}
add_action( 'wp_print_styles', 'deregister_ct7_styles', 100 );

Sedikit tambahan, kalau merasa blognya lemot coba cek pakai plugin  P3 (Plugin Performance Profiler). Plugin ini berguna untuk mengetahui plugin apa aja yang memakan resource paling besar.

Semoga bermanfaat.

23 Comments

  1. Hadie Danker
    May 28th, 2012 2:54 pm

    Dahsyat suhu….. langsung maknyus nyus nyus nyussssss speednya. 😉

  2. Aru Martino
    May 28th, 2012 5:30 pm

    keren mastah….ijin belajar disini ya? 🙂

  3. aditiya
    May 29th, 2012 6:42 am

    mantap… yang contact form itu yang mesti binggung ngatasi nya mastah…

    91 91 🙂

  4. blogwawan
    Jun 3rd, 2012 12:29 pm

    keren mastah,ane langsung praktekin 😀
    thanks suhu

  5. amdhas
    Jun 3rd, 2012 12:40 pm

    Themes asli wp di derectory ga bakalan ada yang di atas 85 apalagi 90..karena standart pensubmitan css tidak boleh di minify, harus standart kode wordpress, sumber ga boleh static, style harus di enquque, harus berfungsi lebih.

    WordPress menginginkan theme yang maksimal terlebih dahulu karena untuk optimasi itu tergantung pengguna..nah klo yang di optimasi dengan script apalagi hack di functions seperti di atas itu sampai lumutan ga akan masuk directory.

    Klo saya membuat theme ga memikirkan optimasi karena itu urusan user bukan urusan saya..yang musti di perhatikan adalah standart wp, tidak ada hack dan berfungsi dengan baik di versi terbaru. Semakin banyak fitur theme semakin berat tapi semakin user friendly di backend..

    Nah urusan optimasi biar user dan plugin..lagian ngapain ada plugin..biarlah mereka yang bertugas bukan pembuat theme. OTTO and matt mullen said..

    wp tak menginginkan minify..terkecuali pakai bootstrap..

  6. alimustikasari
    Jun 3rd, 2012 12:55 pm

    wah mantab benar…sip…tidak menyesal main kesini.. 😉

  7. Abi
    Jun 3rd, 2012 3:04 pm

    WOW, ilmu tingkat tinggi 😀
    mesti banyak2 mampir di blog ini

  8. Nitta
    Jun 3rd, 2012 3:14 pm

    menyimak….. ; supaya penjualan makin lancar…. thanks ilmunya Mbak.. 😆

  9. arsipen
    Jun 4th, 2012 4:42 am

    kalo pakai rss compressor, kode :
    .kota{padding:3px 0 0 0;border:1px solid blue;}

    akan jadi:
    .kota{padding:3px 0 0;border:1px solid blue}

    jd, khusus utk css, mendingan pakai service2 css kompresor yg sudah banyak bertebara.

    Kalo mau lebih maknyus lagi,
    coba file2 js ditaruh di body dibawah sendiri (reff: yahoo).

    just hints..

  10. alynuzz
    Jun 4th, 2012 5:12 am

    thanks….sangat membantu sekali infonya

  11. bhamdani
    Jun 9th, 2012 3:56 pm

    Supeeeeer sekaliiii kalau kata pak mario tipsnya… makasih banget, setelah digunakan web ane jadi lebih kenceng kebukanya. tq

  12. Obat Herbal
    Jun 19th, 2012 2:30 am

    Pakai w3 total cache aja, udah ada caching + minify jss + minify css. Sisanya bisa ditambah CDN kalau ada dana, jadi lebih cepet deh.

  13. awan
    Jun 21st, 2012 9:30 am

    Mantaph langsung Josssssssssssssssssssssss makasih ya 😀

  14. notebook
    Jul 24th, 2012 4:46 pm

    banyak yang harus diperhatikan dan semua terserah ama mbah google 😛

  15. arsanto bontot
    Jul 24th, 2012 7:40 pm

    suhu mara emang josg

  16. Anjrah Susanto
    Jul 27th, 2012 5:13 pm

    keren kupasannya 😯 .. tidak kepikiran sampai oprek sejauh itu 😛

    Maaf, OOT dikit,,Cara menuliskan kode PHP dipostingan, pripun caranya ? 😉

    1. Mara Mei
      Oct 30th, 2012 1:18 am

      Pakai syntax hilighter bos

  17. harison-kia
    Aug 10th, 2012 6:36 am

    wahh pantesan sedikit lemot euy saya punya
    jadi dengan bantuan si om nih bisa yah ane mempercepat my wp xi…xii…thanx om 

  18. Jual Jilbab Termurah
    Aug 20th, 2012 4:06 pm

    Gooood For Tutorial saya praktekin…terima kasih banyak

  19. Muhammad Andri
    Mar 2nd, 2015 3:57 am

    Oh begitu caranya ya suhu, siap meluncur buat nyoba. thank 4 your post.

  20. Muhammad Andri
    Mar 3rd, 2015 3:07 pm

    maksudnya ‘cukup download yang optimized version’ itu apa dan dimana downloadnya ? thanks

  21. Khasiat daun Binahong
    Apr 15th, 2015 4:19 am

    🙄 apa beda nya sama GTMetrix.com yaa Gan?
    #NubiAsk

  22. Ilham Risalo
    May 12th, 2015 5:49 am

    menangani “Leverage browser caching” perpanjang kadaluarsa diblog gmn bos. koding diatas htaccess itu ditaro dimn n bagaimn langkahnya?
    SAYA MENGGUNAKAN BLOGGER, pass tes kecepatan disarankan perbaiki kadaluarsa itu.

Leave a Reply

Your email address will not be published. Required fields are marked *