Cara Setting Plugin Autoptimize

Cara Setting Plugin Autoptimize – Autoptimize merupakan plugin PageSpeed untuk megoptimalkan file dan mempercepat loading wordpress Anda yang dikembangkan oleh Frank Goossens. Plugin ini merupakan plugin yang berfungsi sangat optimal yang sudah saya coba dan membandingkannya dengan plugin optimasi lainnya.

Hasil dari optimai yang baik tentu dengan cara setting plugin autoptimize yang benar maka akan mendapatkan hasil yang optimal dengan begitu bisa meningkatkan kecepatan website Anda dengan baik karena Google sudah menetapkan bahwa blog yang dibuka pada smartphone sekarang sudah menjadi menentu peringkat di SERP.

Hal tersebut sudah menjadi salah satu syarat dan tidak bisa di toleransi untuk pengguna blogger agar dapat bersaing dengan kompetitor di mesin halaman pencari, salah satu faktornya adalah penggunaan hosting dan struktur tema yang baik yang bisa menjadikan blog bisa cepat saat di akses.

Plugin Autoptimize ini bertujuan untuk mengoptimasi penggunaan file yang ada seperti kode HTML, Javascript, CSS, Gambar dan Font yang ada pada tema yang Anda gunakan

Fungsi dari plugin Autoptimize ini mengecilkan ukuran dari file Javascript, CSS, dan HTML tersebut dan membuat konten lebih awal dibandingkan script yang ada dengan begitu website wordpress yang Anda miliki bisa di akses dengan cepat.

Cara Setting Plugin Autoptimize

Pada test speed di atas menggunakan GTmetrix sebagai alat ukur untuk cek kecepatan website, disini saya menggunakan tema Generatepress yang digabungkan dengan plugin autoptimize.

Langkah awal sebelum masuk ke pembahasan Cara Setting Plugin Autoptimize, Anda harus menginstal terlebih dahulu plugin Autoptimize dengan cara masuk dashboard WordPress > Plugin > Add New > Search Autoptimize > Instal > Active.

Cara Setting Plugin Autoptimize
Cara Instal Plugin Autoptimize

Jika sudah terpasang maka langkah selanjutnya tinggal melakukan langkah Setting Plugin Autoptimize agar website wordpress Anda semakin optimal.

Cara Setting Plugin Autoptimize

Setelah Anda berhasil instal plugin Autoptimize maka langkah selanjutnya adalah dengan setting. Anda bisa akses settingan plugin ini melalui Dashboard > Settings > Autoptimize untuk menadapatkan hasil yang optimal Anda bisa mengikuti settingan dibawah ini.

Langkah 1. Javascript Options

Fitur yang terdapat di dalam sebuah website wordpress di kembangan dengan menggunakan Javascript. Jadi sudah jelas penggunaan Javascript akan memuat di bagian backend website wordpress Anda yang membuat loading wordpress Anda menjadi lebih lama.

Jadi untuk mengoptimalkan Javascript tersebut tentu menjadi penting agar bisa membercepat loading wordpress Anda dan script yang ada di optimasi agar ukuran filenya menjadi ramping. Caranya hanya perlu klik bagian seperti foto dibawah ini.

Cara Setting Plugin Autoptimize
  • Jika Anda mendeteksi pemblokiran render pada alat seperti Gtmetrix atau Pingdom, aktifkan file JS Agregat.
  • Untuk memuat halaman yang lebih cepat aktifkan js inline agregat tetapi berlatihlah untuk membersihkan cache Anda secara teratur.
  • Javascript di head dapat menyebabkan pemuatan halaman lebih lambat karena pemblokiran rendering.
  • Mengaktifkan catch-wrapping dapat memperbaiki masalah javascript situs web Anda.

Langkah 2. CSS Options

Untuk mengaktifkan pengoptimalan CSS di website wordpress Anda, centang kotak pertama. Ini akan memampatkan semua CSS di situs WordPress Anda dalam satu file yang sudah di optimasi. Dan ini akan mengurangi waktu loading situs WordPress.

Cara Setting Plugin Autoptimize
  • Periksa opsi kedua juga, itu akan menggabungkan semua file CSS yang jauh lebih baik daripada mengecilkan setiap file CSS satu per satu.
  • Jika Anda ingin menggabungkan CSS yang ada di dalam kode HTML, Anda harus mengaktifkan opsi ini. Rekomendasi saya adalah Anda harus mengaktifkan opsi ini.
  • Aktifkan opsi buat URL data untuk gambar untuk menyertakan gambar latar belakang kecil di CSS itu sendiri, bukan sebagai unduhan terpisah, yang dapat berguna untuk beberapa situs atau mungkin menjadi masalah bagi beberapa situs lainnya. Uji satu-dua kali dengan situs Anda dan pertahankan opsi yang lebih baik.
  • Menyebariskan semua CSS memiliki satu keuntungan jelas (skor PageSpeed lebih baik) dan satu kerugian besar; halaman HTML dasar Anda menjadi lebih besar secara signifikan dan jika jumlah CSS besar.

Langkah 3. HTML Options

Anda hanya akan melihat dua opsi di sini untuk Mengoptimalkan pengaturan HTML, Yang pertama akan diperiksa secara default. Anda harus memeriksa pertahankan komentar HTML juga untuk menghapus komentar dari HTML.

Langkah 4. Konfigruasi CDN

Jika blog Anda menggunakan CDN bisa mengisikan URL CDN Anda pada kolom ini, namun jika Anda menggunakan CloudFlare sebagai CDN maka jangan di isi, yang mengakibatkan error.

