Tidak ada yang menyukai situs yang lambat. Bahkan, pengunjung sangat tidak menyukainya. Begitu juga dengan Google.
Plugin Optimize More! yang dapat diunduh secara gratis dari halaman resmi WordPress plugin repository ini dapat membantu Anda untuk meningkatkan kecepatan loading website WordPress yang Anda miliki.
Anda bisa men-download-nya langsung di sini https://wordpress.org/plugins/optimize-more/ atau dengan mencarinya dengan kata kunci “optimize more” dari dashboard plugin WordPress Anda.
Yang bisa dilakukan oleh plugin ini:
- Load CSS Asynchronously
- Delay CSS and JS until User Interaction
- Preload Critical CSS, JS, and Font Files
- Remove Unused CSS and JS Files
Semua fiturnya dapat membantu untuk meningkatkan skor Google Core Web Vitals dari website WordPress Anda.
Load CSS Asynchronously
Pada bagian setting Async Tab ini, Anda bisa memilih file CSS apapun yang ingin Anda muat secara Asynchronous. Berguna untuk menghilangkan peringatan ‘eliminate render-blocking resources’ di Google Page Speed Insight.
Memuat file CSS secara asynchronous idealnya diterapkan pada file-file CSS yang sifatnya non-critical, tidak diperlukan di above the fold (bagian atas) area dari halaman website.
Seperti yang dapat dilihat pada gambar di atas, ada 6 field yang tersedia, masing-masing untuk tiap page-type (jika tidak menggunakan WooCommerce, maka hanya ada 3 field yang tersedia dan bisa Anda aktifkan di masing-masing setting). Jadi, Anda dapat memilih secara berbeda, file CSS mana yang ingin Anda masukkan ke dalam masing-masing field untuk setiap jenis halaman.
Gunakan fitur ini untuk file-file CSS yang tidak digunakan di above the fold area tapi masih digunakan di section pertama setelah above the fold area, dan taruh file-file CSS yang lain untuk hanya dipanggil ketika ada interaksi user.
Delay CSS and JS until User Interaction
Pada bagian setting Delay Tab ini, Anda bisa memilih file-file CSS dan JavaScript untuk ditunda pemuatannya, setelah adanya interaksi user (mouse scroll, mouse over, touch, click, dsb). Ini adalah fitur terpenting dari plugin Optimize More ini. Dengan menunda pemuatan file-file CSS dan JavaScript, halaman situs dapat terbuka lebih cepat, karena file-file CSS dan JavaScript tersebut baru akan didownload oleh browser dalam background setelah adanya interaksi user.
Preload Critical CSS, JS, and Font Files
Pada bagian setting Preload Tab ini, Anda bisa memilih file-file CSS, JavaScript, dan Font, untuk dimuat lebih dulu, tepat setelah browser selesai merender HTML.
Misalnya, halaman website Anda menggunakan jQuery. Seringnya kita tidak dapat menunda pemuatan jQuery setelah adanya interaksi user, terutama bila jQuery tersebut diperlukan di above the fold content. Bila ini yang terjadi, opsi terbaik adalah mem-preload file jQuery tersebut.
Remove Unused CSS and JavaScript Files
Pada bagian setting Remove Tab ini, kita bisa menghapus file-file CSS dan JavaScript yang tidak digunakan di (jenis) halaman tertentu.
Sayangnya, hingga saat ini masih banyak plugin-plugin WordPress yang memuat aset CSS dan Javascriptnya ke seluruh halaman website, bahkan ketika halaman tersebut tidak menggunakan fitur dari plugin tersebut. Anda dapat menghapusnya dengan mudah di (jenis) halaman tertentu dengan menggunakan fitur ini.
Extra Tab
Pada bagian setting Extra Tab, Anda akan menemukan field Define Custom Page ID untuk menentukan cutom page ID. Secara default, setiap custom page field menargetkan setiap page kecuali homepage. Anda dapat memasukkan ID halaman tertentu di field yang tersedia jika Anda ingin menargetkan halaman tertentu saja.
Anda juga dapat menemukan bagian Remove / Disable Common Unused di tab ini. Semua opsi yang ada di bagian ini berlaku untuk seluruh halaman situs, secara global.
The Keyword
Plugin ini menggunakan HTML Dom Parser untuk memanipulasi HTML halaman, sehingga ia akan memproses keyword apapun sesuai perintah yang diberikan oleh masing-masing fitur yang tersedia di dalam plugin. Tidak perlu repot-repot mencari CSS dan JS handler yang tepat yang diminta oleh plugin dan tema Anda. Cukup masukkan kata kunci aset ke dalam daftar, plugin ini akan memproses semuanya untuk Anda.
Bingung menentukan keyword yang tepat? Buka HTML source (klik kanan -> view source) dari halaman situs yang ingin Anda optimasi. Anda akan menemukan barisan kode seperti:
<link rel='stylesheet' id='wp-block-library-css' href='https://wordpress.org/themes/wp-content/plugins/gutenberg/build/block-library/style.css?ver=15.0.1' type='text/css' media='all' />atau
<script type='text/javascript' src='https://wordpress.org/themes/wp-includes/js/jquery/jquery.min.js?ver=3.6.3' id='jquery-core-js'></script>di dalam HTML source tersebut.
Dari kode pemanggilan file CSS di atas, Anda bisa memilih untuk memasukkkan id-nya (wp-block-library) bila ingin menarget hanya file tersebut secara spesifik, atau nama folder-nya (/gutenberg/) bila ingin menarget seluruh file CSS yang berasal dari plugin atau folder tersebut. Begitupun dengan JavaScript.
Khusus untuk fitur preload file-file dari font, Anda tidak dapat menggunakan kata kunci. Kita harus memasukkan url font seperti https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3p-ks6Vostz0rdom9.woff2 ke dalam field-field yang tersedia.
Mengoptimasi kecepatan halaman website pada dasarnya hanya tentang mengontrol bagaimana aset-aset seperti CSS, JavaScript, dan Font dimuat. Plugin Optimize More ini dapat membantu Anda dalam mempercepat load time sekaligus meningkatkan skor Google Core Web Vitals halaman situs Anda dengan mudah.
Khusus untuk optimasi gambar, Anda dapat menggunakan plugin lain dari Arya Dhiratara: Optimize More! Images.
