Autoptimize adalah plugin yang bagus untuk mengoptimalkan CSS, JS, dan HTML yang semuanya berdampak pada vital web inti (core web vital). Untuk dapat menggunakan plugin ini dengan efektif dengan hasil yang memuaskan, maka Anda perlu membaca Cara Setting dan Optimasi Autoptimize yang Benar Beserta Penjelasan Lengkap ini.
Plugin ini dapat mengecilkan, menyusun file, dan sebagainya. Selain itu, juga memiliki pengaturan untuk menyajikan file dari URL CDN dan pengaturan tambahan untuk mengoptimalkan Google Font, menghapus CSS blok WordPress, dan preload/preconnect.
Fungsi dari Autoptimize itu apa sih?
Fungsi utama dari plugin ini adalah untuk mengoptimalkan CSS, JS, dan HTML
Penggunaan plugin ini bisa sangat membantu jika Anda berada di host yang mem-blacklist plugin cache, seperti Kinsta, GoDaddy, dan WP Engine. Alternatifnya, Anda masih bisa mengoptimalkan website dengan Autoptimize.
Jadi, bagaimana cara mengatur Autoptimize?
Daftar Isi
Cara Setting dan Optimasi Autoptimize yang Benar Beserta Penjelasan Lengkap
Optimisasi JS, CSS, & HTML
Optimize JavaScript code: ON.
Berfungsi mengecilkan file JavaScript.
Aggregate JS-files: Periksa chart GTmetrix Waterfall Anda dan jika ukuran CSS/JS Anda di bawah 10KB, ON. Jika lebih besar, biarkan OFF.
Also Aggregate inline JS: OFF
jika file JS ditemukan dalam HTML, keduanya akan menjadi satu yang menyebabkan cache cepat menumpuk.
Force JavaScript in <head>: OFF
Memuat file JS lebih awal membuatnya memblokir render. Jika file perlu dimuat di head, kecualikan file tersebut.
Add try-catch wrapping: OFF
jika menggabungkan file JS merusak situs Anda, ini bisa menjadi solusi. Tetapi, lebih baik menemukan file yang bermasalah dan mengecualikannya.
Do not aggregate but defer: Frank dari Autoptimize mengatakan ketika ON dicentang, plugin ini akan mengecilkan file yang tidak diperkecil berdasarkan nama file, misalnya example.js akan dianggap tidak diperkecil dan karenanya menjadi file autoptimize_single_xyz123.js.
Also Defer inline JS: ON jika pengaturan sebelumnya sudah ON. Autoptimize merekomendasikan untuk menghapus pengecualian dan hanya menambahkan yang diperlukan.
Exclude scripts from Autoptimize: Jika Anda melihat kesalahan setelah mengaktifkan pengaturan JavaScript tertentu, temukan file JavaScript yang bermasalah dan masukkan ke dalam kolom di sini.
Remove unused JavaScript: Periksa tab cakupan di Chrome Dev Tools untuk melihat file CSS/JS terbesar Anda. File-file tersebut sering berasal dari tema, plugin, atau kode pihak ketiga. Mengurangi ini di sumbernya (yaitu mengganti plugin dengan opsi ringan) paling efektif. Jika tidak, nonaktifkan plugin yang tidak digunakan.
CSS Options
Optimize CSS code: ON. Berfungsi mengecilkan file CSS.
Aggregate CSS-files: konsep yang sama untuk Aggregate JS-files. Jika website kecil biasanya harus digabungkan dan mengaktifkan – ON – ini, situs yang lebih besar biasanya tetap dibiarkan OFF.
Also aggregate inline CSS: OFF. Sama seperti Also Aggregate inline JS hanya saja untuk CSS (sekali lagi, biasanya tidak disarankan karena dapat membuat cache menumpuk dengan cepat).
Generate data: URIs for images: OFF – CDN memperingatkan bahwa mengaktifkannya memaksa gambar untuk diambil dari server asal Anda, bukan dari CDN. Mengaktifkannya pada awalnya mungkin menghasilkan lebih sedikit permintaan HTTP, tetapi tidak setelah Anda menyiapkan CDN dan menampilkan gambar.
Eliminate render-blocking CSS: ON – Google merekomendasikan gaya inlining di atas lipatan (fold). Gunakan generator CSS jalur kritis gratis dan paste kode di Autoptimize.
Inline all CSS: OFF – meningkatkan ukuran HTML + mencegah file CSS di-cache.
Exclude CSS from Autoptimize: mirip dengan pengaturan JavaScript, Anda dapat mengecualikan file CSS tertentu agar tidak dioptimalkan jika menyebabkan masalah di website.
HTML Options
Optimize HTML code: ON – mengecilkan HTML untuk mengurangi spasi dan ukuran halaman.
Keep HTML comments: OFF – jika Anda melihat kesalahan SyntaxError atau masalah indentasi/penspasian dalam komentar, Anda dapat mengaktifkannya. Jika tidak, pengaturan ini harus OFF.
CDN Options
CDN Base URL: menulis ulang file Autoptimize untuk dilayani dari CDN (BunnyCDN, KeyCDN, tetapi bukan CDN Cloudflare yang tidak menggunakan URL CDN).
Misc Options
Save aggregated script/css as static files: ON – satu-satunya alasan Anda menonaktifkan pengaturan ini adalah jika server Anda tidak dapat menangani kompresi dan kedaluwarsa.
Minify excluded CSS and JS files: ON – bahkan ketika Anda mengecualikan file CSS dan JS, file-file tersebut akan diperkecil secara default. Jika masih menyebabkan kesalahan, hapus centang pengaturan ini.
Enable 404 fallbacks: ON – mengurangi kemungkinan situs Anda rusak dari file “tidak ditemukan” dengan membuat versi fallback, tetapi mungkin juga memerlukan konfigurasi server.
Also optimize for logged in editors/administrators: OFF – Anda mungkin tidak ingin Autoptimize aktif untuk pengguna yang masuk, terutama jika Anda menggunakan page builder.
Enable configuration per post/page: ON – menambahkan metabox yang memungkinkan Anda mengontrol beberapa pengaturan Autoptimize berdasarkan halaman demi halaman (mengoptimalkan halaman, JS, CSS, dan menambahkan gambar LCP ke preload). Berguna jika Autoptimize merusak bagian dari situs Anda.
Images
Optimize Images: menulis ulang URL gambar yang akan disajikan dari ShortPixel CDN.
Optimization exclusions: tambahkan kelas/nama file gambar yang tidak ingin Anda sajikan dari CDN ShortPixel (biasanya Anda tidak perlu melakukan apa pun di sini).
Image Optimization quality: pilih kompresi lossy, glossy, atau lossless.
- Lossy: sebagian besar kompresi, sebagian besar kehilangan kualitas.
- Glossy: kompresi sedang, sedikit kehilangan kualitas.
- Lossless: kompresi rendah, kehilangan kualitas terendah, tetapi tercepat.
Load AVIF in supported browsers: OFF
Lazy-load images: ON – aktifkan fitur ini untuk meningkatkan page speed untuk halaman dengan banyak gambar.
Pengaturan Ekstra
Google Fonts: “Combine and link in head” membuat hasil loading tercepat, tetapi “combine and link deferred in head” dapat menghasilkan skor yang lebih baik. Uji masing-masing lalu refresh situs Anda untuk memastikan hasil yang maksimal.
Untuk Remove emojis: Centang pilihan ini kanrea emoji memperlambat loading.
Lalu, Remove query strings from static resources: item PageSpeed lama dan seharusnya tidak ada bedanya apakah AKTIF atau MATI, tetapi jangan ragu untuk mengujinya sendiri.
Remove WordPress block CSS: hanya nonaktifkan jika Anda yakin situs Anda tidak menggunakan CSS blok atau global styles, dalam hal ini dapat mengurangi jumlah file CSS.
Preconnect to 3rd party domains: preconnect biasanya hanya dilakukan dengan font pihak ketiga (fonts.gstatic.com) dan URL CDN. Namun, font harus selalu terhubung sebelumnya menggunakan crossorigin yang tidak ditemukan di Autoptimize.
Preload specific requests: pramuat hanya boleh dilakukan dengan elemen penting (font, gambar LCP, bahkan skrip/styles). Banyak plugin cache hanya memuat font, sementara Autoptimize dapat memuat file apa pun sebelumnya.
Async Javascript-Files: jika Anda perlu menerapkan async, Autoptimize menyarankan untuk menginstal Async JavaScript daripada menggunakan fitur ini yang lebih mudah diatur.
Optimize YouTube Videos: kebanyakan plugin cache malas memuat video dan mengganti iframe dengan gambar pratinjau, atau menggunakan WP YouTube Lyte.
Closing
Itulah tadi cara setting Autoptimize untuk website Anda agar dapat teroptimasi dengan baik. Semoga membantu!
Related posts:
17 Tips Menurunkan Bounce Rate di Website (Terbukti Berhasil)
19 Page Builder Terbaik untuk WordPress Beserta Penjelasan Fitur, Kelebihan, Kekurangan, dan Harga (Bagian 1)
Page Builder Terbaik untuk WordPress Beserta Penjelasan dan Harga – 11 Sampai 19 (Bagian 2)
Tutorial Cara Bikin Website untuk Berbagai Keperluan