Langkah 5. MISC Options

Untuk Cara Setting Plugin Autoptimize selesai, Anda harus mencari opsi MISC juga.

Biarkan ketiga opsi tersebut dicentang, jika hosting Anda tidak mendukung kompresi sama sekali. Jika Anda tidak yakin, centang kotaknya, karena saat ini sebagian besar server web dapat menangani kompresi konten web.

Jangan lupa untuk menyimpan pengaturan dan mengosongkan cache. Menyimpan pengaturan ini akan secara otomatis menghapus cache plugin Anda.

Langkah 6. Critical CSS

Pada opsi ini diperlukan versi premium, ini juga bisa meningkatkan kecepatan pada blog Anda Ini juga merupakan plugin otomatis dan tujuan utama penggunaan plugin ini adalah untuk memuat file CSS yang penting secara sinkron dan file CSS yang tidak penting secara asinkron, namun ada alternatif lainnya yang bisa Anda gunakan untuk meningkatkan kecepatan website dengan menambahkan code fuction pada file function.php

// exclude main and child stylesheets from delivery optimization 
function exclude_from_delivery_optimization($handle){ return in_array($handle, array('main-stylesheet', 'child-stylesheet')); } add_filter('speed-up-optimize-css-delivery', 'exclude_from_delivery_optimization');

Langkah 7. Image Optimization

Ini adalah fitur baru yang disertakan dalam pembaruan terkini dari plugin ini. Namun, ini juga merupakan fitur penting karena ini akan menyelamatkan Anda dari penginstalan plugin terpisah untuk pengoptimalan gambar + Anda dapat menampilkan gambar dari CDN global Shortpixel.

Penting: Jika Anda melihat penurunan besar dalam skor kinerja karena beberapa jaringan pengiriman konten, maka nonaktifkan Gambar Optimalkan ShortPixel.

Langkah 8. Extra Configuration

Setelan tambahan dapat lebih meningkatkan kinerja situs Anda. Anda dapat memilih apakah akan menggunakan, menghapus, atau menggabungkan font Google, Anda dapat menghapus emoji, menghapus string kueri dari sumber daya statis, dan juga menyambungkan beberapa domain pihak ketiga yang dipilih.

Google Font

Pilih opsi Combine and link in head (fonts load fast but are render-blocking), includes display:swap agar bisa memperingan load dari google font.

Remove emojis

Aktifkan fitur ini karena akan menghapus emoji pada webiste Anda, Supaya bisa meningkatkan kecepatan website.

Preconnect to 3rd Party Domains

Pada kolom ini Anda bisa masukan URL pihak ketiga yang digunakan di dalam blog Anda misalnya kode Analytics, Pixel Facebook, Font dll.

  • 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
  • Google Fonts tampak hebat dan memberi situs web Anda tampilan yang unik dan modern. Dan pada saat yang sama, Anda juga dikompromikan dengan kinerja situs web.
  • Memeriksa penghapusan emoji akan menghapus inline CSS dan javascript dari emoji inti WordPress yang akan meningkatkan kinerja situs.
  • Periksa hapus string kueri dari sumber daya statis untuk meningkatkan skor kinerja GTmetrix.
  • Anda perlu menginstal async javascript karena ini akan memberi Anda kontrol lebih lanjut untuk async atau menunda file js selama pemuatan situs.

Instal Async JavaScript

Cara Setting Plugin Autoptimize dan plugin Autoptimize WordPress sudah siap, instal plugin lain untuk memperluas kontrol java-script. Plugin ini dikembangkan oleh produsen yang sama dari Autoptimize sehingga akan berfungsi sepenuhnya dengan plugin utama.

Pergi kehalaman plugin dan cari Async JavaScript atau Anda bisa download langsung dari Async JavaScript – WordPress plugin.

Ada beberapa pengaturan lagi di tab ini. Sebagian besar untuk menyebutkan beberapa plugin atau skrip individual untuk diterapkan ke defer / async atau pengecualian.

  • Skrip ke Asinkron: Anda dapat menyebutkan skrip apa pun yang ingin Anda terapkan atribut ‘async’.
  • Scripts to Defer: Anda dapat menyebutkan script apa saja yang ingin Anda terapkan atribut ‘defer’.
  • Pengecualian Skrip: Sebutkan skrip yang ingin Anda kecualikan dari asinkron atau tunda yang diterapkan selama pemuatan halaman
  • Pengecualian Plugin: Ketika Anda menyebutkan plugin apa pun yang diinstal di jalur / wp-content / plugins / some-plugin / lalu dan JavaScripts yang ada di dalam jalur ini akan dikecualikan.
  • Pengecualian Tema: Ini akan mengecualikan file JavaScript apa pun yang ada di dalam file Tema yang dipilih. Namun, JavaScripts eksternal yang dimuat oleh tema yang dipilih tidak terpengaruh.

Setelah menyimpan semua pengaturan ini, uji situs web Anda sekali dan Anda seharusnya sudah mencapai peningkatan yang luar biasa pada kinerja dan kecepatan situs.

Penutup

Ini adalah Cara Setting Plugin Autoptimize yang menurut saya berguna untuk peningkatan kinerja serta pengalaman pengguna yang lebih baik. Coba settingan ini jika Anda menggunakan plugin Autoptimize WordPress dan lihat hasilnya. Selain itu, terus uji kecepatan dan kinerja halaman Anda untuk memastikan situs Anda tidak kehilangan pengaruh pengguna karena kinerja yang buruk.

Leave a Reply