Cara Setting Plugin Autoptimize

Melalui tulisan ini saya akan berbagi tips meningkatkan kecepatan blog dengan cara setting plugin Autoptimize terbaru. Kita sama-sama tau bahwa kecepatan adalah hal yang sangat krusial.

Bahkan pada Juli 2018 lalu Google merilis mobile speed update di blog Webmaster, yang menyatakan bahwa kecepatan blog saat dibuka di mobile phone sekarang jadi penentu peringkat di SERP.

Hal ini udah jadi bukti bahwa ngga ada toleransi terhadap kecepatan sebuah website, dan juga blog Anda. Salah satu yang mempengaruhi kecepatan load adalah struktur tema blog itu sendiri.

Ada beberapa tema WordPress dengan struktur clean & fast, seperti Genesis dan GeneratePress misalnya. Ada juga tema dengan struktur yang lumayan berat. Biasanya karena tampilannya cukup glamour.

Cara menyiasatinya adalah dengan install plugin Autoptimize, yang tugasnya adalah mengoptimasi kode-kode Html, Javascript, dan CSS yang ada di dalam tema blog Anda.

Autoptimize berfungsi mengecilkan ukuran file CSS, men-cache script, me-load beberapa script di urutan terakhir ( prioritas menampilkan konten dulu ) sehingga konten blog Anda tampil lebih cepat.

Oke, langkah awal yang harus Anda lakukan adalah melakukan instalasi. Cara install plugin di WordPress sangat mudah, tinggal masuk dashboard, lalu masuk menu Plugins >> Add New. Ketikkan “Autoptimize” di kolom kanan atas.

Cara install plugin Autoptimize
Cara install Autoptimize

Jika sudah muncul, silahkan klik Install, lalu Activate. Sampai tahap ini plugin Autoptimize sudah terpasang dengan baik. Tinggal mengoptimasi pengaturannya agar kinerjanya maksimal.

Cara Setting Plugin Autoptimize

Pengaturan plugin Autoptimize sederhana, tapi dampaknya cukup signifikan. Coba cek kecepatan blog Ngetik.id di GTMetrix, Pingdom, atau Pagespeed Insight. Insya Allah ngga malu-maluin, hehe.

Main Settings

Di dalam dashboard blog Anda silahkan masuk ke menu Settings >> Autoptimize. Sebelum melakukan pengaturan, klik “Show Advanced Settings” di bagian kanan atas.

Di dalam Main settings ada beberapa section pengaturan yaitu HTML Options, JavaScript Options, CSS Options, CDN Options, Cache Info, dan Misc Options. Kita bahas satu per satu.

1. HTML Options

Di bagian ini gunanya untuk mengoptimasi struktur HTML tema blog Anda. Jangan tanya optimasinya bagaimana, karena cukup teknis, saya juga kurang paham, dan saya rasa ngga perlu diambil pusing, hehe.

Anda tinggal berikan ceklis pada bagian “Optimize HTML Code ?” seperti gambar di bawah ini. Efeknya adalah memperbaiki nilai skor HTML blog Anda di GTMetrix.

Optimasi HTML di plugin Autoptimize
Optimasi kode HTML

2. JavaScript Options

Berlanjut ke bagian di bawahnya yaitu JavaScript. Silahkan berikan ceklis pada baris teratas “Optimize JavaScript Code ?” untuk mengaktifkan fitur optimasinya. Efeknya untuk memperbaiki skor JS blog Anda di GTMetrix.

Optimasi JavaScript di Autoptimize
Optimasi JavaScript

3. CSS Options

Masuk bagian ketiga, silahkan beri ceklis pada tulisan “Optimize CSS Code ?” dan biarkan pengaturan di bawahnya apa adanya. Dampaknya bisa untuk memperbaiki skor CSS Anda di GTMetrix.

Optimasi kode CSS di Autoptimize
Optimasi kode CSS

4. CDN Options

Kalau Anda menggunakan CDN Premium seperti MaxCDN misalnya, silahkan isikan URL CDN Anda di kolom bagian ini. Kalau Anda hanya menggunakan Cloudflare, lewati bagian ini.

5. Cache Info

Bagian ini cuma menginformasikan saja di folder mana data cache blog Anda disimpan, dan menampilkan berapa jumlah total file serta ukurannya.

6. Misc Options

Masuk bagian akhir dari Main Settings yaitu Misc Options, biarkan apa adanya seperti gambar di bawah ini. Jika sudah selesai silahkan klik Save Changes and Empty Cache.

Optimasi Miscelaneous di Autoptimize
Optimasi Misc

Extra Settings

Cara setting plugin Autoptimize berikutnya ada pada tab Extra Settings. Ada beberapa pengaturan dasar yang perlu Anda lakukan, ikuti seperti gambar di bawah ini.

Menu pengaturan tambahan Autoptimize
Pengaturan tambahan

Google Font

Pilih opsi seperti gambar diatas untuk me-load font Google lebih cepat dan tidak tampak ada jeda saat konten dibuka oleh pengunjung.

Optimize Image

Jangan beri ceklis kalau Anda tidak menggunakan CDN ( atau hanya menggunakan Cloudflare ). Kalau Anda menggunakan CDN tertentu maka berikan ceklis di bagian ini. Pada opsi Image optimization quality pilih Lossless.

Pengaturan tambahan Autoptimize
Menu pengaturan tambahan

Remove Emojis

Beri ceklis di bagian ini agar blog Anda tidak menampilkan emoji, karena lumayan berpengaruh memperlambat kecepatan load blog.

Remove Query Strings

Berikan ceklis juga di bagian ini, dampaknya bukan ke kecepatan, tapi hanya untuk memperbaiki skor performa blog Anda di GTMetrix saja.

Preconnect to 3rd Party Domains

Di bagian ini Anda bisa memasukkan beberapa URL pihak ketiga yang kodenya Anda gunakan di dalam blog, misalnya kode Analytics, Pixel Facebook, Google Maps, dan juga Google Fonts.

Berikut beberapa URL nya :

  • https://fonts.googleapis.com
  • https://fonts.gstatic.com
  • https://www.google-analytics.com
  • https://ajax.googleapis.com
  • https://connect.facebook.net
  • https://www.googletagmanager.com
  • https://maps.google.com

Fitur di bagian ini membantu browser mengantisipasi jika ada file request dari domain-domain diatas. Semakin banyak file yang di request dari luar ke dalam blog, berpengaruh ke kecepatannya.

Sampai disini pengaturan tambahan sudah selesai. Biarkan kolom sisanya kosong, dan silahkan Anda klik Save Changes ya.

Penutup

Selain faktor keamanan blog yang sudah saya bahas pada artikel panduan setting plugin Wordfence, tentunya Anda juga harus menaruh perhatian khusus untuk masalah kecepatan blog.

Bagaimana, cukup mudah bukan cara setting plugin Autoptimize di WordPress ? Plugin ini bisa banyak membantu memaksimalkan performa internal blog Anda dengan baik.

Apalagi kalau Anda duetkan dengan plugin Cache semacam W3 Total Cache, WP Fastest Cache, WP Rocket, maka kinerjanya akan semakin optimal, dan kecepatan blog Anda pun meningkat.

Ini Kata Mereka . . .

Silahkan Berkomentar . . .