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 21 Mei 2020 v2.7.2

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.

 

Diskusi Pembaca . . .

  1. Mas coba buat totorial litespeed cache, soalnya banyak yg pake litespeed webserver

    Balas
    • Baik mas, insya Allah secepatnya akan saya tuliskan. Thanks masukannya ya.

      Balas
  2. cara menggunakan Photon CDN menggunakan Autoptimize seperti apa ya

    Balas
  3. Halo mas,

    Kalo misal di cache info udah 100% dan muncul warna merah kedap kedip, apakah itu harus selalu di delete cache mas? Atau diemin aja?

    Balas
  4. Gan website saya kok malah ga bisa dibuka ya gara gara setting autoptimize padahal udah ngikutin tutor agan
    sampe ke cpanelnya ga bisa di akses
    lumpuh total

    Balas
    • Autoptimize itu cuma tool utk minimize CSS, JS, dan HTML.

      Kenapa ga bisa dibuka ? Saya ga tau mas. Bisa jadi bentrok dengan theme nya, bentrok dengan salah satu plugin, bentrok dengan script tertentu yg dipakai, dan banyak penyebab lainnya.

      Dan tdk ada hubungan dengan cPanel.

      Kalau cPanel ga bisa dibuka website down kali.

      Balas
  5. Izin mau nanya mas, saya pemula mas, saya sudah melakukan arahan2 diatas tapi saat saya share whatsapp thumbnailnya hilang mohon petunjuknya

    Balas
    • Silahkan debug ulang di FB Debugger ( googling aja utk link nya )

      Balas
  6. Halo mas saya mau tanya, ada pesan kyk gini di panel WP saya “Autoptimize: Your ShortPixel image optimization and CDN quota was used, add more credits to keep fast serving optimized images on your site If you already have enough credits then you may need to associate your domain to your Shortpixel account. (based on previously fetched data, click here to refresh).”
    itu cara mengatasinya gimana ya? thanks sebelumnya

    Balas
    • Artinya kuota CDN gratisan dari Shortpixel udah habis. Selanjutnya harus bayar. Solusinya jangan di centang di pengaturan Autoptimize >> tab Images >> bagian “optimize image”. Centang yang “lazy-load images” aja

      Balas
  7. Siang bro..

    Artikelnya OK. Udah saya ikuti tutorialnya tapi masih belm puas dengan hasilnya. Saya punya website sdh hampir semua totorial saya ikuti, tapi gak ada yang benar2 mujarab.

    Saya punya website skrg speed scorenya B dan YSlow Score C. Tadinya A semua, tapi seiring dengan konten nambah nilai jadi turun ke B.

    Kalau buat loading artikel lumayan cepet, tapi kalau loading homepage setengah mati nungguinnya. bisa lebihdari 10 detik.Gimana sulusinya?

    Plugins saya juga gak banyak, Gzip Compression juga udah di buat. dan plugin yang gak guna udah saya buang semua, themes yang saya pakai juga themes premium dan selalu di update sama developernya.

    Tolong bantu ya..

    Thanks

    Balas
    • Siang mas Joe, terima kasih berkenan mampir.

      Sebelum saya jawab, saya ingin meluruskan persepsi. Load sebuah web dipengaruhi banyak hal. Ada kualitas hosting ( lokasi server, spek, dll ), theme yg dipakai, jumlah plugin, plugin apa aja yg dipakai ( ada plugin yg berat seperti Jetpack ), cara optimasi gambar, dan banyak lagi.

      Jadi ngga bisa hanya setting Autoptimize, lalu sim salabim semua jadi oke.

      Contohnya NgetikID, adalah kombinasi dari : minifying via Autoptimize, cache via WP Optimize dan CF, image optimization via CDN, theme super ringan GeneratePress, optimasi image size via Photoshop, dan banyak lagi. Kombinasi dari itu semua.

      Dan perlu dipahami, ngga semua theme cocok dengan plugin A. Contohnya GeneratePress ngga cocok dengan plugin WP Rocket. Padahal itu plugin keren utk optimasi speed. Saya punya, tapi saya ngga pake, malah pakai Autoptimize yg free.

      Jadi seorang pemilik web harus mengenali ini.

      Menanggapi komentar mas Joe :

      1. Yang benar2 mujarab yg seperti apa memang parameternya ?
      2. Load speed homepage sampai 10 detik. Ini sdh jelas ada yg fatal. Solusinya ? Test aja di GTMetrix, di bawahnya kan dikasih tau solusi2nya. Itu yg dilakukan.
      3. Plugin yg dipakai ngga banyak. Memangnya brp ?
      4. Theme Premium & selalu update. Ini tdk ada kaitan dengan optimasi. Banyak kok Premium theme yg memberatkan load speed.

      Kurang lebih itu mas.

      Jadi faktornya banyak, jd memang banyak yg hrs di analisa. Tidak hanya dari satu plugin saja.

      Balas
  8. Untuk font Googleapis, gimana cara mengatasinya gan?
    Masih belum bisa, untuk indikator itu.

    Balas
    • Yap memang tdk bisa, karena itu di request dari luar web kita. Solusinya menggunakan local font yg ada di dalam db, atau upload font nya ke dalam file web kita, agar jadi local font.

      Balas
  9. Terimakasih mas.
    Sekarang website saya sudah menjadi lebih cepat. Ada perubahan yang signifikan.

    Balas
    • Alhamdulillah. Terima kasih sudah berkenan mampir dan membaca ya mas. Sehat & sukses selalu.

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

      Balas
  10. 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
  11. 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
      • Mas kalo dikombinasikan sama imagify bisa kah? Atau gaperlu? Apa cukup autoptimize sama wp rocket ?niatnya mau pake wp rocket . btw makasih website ku tadinya 13 second liat tutorial ini jadi 8,3 . tpi mau naikin lagi speednya bagusnya pake apa lagi mas?

        Balas
        • Boleh mas pake Imagify. Kombinasi terbagus gimana ? Baiknya dicoba-coba mas. Beda theme beda komposisi ideal soalnya. Contohnya saya, pakainya Autoptimize – WP Optimize sudah cukup. Ada juga yg pakai WP Rocket & Smush sudah cukup.

          Yang jelas pahami fungsi masing-masing plugin. Jangan sampai ada plugin yg fungsinya sama di install & diaktifkan keduanya, pasti bentrok.

          Balas

Anda Mau Berdiskusi ?

Tanyakan secara jelas ya agar saya bisa paham. Jangan pakai emoticon, nanti masuk spam.