GTMetrix yang beralamat di sini mempunyai slogan “The web should be fast”. Alat GTMetrix membantu meningkatkan kecepatan loading, lebih efisien, dan meningkatkan performa situs web sehingga pengunjung situs web tentu akan senang. Aturan penilaian dan peningkatan performa yang digunakan memadukan aturan Google Page Speed dan Yahoo! YSlow. Setiap bagian yang kurang dijelaskan kekurangannya dan rekomendasi menurut Google Page Speed dan Yahoo! Yslow. Tentu saja dengan tautan artikel terkait yang merekomendasi penyelesaian masalah.
Karena kecepatan situs web ditentukan oleh banyak faktor, tidak hanya desain tetapi performa server letak desain ditempatkan juga sangat berpengaruh. Dengan demikian skor 100 tidak menjamin kecepatan lebih tinggi dibanding situs lain yang mendapat skor rendah. Namun alat GTMetrix patut dipertimbangkan oleh para pengembang dalam merancang situs web.
GTMetrix memberikan skor secara terpisah secara ringkas dan terinci untuk komponen Page Speed Grade dan YSlow Grade Page dengan rincian load time, total page size, dan total number of requests. Dari ringkasan tersebut dapat dilihat berapa lama waktu loading, ukuran laman, dan total permintaan ke server. Dengan demikian apabila ingin meningkatkan performa dengan mengurangi waktu loading, mengurangi ukuran laman, dan mengurangi permintaan dapat dilihat pada rincian, bagian-bagian yang perlu dioptimalkan.
Masing-masing kriteria menurut GTMetrix dikelompokkan menurut prioritas yaitu: tinggi, sedang, dan rendah. Prioritas tinggi lebih berpengaruh terhadap kecepatan situs, sehingga jika semua komponen pada bagian tersebut tuntas (skor 100), maka skor tersebut akan berpengaruh lebih tinggi pula pada total skor. Dengan demikian yang diprioritaskan adalah pada bagian prioritas tinggi, sedangkan pada bagian prioritas rendah dapat dioptimasi menyesuaikan kebutuhan.
Aturan menurut Google Page Speed berikut ini:
- Avoid a character set in the meta tag
- Avoid bad requests
- Avoid CSS @import
- Combine images using CSS sprites
- Defer parsing of JavaScript
- Enable gzip compression
- Enable Keep-Alive
- Inline small CSS
- Inline small JavaScript
- Leverage browser caching
- Make landing page redirects cacheable
- Minify CSS
- Minify HTML
- Minify JavaScript
- Minimize redirects
- Minimize request size
- Optimize images
- Optimize the order of styles and scripts
- Prefer asynchronous resources
- Put CSS in the document head
- Remove query strings from static resources
- Remove unused CSS
- Serve resources from a consistent URL
- Serve scaled images
- Specify a cache validator
- Specify a Vary: Accept-Encoding header
- Specify a character set early
- Specify image dimensions
- Use efficient CSS selectors
Sedangkan aturan menurut Yahoo! YSlow terdiri dari:
- Add Expires headers
- Avoid AlphaImageLoader filter
- Avoid CSS expressions
- Avoid empty src or href
- Avoid HTTP 404 (Not Found) error
- Avoid URL redirects
- Compress components with gzip
- Configure entity tags (ETags)
- Do not scale images in HTML
- Make AJAX cacheable
- Make favicon small and cacheable
- Make fewer HTTP requests
- Make JavaScript and CSS external
- Minify JavaScript and CSS
- Put CSS at the top
- Put JavaScript at bottom
- Reduce DNS lookups
- Reduce cookie size
- Reduce the number of DOM elements
- Remove duplicate JavaScript and CSS
- Use GET for AJAX requests
- Use a Content Delivery Network (CDN)
Tips Optimasi meningkatkan skor GTMetrix.
Pada blog ini menggunakan plugin Contact form 7 untuk mengirim pesan dari kontak (contact). Kemudahan memasang plugin, hanya dengan memakai mouse, klik, klik, next maka akan terpasang. Kemudahan pemasangan, fungsinya yang baik, dan sifatnya yang gratis, sangat menggoda untuk memasang plugin sebanyak-banyaknya atau kecanduan plugin. Padahal CSS dan javascript Contact form 7 ini sangat agresif di-load pada semua halaman yang sebenarnya tidak perlu. Karena kebutuhan CSS dan javascript hanya pada halaman contact saja.
Dampaknya plugin Contact form 7 menurut PageSpeed, “Remove unused CSS” dan YSlow merekomendasikan Use cookie-free domains – “components that are not cookie-free”. CSS dan javascript dapat dinonaktifkan (deregister) dari halaman beranda dan aktif pada halaman contact saja. Cara optimasi plugin Contact form 7 dengan menambahkan kode berikut ini pada functions.php akan mengatasi dua masalah sekaligus. Jangan lupa di-backup dulu file functions.php sebelum menambahkan kode ini.
Ganti/sesuaikan (‘contact’) dengan nama halaman (page) blog. Setelah kode ditambahkan pada functions.php, untuk mengetahui pengaruhnya hapus cache pada browser maupun cache yang ada di dashboard WordPress Anda. Buka beranda blog, refresh, dan test lagi dengan GTMetrix. Peringatan!
Semoga bermanfaat.
Penjabaran yang lengkap sekali, saya baru tau kalau google page speed mempunyai kriteria tersendiri dan berbeda urutannya dari Gmetrix, Saya bingung harus mengacu kemana, pada akhirnya saya mesetting situs saya dengan kedua tool tersebut. udah mentok ga tau mesti set apa lagi biar bisa naik. mungkin ada saran dari pak Isnan
Sampai saat ini saya masih mengalami kendala untuk meningkatkan kecepatan blog versi Y-Slow, mohon pencerahan mas bro ….