Speed Auditor: cari tahu apa yang menghambat WordPress Anda

Beberapa administrator situs WordPress terobsesi dengan PageSpeed Insights atau GTmetrix. Saran saya, dan saran dari banyak orang lain yang tahu lebih banyak tentang hal ini, adalah Anda tidak boleh memberikan metrik-metrik tersebut lebih penting daripada yang seharusnya.

Jika kecepatan pemuatan yang dirasakan sudah bagus, tidak perlu menempatkan semuanya dalam warna hijau. Dalam banyak kasus, hal ini bahkan kontraproduktif karena Anda bisa terjebak dalam pengoptimalan yang berlebihan, atau lebih buruk lagi, Anda bisa saja merusak banyak hal dengan mencoba memperbaiki satu hal.

Namun, apakah Anda seorang penggemar WPO, penggemar pengoptimalan, atau hanya ingin mencoba meningkatkan daya tanggap situs Anda, perkakas ini hampir sangat penting. Masalahnya adalah mereka menawarkan "gambar diam" yang diambil dari server eksternal. Tetapi apa yang terjadi ketika Anda, sebagai administrator, menjelajahi situs Anda, bagaimana dengan iklan yang terlambat dimuat atau menu yang melompat ketika Anda akan mengklik?

Asal

Speed Auditor lahir sebagai respons terhadap kebutuhan pribadi untuk memiliki beberapa alat diagnostik lokal yang sederhana namun kuat. Ini bukan plugin pengoptimalan (tidak mengubah apa pun dalam kode Anda), ini adalah plugin pengauditan real-time.

Jika Anda mencari plugin berbayar yang bagus, mungkin yang terbaik, untuk WPO, yang dapat digunakan untuk melakukan perubahan dan penyempurnaan, lihatlah Perfmatters. Sebaliknya, jika Anda mencari sesuatu yang gratis dan sederhana, tanpa membuat Anda pusing dengan pengaturan dan penyesuaian, tetapi dengan banyak kemungkinan, Anda bisa mencoba WPO Rocket Tweaks oleh Fernando Tellado, yang tersedia di repositori WordPress.

Jika Anda tidak tahu apa itu simpul DOM atau metrik latensi, jangan khawatir. Speed Auditor dirancang untuk membantu Anda memahami situs web Anda dengan cepat:

• Indikator pintar: Ikon yang berubah warna akan muncul di bilah admin Anda. Jika berwarna Hijau, LCP Anda (waktu yang diperlukan untuk melihat hal-hal yang paling penting) sudah optimal. Jika berubah menjadi Oranye atau Merah, ada sesuatu yang perlu Anda perhatikan.

• Mengaudit saat Anda menjelajah: Anda tidak perlu mengonfigurasi apa pun yang rumit. Anda mengaktifkan plugin dan, sementara Anda memeriksa postingan Anda, plugin ini bekerja di latar belakang menganalisis apakah gambar Anda terlalu berat atau jika server Anda merespons dengan lambat.
• Lebih banyak laporan manusia: Dengan satu klik, unduh file .txt yang bisa Anda kirimkan ke pengembang atau simpan untuk membandingkan hasil setelah menerapkan perubahan.

Di bawah kap mesin

Versi 1.1.8 mencoba menyediakan beberapa kedalaman diagnostik untuk menghemat waktu mengutak-atik konsol browser.

• Identifikasi LCP yang tepat: Plugin ini mendeteksi dengan tepat elemen mana (gambar atau blok teks) yang memicu Largest Contentful Paint.
• Analisis kedalaman DOM: Sangat penting untuk menghindari "ukuran DOM yang berlebihan". Speed Auditor merinci jumlah node berdasarkan zona (Header, Konten, Footer) dan memperingatkan Anda jika penumpukan melebihi 15-20 level.
• Monitor Latensi Media: Mengukur waktu transfer aktual (Resource Timing API) gambar. Jika sebuah gambar memerlukan waktu 500 ms untuk diunduh, plugin menandainya sebagai hal yang kritis.
• Tidak berdampak pada server: Semua pemrosesan terjadi di sisi klien (browser). Tidak ada kueri basis data yang berat atau proses PHP yang memperlambat situs.

Lompatan besar. Segera hadir: Speed Auditor 1.1.9 (dengan "Radar CLS")

Hingga saat ini, Cumulative Layout Shift (CLS ) adalah angka abstrak dalam laporan. Anda tahu ada sesuatu yang bergerak, tetapi Anda tidak selalu tahu apa itu. Segera, dalam versi 1.1.9, hal ini akan berubah.

