Blog Situstarget » Tips Tekno » Cara Menggunakan Plugin Autoptimize

Cara Menggunakan Plugin Autoptimize

Bagi pemilik website performa merupakan salah satu hal yang penting. Hal ini dapat dicapai dengan melakukan optimisasi pada website. Ada banyak sekali manfaat yang bisa diperoleh ketika melakukan optimisasi pada website, salah satunya adalah meningkatnya kecepatan website.

Kecepatan website saat dibuka sangatlah berpengaruh terhadap pengunjung. Website yang memerlukan waktu lama saat dibuka di mobile phone, biasanya akan ditinggalkan pengunjungnya. Hal ini dikarenakan pengunjung website saat ini membutuhkan segala hal yang praktis dan cepat.

Kecepatan dari website bisanya dipengaruhi oleh struktur website itu sendiri. Website yang memiliki struktur dan tampilan sederhana biasanya memiliki kecepatan load yang lebih tinggi dibandingkan website yang memiliki struktur dan tampilan glamour.

Namun, website dengan tampilan glamour tetap bisa memiliki kecepatan load yang tinggi. Cara yang dapat dilakukan adalah dengan melakukan optimisasi pada website. Optimisasi tersebut dilakukan dengan cara menggunakan plugin Autoptimize.

Alasan Menggunakan Plugin Autoptimize

Plugin Autoptimize sangatlah berguna untuk mengoptimisasi website seperti melakukan aggregate, style, minify dan juga cache scripts. Pada plugin ini akan tersedia API yang dapat dipakai untuk proses optimisasi website sesuai dengan kebutuhan masing-masing.

Baca juga : Mengatasi Masalah Kompabilitas Autoptimize dengan WordPress Popular Posts

Plugin Autoptimize ini nantinya akan membantu website dalam mengecilkan ukuran file CSS, me-load beberapa script di urutan terakhir, dan men-cache script.

Dengan demikian, konten website dapat ditampilkan lebih dahulu kepada pengunjung.

Cara Menggunakan Plugin Autoptimize

Ada banyak hal yang bisa dioptimisasi menggunakan plugin autoptimize. Cara mengaturnya pun sangatlah mudah sehingga sangat friendly bahkan bagi orang awam. Adapun cara setting plugin autoptimize pada WordPress antara lain adalah:

1. Pada Java Script, CSS Dan HTML

Optimisasi pada Java Script dilakukan melalui menu Autoptimize Settings, kemudian kamu dapat memilih pilihan JS, CSS, & HTML. Ada beberapa pilihan yang bisa diaktifkan dan juga dinonaktifkan.

Cara Setting Plugin Autoptimize

Pada Java Script

  • Optimize Java Script Code : Aktifkan pilihan ini agar plugin Autoptimize dapat melakukan optimasi java script.
  • Aggregate JS-files: Aktifkan pilihan ini karena Aggregate JS-files ini berguna untuk menggabungkan file java script seperti yang direkomendasikan oleh GTmetrix. Jika kamu menonaktifkan pilihan ini, maka file java script individual tidak akan digabungkan dan akan langsung dimuat.
  • Also Aggregate Inline JS: Pilihan ini juga diaktifkan ketika kamu akan melakukan optimisasi pada java script. Pilihan ini berguna untuk menggabungkan file java script yang terletak pada HTML. Jika terdapat kesalahan ataupun kerusakan pada website, maka Autoptimize akan segera memberikan peringatan.
  • Force JavaScript in <head>: Pada saat melakukan optimisasi pada java script, kamu dapat menonaktifkan pilihan ini. Pilihan ini dapat diaktifkan jika java script mengalami kesalahan. Namun opsi ini sebaiknya disarankan untuk tidak diaktifkan. Jika terjadi kesalahan pada java script, ada baiknya masalah tersebut dicari secara manual, kemudian dikecualikan pada file. Jika mengaktifkan opsi ini, maka kecepatan website akan mengalami penurunan. Hal ini dikarenakan java script akan memblokir render.
  • Exclude Scripts from Autoptimize: Opsi ini biasanya digunakan untuk meletakkan file java script yang dikecualikan. File yang dikecualikan ini biasanya adalah file java script yang bermasalah sehingga dapat mengganggu kinerja website.
  • Add Try-catch Wrapping: Pilihan ini juga dapat dinonaktifkan ketika kamu melakukan optimisasi pada java script. Hal ini dikarenakan pilihan merupakan cara lain untuk memperbaiki kesalahan JS tanpa harus mengaktifkan JavaScript secara paksa.

