Cara mempercepat WordPress

Jika Anda melihat kesalahan JavaScript lainnya, Anda harus menonaktifkan Muat JavaScript Ditangguhkan atau menentukan mengapa file JavaScript tidak dapat ditangguhkan dengan berunding dengan pengembang plugin atau tema.

Tab Media:

• Aktifkan semua yang ada di halaman ini.

Tab Pengaya:

• Jika Anda mengaktifkan Google Analytics di situs Anda (namun tidak melalui Google Pengelola Tag ) aktifkan addon Pelacakan Google. [Catatan:plugin MonsterInsights tidak kompatibel dengan addon ini. Jika Anda ingin menggunakan addon Rocket ini, Anda harus Hapus MonsterInsights dan sertakan kode analitik menggunakan plugin lain seperti SiteKit Google, atau dengan menyalin dan menempelkan kode UA secara manual ke kolom kode header tema Anda.]
• Jika Anda menggunakan kode pelacakan Piksel Facebook di situs Anda, aktifkan addon Piksel Facebook.
• Jika server Anda menggunakan cache Varnish (server kami tidak melakukannya karena caching nginx tersedia sebagai gantinya), Anda harus mengaktifkan add-on Varnish di sini.
• Jika Anda menggunakan Shortpixel atau Imagify untuk menghasilkan gambar WEBP untuk situs Anda, Anda dapat mengaktifkan opsi di sini untuk menyajikannya sebagai preferensi daripada gambar JPG/PNG.

WP Super Cache + Optimasi Otomatis (Gratis)

Jika Anda belum menyelesaikan bagian 5 di atas, lakukan sekarang, lalu masuk ke instalasi WordPress Anda dan buka Plugins> Add New dan instal serta aktifkan Autoptimize

Mengonfigurasi Optimalisasi Otomatis

• Buka Setelan> Optimasi Otomatis dan pastikan bahwa pengecilan Javascript, CSS, dan HTML diaktifkan.
• Di bawah tab Extra, di samping Google Fonts, cobalah opsi untuk “Menggabungkan dan memuat font secara asinkron dengan webfont.js” serta “Menghapus String Kueri”.
• Tekan “Simpan Perubahan”.

Memecahkan Masalah Elemen Rusak

Setelah mengaktifkan pengoptimalan di WP Rocket atau Autoptimze, Anda mungkin akan melihat elemen yang rusak di situs, tergantung plugin yang digunakan, tema Anda, dan berbagai hal lainnya. Berikut beberapa alasan umum dan perbaikannya:

Gambar atau Video hilang:

Jika pembuat tema atau halaman Anda menggunakan Javascript untuk memuat gambar di situs Anda, Lazyload untuk gambar dan video opsi dapat merusaknya dan Anda harus menonaktifkan pemuatan lambat pada halaman yang memiliki konten ini. Lihat bagian “Per-Laman” di bawah untuk mempelajari cara melakukannya.

Bagian global situs saya tidak berfungsi, seperti menu

Jika itu kode khusus, sebaiknya coba perbaiki kode yang bertanggung jawab. Jika fungsionalitasnya disediakan oleh tema atau plugin, coba ganti fungsionalitas itu dengan tema atau plugin lain (karena tema atau plugin mungkin tidak dibuat untuk kecepatan). Anda juga dapat melaporkan masalah kompatibilitas ke pengembang tema atau plugin agar mereka dapat memperbaikinya.

Jika Anda tidak dapat memperbaiki kode atau mengganti perangkat lunak yang tidak dioptimalkan untuk kecepatan, nonaktifkan setiap jenis minifikasi (mis.:di bawah Tab Pengoptimalan File di WP Rocket) satu per satu hingga Anda melihat masalahnya hilang, lalu aktifkan semuanya lagi kecuali pengaturan yang terakhir Anda nonaktifkan, karena menyebabkan masalah.

Jika Anda adalah pengguna tingkat lanjut, Anda dapat mengaktifkan kembali pengaturan yang tidak berfungsi untuk Anda, lalu gunakan inspektur web untuk memeriksa halaman dan mencari tahu file mana yang menyebabkan masalah. Setelah Anda menemukannya, masuk ke konfigurasi WP Rocket atau Autoptimize dan kecualikan file tunggal itu saja dari minifikasi. (Ini kemungkinan akan menurunkan skor kecepatan halaman Anda)

Pengecualian Per Halaman

