GTmetrix 100%: 8 Cara Mempercepat Website WordPress (2021)

Tahukah Anda bahwa Google memprioritaskan Website yang terbuka kurang dari 2,5 detik?

Apakah harus secepat itu?

Bagaimana cara mempercepat website WordPress?

Core Web Vital akan diterapkan bulan Mei 2021, kecepatan load menjadi penting untuk SEO. Kriteria salah satunya adalah website harus terbuka di bawah 2.5 detik. 

Website ini bisa di load kurang dari 1 detik. Untuk mencapai ini ada beberapa poin dalam memperbaikinya. Optimasi membuat website WordPress mulai dari layanan hosting, page builder, theme dan plugins.

Cara mempercepat website wordpress

Saya melakukan optimasi edavos.com dari 6.2 detik menjadi <1 detik. Ukuran file sebelumnya 3.96 MB, sekarang menjadi 683 KB.

GTmetrix Edavos sebelum optimasi
Sebelum Optimasi
GTmetrix Edavos setelah optimasi
Setelah Optimasi

Saya akan berikan tips apa saja yang perlu dilakukan. Tool utama yang kita gunakan adalah GTMetrix

Saya suka GTMetrix terutama fitur “waterfall”. Waterfall memberikan rincian apa saja yang di load. 

GTmetrix Waterfall

Waterfall akan memberikan informasi ukuran dari masing-masing file. Dari sini kita bisa cek dan optimasi sesuai keperluan. 

Catatan: Semua tools yang digunakan baik tema dan plugin adalah versi gratis (freemium). Apabila memputuhkan fitur tambahan bisa di upgrade.

Mari kita mulai!

1. Resize dan optimasi gambar

Tahukah Anda pengguna Laptop/PC banyak menggunakan resolusi 1366×768 (HD). Sedangkan tablet atau smartphone tentu lebih kecil lagi.

Ketika kita foto dengan kamera smartphone 13 megapixel. Maka menghasilkan resolusi 4032×3024 dengan ukuran 4MB. Bagaimana kalau kamera DSLR, pasti jauh lebih besar kan?

Sekarang Anda bisa lihat perbedaannya bukan? Resolusi yang ditampilkan layar dengan foto beda jauh. Begitu juga dengan gambar, perhatikan ukuran dimensinya. 

Karena itu gambar/foto yang mau diupload sesuaikan dulu dimensinya. Upload gambar sebaiknya tidak lebih besar dari yang akan di tampilkan ke pengguna. 

Ukuran gambar yang lebih besar akan membuat “loading” halaman menjadi lambat.

GTMetrix memberikan info pada properly size image apabila ada gambar yang melebihi tampilan. 

Sesuaikan dimensi semua gambar terlebih dahulu. Setelah itu baru kompress menggunakan tool seperti ShortPixel. Setelah selesai menyesuaikan dimensi dan kompress baru di upload.

2. Menonaktifkan plugin di halaman tertentu

Apakah Anda tahu banyak plugin tetap aktif walaupun tidak digunakan di halaman tersebut. Misalkan halaman kontak ada form untuk kirim email ke Anda.

Halaman tersebut menggunakan plugin WP Form dan WP SMTP. Tahukah Anda kedua plugin ini tetap di load di semua halaman/artikel.

Bayangkan load di semua halaman baik Anda gunakan atau tidak!! Nah, dengan Asset CleanUp kita bisa menonaktifkan plugin yang tidak digunakan di halaman tertentu.

Contoh tampilan Asset CleanUp di salah satu halaman. Anda lihat ada 52 file yang aktif di halaman tersebut.

Asset CleanUp

Cek satu per satu apakah semua perlu di load di halaman tersebut? Nonaktifkan yang tidak diperlukan. 

Fitur lainnya, Asset CleanUp bisa menonaktifkan beberapa konfigurasi bawaan WordPress. Sehingga WordPress menjadi lebih ringan.

Hapus semua plugin yang tidak digunakan. Bukan nonaktif ya, tapi dihapus. Gunakan plugin yang ringan dan seperlunya saja.

3. Theme

Ada ribuan tema tersedia di WordPress namun tidak semua bagus. Gunakan tema yang ringan dan teroptimasi.