Pada CSS

  • Optimize CSS Code: Pilihan ini diaktifkan agar plugin Autoptimize dapat diaktifkan pada CSS code.
  • Aggregate CSS-files: Pilihan ini memiliki fungsi yang hampir sama dengan pilihan Aggregate JS-files pada java script. Hal yang membedakan adalah aggregate CSS-files digunakan untuk menggabungkan file java script untuk CSS. Karena memiliki fungsi yang hampir sama, maka pilihan ini harus diaktifkan pada saat optimisasi.
  • Also Aggregate Inline CSS: Pilihan ini juga harus diaktifkan pada saat optimisasi. Also aggregate inline CSS berfungsi untuk menggabungkan file java script sebaris pada CSS. Pengaktifan pilihan ini dapat membuat waktu muat dan skor GTmetrix menjadi meningkat.
  • Generate Data: URIs for Images: Jika kamu menggunakan CDN, maka pilihan ini tidak usah diaktifkan. Hal ini dikarenakan gambar yang akan disajikan akan berasal dari servis asal website kamu dan bukan dari CDN. Pada awal mengaktifkan pilihan ini, mungkin kamu akan merasakan bahwa permintaan HTTP menjadi lebih sedikit. Namun, lama-kelamaan permintaan HTTP yang sedikit itu tidak akan berlaku lagi ketika CDN digunakan.
  • Inline and Defer CSS: Pilihan ini dapat diaktifkan, tetapi kamu juga dapat menggantikan pilihan ini dengan memilih untuk mengaktifkan “inline all CSS”. Namun pilihan tersebut tidaklah direkomendasikan. Hal ini dikarenakan akan membuat halaman HTML menjadi besar sehingga membutuhkan “roundtrips” yang lebih banyak.
  • Inline All CSS: Karena dapat membuat roundtrips menjadi lebih banyak, maka pilihan ini tidak dianjurkan untuk diaktifkan.
  • Exclude CSS from Autoptimize: Pilihan ini digunakan untuk mengecualikan file CSS yang bermasalah. Biasanya file CSS yang bermasalah akan muncul, ketika kamu mengaktifkan pengaturan CSS tertentu.

Pada HTML

  • Optimize HTML Code: Pilihan ini diaktifkan agar plugin Autoptimize dapat diaktifkan pada HTML code.
  • Keep HTML Comments: kamu dapat mengaktifkan pilihan ini pada saat optimisasi. Namun jika muncul masalah indent ataupun masalah spacing pada comments, pilihan ini dapat dinonaktifkan.

2.  Pada Pilihan CDN

Cara Menggunakan CDN Pada Plugin Autoptimize

Pada Cloudflare, URL CDN tidak akan diberikan. Sebagai gantinya, kamu akan diarahkan untuk mengubah nama server. URL berbasis CDN biasanya disediakan khusus untuk StackPath, KeyCDN, dan CDN lainnya.

Untuk mengoptimalkan kinerja, maka gabungan dari penggunaan StackPath dan Cloudflare sangatlah disarankan.

Baca juga: Bikin WPDiscuz dan Autoptimize Jadi Kompatibel

Hal ini dikarenakan penggunaan dua hal tersebut dapat membuat data center yang digunakan menjadi lebih banyak.

Dengan demikian, situs website akan dimuat dengan lebih cepat. Adapun langkah-langkah yang harus dilakukan adalah:

  • Mendaftar CDN: Salah satu contoh CDN yang digunakan adalah StackPath karena memiliki 45 buah data center yang berpusat di Amerika Serikat. Selain StackPath, ada juga semisal BunnyCDN, KeyCDN, dst.
  • Membuat StackPath CDN Site: Jika sudah mendaftar, lihatlah pada bagian dashboard StackPath. Kemudian klik tab CDN dan buatlah sebuah StackPath CDN site. Caranya adalah dengan memasukkan domain website ke dalam kotak yang telah disediakan lalu klik pilihan continue. Secara otomatis StackPath akan mengambil IP address website yang telah dimasukkan. Selanjutnya, StackPath akan generate CDN URL yang nantinya bisa kamu salin pada Autoptimize.
  • Menyalin CDN URL pada Autoptimize: Salinlah CDN URL yang telah di-generate sebelumnya. Tambahkan http:// atau https:// di awal CDN URL pada kotak ”CDN Base URL” yang telah disediakan.
  • Melakukan Pengaturan Cache: Pada dashboard StackPath pilihlah tab CDN, lalu pilih cache settings. Setelah itu, pilihlah pilihan “purge everything”.
  • Memasukkan Alamat IP ke Dalam Daftar: Alamat IP website haruslah dimasukkan ke dalam daftar putih pada StackPath. Cara yang dapat dilakukan adalah dengan memilih tab WAF pada dashboard, kemudian pilihlah “firewall”. Masukkan IP address pada daftar putih yang ada.
  • Menjalankan Situs Website: Jalankan situs website pada GTmetrix. Lihat pada Yslow dan pastikan bahwa “content delivery network” harus berwarna hijau.

3. Pada Pengaturan Misc

Pengaturan Pada Misc Options Plugin Autoptimize

