Cara Setting Autoptimize dengan Benar Lengkap Gambarnya

Cara Setting Autoptimize – Kesempatan ini admin akan membagikan tutorial cara setting plugin autoptimize yang benar di wordpress.

Di WordPress banyak plugin yang disediakan untuk meningkatkan kecepatan loading blog kita, tentunya untuk mengoptimasih blog kita agar lebih ringan dan cepat loadingnya. Salah satu plugin yang dapat kita gunakan untuk mengoptimasi situs kita adalah dengan menggunakan Autoptimize.

Pengertian Plugin Autoptimize

Autoptimize adalah suatu alat tambahan (plugin) untuk cache yang berfungsi untuk mempercepat atau meningkatkan performa tema WordPress agar dapat berjalan lebih cepat.

Autoptimize bekerjai dengan cara memperkecil ukuran dari Java Scribd, HTML dan CSS, serta menghapus beberapa skrip yang tidak penting, sehingga dapat mempercepat waktu pemuatan situs.

Untuk menyetel Autoptimize tidak boleh dilakukan secara asal, karena jika dilakukan secara asal bisa-bisa akan terjadi error pada situs yang kita miliki. Oleh karena itu berikut adalah tutorial cara setting Autoptimize yang benar.

Cara Setting Autoptimize dengan Benar untuk Semua Template

1. Install dan aktifkan plugin Autoptimize terlebih dahulu
2. Pilih Pengaturan, kemudian pilih Autoptimize
   
3. Pada Opsi JavaScript aktifkan Optimasi Kode JavaScript? dan Gabungkan Berkas JS?
4. Pada Kecualikan script dari Autoptimize: masukkan kode ini wp-includes/js/dist/, wp-includes/js/tinymce/
   
5. Pada Opsi CSS centang pada Optimasi Kode CSS?, Gabungkan Berkas CSS? dan Juga gabungkan inline CSS?, biarkan yang lainya default
   
6. Pada Opsi HTML centang pada Optimasi Kode HTML? saja
7. Biarkan default pada Opsi CDN dan Opsi Lain-lain, jika sudah pilih Simpan Perubahan dan Kosongkan Cache
8. Masuk menu Ekstra, Pilih Hapus Google Fonts
9. Pilih Hapus emoji
10. Terakhir pilih Hapus string kueri dari sumber daya statik
    
11. Jika sudah Simpan Perubahan dan Kosongkan Cache

Itlah tadi cara membuat speed loading wordpress kita menjadi lebih cepat dengan hasil pagespeed insight diatas 99+, tanpa gambar yang berat pada postingan dan iklan adsense.

Yahh tentunya jika kalian memasang iklan adsense tanpa lazyload maka skornya akan berapa di 80 an saja.

Nah selanjutnya kita melangkah ke kenapa admin memilih pengaturan tersebut dan mengatakan aman untuk diterapkan di berbagai macam template.

Alasan Memilih Setingan diatas untuk diterapkan di WordPress

