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.
Saya melakukan optimasi edavos.com dari 6.2 detik menjadi <1 detik. Ukuran file sebelumnya 3.96 MB, sekarang menjadi 303 KB.
Core Web Vitals untuk Desktop …
Core Web Vitals untuk Mobile …
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.
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
Mari kita mulai!
9 Cara mempercepat Website WordPress:
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.
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 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 …
… hasilnya setelah migrasi ke 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.
Bagi saya plugin Litespeed mempunyai kinerja yang terbaik. Berikut perbandingan dengan cache plugin lainnya:
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.
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
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.
Baca Juga: 9 Mitos SEO Yang Anda Harus Tahu
8. Database
Saya menggunakan Litespeed untuk membersihkan database secara berkala.
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.
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.
Daud Wihardi
Daud Wihardi adalah co-founder dari konsultan IT di Edavos. Seorang yang tertarik dengan digital marketing, dunia bisnis dan trading saham.