Autoptimize adalah plugin pengoptimalan WordPress gratis. Selain pengoptimalan HTML, CSS, dan JavaScript, Autoptimize juga menyertakan fitur pengoptimalan yang ditargetkan pada aspek lain dari situs WordPress modern.
Dalam artikel ini, kami akan membagikan setting plugin Autoptimize terbaik untuk meningkatkan kinerja dan kecepatan halaman situs WordPress Anda.
Mengapa Autoptimize?
Sebelum kita masuk ke setting plugin Autoptimize terbaik, mari kita bahas tiga alasan mengapa Autoptimize adalah plugin pengoptimalan yang bagus.
- Plugin gratis memiliki set fitur lengkap untuk mengoptimalkan situs WordPress Anda.
- Autoptimize benar-benar merupakan salah satu plugin pengoptimalan terbaik.
- Autoptimize memiliki lebih dari 1 juta pemasangan aktif di repositori WordPress dan secara konsisten diperbarui dengan fitur-fitur baru dan perbaikan bug.
Cara Install Plugin Autoptimize
Sebelum masuk ke tutorial setting, tentunya kita harus menginstall plugin Autoptimize terlebih dahulu. Berikut merupakan langkah – langkahnya:
- Buka Plugin, lalu pilih tambah baru
- Pada search box cari plugin Autoptimize
- Install serta aktifkan plugin tersebut
Cara Setting Plugin Autoptimize
Cara ini kami terapkan pada blog Cayrum ini dan settingan ini kami pakai sampai artikel ini telah diterbitkan. Dengan cara ini, Anda dapat meningkatkan kecepatan loading situs web Anda dengan mudah dan gratis. Berikut cara setting plugin autoptimize:
JS, CSS & HTML
Pada tab ini merupakan pengaturan CSS, JS, HTML, dan CDN dari plugin Autoptimize, jadi disini Anda dapat meminify CSS, JS, HTML serta mencombine beberapa CSS/JS menjadi satu.
Opsi Javascript
Optimasi Kode Javascript – On
Ketika “Optimize JavaScript Code” diaktifkan, Autoptimize akan mengecilkan file JavaScript Anda.
Gabungkan Berkas JS – On
Gabungkan semua file JS yang ditautkan agar memuat pemblokiran non-render? Jika opsi ini tidak aktif, masing-masing file JS akan tetap di tempatnya tetapi akan diperkecil.
Juga gabungkan inline JS – Off/Opsional (Aktifkan jika terdapat fungsi yang error)
Biarkan Autoptimize juga mengekstrak JS dari HTML.
Peringatan: ini dapat membuat ukuran cache Autoptimize bertambah dengan cepat, jadi aktifkan ini hanya jika Anda tahu apa yang Anda lakukan.
Paksa JavaScript di <head> – Off
Muat JavaScript lebih awal, ini berpotensi memperbaiki beberapa kesalahan JS, tetapi membuat pemblokiran render JS.
Tambahkan pembungkus try-catch – Off/Opsional (Jika terdapat JS yang rusak dapat diaktifkan)
Jika script Anda rusak karena kesalahan JS, Anda mungkin ingin mencoba ini.
Do not aggregate but defer – Off/Opsional (Aktifkan jika Gabungkan Berkas JS tidak aktif)
Ketika JS tidak digabung, semua file JS yang ditautkan dapat ditangguhkan sebagai gantinya, menjadikannya non-render-blocking.
Kecualikan script dari Autoptimize – Bawaan
Daftar script yang dipisahkan koma yang ingin Anda kecualikan agar tidak dioptimalkan, misalnya ‘jquery.js, jquery.min.js’ (tanpa tanda kutip) untuk mengecualikan skrip tersebut agar tidak digabungkan oleh Autoptimize. Penting: file yang tidak diperkecil yang dikecualikan masih diperkecil oleh Autoptimize kecuali opsi di bawah “Misc” dinonaktifkan.
Opsi CSS
Optimasi Kode CSS – On
Ketika “Optimize CSS Code” diaktifkan, Autoptimize akan mengecilkan file CSS Anda.
Gabungkan Berkas CSS – On
Gabungkan semua file CSS yang ditautkan? Jika opsi ini tidak aktif, masing-masing file CSS akan tetap di tempatnya tetapi akan diperkecil.
Juga gabungkan inline CSS – On
Centang opsi ini untuk Autoptimize untuk juga menggabungkan CSS dalam HTML.
Buat URI data: untuk gambar – Off
Aktifkan ini untuk menyertakan gambar latar kecil di CSS itu sendiri, bukan sebagai unduhan terpisah.
Eliminate render-blocking CSS – Off/Opsional (Aktifkan jika terdapat above the fold CSS)
Sebaris “above the fold CSS” saat memuat CSS utama yang dioptimalkan secara otomatis hanya setelah pemuatan halaman.
Inline semua CSS – Off
Sebariskan semua CSS adalah cara mudah untuk menghentikan CSS dari pemblokiran render, tetapi umumnya tidak disarankan karena ukuran HTML meningkat secara signifikan. Selain itu mungkin mendorong meta-tag ke posisi di mana mis. Facebook dan Whatsapp tidak akan menemukannya lagi, merusak thumbnail saat berbagi.
Kecualikan CSS dari Autoptimize – Bawaan
Daftar CSS yang dipisahkan koma yang ingin Anda kecualikan agar tidak dioptimalkan. Penting: file yang tidak diperkecil yang dikecualikan masih diperkecil oleh Autoptimize kecuali opsi di bawah “Misc” dinonaktifkan.
Opsi HTML
Optimasi Kode HTML – On
Ketika “Optimize HTML Code” diaktifkan, Autoptimize akan mengurangi ukuran halaman dengan menghapus spasi yang tidak perlu di HTML Anda. Meskipun fitur ini kompatibel dengan sebagian besar situs, menghapus spasi dapat menyebabkan gangguan pada beberapa situs. Oleh karena itu, kami menyarankan untuk menguji pengoptimalan kode HTML secara menyeluruh sebelum menggunakannya di lingkungan produksi.
Pertahankan komentar HTML – Off
Aktifkan ini jika Anda ingin komentar HTML tetap ada di halaman.
Opsi CDN
CDN Base URL – Off/Optional (Aktifkan jika Anda menggunakan CDN)
Masukkan URL root CDN Anda untuk mengaktifkan CDN untuk file yang Dioptimalkan secara otomatis. URL dapat berupa http, https, atau relatif protokol (mis. //cdn.cayrum.com/). Ini tidak diperlukan untuk Cloudflare.
Opsi Lain-lain
Simpan script/css yang digabungkan sebagai berkas statik – On
Secara default, file yang disimpan adalah css/js statis, hapus centang opsi ini jika server web Anda tidak menangani kompresi dan kedaluwarsa dengan benar.
Minify excluded CSS and JS files – On
Saat menggabungkan JS atau CSS, file yang dikecualikan yang tidak diperkecil (berdasarkan nama file) secara default diperkecil oleh Autoptimize meskipun dikecualikan. Hapus centang opsi ini jika ada yang rusak meskipun dikecualikan.
Enable 404 fallbacks – On
Terkadang JS/CSS yang Dioptimalkan direferensikan dalam HTML yang di-cache tetapi sudah dihapus, menghasilkan situs yang rusak. Dengan opsi ini aktif, Autoptimize akan mencoba mengarahkan file yang tidak ditemukan ke versi “fallback”, menjaga halaman/situs tetap utuh.
Also optimize for logged in editors/ administrators – On
Secara default, Autoptimize juga aktif untuk editor/administrator yang login, hapus centang opsi ini jika Anda tidak ingin Autoptimize dioptimalkan saat login mis. untuk menggunakan pembuat halaman.
Enable configuration per post/ page – On/Off
Tambahkan “metabox” ke layar edit postingan/halaman yang memungkinkan berbagai pengoptimalan dimatikan pada tingkat per postingan/halaman.
Images
Pada tab ini berfungsi untuk mengoptimalkan dan lazy load gambar Anda, termasuk dukungan WebP dan AVIF dari ShortPixel.
Image optimization
Optimalkan Gambar – Off
Optimalkan gambar dengan cepat dan sajikan dari CDN global Shortpixel.
Lazy-load images – On
Lazy load gambar akan menunda pemuatan gambar yang tidak terlihat untuk memungkinkan browser memuat semua sumber daya secara optimal untuk halaman “above the fold” terlebih dahulu.
Lazy-load exclusions – Optional (Masukkan nama gambar yang tidak ingin dilazy-load)
Daftar yang dipisahkan koma untuk kelas gambar atau nama file yang dikecualikan.
Lazy-load from nth image – 1
Jangan lazy-load gambar X pertama, ‘1’ memuat semua.
Ekstra
Pada tab ini merupakan settingan tambahan untuk dapat lebih meningkatkan kinerja situs Anda.
Optimasi Otomatis Ekstra
Google Fonts – Gabungkan dan tautkan di head
Aktifkan jika menggunakan Google Font yang memperlambat waktu pemuatan saat diambil dari sumber daya eksternal (library Google Font). Kami lebih suka opsi “Gabungkan dan tautkan di head” karena ini meningkatkan waktu muat tanpa visibilitas melihat font dimuat (yang biasanya terjadi saat memuat secara tidak sinkron).
Hapus emoji – On
Menghapus CSS sebaris “emoji inti” WordPress, JavaScript sebaris, dan file JavaScript yang tidak dioptimalkan.
Hapus string kueri dari sumber daya statik – On
Menghapus string kueri (atau lebih khusus lagi parameter ver) tidak akan meningkatkan waktu buka, tetapi dapat meningkatkan skor kinerja.
Remove WordPress block CSS – On/Off (Matikan jika menggunakan WordPress block CSS)
WordPress menambahkan CSS blok dan gaya global untuk meningkatkan gaya situs berbasis blok yang mudah, tetapi dapat menambahkan CSS dan SVG dalam jumlah yang signifikan. Jika Anda yakin situs Anda dapat melakukannya tanpa blok CSS dan “gaya global”, Anda dapat menonaktifkannya di sini.
Preconnect untuk domain pihak ketiga (pengguna ahli)
Tambahkan domain pihak ketiga yang ingin Anda sambungkan ke browser terlebih dahulu, dipisahkan dengan koma. Pastikan untuk menyertakan protokol yang benar (HTTP atau HTTPS). Gunakan jika tau cara penggunaannya atau Anda bisa menggunakan list dibawah ini:
https://connect.facebook.net, https://apis.google.com, https://google.com, https://google-analytics.com, https://fonts.gstatic.com, https://pagead2.googlesyndication.com, https://partner.googleadservices.com, https://adservice.google.co.id, https://adservice.google.com, https://googleads.g.doubleclick.net, https://www.googletagservices.com, https://www.google-analytics.com, https://ssl.google-analytics.com, https://cdnjs.cloudflare.com, https://pixel.wp.com, https://s.gravatar.com, https://stats.wp.com, https://www.gstatic.com, https://fonts.googleapis.com
Preload specific requests (advanced users)
Daftar yang dipisahkan koma dengan URL lengkap dari sumber daya yang akan dimuat sebelumnya. Ini biasa kami gunakan untuk preload fonts, jadi gunakan jika Anda tau cara penggunaannya.
Async berkas Javascript (pengguna ahli)
Daftar file JS lokal atau pihak ketiga yang dipisahkan koma yang harus dimuat dengan flag async. File JS dari situs Anda sendiri akan secara otomatis dikecualikan jika ditambahkan di sini.
Cara Install Plugin Async Autoptimize
Plugin ini merupakan plugin tambahan untuk mengendalikan script mana yang akan ditambahkan atribut ‘async’ atau ‘defer’ membantu meningkatkan kinerja situs web WordPress Anda.Berikut merupakan langkah – langkah menginstall plugin Async Autoptimize untuk melanjutkan setting yang ada di ekstra:
- Buka Plugin, lalu pilih tambah baru
- Pada search box cari plugin Async Autoptimize
- Install serta aktifkan plugin tersebut
Cara Setting Plugin Async Autoptimize
Cara ini juga kami terapkan pada blog Cayrum ini dan settingan ini kami pakai sampai artikel ini telah diterbitkan. Berikut cara setting plugin async autoptimize:
Enable Async JavaScript
Enable Async JavaScript – On
Ketika “Enable Async JavaScript” diaktifkan, Async Autoptimize akan mengaktifkan fungsi Async Javascript.
Also enable Async JavaScript for logged in users – Off
Ketika “Also enable Async JavaScript for logged in users” diaktifkan, Async Autoptimize akan mengaktifkan fungsi Async Javascript pada user yang login.
Also enable Async JavaScript on cart/ checkout pages – Off
Ketika “Also enable Async JavaScript on cart/checkout pages” diaktifkan, Async Autoptimize akan mengaktifkan fungsi Async Javascript pada keranjang atau halaman checkout.
Quick Settings
Pilih antara Apply Async dan Apply Defer di kotak Quick Settings. Jika opsi Async menyebabkan masalah di situs Anda, kami sarankan untuk mencoba Defer atau mengecualikan jQuery, yang disediakan plugin untuk Anda. Saya sendiri menggunakan Apply Defer.
Penutup
Demikianlah cara setting plugin autoptimize wordpress paling efektif. Semoga dengan adanya artikel ini dapat membantu Anda dalam mempercepat situs web Anda.