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.
Dahsyat suhu….. langsung maknyus nyus nyus nyussssss speednya. 😉
keren mastah….ijin belajar disini ya? 🙂
mantap… yang contact form itu yang mesti binggung ngatasi nya mastah…
91 91 🙂
keren mastah,ane langsung praktekin 😀
thanks suhu
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..
wah mantab benar…sip…tidak menyesal main kesini.. 😉
WOW, ilmu tingkat tinggi 😀
mesti banyak2 mampir di blog ini
menyimak….. ; supaya penjualan makin lancar…. thanks ilmunya Mbak.. 😆
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..
thanks….sangat membantu sekali infonya
Supeeeeer sekaliiii kalau kata pak mario tipsnya… makasih banget, setelah digunakan web ane jadi lebih kenceng kebukanya. tq
Pakai w3 total cache aja, udah ada caching + minify jss + minify css. Sisanya bisa ditambah CDN kalau ada dana, jadi lebih cepet deh.
Mantaph langsung Josssssssssssssssssssssss makasih ya 😀
banyak yang harus diperhatikan dan semua terserah ama mbah google 😛
suhu mara emang josg
keren kupasannya 😯 .. tidak kepikiran sampai oprek sejauh itu 😛
Maaf, OOT dikit,,Cara menuliskan kode PHP dipostingan, pripun caranya ? 😉
Pakai syntax hilighter bos
wahh pantesan sedikit lemot euy saya punya
jadi dengan bantuan si om nih bisa yah ane mempercepat my wp xi…xii…thanx om
Gooood For Tutorial saya praktekin…terima kasih banyak