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.

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.