Jika Anda hanya menemukan halaman tertentu yang mengalami masalah, Anda dapat menonaktifkan opsi yang menyebabkan masalah pada halaman itu saja. Edit halaman di WordPress, dan cari kotak "Opsi Cache" di sebelah kanan.

Jika Anda tahu bagian mana dari plugin caching yang menyebabkan masalah, hapus centangnya. Jika tidak, hapus centang satu per satu, dan lihat halaman untuk melihat apakah masalah teratasi. Ulangi langkah ini untuk setiap opsi hingga Anda menemukan setelan masalahnya.

Jika Anda menggunakan Hapus CSS yang Tidak Digunakan (WP Rocket)

Ada dua opsi untuk memperbaikinya, bergantung pada situasinya:

1. Baru memulai dengan Hapus CSS yang Tidak Digunakan? Yah, kami memberi tahu Anda bahwa ini kemungkinan besar akan terjadi. Tidak masalah; cukup cari pengidentifikasi CSS dari setiap elemen yang telah 'menjadi miring' dan tambahkan ke daftar pengecualian di WP Rocket. Kemudian muat ulang halaman di browser lain, dan konfirmasikan bahwa masalah telah diperbaiki. Jika tidak, temukan elemen CSS berikutnya dan coba yang itu – Anda akan mengetahuinya dan masih akan melihat keuntungan yang signifikan dalam kinerja situs Anda.
2. Jika Anda telah menjalankan Hapus CSS yang Tidak Digunakan untuk sementara waktu sekarang, dan tiba-tiba rusak, coba segarkan dengan masuk ke WP Rocket -> Bersihkan CSS yang Digunakan. Ini dapat terjadi jika ada pembaruan plugin / tema, dan WP Rocket perlu diminta untuk membuat ulang file-nya.

7. Kompres file gambar

Ini hanya akan memberi Anda sedikit peningkatan kecepatan yang terlihat kecuali Anda menggunakan koneksi Internet yang lambat atau telah mengunggah gambar yang sangat besar ke situs Anda, tetapi ini dapat sedikit meningkatkan skor kecepatan halaman Google Anda karena skor Data Web Inti seluler mereka didasarkan pada kecepatan Internet 3G.

Perhatikan:jika Anda serius ingin mengoptimalkan situs untuk meningkatkan setiap penurunan performa terakhir, Anda akan mengalami penurunan kualitas gambar . Jika Anda lebih suka gambar dengan kualitas lebih tinggi, maka Anda memilih opsi ini karena a) waktu muat halaman pada koneksi yang lebih lambat dan b) skor tolok ukur sintetik seperti Google PageSpeed ​​dan Core Web Vitals. Anda harus memilih mana yang Anda sukai:gambar berkualitas tinggi atau skor tolok ukur yang lebih baik. Anda tidak dapat memiliki keduanya.

Metode manual asli: Jalankan semua file PNG melalui kompresor lalu unggah di atas versi sebelumnya. Anda mungkin tidak memiliki alat ini, tetapi saya membuka semua file PNG di Photoshop dan mengekspornya ke web. Jika Anda melakukan ini, pastikan file tidak sertakan Metadata karena ini dapat menghabiskan sebagian besar file — terutama untuk ikon.

Metode Berbayar Lebih Mudah: Kami menggunakan Imagify untuk menangani ini untuk kami, semua di sisi server. Ini adalah plugin fantastis yang disediakan oleh orang yang sama dengan WP Rocket yang akan secara otomatis mengelola kompresi gambar Anda baik sebagai kesepakatan sekali pakai atau berkelanjutan. Opsi lainnya adalah plugin yang disebut ShortPixel, ini berfungsi sebaik Imagify dalam pengujian kami dan juga menawarkan harga yang sangat wajar. Lihat semua sumber daya yang kami rekomendasikan di sini.

Caching Gravatar

Karena ini mengacu pada gambar (yang digunakan oleh penulis pos), ini terasa seperti tempat yang tepat untuk membicarakannya. WP Rocket dan WP Super Cache tidak meng-cache gravatar secara default, artinya jika Anda memiliki banyak komentar pada postingan Anda dari berbagai penulis, pemuatan gambar gravatar eksternal dapat memperpanjang waktu render total halaman Anda.

Blog WP Rocket memiliki artikel bagus tentang cara mengelola ini, intinya adalah menginstal plugin yang disebut “FV Gravatar Cache”.

8. Konfigurasikan Nginx untuk Memuat Output Cache Statis [Lanjutan]