Theme favorit saya GeneratePress karena sangat ringan. GeneratePress punya support yang sangat baik dan tema yang paling ringan

Ulasan tema tercepat dan terbaik lainnya. Gunakan Asset CleanUp untuk cek ukuran tema yang Anda gunakan. Semakin kecil file yang di load semakin baik.

Selain Asset CleanUp bisa menggunakan GTmetrix Waterfall juga.

4. Page Builder

Elementor salah satu page builder yang cukup populer. Saat ini pengguna aktif mencapai 4,000,000+. Sayangnya Elementor menggunakan banyak script dan memberatkan.

Ketika saya cek di Asset CleanUp, file Elementor yang di load sebesar 900+ KB. Sedangkan Gutenberg sebesar 50+ KB.

Bayangkan bedanya sampai 18 kali lipat !!

Tentu saja dengan ini kinerja website akan menurun. Anda bisa cek page builder yang lainnya dengan cara yang sama.

Pertimbangkan kembali penggunaan page builder tersebut apabila memberatkan.

Tips: Saran saya jangan gunakan page builder tapi gunakan Gutenberg dari WordPress. Suatu saat Anda akan berterima kasih karena meninggalkan page builder (semoga).

5. Cache Plugin

Ada banyak cache plugin yang tersedia di WordPress. Saya sudah mencoba berbagai macam cache. 

Cache Plugin yang Populer:

LiteSpeed

WP Super Cache

W3 Total Cache

WP Rocket (Premium)

WP Fastest Cache

Bagi saya plugin Litespeed mempunyai kinerja yang terbaik. Berikut perbandingan dengan cache plugin lainnya:

Perbandingan Fitur Cache Plugin
sumber: niagahoster.com
Perbandingan Fitur Cache Plugin Optimisasi
sumber: niagahoster.com
Perbandingan Fitur Cache Plugin (Harga)
sumber: niagahoster.com

Saat ini Litespeed web server paling cepat dibandingkan dengan Apache atau Nginx. Litespeed cache terintegrasi dengan web server litespeed.

Pastikan penyedia hosting mendukung web server ini utk menggunakan Litespeed plugin.

Beberapa fitur yang saya gunakan di Litespeed:

Cache

Enable cache > ON

TTL > mengikuti bawaan

Browser cache > ON

CDN

Load JQuery Remotely > OFF

Cloudflare API > Integrasi utk membersihkan cache Cloudflare dari Litespeed

Image Optimization > Saya menggunakan ShortPixel

Page Optimization > CSS Settings

CSS Minify > OFF. Dilakukan di level DNS di Cloudflare.

CSS Combine > OFF

CSS HTTP/2 Push > ON

Load CSS Asynchronously – OFF. Pastikan ini Off, karena bisa menyebabkan problem FOUC. FOUC (flash of unstyled text) menyebabkan CLS meningkat.

Generate Critical CSS > OFF

Inline CSS Async Lin – OFF

Page Optimization > JS Settings

JS Minify > OFF. Dilakukan di level DNS di Cloudflare.

JS Combine > OFF

JS HTTP/2 Push > ON

Load JS Deferred > OFF

Load inline JS – Default

Page Optimization > Optimization

HTML Minify > OFF. Dilakukan di level DNS di Cloudflare.

Load Google Fonts Asynchronously > OFF

Remove WordPress Emoji > ON

Database

Bersihkan sesuai kebutuhan

Litespeed Fitur Database

6. Content Delivery Network (CDN)

Saat ini saya menggunakan Cloudflare. Data Center Cloudflare tersebar di 200+ kota di dunia. 

Semakin dekat pengguna dengan Data Center semakin cepat pula kinerja website. CDN ini yang membuat kinerja website di bawah 1 detik.

Cloudflare membuat TTFB (Time To First Byte) turun menjadi di bawah 200ms. Tadinya TTFB bisa di atas 600ms. Semua konfigurasi dilakukan di Dashboard Cloudflare.

Beberapa fitur yang saya aktifkan:

Speed > Optimization

Auto Minify > JavaScript, CSS, HTML

Brotli > ON

Caching > Configuration

Browser Cache TTL > Respect Existing Headers

Page Rules

