Perfmatters, panduan konfigurasi

 
 
Perfmatters, panduan konfigurasi

Jika besok saya diberitahu bahwa saya hanya bisa membawa satu plugin ke pulau terpencil, kemungkinan besar saya akan mengambil Perfmatters Dan jika saya memiliki klub penggemar, saya akan mendaftar dan pergi ke semua konser mereka.

Saya telah menggunakannya sejak Januari 2021 dan telah menjadi salah satu pengaya yang telah memecahkan sebagian besar masalah dan yang telah memberikan kontribusi paling banyak dan terbaik untuk meringankan kecepatan kargo.

Penting

Ini adalah salah satu alat bantu yang bahkan Anda tidak mempertanyakan kemungkinan kecil untuk tidak membayar ketika hari perpanjangan tahunan tiba. Yang mana, omong-omong, sangat ekonomis untuk penggunaan situs tunggal. Biayanya hanya $24,95 dan memiliki diskon 15% untuk perpanjangan berikutnya. Jadi, mulai tahun kedua dan seterusnya hanya $21,21 untuk $21,21 yang sangat sedikit.

Karena saya telah mengulas beberapa fungsinya secara terpisah, tutorial analisis dan konfigurasi yang lebih mendalam masih tertunda. Itulah tujuan postingan ini.

Tentang konfigurasi

Perfmatters, panduan konfigurasi
Perfmatters, panduan konfigurasi

Pemberitahuan: Tidak perlu dikatakan lagi, ikon hidup dan mati yang saya tambahkan adalah yang sesuai dengan konfigurasi saya, yang merupakan yang terbaik yang bisa saya dapatkan untuk blog ini. Ini tidak berarti bahwa ini adalah yang ideal untuk lingkungan Anda.

Setiap skenario berbeda. Anda harus mempelajari setiap opsi dan memahaminya, bereksperimen dengan perilakunya, dan memutuskan apa yang terbaik untuk kasus Anda. Untuk ini, tidak ada yang lebih baik daripada menguji opsi Anda satu per satu dan mengevaluasi hasilnya.

Hal lain yang perlu diperhatikan adalah, bahwa duplikat alat bantu akan bertabrakan. Ada plugin lain seperti WP Rocket atau plugin cache server dengan Litespeed yang memiliki fungsi yang sama dan melakukan hal yang persis sama. Mengaktifkannya secara bersamaan bisa menyebabkan konflik. Anda harus menilai mana yang paling berhasil dan tetap menggunakan salah satunya saja.

Tab Umum

Pada tab general (umum), Anda akan menemukan perkakas yang paling umum. Di samping semuanya, Anda akan menemukan tautan ke bantuan yang sesuai. Jangan takut untuk mencobanya. Semuanya bisa dibalik. Dengan menekan sakelarnya lagi, semuanya akan kembali ke keadaan semula dan tidak ada yang terjadi di sini.

Perfmatters, panduan konfigurasi

Nonaktifkan emoji

WordPress versi 4.2 pada tahun 2015 menambahkan dukungan untuk emoji di inti untuk browser lama.

Meskipun tidak terlalu berat (18 KB plus JS lainnya), Anda dapat menonaktifkannya karena mereka memuat wp-emoji-release.min.js JavaScript di setiap halaman blog Anda dan satu permintaan yang lebih sedikit selalu merupakan satu permintaan yang lebih sedikit.

Perfmatters, panduan konfigurasi

Perfmatters, panduan konfigurasi

Nonaktifkan dasbor

Dashicons adalah sunber set ikon admin WordPress resmi sejak versi 3.8. Beberapa templat menggunakannya di front-end dengan memuat CSS dashicons.min.css. Namun demikian, banyak tema dan plugin modern yang sudah menggunakan ikon mereka sendiri, SVG, atau tanpa ikon sama sekali. Jadi, jika Anda tidak menggunakan dashicons, Anda dapat menonaktifkannya karena stylesheet menambahkan waktu pemuatan yang tidak perlu dan juga memblokir rendering.

Perfmatters, panduan konfigurasi

Menonaktifkannya dari Perfmatters tidak memengaruhi panel admin WordPress, yang menggunakannya. Hanya dasbor di front-end yang akan dihapus saat Anda tidak masuk.

Perfmatters, panduan konfigurasi

Nonaktifkan inlay

Ketika Anda menambahkan tautan apa pun dari blog Anda di editor, WordPress akan mengenalinya dan menampilkannya seperti itu (jika Anda belum memodifikasi styling).

Perfmatters, panduan konfigurasi

