ilustrasi_plugin_autoptimize_wordpress

WordPress

Cara Setting Autoptimize WordPress: Panduan Penting Tahun 2021

Autoptimize adalah salah satu plugin cache yang cukup populer dikalangan Bloger. Disini, anda akan mengetahui tentang cara setting Autoptimize WordPress yang tentunya dapat membantu situs web anda untuk dimuat lebih cepat.

Autoptimize juga hadir untuk meringankan berbagai jumlah file statis dari halaman sebuah website. Tentunya, ini juga turut membantu dalam pemuatan yang lebih cepat untuk halaman situs blog. Mari simak informasi lebih dalam.

Plugin Autoptimize WordPress

Autoptimize WordPress adalah sebuah plugin yang dapat ditemukan dalam directory WordPress. Siapa saja dapat menggunakannya. Secara umum, plugin yang satu ini menawarkan fitur Freemium. Dimana dengan layanan gratis, anda sudah mendapatkan berbagai konfigurasi untuk meningkatkan kecepatan situs blog anda.

plugin_autoptimize_wordpress

Plugin Autoptimize WordPress dapat membantu untuk meringankan permintaan berbagai file statis seperti CSS, Javascript, HTML, Google Font, dan masih banyak lagi. Hingga kini, plugin yang diciptakan oleh Frank Goossens telah di-download oleh lebih dari satu juta pengguna WordPress.

Setting Autoptimize WordPress

Silahkan download Plugin Autoptimize WordPress dari dashboard WordPress anda. Lakukan Instal Plugin WordPress untuk menemukan tempat konfigurasi. Dalam penggunaannya, Autoptimize meminta beberapa konfigurasi untuk penyesuaian kebutuhan dari pengguna WordPress. Berikut ini kami jabarkan tentang cara setting Autoptimize WordPress.

1. Opsi Javascript

Centang bagian optimasi Javascript. Ini dimaksudkan untuk melakukan optimasi terhadap javascript dari theme WordPress. Untuk melakukan setting autoptimize WordPress, ikuti panduan di bawah ini.

  • Optimasi Kode Javascript: Saya menyarankan untuk mencentang bagian ini, untuk upaya optimasi Javascript.
  • Gabungkan Berkas Javascript: Centang bagian ini untuk menggabungkan kode javascript dalam Theme. Penggabungan biasanya memberikan efek terhadap kecepatan situs web. Tetapi tidak semua kode dapat berjalan dengan baik. Sebaiknya, lihat perubahan yang terjadi pada performa situs web anda. Bila beberapa fungsi tidak berjalan dengan baik, nonaktifkan itu.
  • Juga Gabungkan Inline JS: Saya memilih untuk tidak menggabungkannya. Karena, setelah mencoba, terdapat kode Javascript di dalam theme saya, yang tidak berfungsi sebagaimana mestinya. Jadi, saya memutuskan untuk menonaktifkannya. Bila ini dicentang, performa akan meningkat, tetapi fungsionalitas situs web mungkin akan terganggu dibeberapa theme. Cobalah untuk menyesuaikannya.
  • Paksa Javasctip di <head>: Fitur ini bukanlah pilihan saya. Sebaiknya, nonaktifkan bagian ini. Bila ini tetap diaktifkan, maka akan membuat file pemblokiran Render. Artinya, situs web akan mengalami penurunan performa untuk kecepatan waktu muat.
  • Kecualikan script dari Autoptimize: Saya memilih untuk menghilangkan optimasi dari Javascript standar, dan menggantinya dengan ini: wp-includes/js/dist/, wp-includes/js/tinymce/,
  • Tambahkan pembungkus try-catch: Setelah mengalami pembaruan, Autoptimize menambah fitur ini. Setelah mencoba menerapkannya ke situs web saya, ternyata mengganggu eksistensi dari kode Javascript saya. Terdapat beberapa kode yang eror. Jadi, saya memutuskan dan merekomendasikan untuk tidak mengaktifkan bagian ini.

Berikut ini adalah hasil akhir untuk setting bagian Javascript di Autoptimize Plugin WordPress.

setting_autoptimize_wordpress_opsi_javascript

Gambar di atas, adalah tampilan akhir dari semua setting untuk bagian Opsi Javascript. Anda dapat mengikuti gambar itu untuk situs blog anda.

2. Opsi CSS

Berbeda dengan Javascript, CSS tidak terlalu membutuhkan perhatian yang serius. Hal yang umum adalah bahwa dengan melakukan optimasi CSS, sedikit resiko untuk kerusakan pada situs web anda. Berikut ini setting autoptimize WordPress yang mungkin dapat dijadikan pilihan.

  • Optimasi Kode CSS?: Aktifkan untuk optimasi kode CSS.
  • Gabungkan Berkas CSS?: Aktifkan untuk menggabungkan semua kode CSS.
  • Juga gabungkan inline CSS?: Aktifkan untuk membuat inline CSS.
  • Juga gabungkan inline CSS?: Saya menyarankan untuk aktifkan bagian ini. Ini dibutuhkan untuk gambar anda dengan latar belakang CSS, agar menjadi satu unduhan. Dengan begitu, mengurangi waktu muat.
  • Inline dan Defer CSS?: Saya memilih untuk menonaktifkan bagian ini, karena membutuhkan tambahan Plugin pendukung.
  • Inline semua CSS?: Ini semestinya menjadi perhatian pokok dalam bagian CSS. Mengaktifkan fitur ini, dapat meningkatkan kecepatan situs web anda secara signifikan. Tetapi, hal itu membuat beberapa fungsi kode CSS tidak akan bekerja dengan sempurna. Pengalaman saya, mengaktifkan bagian ini membuat website menjadi lebih cepat, namun menghilangkan beberapa Tag dari kode theme saya. Sehingga, saat melakukan share Artikel di berbagai tempat, tidak ditemukan TAG dan tidak menghasilkan gambar thumbnail. Jadi, sementara ini saya belum membutuhkannya, dan memilih untuk menonaktifkan bagian ini.
  • Kecualikan CSS dari Autoptimize: Bagian dimana anda meminta untuk menonaktifkan optimasi CSS yang dilakukan oleh Autoptimize. Silahkan temukan file CSS yang dirasa tidak perlu dioptimasi. Anda dapat menemukan itu dari berbagai tools cek website seperti Googlepagespeed, GT Metrix, dan lain sebagainya.

