Hampir semua orang akan memilih untuk meninggalkan halaman website apabila waktu muat halaman (loading) melebihi 3 detik. Karenanya, mengoptimalkan kecepatan website sangat diperlukan agar tidak kehilangan pelanggan potensial.
Apa saja dampak dari website yang lambat? Beberapa yang pasti adalah meningkatnya bounce rate, merusak peringkat website pada mesin pencari, dan akan sangat berpengaruh pada konversi bisnis Anda.
Namun, bagi pengguna WordPress, sangat beruntung karena adanya Perfmatters. Pada artikel ini, kami ingin menjelaskan bagaimana cara meningkatkan kecepatan website menggunakan salah satu plugin terbaik WordPress, yaitu Perfmatters.
Mengapa Perfmatters Penting Bagi Website Anda?
Fungsi utama dari plugin ini adalah untuk mempercepat waktu muat halaman website dan memaksimalkan fungsi-fungsi lain yang berkaitan dengan peningkatan kecepatan WordPress.
Salah satu fitur yang membuat kami memutuskan untuk menggunakan Perfmatters sebagai plugin optimasi – di samping FlyingPress untuk caching – adalah Script Manager.
Fitur ini memungkinkan Anda untuk mengorganisir semua skrip WordPress, plugin, dan tema, yang berjalan pada website Anda. Sebagai contoh, apabila Anda menggunakan plugin formulir seperti FluentFroms dan tidak menampilkannya pada halaman depan (front page), maka Anda bisa menonaktifkannya agar tidak dimuat pada halaman tersebut.
Sangat membantu, bukan?
Selain itu, Perfmatters penting untuk website karena fitur-fitur lainnya yang sangat membantu seperti Google Fonts management, Lazy Loading, Preloading, Local Analytics, CDN integrator, Database optimizer, Javascript & CSS, dan lain sebagainya.
Mari kita bahas beberapa di antaranya yang kami anggap penting untuk dijelaskan dalam ulasan ini.
Defer, Delay, dan Minify Javascript
Keuntungan menggunakan fitur ini juga dapat mengatasi masalah render-blocking JavaScript. Apa itu render-blocking JavaScript dan apa dampaknya?
Render-blocking ini akan mencegah halaman website Anda untuk ditampilkan. Karenanya, waktu muat halaman website akan menjadi lebih lama.
Fitur ini ada pada menu Javascript. Anda bisa mengatur perilaku javascript yang ada pada website Anda. Dengan menerapkannya secara benar, akan berdampak pada First Contentful Paint (FCP) dan Largest Contentful Paint (LCP) website Anda.
Untuk mendapatkan hasil terbaik, Anda dapat menerapkan “defer” pada semua “non-critical JavaScript”. Dengan begitu, skrip tersebut akan memiliki atribut “defer”. Alhasil, skrip tersebut akan dieksekusi setelah semua HTML selesai dieksekusi.
Pada menu ini Anda bahkan juga bisa melakukan penundaan pada jQuery dan inline scripts.
Apabila ada file JavaScript yang tidak ingin Anda sertakan, maka Anda bisa menambahkannya pada kolom “Excluded from Deferral”.
Selain itu, Anda juga bisa menggunakan fitur delay JavaScript. Dengan begitu, JavaScript akan dieksekusi ketika pengguna telah sampai pada bagian konten website atau dengan kata lain, pengunjung website telah berinteraksi dengan konten.
Fitur ini akan sangat berguna untuk skrip pihak ketiga (third-party) seperti, Facebook Pixel, Google AdSense, Google Analytics, MS Clarity, dan lain sebagainya.
Remove Unused CSS dan Minify CSS
Di sini Anda bisa menghapus kode CSS yang tidak terpakai dengan mencentang Remove Unused CSS. Kemudian, silakan pilih Used CSS Method yang Anda inginkan. Secara default, Anda akan disarankan untuk menggunakan metode inline. Namun, Anda bisa mengubahnya menjadi file.
Untuk behavior, Anda bisa memilih antara delay (default), async, atau remove. Kami menyarankan Anda untuk mencoba satu per satu dan pastikan tidak terjadi kerusakan pada tampilan website Anda.
Nah, bagaimana cara mengetahui CSS yang tidak digunakan? Cara paling mudah adalah menggunakan alat seperti PageSpeed Insights. Alat ini merupakan salah satu produk Google yang sangat berguna untuk mengecek performa website.
Apabila memang terdapat kode CSS yang tidak terpakai, maka akan ada sebuah pemberitahuan seperti gambar di bawah ini.
Jika Anda ingin melihat lebih detail langsung pada halaman website, cara mengetahui CSS yang tidak digunakan adalah dengan menggunakan Chrome DevTools. Gunakan alat Coverage. Alat ini lebih komplit karena akan menampilkan CSS dan JavaScript yang tidak dipakai pada website Anda.
Tips
- Menghapus semua CSS preload yang telah Anda atur sebelumnya. Namun, kecualikan Local Google Font.
- Jangan mengombinasikan CSS, karena teknik optimasi kecepatan website yang satu ini telah ditinggalkan atau dianggap ketinggalan zaman sejak diterapkannya HTTP/2. Malah lebih parah, dengan mengombinasikan CSS bisa saja akan memperparah performa website Anda.
- Pastikan bahwa tidak ada plugin lain yang Anda gunakan yang memiliki fungsi untuk menghapus CSS yang tidak digunakan.
Preloading Tautan Sumber
Mengaktifkan fitur preload ini akan secara otomatis menambahkan attributes rel pada skrip dan sumber yang Anda gunakan pada website Anda. Perfmatters memungkinkan Anda untuk dengan sangat mudah menambahkannya pada seluruh halaman website.
Mengapa fitur ini kami anggap penting? Karena dengan begitu loading skrip pada halaman website akan meningkat lebih cepat. Bahkan Google sendiri merekomendasikan setiap halaman menggunakan atribut ini jika memang diperlukan.
CDN Eksternal
Jika Anda menggunakan CDN eksternal seperti BunnyCDN, Anda bisa menambahkannya pada menu CDN.
Keuntungan menggunakan fitur CDN ini Anda bisa menambahkan directory atau folder mana saja yang ingin dihosting menggunakan server CDN. Jadi, Anda dapat menghemat penggunaan kuota CDN.
Selain itu, Anda juga dapat mengecualikan ekstensi file apa saja yang tidak ingin dihosting. Misalnya, Anda ingin menggunakan CDN untuk media saja. Anda bisa menambahkan .php, .js, .css, .html, pada kolom “CDN Exclusions” agar tetap dikelola secara lokal.
Bagaimana cara menggunakan CDN pada Perfmatters?
- Masuk ke menu CDN;
- Switch “Enable CDN Rewrite“;
- Input URL CDN yang Anda gunakan;
- Klik tombol “Save Changes“.
Setelah itu, Anda dapat melanjutkan langkah-langkah konfigurasi seperti yang dijelaskan sebelumnya.
Google Fonts Locally
Mengapa fitur local Google fonts penting? Jawabannya tentu masih berkaitan dengan optimasi kecepatan website. Secara detail, perbedaan antara tanpa menggunakan fitur Google fonts dan menggunakan Google fonts load locally adalah sebagai berikut:
Pemanggilan Sumber
Mengaktifkan fitur Local Google Fonts akan mengunduh dan disimpan pada server Anda. Dengan begitu, halaman website akan di-load tanpa harus memanggil sumber fonts.googleapis.com.
Loading Speed
Tanpa proses pemanggilan server eksternal (Google), otomatis akan mengurangi latensi dan mempercepat loading website. Sebabnya adalah karena fonts yang sebelumnya dependensi dengan server Google telah ditiadakan.
Mengurangi HTTP Request
Aset fonts yang sebelumnya berada pada server Google, setelah mengaktifkan fitur Local Google Fonts, akan disimpan dan menjadi aset lokal website Anda. Dengan begitu, permintaan HTTP akan berkurang secara signifikan.
Meningkatkan Privasi
Apa hubungannya fonts dengan privasi? Apabila website Anda diakses oleh pengunjung luar negeri, seperti misalnya penduduk Eropa, maka ada yang namanya regulasi privasi yang dikenal sebagai GDPR.
Jika website Anda tidak mengirimkan HTTP request ke pihak ketiga, maka tidak akan ada data pengguna yang dikirimkan ke luar. Dengan kata lain, potensi melanggar regulasi privasi tidak akan terjadi.
Caching
Dengan menggunakan server Google, maka cache website Anda tidak bergantung pada server Anda. Karenanya, kinerja browser tidak bisa diukur dari seberapa bagusnya performa server Anda.
Meningkatkan Skor SEO
Masih berkaitan dengan pemanggilan sumber eksternal. Alat pengukur performa website seperti PageSpeed Insight akan memberikan rekomendasi untuk mengurangi permintaan eksternal. Dengan fitur ini, otomatis salah satu proses pemanggilan sumber daya eksternal jadi berkurang. Dengan begitu, skor SEO website Anda akan meningkat.
Fitur Optimasi Website General
Selain fitur-fitur terbaik dari Perfmatters yang telah dibahas di atas, Anda juga dapat mengelola performa website pada menu “General”. Beberapa di antaranya adalah:
- Disable Emojis
- Disable Dashicons
- Disable Embeds
- Remove XML-RPC
- Remove jQuery Migrate
- Hide WP Version
- Remove RSD Link
- Remove Shortlink
- Disable RSS Feeds
- Remove RSS Feed Links
- Disable Pingbacks
- Disable REST API
- Remove REST API Links
- Disable Google Maps
- Disable Password Strength Meter
- Disable Comments
- Remove Comments URLs
- Add Blank Favicon
- Remove Global Styles
- Separate Block Styles
- Disable Heartbeat
- Heartbeat Frequency
- Limit Post Revisions
- Autosave Interval
- Custom Login URL
Itulah beberapa pilihan standar yang dapat Anda manfaatkan. Selamat bereksplorasi.
Mengoptimalkan Kecepatan Website dengan Perfmatters
Bisa dikatakan cara paling mudah meningkatkan kecepatan website WordPress salah satunya adalah menggunakan plugin Perfmatters ini. Pengaturan plugin ini tidak rumit dan telah didukung dengan dokumentasi resmi yang sangat lengkap. Selain itu, Anda juga bisa menemukan banyak tutorial di YouTube mengenai cara optimasi kecepatan website.
Dari segi harga, apabila dibandingkan dengan plugin sejenis lainnya, Perfmatters bisa dikatakan relatif murah. Silakan lihat harganya di sini. Gunakan kode “PERFMATTERS” untuk mendapatkan diskon tambahan.
Perlu Anda ketahui bahwa plugin ini juga memiliki sebuah fitur yang menurut kami adalah sebuah terobosan yang brilian. Fitur tersebut adalah Script Manager.
Dengan fitur ini Anda dapat mengelola script CSS dan JS pada setiap halaman website untuk mendapatkan performa terbaik.
1 comment
Miss Ukhti
Menurutku lebih baik ditambahin lagi penjelasannya kak