Jika Anda tidak peduli tentang embed, Anda dapat menonaktifkannya dan sedikit meringankan beban. Saya belum mematikannya karena saya perhatikan bahwa tautan dengan pratinjau cenderung mendapatkan rasio klik-tayang yang baik saat digunakan sebagai tautan terkait antar paragraf.

Embedding hadir dengan WordPress versi 4.4. Kelemahannya adalah mereka datang dengan kode tambahan yang ditambahkan termasuk JavaScript lain untuk dimuat: wp-embed.min.js

Perfmatters, panduan konfigurasi

Menonaktifkan embed pada blog Anda juga mencegah blog lain menyematkan tautan dari situs Anda dengan pratinjau itu, namun menghapus JavaScript khusus oEmbed, menonaktifkan pemfilteran hasil oEmbed, menghapus penemuan tautan oEmbed dan juga semua aturan penulisan ulang embed.

Perfmatters, panduan konfigurasi

Nonaktifkan XML-RPC

XML-RPC adalah protokol yang ditambahkan di WordPress 3.5 untuk mengizinkan koneksi jarak jauh dan, kecuali jika Anda menggunakan Aplikasi WordPress untuk mempublikasikan atau mengedit blog Anda dari ponsel Anda, penting untuk menonaktifkannya karena menimbulkan risiko keamanan yang serius.

Sangat sedikit plugin yang membutuhkannya, saya hanya tahu satu yang menggunakannya: JetPack. Plugin multifungsi yang tidak direkomendasikan karena sangat menghambat kinerja.

Setelah XML-RPCXML-RPC dinonaktifkan, cukup periksa statusnya dengan mengunjungi yourdomain.com/xmlrpc.php untuk memastikannya hanya mengembalikan pesan kesalahan 403.

TAnda juga bisa memeriksanya di verifier ini. Jika Anda mendapatkan pesan seperti ini berarti XML-RPC dinonaktifkan.

Perfmatters, panduan konfigurasi

Perfmatters, panduan konfigurasi

Hapus jQuery Migrate

Ini diperkenalkan di WordPress 3.6 dan tidak lagi diaktifkan secara default sejak WP 5.5 dan yang lebih tinggi.

Meskipun sebagian besar templat dan plugin tidak memerlukannya, masih ada beberapa yang memerlukannya untuk beberapa fungsi kecil. Dalam kasus saya, ada dua plugin yang menggunakannya, Ultimate Membership Pro dan Peringkat Matematika untuk BAR STATS (yang tidak saya gunakan) yang hanya ditampilkan untuk administrator. Beberapa plugin manajemen persetujuan cookie masih menggunakannya sampai saat ini.

jQuery Migrate adalah sumber daya untuk pengembang yang memungkinkan kode dengan dependensi yang lebih lama untuk berkomunikasi dengan kode baru.

Kemungkinan Anda tidak memiliki plugin yang membutuhkannya, jadi jQuery Migrate menambahkan overhead yang tidak perlu dari Javascrip jquery-migrate.min.js

Perfmatters, panduan konfigurasi

Meskipun demikian, periksa dokumentasi plugin Anda sebelum menonaktifkannya atau tanyakan kepada pengembang (kita akan lihat nanti bagaimana cara menonaktifkannya untuk lokasi tertentu).

Perfmatters, panduan konfigurasi

Sembunyikan versi WordPress

Opsi ini tidak memiliki misteri, hanya menyembunyikan versi WordPress yang telah Anda instal dari mata-mata yang mengintip sebagai tindakan keamanan.

Hal ini, yang dapat dilakukan dengan cara yang berbeda, berguna jika Anda terlambat memperbarui sesuatu di mana kerentanan muncul dengan versi Anda yang dapat dieksploitasi atau inti dapat dikompromikan. Setidaknya, dengan menyembunyikan versi, Anda membuatnya tidak mudah bagi penyerang yang mencari celah.

Meskipun hanya satu baris kode yang dihapus, dan ini dilakukan terutama untuk alasan keamanan, bagi pecinta optimasi, itu hanya sejumput lagi yang menambah total yang akan dikurangi.

Perfmatters, panduan konfigurasi

Hapus tautan wlwmanifest

Ini adalah tag yang muncul di setiap instalasi WordPress dan digunakan oleh Windows Live Writer, yang tidak lagi diperbarui dan didukung pada bulan Januari 2017.

Seperti dalam kasus sebelumnya, ini hanya kode yang tidak perlu, jadi satu baris lebih sedikit.

