Performa dan Core Web Vitals

4 mnt membaca

TTSWP menambahkan audio ke halaman Anda tanpa mengorbankan performa. Player dimuat secara lazy, aset dioptimalkan, dan tidak ada yang berjalan saat halaman dimuat kecuali memang diperlukan. Begini cara kami menjaga Core Web Vitals tetap aman.

Dampak terhadap Core Web Vitals

LCP (Largest Contentful Paint)

Dampak: tidak ada

Audio player dimuat secara lazy. Player tidak merender atau memuat JavaScript sampai pengunjung menggulir mendekatinya. LCP, yang mengukur waktu render konten utama di atas lipatan, tidak terpengaruh.

Uji: jalankan audit Lighthouse sebelum dan sesudah. Skor LCP tetap dalam variasi normal.

CLS (Cumulative Layout Shift)

Dampak: nol

Placeholder player memiliki dimensi yang sama persis dengan player yang sudah dimuat penuh. Ketika lazy load memicu peralihan dari placeholder ke player penuh, tidak ada pergeseran tata letak yang terjadi.

INP (Interaction to Next Paint)

Dampak: sangat kecil

JavaScript player berjalan dalam satu file kecil (sekitar 15 KB setelah dikompresi). Click handler di-debounce dan berjalan pada requestIdleCallback jika didukung. Kontribusi INP tipikal: di bawah 5 ms per interaksi.

FID (First Input Delay, digantikan oleh INP pada 2024)

Dampak: nol

Tidak ada yang memblokir thread utama saat halaman pertama kali dimuat, karena player dimuat secara lazy.

Ukuran aset

Biaya muat per halaman saat player digunakan:

Aset Ukuran (dikompresi) Kapan dimuat
CSS player publik 3 KB Saat player terlihat
JS player publik 15 KB Saat player terlihat
Helper waveform (PRO) 4 KB Saat waveform diaktifkan
JS footer sticky (PRO) 2 KB Saat sticky diaktifkan
Ikon menu admin bar 0,5 KB Hanya untuk pengguna admin

Total dampak muat pertama pada pengunjung: 0 byte sampai mereka menggulir ke player.

Kompatibilitas plugin cache

TTSWP bekerja dengan semua plugin cache utama (WP Rocket, LiteSpeed, W3 Total Cache, WP Super Cache, Cache Enabler). Plugin secara otomatis mendaftarkan asetnya untuk perilaku caching yang tepat.

File audio (MP3) memiliki header cache tersendiri dan dimuat sesuai permintaan dari penyimpanan. File-file ini tidak membebani cache halaman.

Lihat Plugin Caching.

Pengiriman CDN

Pada paket berbayar, file audio disajikan dari Amazon CloudFront. Artinya:

  • Audio diputar dalam milidetik setelah mengklik Putar, bahkan untuk pengunjung yang jauh dari server Anda
  • Bandwidth server WordPress Anda tetap bebas untuk HTML

Pada paket Gratis, audio berasal dari server WordPress Anda. Untuk sebagian besar blog, ini sudah cukup. Situs dengan lalu lintas tinggi mungkin memperhatikan penggunaan bandwidth pada halaman yang banyak audionya.

Dampak pada database

TTSWP menambahkan sejumlah kecil tabel dan baris database:

  • Tabel cache audio (satu baris per file yang dihasilkan)
  • Tabel statistik (satu baris per event putar - data integer kecil)
  • Baris pengaturan (beberapa lusin opsi)

Ukuran database bertumbuh secara linier sesuai jumlah posting dengan audio. Untuk situs dengan 500 posting, total jejak database biasanya di bawah 200 KB.

Memori dan CPU

  • Overhead memori PHP per muat halaman admin: sekitar 2 MB
  • Overhead memori PHP per halaman publik dengan player: sangat kecil (hanya CSS + JS, tidak ada pemrosesan PHP pada jalur utama)
  • Proses latar belakang: tidak ada (tidak ada cron job yang berjalan pada setiap permintaan)

Menguji situs Anda

Gunakan alat-alat ini untuk memverifikasi bahwa TTSWP tidak menurunkan performa Anda:

Jalankan sekali dengan TTSWP aktif, sekali lagi dengan TTSWP dinonaktifkan sementara. Bandingkan hasilnya.

Jika Anda melihat penurunan performa

Beri tahu kami. Kami memperlakukan penurunan performa sebagai bug:

  1. Catat halaman mana yang lambat
  2. Jalankan PageSpeed Insights dan bagikan URL-nya
  3. Hubungi Dukungan PRO atau posting ke forum WordPress.org

Kami akan membantu Anda mendiagnosis dan memperbaikinya.