Ada beberapa pilihan yang bisa diaktifkan ataupun dinonaktifkan pada pengaturan misc ini, diantaranya adalah:

  • Save aggregated script/CSS as static files: Pilihan ini diaktifkan karena file CSS dan JS akan disimpan ke cache dan disajikan melalui server. Pilihan sangat dianjurkan untuk diaktifkan, terlebih jika hosting website kamu tidak menangani pilihan ini.
  • Minify excluded CSS and JS files: Jika kamu ingin mengecualikan beberapa file CSS ataupun file JS, maka pilihan ini bisa diaktifkan. Tindakan pengecualian file ini biasanya dilakukan apabila terjadi masalah saat pengoptimalan file tersebut.
  • Minify excluded CSS and JS files: Pilihan ini dinonaktifkan saja. Hal ini dikarenakan pilihan ini berfungsi untuk mengalihkan file yang hilang sehingga dapat membantu mencegah dan mengurangi kerusakan situs. Namun, untuk mengaktifkan pilihan ini dibutuhkan konfigurasi tingkat server.
  • Also optimize for logged in editors/ administrators: Non-aktifkan pilihan ini. Hal ini dikarenakan fitur kinerja pada admin WordPress, termasuk fitur kinerja pada Cloudflare biasanya dinonaktifkan.

4. Cara Setting Plugin Autoptimize Untuk Gambar

Autoptimize dapat membuat proses load gambar pada website menjadi lebih cepat.

Optimasi Gambar Pada Plugin Autoptimize

Adapun beberapa pilihan pengaturan plugin Autoptimize yang harus diatur pada proses optimisasi gambar, diantaranya adalah:

  • Optimize Images: Pada pilihan ini, centang check box yang telah disediakan. Nantinya URL gambar pada website kamu akan diubah sehingga mengarah pada CDN Short Pixel sehingga dapat dimuat lebih cepat. Walaupun telah diubah, tetapi kualitas gambar tidak akan berubah.
  • Image Optimization Quality: kamu dapat memilih antara kualitas dan jenis kompresi yang digunakan sehingga menghasilkan kombinasi yang seimbang. Ada beberapa pilihan yang dapat dipilih. Pilihan tersebut adalah:
  1. Lossy: Kompresi yang dilakukan cukup banyak sehingga kualitas gambar pun berkurang cukup banyak.
  2. Glossy: Kompresi yang dilakukan sedang sehingga kualitas gambar pun hanya berkurang sedikit.
  3. Lossless: Kompresi yang dilakukan sedikit sehingga kualitas gambar pun berkurang sangat sedikit.
  • Load WebP in Supported Browsers: Pilihan ini dapat diaktifkan jika kamu menggunakan gambar WebP. Pilihan ini juga dapat diaktifkan jika terdapat gambar pemutaran lambat.
  • Lazy-Load Images: Pilihan ini adalah pilihan yang dapat membuat sistem menunda proses load gambar yang tidak diinginkan sehingga dapat mempercepat proses load. Namun, ada beberapa orang yang merasa tidak nyaman dengan pilihan ini sehingga memilih untuk menonaktifkannya.

5. Critical CSS

Optimasi Critical CSS Pada Plugin Autoptimize

Optimisasi ini mengarah pada criticalcss.com plugin. Plugin ini merupakan jenis paket berbayar, dengan biaya berlangganan sebesar $7 per bulannya.

Plugin critical CSS ini memiliki fungsi untuk memastikan halaman dirender sebelum CSS lengkap dimuat. Hal ini dapat membuat waktu mulai rendering menjadi lebih cepat.

Adapun cara mengatur plugin critical CSS ini adalah dengan menginstall plugin. Kemudian kamu dapat mendaftar untuk rencana dan memasukkan kunci API ke dalam kotak Critical CSS pada yang ada pada bagian Critical CSS dashboard Autoptimize.

Setelah kunci API dimasukkan, maka plugin akan mengerjakan tugasnya.

6. Setting Plugin Autoptimize Tambahan

Optimasi Otomatis Ekstra Plugin Autoptimize