Gambar ini, adalah hasil akhir dari semua konfigurasi yang dilakukan di atas.

setting_autoptimize_wordpress_opsi_css

3. Opsi HTML

HTML memungkinkan anda untuk mengoptimalkan seluruh file HTML dalam website anda. Untuk dapat melakukan setting Autoptimize WordPress pada Opsi HTML, anda dapat mengikuti panduan berikut ini.

  • Optimasi Kode HTML: Centang untuk mengaktifkan optimasi kode HTML. Ini akan menghapus beberapa karakter kosong (Spasi) yang ada pada kode HTMl, dan mengurangi jumlah ukuran dari file HTML anda.
  • Pertahankan komentar HTML?: Saya belum pernah melakukan pengujian untuk bagian ini. Sebaiknya, nonaktifkan untuk ini.

Gambar ini merupakan hasil dari penerapan di atas.

setting_autoptimize_wordpress_opsi_html

4. Opsi CDN

Untuk melakukan setting autoptimize WordPress opsi CDN, semestinya anda menggunakan CDN pula. Bila belum paham tentang apa itu CDN, lihatlah artikel yang mengulas lebih dalam tentang CDN.

  • URL Basis CDN: Bila anda menggunakan CDN untuk situs blog anda, maka letakkan URL itu dbagian ini. Pengalaman saya, ini tidak bekerja secara maksimal saat saya menggunakan CDN Gratisan dari Plugin WordPress. Saya memilih untuk menonaktifkannya.

5. Opsi Lain-lain

Untuk melakukan setting autoptimize WordPress opsi lain-lain, sepertinya tidak merusak situs web anda. Aktifkan semua pada bagian ini, untuk mengoptimalkan lebih lanjut terhadap halaman website anda.

setting_autoptimize_wordpress_opsi_lain_lain

6. Tab Images

Autoptimize WordPress juga menawarkan untuk pengoptimalan gambar. Anda dapat membuka TAB Gambar untuk melakukan Setting Autoptimize WordPress. Disini, akan ditemukan 2 pilihan, yaitu:

  • Optimalkan Gambar: Ini ditujukan untuk mengoptimalkan gambar menggunakan CDN Global. Selama percobaan, saya tidak mendapatkan nilai yang lebih memuaskan dalam penggunaan bagian ini, dan memang saya tidak menggunakan CDN Khusus untuk situs blog saya. Jadi, saya memilih untuk menonaktifkan bagian ini.
  • Lazy-load Images: Lazy-load adalah waktu muat gulir, dimana gambar akan didownload oleh browser setelah user/ pengguna melakukan scrool (melihat) pada bagian gambar. Lazy-load dinilai memberikan efek yang baik bagi kecepatan waktu muat situs web. Tetapi, saya tidak mendapatkan hasil sesuai harapan pada bagian ini, dan lagi-lagi saya memilih untuk menonaktifkannya.

Gambar ini, adalah hasil akhir dari semua setting yang dilakukan dengan panduan di atas.

setting_autoptimize_wordpress_opsi_images

7. Tab Ekstra

Berikut ini panduan untuk Setting Autoptimize WordPress pada Tab Ekstra. Anda dapat membuka TAB tersebut dan ikuti panduan ini.

  • Google Fonts: Nonaktifkan bagian ini bila anda tidak menggunakan Google Font dalam CSS Font blog anda. Saya memilih untuk “Gabungkan dan tautkan di head (font akan dimuat cepat tetapi memblokir perenderan), includes display:swap“. Itu terjadi karena saya menggunakan Google Font untuk situs blog saya.
  • Hapus Emoji: Centang untuk menghapus semua Emoji Bawaan dari WordPress. Ini membantu membercepat pemuatan, karena tidak membutuhkan permintaan apapun dari kode emoji.
  • Hapus string kueri dari sumber daya statik: Autoptimize mengklaim bahwa ini dapat meningkatkan waktu muat, meski membuat kinerja yang lebih banyak. Saya memilih untuk mengaktifkan bagian ini.
  • Preconnect untuk domain pihak ketiga: Gunakan untuk mengoptimalkan kinerja dari situs web pihak ketiga yang berada pada theme anda.
  • Preload specific requests: Biasanya, ini dibutuhkan untuk URL CSS dari Font. Saya menggunakan Google Font, dan membuatnya berada pada kolom ini.
  • Async berkas Javascript: Digunakan untuk Javascript. Saya mengosongkan bagian ini.

Gambar ini, adalah hasil akhir dari semua setting yang dilakukan pada Tab Ekstra.

setting_autoptimize_wordpress_opsi_ekstra

Beberapa cara di atas, merupakan langkah setting Autoptimize WordPress yang saya terapkan dalam situs blog saya. Faktanya, saya mendapatkan skor yang lebih cepat dari sebelumnya. Semoga ini juga berpihak pada anda. Terimakasih telah berkunjung. Jangan sungkan untuk menanyakan sesuatu di kolom komentar.

Tinggalkan komentar