Perfmatters, panduan konfigurasi

Hapus tautan RSD

Tag sisa lain yang muncul di setiap instalasi WordPress.

Jika Anda mengedit situs mereka dari browser, Anda tidak memerlukannya sama sekali. Ini juga digunakan oleh beberapa aplikasi pihak ketiga yang menggunakan permintaan XML-RPC, yang seharusnya sudah Anda nonaktifkan. Jadi, itu adalah kode yang tidak perlu dihapus.

Perfmatters, panduan konfigurasi

Hapus tautan pendek

Ini digunakan untuk membuat tautan pendek dengan angka untuk halaman dan pos Anda yang menambahkan tag ini:

<link rel='shortlink' href='https://dominio.com?p=123' />
Perfmatters, panduan konfigurasi

Jika Anda menggunakan permalink pendek yang “bagus”, seperti domain.com/%postname% maka tidak ada alasan untuk menyimpan kode yang tidak terpakai ini, lebih banyak kode yang tidak perlu untuk dibuang.

Perfmatters, panduan konfigurasi

Nonaktifkan Umpan RSS

WordPress menghasilkan berbagai jenis umpan RSS secara default. Meskipun feed RSS masih berguna untuk blog, jika situs Anda agak statis atau Anda tidak menggunakannya sebagai blog, Anda bisa menonaktifkan feed.

Perfmatters, panduan konfigurasi

Hapus tautan dari umpan RSS

Sama seperti WordPress menghasilkan RSS feed, WordPress juga menghasilkan tautan ke RSS feed tersebut untuk halaman, posting, komentar, kategori, tag, dll. Anda dapat membiarkan feed RSS Anda diaktifkan dan tetap menghapus tautan feed RSS. Tujuannya adalah untuk menghapus kode tambahan dan kemungkinan besar kode yang tidak digunakan dari halaman Anda.

Perfmatters, panduan konfigurasi

Nonaktifkan autopingbacks

Pingback pada dasarnya adalah komentar otomatis dengan tautan yang dibuat sebagai notifikasi di blog Anda ketika blog lain menautkan ke Anda. Autopingback dibuat ketika Anda menautkan ke artikel dalam blog Anda sendiri.

Saat ini mereka jarang digunakan dan pingback eksternal yang mungkin Anda terima sering kali merupakan spam, hanya membuang-buang sumber daya dan bahkan dapat membuat tautan berbahaya atau sementara yang rusak dan karenanya merugikan SEO. trackbacks, milik masa lalu dari blog, dari ketika menghubungkan sebagai filosofi blogging adalah tradisi sebagai bagian dari netiket.

Desactivar la API REST

Perfmatters, panduan konfigurasi

WordPress REST API menyediakan endpoint API untuk tipe data WordPress yang memungkinkan pengembang berinteraksi dengan situs dari jarak jauh dengan mengirim dan menerima objek JSON.

Hal ini memungkinkan referensi silang dengan situs lain dan dengan perangkat lunak yang ditulis dalam PHP atau bahasa lainnya.

Ada berbagai plugin, layanan, dan aplikasi yang menggunakan REST API, menurut Perfmatters ini adalah beberapa di antaranya:

Yoast SEO dan widget dasbor Ryte, Jetpack, beberapa formulir kontak, Wordfence, dan beberapa widget dasbor WooCommerce tertentu. Ini juga digunakan oleh editor blok Gutenberg untuk berkomunikasi saat melakukan pengeditan halaman dan posting. Jika Anda menonaktifkannya sepenuhnya, Anda akan mendapatkan kesalahan “Update failed”.

Perfmatters menawarkan tiga opsi. Diaktifkan (default), dinonaktifkan untuk non-administrator dan dinonaktifkan ketika log out.

Perfmatters, panduan konfigurasi

Hapus binding API REST

Secara default, tautan REST API disertakan dalam header tipe:

<link rel='https://api.w.org/' href='https://domain.com/wp-json/' />

Header juga dikirim dalam setiap permintaan dan tag API ditambahkan ke endpoint dari Really Simple Discovery (RSD). Semua kode ini bisa dihapus dengan mengaktifkan opsi untuk menghapus tautannya.

Perfmatters, panduan konfigurasi

Nonaktifkan Google Maps

Hanya itu, nonaktifkan Google Maps API.

Beberapa templat dan plugin WordPress memiliki Google Maps API bawaan dan sering kali tidak menawarkan cara untuk menonaktifkannya. Google Maps dapat mendatangkan malapetaka pada performa blog Anda meskipun permintaan dimuat secara asinkron. Biasanya permintaan dilakukan melalui Google Maps API resmi.

