Cara Setting Plugin Autoptimize di WordPress Terbaru

Apakah Website Anda mengalami Bounce rate yang tinggi? atau Apakah laporan GT Metrix Anda menunjukkan banyak saran seperti mengecilkan HTML, CSS, JS / Menunda penguraian JavaScript?

Nah kalau Anda mengalami masalah ini atau masalah serupa dari website yang memuat dengan lambat, ada solusi untuk menaikkan kecepatannya.

Jika Anda telah membaca artikel tentang Cara Optimasi Performa WordPress, Anda akan menemukan bahwa Plugin Cache adalah salah satu plugin penting untuk membantu mempercepat website Anda.

Artikel kali ini akan memberikan cara setting Plugin Autoptimize untuk membuat website Anda menjadi lebih cepat dengan menerapkan berbagai teknik pengoptimalan kecepatan yang akan dibahas di bagian berikut.

Apa itu Plugin Autoptimize ?

Autoptimize adalah salah satu plugin cache yang sering digunakan, Anda dapat membuat website Anda menjadi lebih cepat dengan menerapkan berbagai teknik pengoptimalan kecepatan dengan cara yang sederhana.

Autoptimize melakukannya dengan cara mengecilkan dan menggabungkan semua file CSS / JS, dan memuatnya dalam urutan yang tepat untuk menunjukkan efek maksimal.

Cara Setting Plugin Autoptimize

Cara ini pernah saya terapkan di blog ini, dan perpindah ke Litespeed karena server saya lebih cocok menggunakan Litespeed. Walaupun begitu, cara ini tetap dapat meningkatkan kecepatan loading website Anda. Berikut cara setting plugin autoptimize terbaru.

JS, CSS & HTML

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.

JavaScript Options

JavaScript Options

Optimize JavaScript Code – On

Ketika “Optimize JavaScript Code” diaktifkan, Autoptimize akan mengecilkan file JavaScript Anda.

Aggregate JS-files – 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.

Do not aggregate but defer – Off

Ketika JS tidak digabung, semua file JS yang ditautkan dapat ditangguhkan sebagai gantinya, menjadikannya non-render-blocking.

Also aggregate inline JS – Off

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.

Baca Juga:  7 Tips Memilih Jasa Penulis Artikel Online yang Bagus Untuk Blog

Force JavaScript in <head> – Off

Muat JavaScript lebih awal, ini berpotensi memperbaiki beberapa kesalahan JS, tetapi membuat pemblokiran render JS.

Exclude scripts from Autoptimize – Default

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.

Add try-catch wrapping – Off

Jika script Anda rusak karena kesalahan JS, Anda mungkin ingin mencoba ini.

CSS Options

CSS Options

Optimize CSS Code – On

Ketika “Optimize CSS Code” diaktifkan, Autoptimize akan mengecilkan file CSS Anda.

Aggregate CSS-files – On

Gabungkan semua file CSS yang ditautkan? Jika opsi ini tidak aktif, masing-masing file CSS akan tetap di tempatnya tetapi akan diperkecil.

Also aggregate inline CSS – On

Centang opsi ini untuk Autoptimize untuk juga menggabungkan CSS dalam HTML.

Generate data: URIs for images – Off

Aktifkan ini untuk menyertakan gambar latar kecil di CSS itu sendiri, bukan sebagai unduhan terpisah.

Inline and Defer CSS – Off

Sebariskan “above the fold CSS” saat memuat CSS utama yang dioptimalkan secara otomatis hanya setelah pemuatan halaman.

Inline all 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.

Exclude CSS from Autoptimize – Default

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.

HTML Options

HTML Options

Optimize HTML Code – 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, saya menyarankan untuk menguji pengoptimalan kode HTML secara menyeluruh sebelum menggunakannya di lingkungan produksi.

Baca Juga:  2 Cara Melacak HP yang Hilang menggunakan IMEI Terbaru

Keep HTML comments – Off

Aktifkan ini jika Anda ingin komentar HTML tetap ada di halaman.

CDN Option

CDN Option

CDN Base URL – Optional

Masukkan URL root CDN Anda untuk mengaktifkan CDN untuk file yang Dioptimalkan secara otomatis. URL dapat berupa http, https, atau relatif protokol (mis. //cdn.ibest.id/). Ini tidak diperlukan untuk Cloudflare. Karena saya menggunakan CDN dari Bunny CDN maka saya mengisinya seperti di gambar.

Misc Options

Misc Options

Save aggregated script/css as static files – 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.

Images

Pada tab ini berfungsi untuk mengoptimalkan dan lazy load gambar Anda, termasuk dukungan WebP dan AVIF dari ShortPixel.

Image optimization

Image optimization

Optimize Images – 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.

Extra

Pada tab ini merupakan settingan tambahan untuk dapat lebih meningkatkan kinerja situs Anda.

Extra Auto-Optimizations

Extra Auto-Optimizations

Google Fonts – Combine and link deferred in head

Aktifkan jika menggunakan Google Font yang memperlambat waktu pemuatan saat diambil dari sumber daya eksternal (library Google Font). Saya lebih suka opsi “Combine and link deferred in head” karena ini meningkatkan waktu muat tanpa visibilitas melihat font dimuat (yang biasanya terjadi saat memuat secara tidak sinkron).

Remove emojis – On

Menghapus CSS sebaris ‘emoji inti’ WordPress, JavaScript sebaris, dan file JavaScript yang tidak dioptimalkan.

Baca Juga:  4 Cara Menghasilkan Uang dari Instagram

Remove query strings from static resources – On

Menghapus string kueri (atau lebih khusus lagi parameter ver) tidak akan meningkatkan waktu buka, tetapi dapat meningkatkan skor kinerja.

Preconnect to 3rd party domains (advanced users)

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

Preload specific requests (advanced users)

Daftar yang dipisahkan koma dengan URL lengkap dari sumber daya yang akan dimuat sebelumnya. Ini biasa saya gunakan untuk preload fonts, jadi gunakan jika Anda tau cara penggunaannya. Anda bisa melihat contohnya dibawah ini.

https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2,
https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2,
https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UNirkOUuhp.woff2

Async Javascript-files (advanced users) – Menggunakan Plugin Async Javascript

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.

Async Javascript

Async Javascript merupakan plugin tambahan untuk mengendalikan script mana yang akan ditambahkan atribut ‘async’ atau ‘defer’ membantu meningkatkan kinerja situs web WordPress Anda.

Enable Async JavaScript

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 – On

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

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 di WordPress. Semoga tutorial ini dapat mempercepat website Anda dengan baik dan tetap harus diingat, setiap theme memiliki sweet spot berbeda beda. Jadi tetaplah coba – coba setting untuk menyesuaikan dengan theme Anda. Jika ada pertanyaan silahkan kirim pertanyaan Anda di kolom komentar dibawah, terimakasih.

Tinggalkan komentar