Hanya mereka yang menggunakan host dengan proxy balik nginx yang dapat memanfaatkan opsi ini. Ini berlaku untuk siapa saja yang menggunakan Plesk 12 atau lebih baru kecuali host melakukan hal-hal aneh dengan konfigurasi server mereka.

Karena nginx adalah mesin server web yang lebih ringan daripada apache, dengan mengonfigurasi nginx untuk langsung melayani file statis ini, kami secara dramatis meningkatkan kinerja. Untuk setiap permintaan tunggal, daripada menggunakan utas nginx untuk meluncurkan proses apache untuk menangani permintaan, kami akan mengonfigurasi nginx untuk hanya menggunakan utas nginx dan tidak perlu repot memuat apache sama sekali untuk semua halaman yang kami memiliki file cache statis . Keren ya?

Jika hosting Anda menggunakan Websavers, Anda tidak perlu melakukan semua ini, karena kami melakukannya secara otomatis dengan semua hosting bersama dan akun hosting VPS terkelola.

Jika hosting Anda tidak bersama kami, maka Anda harus memiliki akses admin ke Plesk untuk dapat menerapkan perubahan ini. Anda biasanya hanya memiliki akses admin jika Anda memiliki VPS atau server khusus sendiri.

Konfigurasi nginx untuk memuat file cache statis WP Super Cache

Ingat di atas ketika kami memberi tahu WP Super Cache untuk menggunakan mod_rewrite untuk melayani file cache kami? Ini hampir otomatis jika Anda menggunakan apache karena WP Super Cache akan secara otomatis memodifikasi file .htaccess Anda untuk menyertakan aturan mod_rewrite yang diperlukan.

Memasukkan berikut dalam konfigurasi nginx Anda akan memberi tahu nginx untuk mem-bypass apache sepenuhnya saat melayani keluaran statis WP Super Cache. Di Plesk, Anda melakukan ini di bawah "Pengaturan Apache &nginx" domain, lalu di bidang Arahan nginx tambahan.

### WP Super Cache Below ###
set $cache_uri $request_uri;
 
# POST requests and urls with a query string should always go to PHP
if ($request_method = POST) {
    set $cache_uri 'null cache';
}   
if ($query_string != "") {
    set $cache_uri 'null cache';
}   
 
# Don't cache uris containing the following segments
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
    set $cache_uri 'null cache';
}   
 
# Don't use the cache for logged in users or recent commenters
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
     set $cache_uri 'null cache';
}
 
# Use cached or actual file if they exists, otherwise pass request to WordPress
location ~ / {
   try_files /wp-content/cache/supercache/$http_host/$cache_uri/index.html $uri /index.php;
}

Penting untuk dicatat bahwa Anda mungkin memiliki beberapa masalah dengan aturan nginx yang disediakan jika Anda menggunakan WordPress di subdirektori, terutama jika Anda memiliki instalasi 'bersarang' (dengan WordPress di direktori dasar dan instalasi WordPress lain di subdirektori). Hal ini dapat dilakukan dengan banyak perubahan rumit pada aturan yang disediakan, tetapi pasti akan lebih mudah jika Anda mengubah struktur untuk menggunakan subdomain, bukan subfolder.

Konfigurasi nginx untuk memuat file cache statis WP Rocket

Kami memanfaatkan konfigurasi nginx WP Rocket yang praktis ini dengan membuat konfigurasi (ikuti petunjuk penginstalan), lalu menempelkan hasilnya ke lokasi direktif konfigurasi nginx lanjutan di Plesk.

Kami telah melakukan penyesuaian pada konfigurasi yang menurut kami telah bekerja paling baik untuk lingkungan kami; jika Anda ingin memanfaatkan pengoptimalan kami, lihat hosting dengan Websavers!

9. Nonaktifkan modul PHP yang tidak digunakan [Lanjutan]

Diperlukan Akses Admin Plesk (Hanya VPS)

Jika Anda memiliki akses admin penuh ke VPS Anda, Anda sebenarnya dapat menonaktifkan modul PHP yang tidak Anda perlukan. Lebih sedikit hal yang dimuat ke dalam memori, lebih sedikit penggunaan memori, pemrosesan yang kurang intensif, dan kinerja yang lebih cepat. Ini adalah hal yang sangat canggih, jadi pastikan Anda tahu apa yang Anda lakukan atau tidak melakukannya di server langsung sehingga Anda tidak merusak apa pun 😉