Hanya untuk memuat peta di blog Anda, Anda dapat membuat hingga 20 permintaan HTTP ke Google Maps. Tergantung pada integrasinya, mereka bisa membuat lebih sedikit atau bahkan lebih banyak permintaan.

Jika Anda tidak memerlukannya, mereka harus dinonaktifkan.

Kecualikan menonaktifkan Google Maps dengan nomor ID pos

Namun, jika Anda tidak punya pilihan selain menyematkan peta, Anda dapat mengecualikan penonaktifan hanya untuk postingan yang perlu Anda tambahkan. Untuk melakukan ini, Anda harus menambahkan di kotak berikut ini ID dari setiap postingan yang dipisahkan dengan koma.

Perfmatters, panduan konfigurasi
Untuk mengetahui ID postingan, Anda dapat pergi ke Posts/All posts dari menu administrasi dan Anda akan menemukannya di tautan edit yang akan muncul di bagian bawah ketika Anda mengarahkan mouse Anda ke setiap judul.

Perfmatters, panduan konfigurasi

Perfmatters, panduan konfigurasi

Menonaktifkan pengukur kekuatan kata sandi

Ini diperkenalkan dalam versi terbaru WordPress dan WooCommerce. Ini adalah pengukur kekuatan kata sandi bawaan yang memaksa pengguna untuk menggunakan kata sandi yang kuat dan memuat beberapa file seperti: /wp-admin/js/password-strength-meter.min.js dan /wp-includes/js/zxcvbn.min.js

Perfmatters, panduan konfigurasi

zxcvbn.min.js puede pesar más de 800 KB

Perfmatters, panduan konfigurasi

Jika Anda menggunakan WooCommerce, file juga terkadang ditemukan di jalur ini:

/wp-content/plugins/woocommerce/assets/js/frontend/password-strength-meter.min.js

Tergantung pada setiap templat dan bagaimana pengembang telah mengantri, terkadang file-file ini dimuat di seluruh situs. Untuk alasan kinerja, mereka hanya boleh dimuat pada halaman “account”, “payment” dan “password reset”.

Jika setelah menonaktifkannya Anda masih menemukan skrip-skrip ini di antara permintaan-permintaan, lihat dokumentasi templat Anda dan dokumentasi plugin yang menurut Anda mungkin menggunakan fungsi ini.

Perfmatters, panduan konfigurasi

Nonaktifkan komentar

Jika Anda tidak membutuhkan komentar atau Anda telah memutuskan untuk mengakhiri spam dengan cara yang paling radikal, Anda dapat menonaktifkan opsi bagi pembaca Anda untuk berkomentar. Formulir komentar akan hilang.

Ini adalah daftar tindakan yang akan dicoba dilakukan Perfmatters saat opsi Nonaktifkan komentar diaktifkan:

  • Nonaktifkan widget komentar terbaru bawaan.
  • Lepaskan header X-Pingback.
  • Hapus tautan umpan komentar.
  • Nonaktifkan permintaan umpan komentar.
  • Menghapus tautan komentar dari bilah administrasi.
  • Hapus dukungan untuk komentar dari semua jenis postingan.
  • Tutup filter komentar.
  • Hapus tautan komentar dari menu administrasi.
  • Nonaktifkan halaman pembicaraan bawaan.
  • Sembunyikan komentar panel kontrol.
  • Sembunyikan opsi pengaturan komentar pada halaman profil.
  • Kembalikan templat komentar kosong apabila diminta.
  • Hapus skrip untuk membalas komentar.

Ingatlah bahwa jika Anda memilih opsi yang lebih lunak, Anda dapat menutup komentar hanya pada postingan tertentu dari pengeditan masing-masing postingan dengan menghapus centang pada kotak ini.

Perfmatters, panduan konfigurasi

Atau dari Pengaturan/komentar, Anda dapat mengaturnya untuk menutup setelah sejumlah hari tertentu.

Perfmatters, panduan konfigurasi

Perfmatters, panduan konfigurasi

Hapus URL dari komentar

Secara default, komentar WordPress menyertakan bidang situs web yang membuat tautan nofollow (meskipun spammer tidak keberatan dengan hal ini) dalam nama penulis komentar.

Jika Anda tidak ingin berurusan dengan tautan yang rusak seiring berjalannya waktu, memiliki terlalu sedikit komentar atau hanya ingin memberantas spam, Anda dapat menghapus semua URL yang ditambahkan oleh pengunjung dalam komentar sekaligus.

