UPDATED – Setting 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, CSS, gambar & Google font 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 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.

P.S : Update 10 Agustus 2019 v2.5.1

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, JavaScript Options, CSS Options, HTML Options, CDN Options, Cache Info, dan Misc Options. Kita bahas satu per satu.

1. JavaScript Options

Di bagian teratas adalah pengaturan 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
JS Options

2. CSS Options

Masuk bagian kedua, 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
CSS Options

3. HTML Options

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

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

Optimasi HTML di plugin Autoptimize
HTML Options

4. CDN Options

Kalau Anda menggunakan CDN Premium seperti MaxCDN misalnya, silahkan isikan URL CDN Anda di kolom bagian ini. Kalau Anda hanya menggunakan CDN dari Cloudflare, lewati saja 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
Misc Options

Image Settings

Di bagian image settings Anda bisa melakukan beberapa pengaturan untuk mengoptimasi gambar-gambar di dalam blog, agar kecepatan akses semakin ringan. Buat pengaturannya seperti ini :

Pengaturan optimasi gambar di Autoptimize
Image settings

Optimize Images

Jangan beri ceklis kalau Anda tidak menggunakan CDN ( atau hanya menggunakan Cloudflare ). Kalau Anda menggunakan CDN tertentu maka silahkan ceklis di bagian ini.

Lazy-load Images

Di bagian ini memungkinkan blog Anda menampilkan gambar paling terakhir setelah semua teks selesai di load. Efeknya, kecepatan akses blog jadi cepat. Saat user scrolling ke bawah, baru satu per satu gambar akan ditampilkan.

Dulu jika ingin menggunakan fitur ini biasanya menggunakan plugin tambahan, yang terpopuler & gratis adalah A3 Lazy Load. Kini fitur lazy-load sudah ada di dalam Autoptimize.

Lazy-load Exclusions

Kalau ada gambar-gambar tertentu yang ingin langsung tampil dari awal saat user membuka halaman tertentu, maka masukkan nama file gambar tersebut di bagian ini, agar tidak terkena lazy-load.

Extra Settings

Cara setting plugin Autoptimize berikutnya ada pada tab Extra Settings. Ada beberapa pengaturan yang perlu dilakukan, ikuti gambar di bawah ini :

Menu pengaturan tambahan Autoptimize
Extra Settings

Google Font

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

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.

Komentar Pembaca . . .

  1. Hi mas, saya masih awam dg istilah Preconnect to 3rd Party Domains. Masalahnya web saya ada halaman FB dan google maps. Sebaiknya saya cantumkan URL tsb atau gak usah?

    Balas
    • Di dalam web ada widget map & fanpage ? Berarti 2 widget ini akan mengambil data dari luar, dari web asalnya. Jadi dimasukkan aja URL nya di list.

      Balas
  2. mau nanya boleh ya,,,
    saya instal autopmize sama wp rocket, trus menu homenya gak muncul , theme saya pakai genesis. bisa tolong dibantu bro ?

    Balas
    • Install WP Rocket saja mas, fungsi Autoptimize sdh ada di dlm WP Rocket. Saya blm pernah pakai Genesis, jd kurang tau apa yg menyebabkan menu home ga muncul. Coba matikan fitur minify css & js nya dulu deh.

      Balas
    • Keduanya bagus, tergantung digunakan bersama plugin & theme apa di dalam webnya. Beda komposisi beda performa. Cocok-cocokan.

      Balas

Yakin Ngga Mau Diskusi ?

Yuk diskusi cerdas. Gunakan nama asli agar komentar Anda disetujui.