• Buka Alat dan Setelan di Plesk
• Di bawah Pengaturan Umum klik Pengaturan PHP
• Pilih versi dan handler PHP yang ingin Anda ubah setelannya
• Nonaktifkan modul PHP yang tidak Anda gunakan
• Klik Oke atau Terapkan untuk menyimpan

Sekarang kembali ke situs web Anda dan pastikan tidak ada yang rusak! Anda mungkin tidak tahu modul apa yang digunakan di setiap aspek situs web Anda, jadi mungkin ada sedikit trial and error untuk melakukannya dengan benar.

Tips Bonus #1:ReCAPTCHA v3

Jika Anda menggunakan Google ReCAPTCHA untuk perlindungan bot, baik pada formulir kontak/kutipan atau untuk melindungi komentar posting blog Anda, kami tidak menyalahkan Anda, ini adalah sistem yang baik untuk mencegah bot mengirimkan formulir Anda.

ReCAPTCHA v2 adalah jenis captcha yang diketahui dan agak dibenci semua orang di mana Anda 'mencentang kotak' untuk mengonfirmasi bahwa Anda bukan bot. Kebencian muncul ketika sistem memunculkan verifikasi di mana Anda harus mengklik gambar yang cocok dengan deskripsi seperti "pilih semua gambar dengan truk di dalamnya". Terdengar familier?

ReCAPTCHA v3 'tidak terlihat' karena tidak diperlukan kotak centang, membuat pengalaman pengguna menjadi lebih baik. Namun, ada beberapa kelemahan kecepatan situs karena harus memuat semua skripnya di setiap laman situs web Anda . Ini melacak pengguna saat mereka menavigasi situs Anda karena perilaku mereka akan membantu menentukan apakah mereka bot atau bukan.

Karena skrip ini dimuat di setiap halaman, satu-satunya cara agar sumber daya tersebut tidak ditandai oleh GTMetrix dan alat pembandingan sintetik lainnya adalah dengan beralih kembali ke v2 (jika formulir atau plugin recaptcha Anda mengizinkannya) karena sumber daya hanya akan dimuat di halaman tempat formulir berada.

Advanced users:you can write a WordPress hook that dequeues the ReCAPTCHA v3 resources on all pages except those with your forms, but you should know that doing this will very likely decrease the effectiveness of ReCAPTCHA’s protection.

Bonus Tip #2:Detect and Reduce Dynamic Processing

There’s a few common cases where, regardless of all the caching and optimizations, we just implemented, your server will still launch dynamic PHP processes to serve the requests, thus requiring CPU and memory to handle that request.

Check out our guide to analyzing dynamic processing with WordPress!

UPDATE HISTORY:

• Jan 12, 2022:Updates to PHP Versions, simplify wording, add brotli compression details
• Aug 28, 2020:Add notes about content encoding headers, MonsterInsights incompatibility with WP Rocket’s GA Addon, Gravity Forms incompatibility with deferred jQuery
• Apr 30, 2020:Add Bonus Tip 2:Detecting and Reducing Dynamic Processing
• Apr 26, 2020:Add tip for caching Gravatar images.
• Jan 10, 2020:Add improved instructions for configuring browser caching rules in Plesk to improve scores on synthetic benchmarks like Google Page Speed and GTMetrix.
• Dec 31, 2019:Remove our recommendation to use nginx direct to PHP-FPM processing and instead use rules that will ensure nginx will directly serve your caching plugin’s static cache file output, bypassing apache. This results in identical performance for most website visitors, but much better security, if your host has Plesk’s web application firewall properly configured.
• Oct 15, 2019:Split step 5 into 2 sections (now 5 and 6) — static cache generating in step 5 (which improves performance but doesn’t break websites) and optimization of resources in step 6 (which improves scores on things like Google Page Speed, but which can also break your website).
• Feb 4, 2019:Replace Better WordPress Minification with Autoptimize as recommended minification system.
• Jan 9, 2019:Add PHP 7.3 Info
• Dec 3, 2018:Reformatted post for better understanding of difference between browser cache vs. nginx->php-fpm direct mode. Use Plesk recommended rewrite rules for nginx.
• Jul 4, 2017:Added ShortPixel as an image compression option, reformatted post.
• Feb 20, 2016:Added commercial option, WP Rocket, as a great paid replacement for WP Super Cache + WP Minify.
• Jun 16, 2017:Added some hosting/server tips.
• Dec 25, 2013:Original Post Date.