PageSpeed 100%: 9 Cara Mempercepat Website WordPress

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 diterapkan per Juni 2021, kecepatan memuat halaman 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 303 KB.

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

Core Web Vitals untuk Desktop …

Desktop Core Web Vitals

Core Web Vitals untuk Mobile …

Mobile Core Web Vitals

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. 

Download eBook Membongkar Rahasia ChatGPT dengan mengisi form berikut.
eBook akan dikirimkan ke email

Berikut versi PageSpeedInsight

Page Speed Insight 100%

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 kompress menggunakan tool seperti ShortPixel atau Litespeed Image Optimization. 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 misalkan 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.

Contoh opsi hapus html tertentu di Asset CleanUp

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 di bawah 10kb. 

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.

Saya cek di Asset CleanUp, ketika Anda menggunakan semua fitur Elementor file dapat mencapai 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.

Contoh salah satu halaman yang menggunakan Elementor …

hasil gtmetrix menggunakan elementor

… hasilnya setelah migrasi ke Gutenberg

hasil gtmetrix menggunakan gutenberg

Pertimbangkan kembali penggunaan page builder tersebut.

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 Fastest Cache

WP Rocket (Premium)

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 litespeed ini untuk menggunakan Litespeed plugin secara optimal.

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

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

Cek artikel cara setting Litespeed Cache untuk solusi lengkap dari CDN, Caching, kompres gambar dan penggunaan Webp.

Tips: Bagi Anda yang kesulitan meningkatkan kecepatan website, saran saya gunakan WP Rocket. Walaupun WP Rocket berbayar, namun WP Rocket secara otomatis menerapkan 80% konfigurasi terbaik setelah Anda aktivasi. 

Anda akan melihat peningkatan langsung apabila menggunakan WP Rocket. Karena WP Rocket fokus pada peningkatan Core Web Vitals, sedangkan Litespeed tidak.

Baca artikel ini untuk setting WP Rocket yang paling optimal.

6. Content Delivery Network (CDN)

Saat ini saya menggunakan Cloudflare dan Quic.Cloud di beberapa website yang saya kelola.

Data Center Cloudflare tersebar di 200+ kota di dunia. Sedangkan Quic.cloud sudah mempunyai 68+ POP di dunia.

Tips: Walaupun Anda tidak menggunakan CDN Cloudflare, namun DNS Cloudflare menurut DNSPerf termasuk yang tercepat. Anda bisa pindahkan DNS dari penyedia hosting ke Cloudflare.

Perbandingan kecepatan DNS

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

DNS 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 di 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. Database

Saya menggunakan Litespeed untuk membersihkan database secara berkala. 

Database Optimizer

Pada bagian bawah terdapat Database Table Engine Converter. Di sini lakukan pembaharuan MyISAM ke InnoDB. 

Performa kecepatan kueri InnoDB lebih baik daripada MyISAM. Sehingga performa website akan meningkat. 

Penting untuk melakukan backup database terlebih dahulu sebelum konversi MyISAM ke InnoDB. 

Pada tampilan di bawah ini Anda tinggal klik convert kalau memang ada MyISAM. 

Database Table Engine Converter

9. Lainnya

Remove unused JavaScript. 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.

Ensure text remains visible during webfont load. Untuk memperbaiki ini 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.

add_action( 'wp_head', function () {
?>
	
<link rel="preload" href="https://daudwihardi.com/wp-content/plugins/lightweight-social-icons/fonts/fontello.woff" as="font" type="font/woff" crossorigin>

<?php } );

Gunakan GTmetrix Waterfall untuk mendapatkan lokasi file-nya. Ganti lokasi file dengan lokasi file dari GTmetrix Waterfall. Begitu juga dengan tipe woff atau woff2.

Demikian cara mempercepat website WordPress semoga berguna!

Frequently Ask Questions

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.

WordPress hosting apa yang saya gunakan?

Saya menggunakan hosting lokal Dracoola.

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.

Apakah menggunakan AMP (Accelerated Mobile Pages)?

Saat ini saya tidak menggunakan AMP, karena dengan caching dan CDN yang tepat sudah cukup. Tanpa menggunakan AMP pun, Core Web Vitals sudah hijau. Pendapat saya AMP hanya menambah kompleksitas.

Kenapa loading website harus cepat?

Core Web Vital akan diterapkan bulan Juni 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 cek theme WordPress?

Anda bisa menggunakan tools dari InspectWP, WordPress Theme Search atau ScanWP

Blocks yang direkomendasikan

Blocks favorit saya GenerateBlocks, blocks ini cocok bagi yang menggunakan Guttenberg mumpunyai banyak SiteLibrary yang tinggal digunakan sesuai kebutuhan.

Suka Artikel Ini?

Untuk tetap up-to-date dengan artikel terbaru dan tips menarik, ayo bergabung di dalam buletin saya.

penulis foto

Daud Wihardi

Daud Wihardi adalah co-founder dari konsultan IT di Edavos. Seorang yang tertarik dengan digital marketing, dunia bisnis dan trading saham.