3 Hal dan Cara terbaru memperbaiki Core Web vital di WordPress

Core web vitals akan menjadi faktor peringkat website.

Tetapi banyak pengguna WordPress mengalami kesulitan untuk memperbaiki masalah Lighhouse karena mereka tidak tahu bagaimana semua bekerja dibalik layar untuk CMS WordPress.

Apakah ada plugin untuk itu?

Bagaimana cara memperbaikinya tanpa plugin?

Tunjukkan saja kodenya dan dimana harus meletakkannya.

Di grup Facebook yang saya kenal dapat menemukan jawabannya. Panduan ini mencakup sebagian besar item Pagespeed Insight. Untuk mengukur core web vitals di Search Console Google, lalu lihat laporan mobile karena Google menggunakan pengindeksan yang mengutamakan mobile device.

Laporan Google Search Console anda menunjukkan 3 data core web vitals:

Info Penting

Core web vitals banyak terlibat untuk kecepatan situs namun faktor utama kecepatan situs web adalah sama; gunakan tema/plugin yang ringan di server yang cepat dan CDN (maka Anda sudah menuju 90% cepat untuk perbaikan kecepatan website)

Core Web Vitals Lainnya

Core web vitals merupakan metrik penting untuk memahami dan memberikan pengalaman pengguna yang luar biasa, ada juga metrik penting lainnya.

Data Core web vital yang sering sebagai metrik tambahan yang mana untuk membantu mendiagnisis sebagian besar pengalaman dan masalah tertentu.

Ada beberapa metrik yaitu

1. TTFB (Time to First Byte) dan FCP (First Contentful Paint) keduanya adalah aspek penting dari load serta keduanya berguna dalam mendiagnosis masalah LCP (masing-masing waktu server lambat atau sumber daya pemblokiran render).
2. TBT (Total Blocking Time) dan TTI (Time to Interactive) adalah metrik lab yang penting dalam menangkap dan mendiagnosis potensi masalah interaksi yang berdampak kepada FID. Namun keduanya bukan bagian dari kumpulan Core Web Vitals karena tida dapat diukur di lap jadi tidak mencerminkan hasil cerminan pada pengguna website lainnya.

Largest Contentful Paint (LCP)

LCP merupakan element terbesar di viewport, saat awal kali di load.

Element terbesar biasa nya berupa gambar, background image , atau tag h1. Namun bisa jadi berupa salah satu dari berikut ini :

• Gambar
• Background image
• Video atau Animasi
• Block-level element

Element terbesar di viewport halaman website dapat dilihat PageSpeed Insights report. Dalam kasus dibawah ini adalah salah satu contoh element LCP yang terdeteksi Background image disitus anda.

Bagaimana cara optimisasi LCP

• Preload LCP pada gambar
• Kompresi gambar LCP (mencapai 85%)
• Gunakan server CDN untuk akses LCP gambar
• Mengurangi LCP ukuran gambar dengan menggunakan format WebP atau SVG
• Kecualikan LCP gambar (dan gambar yang muncul di viewport) untuk di lazyload
• Gunakan asset pembongkarang dengan plugin untuk menghapus unused JavaScript dan CSS
• Menghapus render-blocking resources dengan plugin Autoptimize + Async JavaScript
• Menggurangi TTFB (ganti shared hosting dan coba untuk kecepatan dengan cloud hosting provider)
• Menghindari loading heavy third-party JavaScript (contoh advertisements) diatas konten
• Menunda JavaScript menggunakan Flying Scripts atau “menunda JavaScript execution” di plugin WP Rocket
• Optimasi font (preload, host locally, reduce weights/icons, gunakan font-display: swap)
• Preconnect CDNs dan third-party fonts jika kamu menggunakannya (i.e. //fonts.gstatic.com)
• Minify CSS dan gunakan critical CSS (memastikan optimasi CSS delivery works di plugin cache)

Cumulative Layout Shift (CLS)

CLS berarti element situs anda sedang bergeser.

Anda dapat menemukan CLS di Google’s Layout Shift Debugger.

CLS juga akan muncul di PageSpeed Insights Diagnostics report dibagian tab “avoid large layout shifts”. Disitu anda bisa melihat element mana yang memiliki konstribusi CLS terbesar.

Bagaimana Cara Optimisasi CLS

• Menentukan dimensi untuk gambar, video, dan iframes
• Menentukan ads dimensions umum yang ada di div containers
• Menghindari mencoba menunjukkan advertisements di bagian viewport
• Perbaiki FOIT dengan menambahkan “font-display: swap” pada font CSS yang kamu gunakan
• Host fonts secara locall di server anda dan uji coba preloading nya
• hindari format font TTF (jauh lebih lambat dari pada format font WOFF)
• Gunakan transformasi CSS pada animasi alih-alih pada attribut width/height
• Pastikan pengiriman optimiasi CSS bekerja (bisa dicoba dengan plugin WP Rocket) untuk menghindari FOUC
• Tunda JavaScript untuk mencegah konten baru kecuali dipicu oleh interaksi pengguna
• Saat memindahkan elemen, gunakan transform: translate() sebagai gantinya top, bottom, left, right

First Input Delay (FID)

FID merupakan waktu dimana saat pengguna website berinteraksi dengan halaman (yaitu saat mengklik tautan atau tombol) hingga halaman tersebut benar-benar merenspons. Ini tidak termasuk saat website itu tergulir atau zoom. FID dapat terdeteksi dengan pengguna yang nyata karena tidak bisa diukur lewat lab, jadi Google menyarankan untuk menggunakan total blocking time (TBT).

Input Delay secara umum task utama browser sedang delay karena banyak task yang perlu load. Task utama yang lama dapat disebabkan oleh situs website (periksa laporan tugas utas utama yang panjang) atau disebabkan oleh situs web pihak ketiga (periksa dampak pengurangan laporan kode pihak ketiga).

Bagaimana Cara Optimizing FID And TBT

• Menunda (Defer), delay, mengecilkan (minify) script JavaScript
• Gunakan GZIP atau Brotli (sebaiknya Brotli yang lebih cepat)
• Uji apakah menggabungkan CSS/JS memiliki dampak positif
• Perbaiki error 4xx dan 5xx di GTmetrix waterfall chart
• Hapus script yang tidak digunakan (unused) JavaScript dengan plugin cache
• Hapus builder berat yang menambahkan banyak CSS/JS ekstra
• Coba gunakan plugin gratis jQuery dan hindari plugin yang memuat lambat
• Periksa masalah dengan “optimalkan pengiriman CSS (optimize CSS delivery)” di plugin cache
• Kurangi dampak kode pihak ketiga (font, analytics, GTM, iklan, video)
• Pertimbangkan untuk membagi file CSS/JS besar menjadi beberapa file yang lebih kecil (pemecahan kode)
• Optimalkan gambar dan animasi terutama jika menyebabkan tugas thread utama yang panjang
• Jika menggunakan heavy page builder, pertimbangkan header, menu, sidebar, dan footer pada kesulitan coding nya

Ringkasan

Kecepatan WordPress tidak semudah mengkonfigurasi plugin cache saja.

Situs perlu dibuat ramping dari bawah keatas, dari Hosting hingga pembuatan halaman, plugin, font, CDN, dan bahkan cara Anda mendesain halaman, semuanya berdampak pada Core web vitals.

Sama seperti SEO, Core web vitals sudah memulai mencakup lebih banyak hal. Dan bebas kita untuk tetap berapa diatasnya. Itu sebabnya jika saya melewatkan solusi umum, saya akan menghargai Anda untuk meninggalkan komentar sehingga dapat membantu orang lain.

Cek Portfolio saya di sini.