Mengaktifkannya juga akan menghapus bidang URL dari formulir untuk komentar di masa mendatang.

Perfmatters, panduan konfigurasi

Tambahkan favicon kosong

Jika Anda sudah memiliki favicon di situs Anda, Anda sebaiknya membiarkan opsi ini dinonaktifkan.

Menambahkan favicon putih berguna jika Anda membuat dan menguji banyak instalasi WordPress baru. Menambahkan favicon kosong akan menyelamatkan Anda dari keharusan mengunggah favicon untuk setiap situs. Selain itu, jika Anda melupakannya, ini dapat menghasilkan kesalahan 404 dalam alat pengujian kecepatan.

Perfmatters, panduan konfigurasi

Hapus gaya global

Dimulai dengan WordPress 5.9, kode inline tambahan ditambahkan untuk meningkatkan gaya duoton (CSS dan kode SVG). Sebagian besar pengguna mungkin tidak akan menggunakan fitur ini, dan masalahnya adalah bahwa fitur ini menambahkan 311 baris kode (yang belum dihilangkan) ke setiap halaman situs Anda yang tersebar seperti ini:

196 baris CSS sebelum tag body dan 115 baris kode SVG juga ditambahkan sebelum tag /body.

Banyak kode yang menggunakan tag !important;, yang juga tidak ideal. Perfmatters percaya bahwa ini mungkin bug, jadi mereka menambahkan opsi ini sebagai cara mudah untuk menghapus semua kode yang tidak perlu ini saat sedang diselesaikan.

Hearbeat, revisiones y autoguardado

Perfmatters, panduan konfigurasi

WordPress Heartbeat API menggunakan / wp-admin/admin-ajax.php untuk mengeksekusi panggilan AJAX dari browser web.

Hal ini sangat bagus karena menyimpan draf Anda dan mencegah shutdown yang tidak terduga menyebabkan Anda kehilangan draf tersebut, tetapi juga dapat menyebabkan penggunaan CPU yang tinggi dan jumlah panggilan PHP yang sangat banyak. Misalnya, jika Anda membiarkan panel kontrol Anda terbuka, panel kontrol akan terus mengirimkan permintaan POST ke file ini pada interval reguler, setiap 15 detik. Anda bisa meningkatkan frekuensi hingga 60 detik untuk mengurangi hal ini.

Pada opsi pertama, Anda bisa memilih kapan dan di mana diaktifkan.

Opsi ketiga memungkinkan Anda membatasi jumlah revisi entri Anda untuk menghemat ruang, misalnya, jika Anda menetapkannya ke 10, hanya 10 yang terakhir yang akan disimpan dan yang sebelumnya akan dihapus.

Terakhir, Anda bisa menetapkan interval penyimpanan otomatis untuk draf. Secara default, WordPress menyimpan secara otomatis setiap 60 detik. Namun demikian, dengan meningkatkan interval, Anda harus lebih sering menyimpan secara manual, hal ini mencegah browser “menggantung” begitu banyak saat Anda berada di area administrasi dan juga menghemat lebih sedikit penulisan ke database.

Woocommerce

Perfmatters, panduan konfigurasi

Tentang opsi pengoptimalan untuk WooCommerce, saya hanya akan mengatakan bahwa opsi tersebut ada, tetapi saya akan menghindari komentar apa pun karena sudah menjadi kebiasaan di rumah ini untuk tidak mengulas apa pun yang tidak terlalu jelas bagi saya, seperti halnya kasus ini. Saya mencopot pemasangan WooCommerce di Juli 2021 dan saya hampir tidak ingat apa pun tentang respons terhadap optimasi ini, jadi saya merujuk Anda ke dokumentasinya:

URL Login

Perfmatters, panduan konfigurasi

Fitur menarik lainnya adalah kemampuan untuk mengubah URL login default ke area admin yang ditetapkan WordPress di yourdomain/wp-admin. Hal ini persis sama seperti pugin seperti WPS Hide Login.

Anda akan menemukan tiga bidang:

Yang pertama Anda dapat mengubah url akses wp-admin menjadi apa pun yang Anda inginkan, seperti “yourdomain.com/potato”, sehingga terhindar dari serangan brute force dan lainnya, yang biasanya menargetkan url default. Tuliskan saja dan / atau cobalah untuk tidak membuatnya menjadi url aneh dengan terlalu banyak karakter sehingga Anda tidak melupakannya (meskipun Anda selalu dapat mengambilnya dengan membuka tabel wp_options / perfmatters_options).