Tombol radar atau tombol "Highlighter" Visual CLS harus diperkenalkan.

Bayangkan mengaktifkan mode "radar" yang menggambar kotak merah di atas elemen apa pun yang bergerak saat Anda menggulir. Hal ini, yang sudah dilakukan oleh beberapa ekstensi, dengan sedikit banyak berhasil, selalu merupakan bantuan visual yang sangat berguna untuk mencoba menangkap "limpahan" yang terkadang luput dari pandangan.

• Apakah itu banner AdSense yang mendorong konten Anda? Anda akan melihatnya dengan kotak merah. Anda bisa mempelajari lebih dalam tentang masalah ini di sini.
• Apakah ini gambar tanpa dimensi yang jelas? Radar akan menangkapnya.
• Ketekunan total: Anda akan dapat menjelajahi seluruh situs web Anda dengan radar aktif; plugin ini akan mengingat bahwa Anda ingin terus mengaudit setiap sudut secara visual.

Pembaruan ini juga akan menyertakan glosarium teknis singkat, yang akan diperluas untuk menyertakan tips dan tutorial, yang akan diintegrasikan ke dalam dasbor WordPress Anda, sehingga istilah-istilah seperti ins, iframe, atau figure tidak lagi menjadi misteri.

Idenya adalah untuk meningkatkan respons analisis dan laporan yang dihasilkan saat saya mengujinya dalam skenario yang berbeda dan jika saya menerima saran untuk perbaikan atau peringatan kesalahan.

Versi 1.1.8 sekarang tersedia untuk merapikan metrik Anda, dan segera, 1.1.9 akan membuatnya lebih mudah lagi untuk memperbaiki stabilitas visual WordPress. Jika Anda menginstalnya sekarang, Anda akan segera menerima pembaruan.

Bagaimana cara kerjanya?

Kode mengikuti tiga langkah berikut ini:

1. Pengamat Kinerja

Browser (Chrome, Edge, Opera) memiliki API asli yang disebut Performance API. Plugin ini mendaftarkan "pengamat" yang disebut PerformanceObserver yang secara khusus dikonfigurasi untuk jenis input pergeseran tata letak.

Setiap kali ada sesuatu yang bergerak di layar setelah dilukis pada awalnya, browser akan menghasilkan sebuah peristiwa. Plugin ini menjebak peristiwa tersebut dan mengekstrak dua bagian data utama:

• Nilai offset: (Angka itu sebagai 0,0145).
• Elemen pelakunya: Browser memberi tahu plugin dengan tepat simpul HTML mana yang dipindahkan.

2. Filter "Interaksi Terbaru"

Di sinilah plugin mencoba menjadi pintar. Tidak semua gerakan itu "buruk". Jika Anda mengklik menu drop-down dan konten bergulir ke bawah, itu adalah langkah yang diharapkan oleh pengguna.

Plugin ini memeriksa sebuah properti yang disebut hadRecentInput. Jika Anda telah menyentuh tombol atau mengklik dalam 500 ms terakhir, browser menandai gerakan tersebut sebagai "diharapkan" dan plugin mengabaikannya untuk menghindari kesalahan positif. Plugin ini hanya mendeteksi gerakan yang terjadi secara tidak terduga (seperti iklan yang muncul secara tiba-tiba).

3. Rendering visual (Kotak merah)

Setelah plugin memiliki elemen yang telah dipindahkan, bagian visual mulai berperan:

1. Perhitungan koordinat: Menggunakan fungsi yang disebut getBoundingClientRect () untuk mengetahui di mana elemen tersebut berada di layar pada saat yang tepat (piksel atas, piksel kiri).
2. Injeksi bingkai: Buat div dengan posisi absolut, batas merah 2 piksel, dan indeks-z yang sangat tinggi untuk menggambar di atas segalanya.
3. Label: Tambahkan kotak kecil di kiri atas kotak merah dengan nama label (ins, img, div) dan nilai CLS yang terakumulasi.

Mengapa ini lebih baik daripada laporan eksternal?

Alat seperti PageSpeed terkadang gagal mendeteksi CLS karena mereka tidak menggulir ke bawah atau tidak menunggu iklan tertentu dimuat.

Plugin ini, dengan menggunakan persistensi, mengukur CLS yang terakumulasi selama sesi penelusuran pengguna yang sebenarnya. Jika sebuah elemen bergerak sedikit di awal dan sedikit saat menggulir, plugin menambahkannya dan menyorotnya, memberi Anda angka yang paling mendekati angka sebenarnya yang akan dilihat Google dalam laporan"Pengalaman Pengguna Chrome" (CrUX).