websiteanda.com/wp-admin/* > Mengamankan login admin

websiteanda.com/*preview=true* > Cache tidak digunakan apabila preview post

websiteanda.com/* > Cache semua

Konfigurasi Cloudflare Page Rules

Scrape Shield

Hotlink Protection > ON

7. Layanan penyedia Hosting

Apakah GTMetrix sudah mencapai nilai 85 ke atas? Apabila nilai belum memuaskan, pertimbangkan untuk pindah layanan.

Layanan Hosting biasanya terbagi menjadi share hosting dan cloud hosting. Shared hosting biasanya juga dikenal dengan istilah unlimited hosting.

Harganya lebih bersahabat karena pemakaian server bersama. Sehingga resource server juga di pakai bersama.

Cloud hosting website pengguna ditempatkan lebih dari satu server. Begitu pula dengan resource server.

Pengguna cloud hosting kinerjanya lebih stabil. Apabila satu server sibuk, aktifitas website dipindah ke server lain. Kinerja tetap terjaga walaupun trafik besar.

Tentu kebutuhan masing-masing akan berbeda. Sesuaikan kebutuhan server berdasarkan berapa banyak pengunjung harian website.

Share hosting juga bisa mencapai hasil <1 detik. Mulai dulu dari share hosting. Tingkatkan lagi kapasitas hosting apabila dibutuhkan.

8. Tools untuk menurunkan total page request

Untuk memperbaiki remove unused JavaScript karena Google Analytics, kita akan menggunakan plugin CAOS (Complete Analytics Optimization Suite). Menggunakan CAOS kita akan menyimpan file analytics.js ke server lokal. 

Pastikan tidak ada plugin lain yang load Google Analytics kecuali CAOS.

Berikut konfigurasi yang saya lakukan:

Basic Settings

Google Analytics Tracking ID > Isi dengan kode Analytics

Snippet type > Asynchronous. Asynchronous membuat script di load bersamaan dengan yang lain. Sehingga kinerja menjadi lebih baik.

Position of tracking-code > Footer.

Advance Settings

Which file to download? > Analytics.js

Berdasarkan pengamatan saya, konfigurasi tersebut mempercepat sampai 200-300ms.

Untuk memperbaiki Ensure text remains visible during webfont load, gunakan plugin Code Snippets. Code Snippets berguna untuk menambahkan kode CSS, JS atau HTML tanpa merubah function.php dari theme.

Kalau merubah function.php apabila ada perubahan tema maka kodenya akan hilang. Lebih aman menggunakan Code Snippets ini.

Code Snippets

Gunakan GTmetrix Waterfall untuk mendapatkan lokasi file-nya. Clone atau Edit “Example HTML shortcode”. Ganti kotak tersebut dengan lokasi file dari GTmetrix Waterfall.

Berdasarkan pengamatan saya, preload dapat mempercepat sampai 100ms.

Demikian cara mempercepat website WordPress semoga berguna!

Frequently Ask Questions

Apakah perlu menggunakan AMP (Accelerated Mobile Pages)

Saat ini saya tidak menggunakan AMP. Saya masih merasa kalau AMP hanya menambah beban. Belum lagi terkadang ada beberapa masalah teknis karena AMP ini.

WordPress hosting apa yang saya gunakan?

Saya menggunakan hosting lokal Niagahoster.

Apakah ada Tool lain selain GTmetrix?

Selain GTmetrix bisa menggunakan web.dev. Web.dev tidak hanya mengukur kinerja, tapi ada Best Practice, Accessibility dan SEO. Selain itu masih ada Google PageSpeed dan Pingdom.

Theme yang direkomendasikan?

Theme favorit saya GeneratePress.

Page Builder yang digunakan?

Saya menggunakan Gutenberg dengan tambahan plugin GenerateBlocks. GenerateBlocks dari developer yang sama dengan GeneratePress. Plugin-nya sangat ringan.

Kenapa loading website harus cepat?

Core Web Vital akan diterapkan bulan Mei 2021. Kriteria salah satunya adalah website harus terbuka di bawah 2.5 detik. Pantau kinerja Core Web Vital di Google Search Console.

Apakah ada cara untuk audit kecepatan keseluruhan halaman?

Laporan Speed Suggestions pada Google Analytics memberikan info halaman yang lambat dan perlu perbaikan.