Perfmatters, panduan konfigurasi

Bidang kedua (Disabled Behavior) menetapkan url mana yang akan dikirim pengunjung yang mendarat di domain/wp-admin Anda dengan tiga kemungkinan:

  • Pesan (default): Menampilkan pesan kepada pengunjung. Anda dapat menyesuaikan pesan dengan teks apa pun yang Anda inginkan dengan menambahkannya di bidang Message (Pesan).
  • Templat 404: Pengguna akan dikirim ke halaman 404.
  • Mulai URL: Pengguna diarahkan ke halaman beranda.

Assets

Di sinilah hal ini menjadi sangat menarik.

Perfmatters, panduan konfigurasi

Script Manager, lapisan gula pada kue

Perfmatters Script Manager tidak diragukan lagi merupakan alat mereka yang paling kuat dan berguna. Hanya ini bernilai setiap sen dari sedikit yang Anda bayarkan untuk plugin dan dukungannya.

Ini memungkinkan Anda untuk menonaktifkan skrip dan CSS yang digunakan oleh setiap plugin dan mencegahnya dimuat pada posting atau halaman, di kedua tempat atau seluruh situs, memfilter berdasarkan pengguna yang masuk atau keluar, berdasarkan perangkat dan menambahkan pengecualian, termasuk untuk kategori dan tag.

Perfmatters, guía de configuración y uso. Script manager

Hal ini dapat secara drastis meningkatkan kecepatan pemuatan (terutama homepage) dengan menghilangkan permintaan yang tidak perlu di mana plugin tidak digunakan, seperti formulir atau apa pun.

Perfmatters, panduan konfigurasi

Mandatory Usage Mode (MU) membawa Script Manager lebih jauh lagi. Ini memberikan lebih banyak kontrol dan menyediakan kemampuan untuk menonaktifkan kueri dan kait plugin WordPress, serta CSS dan JS sebaris. Sekarang Anda dapat mengontrol semua aspek plugin, mulai dari skrip front-end, kode inline, dan kueri MySQL di mana pun Anda inginkan.

Dalam tampilan globalnya, Anda akan menemukan semua konfigurasi yang diterapkan jika Anda perlu mengatur ulang, memodifikasinya, menambahkan yang baru atau menghapus beberapa di antaranya.

Perfmatters, panduan konfigurasi

Ini memiliki dokumentasi cukup lengkap. Jika Anda tidak terbiasa dengan jenis alat ini, ini bisa mengintimidasi pada awalnya, tetapi setelah Anda terbiasa, Anda akan menemukan bahwa alat ini sangat mudah digunakan.

JavaScript

Perfmatters, panduan konfigurasi

Menunda dan menunda Javascript.

Keduanya dapat berkontribusi untuk meningkatkan FCP dan LCP

Menambahkan atribut penangguhan ke setiap file JavaScript yang tidak penting mempercepat pengecatan konten pertama (FCP) halaman. Ini berarti bahwa JavaScript diunduh selama penguraian HTML dan dieksekusi setelah halaman selesai dimuat (ketika penguraian selesai). Dengan kata lain, unduhan javascript didorong ke bagian bawah halaman sehingga dilakukan di akhir proses.

Penundaan meningkatkan hasil LCP dan TBT. JavaScript ditunda sesuai dengan interaksi pengguna, mempercepat pengecatan pertama halaman secara signifikan ketika ada sesuatu yang tidak diperlukan dengan segera, seperti skrip pihak ketiga yang berat seperti Google Adsense, Google Analytics, piksel konversi Facebook atau Google Ads dan sejenisnya.

Untuk kedua opsi tersebut, Anda dapat menambahkan pengecualian dan mengaktifkan perilaku Delay Timeout, ini menetapkan batas waktu yang secara otomatis akan memuat skrip setelah 10 detik jika tidak ada interaksi pengguna yang terdeteksi. Ini opsional dan dinonaktifkan secara default.

Perfmatters, panduan konfigurasi

Delay Timeout

Jika Anda mengaktifkan opsi ini, Anda memiliki kemungkinan untuk menetapkan batas waktu ke nilai yang berbeda dengan menggunakan salah satu opsi berikut ini filter ini.

Yang ada dalam contoh ditetapkan pada 7 detik.

add_filter('perfmatters_delay_js_timeout', function($timeout) {
    return '7';
});