• Gabungkan Berkas JS? : “Gabungkan Berkas JS” atau “Aggregate JS-files” adalah opsi pada plugin Autoptimize yang berguna untuk menggabungkan semua file JavaScript (JS) menjadi satu file tunggal. euntungan dari menggunakan opsi ini adalah Mengurangi Latency atau mengurangi jumlah file juga berarti mengurangi latensi yang dihasilkan oleh banyak permintaan HTTP dan memperbaiki Skor Optimasi
• Kecualikan script dari Autoptimize : Fungsi dari opsi ‘Kecualikan script dari Autoptimize’ adalah untuk mencegah skrip atau file JavaScript tertentu dari proses optimisasi yang dilakukan oleh plugin Autoptimize.  Pada kasus yang Anda sebutkan, skrip wp-includes/js/dist/ dan wp-includes/js/tinymce/ adalah bagian dari inti WordPress. wp-includes/js/dist/ adalah direktori tempat WordPress menyimpan sebagian besar skrip JavaScript yang dibangun dengan JavaScript modern dan digunakan untuk antarmuka pengguna blok editor dan lainnya. Sementara wp-includes/js/tinymce/ adalah direktori tempat WordPress menyimpan skrip yang digunakan untuk editor klasik TinyMCE. Mengecualikan skrip ini berarti Autoptimize tidak akan menggabungkan atau memperkecil skrip ini, yang dapat mencegah konflik atau masalah yang mungkin muncul akibat proses optimisasi.
• Gabungkan Berkas CSS? : “Gabungkan Berkas CSS” atau “Aggregate CSS-files” adalah opsi pada plugin Autoptimize yang berfungsi untuk menggabungkan semua file CSS menjadi satu file tunggal. Fungsinya serupa dengan opsi penggabungan JavaScript yang telah dijelaskan sebelumnya.
• Juga gabungkan inline CSS? : “Juga gabungkan inline CSS” atau “Also aggregate inline CSS” adalah opsi di plugin Autoptimize yang berfungsi untuk menggabungkan CSS yang tertanam langsung dalam kode HTML (dikenal sebagai inline CSS) ke dalam file CSS gabungan. Jika Anda memiliki banyak elemen yang menggunakan inline CSS yang sama, ini akan menghasilkan banyak kode yang berulang. Dengan menggabungkan inline CSS, Anda bisa menghilangkan duplikasi dan membuat kode Anda lebih efisien.
• Optimasi Kode HTML? : “Optimasi Kode HTML” atau “Optimize HTML Code” adalah opsi dalam plugin Autoptimize yang berfungsi untuk meminimalisir atau memperkecil file HTML. Proses ini biasanya melibatkan penghapusan spasi, tab, komentar, dan karakter lain yang tidak diperlukan dari file HTML. Tujuan utamanya adalah untuk mengurangi ukuran file HTML, yang pada gilirannya dapat membantu mempercepat waktu pemuatan situs web Anda.
• Hapus Google Fonts : Menghapus Google Fonts bisa menjadi cara yang efektif untuk mempercepat waktu pemuatan situs web Anda, karena mengurangi jumlah permintaan HTTP yang perlu dilakukan browser. Jika Anda menggunakan tema atau plugin yang memuat font dari Google Fonts, permintaan ini bisa memperlambat situs Anda. Setelah melakukan ini, Google Fonts tidak akan lagi dimuat di situs Anda. Harap dicatat bahwa ini akan membuat semua teks di situs Anda menggunakan font default yang ditentukan oleh browser, jadi Anda perlu memastikan bahwa situs Anda masih terlihat bagus dan mudah dibaca tanpa Google Fonts. Penting juga untuk diingat bahwa jika Anda menggunakan tema atau plugin yang secara khusus memuat Google Fonts, Anda mungkin perlu mengonfigurasi pengaturan di tema atau plugin tersebut untuk sepenuhnya menghapus Google Fonts.
• Hapus string kueri dari sumber daya statik : String kueri adalah bagian dari URL yang berisi informasi tambahan yang tidak diperlukan untuk menentukan lokasi suatu halaman web, tetapi digunakan untuk melacak dan menganalisis bagaimana pengunjung berinteraksi dengan situs. Dalam konteks sumber daya statis, string kueri sering digunakan untuk versi kontrol, misalnya untuk memastikan pengguna mendapatkan versi terbaru dari file CSS atau JavaScript. Setelah mengaktifkan opsi ini, Autoptimize akan menghapus string kueri dari URL sumber daya statis di situs Anda. Seperti biasa, pastikan untuk melakukan pengujian setelah mengubah pengaturan ini untuk memastikan tidak ada masalah yang muncul.

Itulah tadi penjelasan kenapa admin felmika memilih setingan diatas.

Pertanyaaan : Kenapa pada Opsi HTML tidak mengaktifkan Juga memperkecil JS/ CSS inline?
Jawaban : Menurut admin memang dengan mengaktifkan fitur ini barisan pada html kita saat di inspeksi element akan mejadi 1 atau 2 baris saja atau dengan kata lain menjadi lebih pendek dan loading blog menjadi lebih cepat. Namun jika diaktifkan, Google Search Console akan mendeteksi artikel kita Tidak Mobile Friendly dengan alasan Teks terlalu kecil untuk dibaca dan Elemen yang dapat diklik terlalu berdekatan satu sama lain padahal aslinya tidak seperti itu, jika kita membukanya di handphone kita sendiri.

Capek gw menulis oii, cukup sekian saja dari admin felmika.com, jika ada tambahan atau ada kekeliruan dari penjelasan admin dan ingin diperbaiki atau ditambahkan, bisa langsung memberi saran di kolom komentar, terimakasih.