Ada beberapa jenis pengaturan tambahan yang bisa diatur dalam proses optimisasi website. Beberapa pengaturan tambahan tersebut adalah:

  • Google Fonts: Terdapat beberapa pilihan yang bisa dipilih untuk diaktifkan. Pilihan yang disarankan adalah “combine and link in head” yang akan membuat waktu load menjadi meningkat tanpa adanya visibilitas. Selain itu, pilihan “combine and load fonts asynchronously with webfont.js” karena juga dapat meningkatkan kecepatan load.
  • Remove Emojis: Pilihan pengaturan ini akan membuat emoji dihapus dari inline CSS ataupun inline JS. Mengaktifkan pilihan pengaturan ini akan membuat waktu load menjadi lebih cepat, karena emoji akan membuat waktu load menjadi lebih lama.
  • Remove Query Strings from Static Resources: Mengaktifkan pengaturan ini dapat membuat sistem menghapus query strings yang disebabkan oleh plugin CPU tinggi. Selain mengaktifkan pengaturan ini, kamu juga dapat menghapus semua plugin dan database yang tidak diperlukan.
  • Pre-connect to 3rd Party Domains: Pilihan ini dapat diaktifkan untuk membantu browser dalam mengantisipasi permintaan dari sumber daya eksternal. Sumber daya tersebut dapat berupa Analytics Maps, Google Fonts, Amazon store, dll.
  • Preload Specific Requests: Pengaturan ini dapat membuat file tertentu diunduh terlebih dahulu sebagai prioritas tinggi.
  • Async Java Script-Files: Mengaktifkan pengaturan ini dapat membantu pencegahan terhadap above-the-fold content hingga Java Script selesai dimuat.
  • Optimize YouTube Videos: Jika halaman website kamu memiliki video YouTube, pengaturan ini dapat membuat video tersebut terputar jika pengunjung menggulir ke bawah dan mengklik tombol putar. Hal ini dapat menghilangkan permintaan awal ke server YouTube, sehingga waktu muat halaman menjadi lebih cepat.

7. Optimisasi Lebih Lanjut

Jika kamu menginginkan optimisasi yang lebih banyak, ada beberapa pilihan tools yang bisa digunakan. Beberapa pilihan tersebut antara lain adalah:

  • Dukungan Autoptimize Pro: Merupakan support berbayar dengan harga €299, untuk jasa optimasi WordPress dari pengembang plugin ini.
  • RapidLoad: Salah satu plugin yang dapat meningkatkan kecepatan blog WordPress dengan cara menghapus CSS yang tidak digunakan oleh situs kamu.
  • Loadlabz: Kelas online yang dapat meningkatan pengetahuan kamu mengenai cara optimasi halaman WordPress agar lebih cepat, Kelas berbayar ini juga akan mengajarkan kamu bagaimana cara membuat Autoptimize kompatibel dengan plugin page caching lainnya.
  • WP Rocket: Tools ini memiliki banyak sekali opsi dan menangani hampir semua hal yang dilakukan oleh Autoptimize. Beberapa opsi yang disediakan oleh WP Rocket antara lain adalah analisis hosting Google lokal, pembersihan database, kontrol detak jantung, menambahkan Cache Browser ke Facebook Pixel, dll.
  • Neve: Tema premium WordPress dari Themeisle yang ringan, cepat, dan hasil pengujian mendapatkan nilai 100 dari Google Pagespeed.
  • ShortPixel: Merupakan salah satu plugin untuk mengoptimalkan gambar yang paling populer dan banyak digunakan.
  • Keycdn: Merupakan CDN yang memiliki 34 data center, di 25 negara, termasuk Indonesia di dalamnya, dan tersebar di 6 benua.
  • Kinsta: Merupakan salah satu jenis tools hosting premium yang menawarkan kecepatan, dukungan yang baik, waktu aktif setiap saat, dll. Hosting ini ditawarkan dengan harga $30 per bulannya.

8. Cloudflare

Mengaktifkan Cloudflare sangatlah bermanfaat, dikarenakan Cloudflare dapat menambahkan 200 lebih data center pada Content Delivery Network (CDN) kamu. Adapun cara yang dapat dilakukan untuk mengaktifkan ini adalah:

  • Mendaftar pada Cloudflare, kemudian masukkan situs website dan lakukan pemindaian.
  • Setelah proses pemindaian situs selesai, pilihlah paket gratis. Kemudian Cloudflare akan membawa kamu melalui serangkaian halaman, dan pada akhirnya akan sampai pada halaman di mana Cloudflare memberi 2 nama server.
  • Login ke DNS Management kamu. Kemudian, salin 2 nama server yang disediakan oleh Cloudflare dan menempelkannya ke opsi server nama khusus di pencatatan domain.
  • Tunggu sampai 72 jam untuk keperluan propagasi DNS.
  • Tidak perlu repot mengintegrasikan Cloudflare saat menggunakan plugin Autoptimize. Tidak ada pengaturan khusus mengenai hal ini.

Apabila ada pertanyaan mengenai cara menggunakan plugin Autoptimize. Silahkan kirim melalui kotak komentar di bawah artike ini. Jangan lupa bagikan artikel di atas melalui Facebook, Twitter, LinkedIn, WhatsApp, Line, dan Telegram ya!

Gabung Bersama +30.000 Pembaca Kami!

Daftarkan email anda untuk mendapatkan artikel terbaru dari Situstarget.com.

Proses pendaftaran hampir selesai, mohon cek email Anda dan Klik tombol konfirmasi.

Pin It on Pinterest

Share This