Mereka menyarankan untuk tidak menetapkan nilai timeout terlalu pendek, jika tidak, fungsi penundaan JS tidak akan berfungsi dengan baik. Selain itu, terlepas dari nilai timeout, 99% dari waktu semuanya akan dipicu oleh interaksi pengguna pertama apakah itu menggulir, mengklik atau gerakan mouse pertama.

CSS

Perfmatters, panduan konfigurasi

Perfmatters menyatakan bahwa cara termudah untuk mengatasi peringatan “Reduce unused CSS” adalah dengan mengaktifkan fitur ini, yang Saya mengulasnya ketika masih dalam versi beta, yang melakukan semuanya secara otomatis. Pengembangnya mengklaim telah mengujinya pada ratusan URL (menggunakan templat dan konfigurasi yang berbeda) dan ini adalah beberapa hasil yang mereka klaim telah diperoleh:

  • Rata-rata penurunan PCF sebesar 15,20%.
  • Rata-rata penurunan LCP sebesar 19,66%.
  • Penurunan rata-rata TTI sebesar 14,95%.

Sebelum mengaktifkan fitur “Hapus CSS yang tidak terpakai” di Perfmatters, mereka merekomendasikan untuk menghapus preload CSS yang ada yang telah dikonfigurasi di Perfmatters (tidak termasuk stylesheet lokal Google Fonts). Jangan gabungkan CSS (hal yang sering dilakukan dengan WP Rocket, Litespeed, Autoptimize, dan lainnya). Penggabungan CSS adalah teknik pengoptimalan yang usang sejak HTTP/2. Dalam beberapa kasus, menggabungkan CSS dapat merusak kinerja (dalam kasus saya tidak) dan terakhir pastikan Anda tidak mencoba menghapus CSS yang tidak digunakan dengan plugin lain.

Ada tiga metode eliminasi:

  • Penundaan (secara default): Semua stylesheet CSS asli (CSS yang tidak digunakan) ditunda dan dimuat pada interaksi pengguna. Ini adalah opsi yang direkomendasikan.
  • Asinkron: Semua stylesheet CSS asli (CSS yang tidak digunakan) dimuat melalui async. Metode ini dapat membantu menghindari pop-in, karena stylesheet dieksekusi secara asinkron saat halaman dimuat. Metode ini akan menghasilkan LCP/FCP yang sedikit lebih tinggi daripada perilaku penundaan.
  • Hapus: Semua stylesheet CSS asli (CSS yang tidak digunakan) dihapus. Ini adalah metode yang paling agresif, tetapi juga mungkin akan memerlukan pengecualian untuk ditambahkan. Dianjurkan hanya untuk pengguna tingkat lanjut.

Tidak ada rahasia di sini selain bereksperimen dalam lingkungan pengujian dan mengukur hasilnya, baik dalam isolasi maupun dalam interaksi dengan fungsi lainnya.

Perfmatters, panduan konfigurasi

Beberapa fungsi ini dapat dinonaktifkan pada postingan atau halaman apa pun dalam pengeditan WP.

Code

Perfmatters, panduan konfigurasi

Klasik yang berguna yang disertakan oleh banyak plugin lain, sesuatu yang bahkan dapat dilakukan dengan tangan, tetapi itu menyederhanakan dan memfasilitasi pengoperasian penambahan kode khusus ke header, body atau footer blog Anda.

Bidang berikut ini mencetak kode langsung ke front-end, jadi harus HTML yang valid. Ini termasuk CSS sebaris di dalam tag gaya atau JS sebaris di dalam tag skrip. Anda juga bisa mengunggah file JS atau CSS.

Ini tidak mendukung bahasa sisi server, seperti PHP. Untuk menambahkan kode PHP kustom, dianjurkan untuk menggunakan plugin Code Snippets.

Preloading

Perfmatters, panduan konfigurasi

Dalam Preloading, opsi pertama yang disebut “Instant Page” menggunakan toko buku dari instant.page dan memuat file JS kecil kurang dari 2 KB (instantpage.js) secara lokal di situs Anda dan digunakan untuk pramuat URL ketika pengguna melayang di atas tautan, atau gambar dalam versi desktop. Pada seluler, URL dimuat sebelumnya setelah pengguna mulai mengetuk tautan pada layar mereka dan sebelum mereka melepaskannya.

Setelah 65 milidetik, pramuat URL secara otomatis dimulai di latar belakang.

Alat ini setara dengan “Klik instan” dari Litespeed dan “Preload Links” jadi jika Anda menggunakan opsi ini di salah satu dari dua plugin ini, Anda harus menonaktifkannya untuk mencoba Perfmatters.

Dalam kasus saya, ini bekerja lebih baik daripada opsi yang setara di Litespeed, meskipun perlu dicatat bahwa dalam beberapa kasus, ini dapat meningkatkan beban server.

Seperti halnya opsi Javascript dan CSS, penggunaan preloading dan preconnection harus digunakan sesuai dengan kebutuhan Anda berdasarkan pengujian yang berbeda.

Perfmatters, panduan konfigurasi

La precarga de imágenes críticas (las que están por encima del pliegue), es una opción aún en fase Beta que puede ayudar a reducir los tiempos de la pintura de contenido más grande (LCP) en Core Web Vitals.

Ini biasanya berupa gambar seperti logo, gambar unggulan dalam postingan, gambar utama pada halaman arahan, dll. Ketika dimuat sebelumnya, mereka bergerak ke bagian atas air terjun dan pada dasarnya memberi tahu browser bahwa mereka memiliki prioritas dan harus dimuat segera.

Anda bisa memilih antara nol, untuk tidak memuat apa pun (opsi default), dan lima gambar. Permatters merekomendasikan pilih dua atau tiga paling banyak karena Chrome memiliki batas dua gambar yang dimuat sebelumnya yang akan muncul di bagian atas air terjun.

Lazy loading

Perfmatters, panduan konfigurasi

Hal klasik terkait performa lainnya yang sudah disertakan WordPress secara native sejak versi 5.4 yang dirilis pada tahun 2020.

Dalam kasus saya, saya menggunakan opsi Litespeed karena saya menemukan hasil yang sedikit lebih baik dalam pengujian, tetapi tetap saja, Perfmatters bekerja dengan sangat baik dan juga menerapkannya pada CSS gambar latar belakang.

Font

Perfmatters, panduan konfigurasi

Hal baik lainnya. Opsi ini, ditambahkan ke versi 1.7.4 dari Perfmatters, diluncurkan pada tanggal 7 Juni 2022. Ini memungkinkan hosting dan mengunggah Google Fonts secara lokal dengan beberapa klik.

Keuntungan hosting font secara lokal sangat banyak, Anda mendapatkan kontrol penuh atas font tersebut, Anda menghilangkan semua permintaan tersebut dan oleh karena itu waktu pemuatannya dan Anda juga dapat memutuskan bagaimana cara menyajikannya.

Fungsi ini secara otomatis menemukan referensi Google Fonts yang ada di blog Anda, mengunduh font yang sesuai dari fonts.google.com dan menghostingnya secara lokal di server Anda di direktori: /wp-content/cache/perfmatters/your-domain.com/fonts/

Dalam postingan lain ini dijelaskan secara lebih rinci.

CDN

Perfmatters, panduan konfigurasi

Tidak ada yang istimewa di sini dan tidak banyak yang bisa dikomentari. Sebuah alat, selalu berguna untuk menambahkan CDN yang Anda gunakan. Bagaimana saya menggunakan QUIC.CLOUD, Saya belum membutuhkannya.

Analytics

Perfmatters, panduan konfigurasi

Meskipun saya tidak menggunakannya sekarang karena saya memulai transisi ke Matomo dan saya menyerahkan pengelolaan skrip Analytics ke plugin saya Sistem manajemen persetujuan cookie untuk RGPD/CCPA, yang juga mengelolanya dengan benar, tapi saya tahu ini bekerja sangat baik dengan Perfmatters karena saya menggunakannya dulu.

Dari sini, Anda bisa meng-host skrip Google Analytics Anda secara lokal. Hal ini membantu mempercepat situs Anda dengan mengurangi pencarian DNS tambahan dan memecahkan masalah “memanfaatkan cache browser” dari skrip Anda.

Menurut Perfmatters, Ironisnya, skrip Google sendiri memberikan peringatan tentang caching, tetapi ini karena mereka memiliki kedaluwarsa header cache HTTP yang sangat singkat. Jika Anda menghostingnya sendiri, header cache HTTP dari CDN atau server Anda sendiri akan secara otomatis diterapkan. Dengan kata lain, Anda mendapatkan kontrol penuh atas caching skrip.

Mereka juga memperingatkan bahwa alat ini tidak didukung secara resmi oleh Google, tetapi telah digunakan selama bertahun-tahun tanpa masalah apa pun.

Hosting Google Analytics secara lokal dan menyajikan skrip dari CDN atau server Anda sendiri juga memungkinkan Anda memanfaatkan koneksi HTTP/2 tunggal.

Este post incluye algunos enlaces de afiliado.

Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad
Artículos relacionados