Panduan Cara Mengoptimalkan Optimize Core Web Vitals untuk Wordpress

[webdevid]

Apakah kamu ingin mengoptimalkan web vitals inti untuk WordPress?

Core Web Vitals adalah inisiatif Google yang membantu pemilik situs web meningkatkan pengalaman pengguna dan kualitas situs web mereka. Sinyal ini sangat penting untuk keberhasilan situs web mana pun.

Dalam panduan ini, kami akan menunjukkan kepada kamu cara mengoptimalkan Google Core Web Vitals dengan mudah untuk WordPress tanpa keahlian teknis khusus apa pun.

Apa itu Google Core Web Vitals?

Google Core Web Vitals adalah sekumpulan metrik performa situs yang dianggap penting oleh Google dalam pengalaman pengguna situs secara keseluruhan. Skor vital web ini akan menjadi bagian dari skor keseluruhan pengalaman halaman Google yang akan memengaruhi peringkat SEO kamu.

Yang benar adalah tidak ada yang menyukai situs web yang memuat lambat termasuk Google.

Meskipun situs web kamu memuat dengan cepat, mungkin tidak berfungsi sepenuhnya bagi pengguna untuk melakukan apa yang ingin mereka lakukan atau mengakses informasi yang mereka butuhkan.

Inilah yang Web Vitals membantu kamu mengukur. Seberapa cepat situs web kamu dimuat, terlihat, dan siap untuk pengguna?

Untuk melakukan itu, Google menggunakan tiga uji kualitas (Web Vitals).

• Largest Contentful Paint (LCP)
  
• First Input Delay (FID)
  
• Cumulative Layout Shift (CLS)
  

Sekarang nama-nama tes ini mungkin terdengar terlalu teknis tetapi apa yang dilakukannya cukup mudah dipahami.

Mari kita lihat cara kerja setiap tes Web Vitals, apa yang diukurnya, dan bagaimana Anda dapat meningkatkan skor Anda ..

Largest Contentful Paint (LCP)

Largest Contentful Paint atau LCP, mencari seberapa cepat konten utama (apakah itu gambar, artikel, atau deskripsi) menjadi terlihat oleh pengguna.

Misalnya, situs web Anda mungkin memuat dengan cepat, tetapi konten terbesar mungkin tidak muncul di layar secepat halaman lainnya.

Alat uji kecepatan lainnya akan memberi Anda skor tinggi, tetapi dari sudut pandang pengguna, laman tersebut masih lambat.

Inilah mengapa Google mengukur LCP sebagai bagian dari skor vital web mereka, sehingga pemilik situs web dapat memiliki pemahaman yang lebih jelas.

First Input Delay (FID)

First Input Delay (FID) mengukur waktu yang dibutuhkan browser pengguna untuk benar-benar dapat mulai memproses penangan peristiwa sebagai respons terhadap interaksi pengguna.

Dalam bahasa Inggris sederhana, misalkan pengguna ada di laman formulir kontak Anda. Mereka mengisi formulir dan mengklik tombol Kirim. FID, akan mengukur seberapa cepat situs Anda memproses interaksi tersebut.

Contoh yang lebih sederhana lagi adalah saat pengguna mengklik link hingga browser mereka mulai memproses urutan peristiwa berikutnya.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) mengukur waktu yang dibutuhkan situs web menjadi stabil secara visual.

Saat situs web dimuat, beberapa elemen membutuhkan lebih banyak waktu untuk dimuat daripada yang lain. Selama itu, konten situs web Anda mungkin terus bergerak di layar.

Misalnya, jika pengguna membaca paragraf di perangkat seluler dan video tersemat dimuat di atasnya, ini membuat seluruh konten berpindah ke bawah. Ini bisa sangat menjengkelkan jika pengguna mencoba melakukan tindakan seperti menambahkan produk ke keranjang yang tombolnya bergeser ke bawah karena item lain bergerak di halaman.

Cara Menguji Skor Google Core Web Vitals Anda

Cara termudah untuk menguji Skor Google Core Web Vitals Anda adalah dengan menggunakan alat Wawasan Kecepatan Laman. Cukup masukkan URL yang ingin Anda uji dan klik tombol Analisis








Untuk membuatnya lebih sederhana, Anda akan melihat pesan di bagian atas yang mengatakan '[…] data lapangan menunjukkan bahwa halaman ini lolos penilaian Core Web Vitals'.

Pada bagan di bawah ini, Anda dapat melihat skor sebenarnya dari ketiga vital inti. Berikut adalah skor yang Anda butuhkan untuk lulus tes Web Vitals inti untuk setiap item.

• Largest Contentful Paint (LCP) – 2.5 seconds
  
• First Input Delay (FID) – Less than 100 milliseconds
  
• Cumulative Layout Shift (CLS) – Less than 0.1
  

Bagaimana Cara Melihat Google Core Web Vitals untuk Situs Web Lengkap?

Sekarang alat Page Speed Insights memungkinkan Anda untuk memeriksa satu halaman. Jika halaman yang Anda periksa adalah root dari nama domain Anda, Anda juga dapat mengklik kotak centang 'Tampilkan Ringkasan Asal'.

Ini akan menunjukkan skor untuk semua halaman yang disajikan dari asal ini

Namun, untuk benar-benar menelusuri lebih dalam, Anda juga dapat mengakses laporan Core Web Vitals di dasbor Google Search Console.

Ini memungkinkan Anda untuk melihat berapa banyak URL di situs web Anda yang lulus tes, URL mana yang perlu ditingkatkan, dan halaman mana yang memiliki skor buruk.


Untuk mendapatkan laporan yang lebih detail untuk Web Vitals, Anda dapat menggunakan uji kecepatan mercusuar dengan membuka alat Ukur Web.dev, atau dengan menggunakan uji internal di dalam browser Google Chrome.

Cukup buka situs web di Chrome, klik kanan di mana saja di layar, lalu pilih opsi Inspeksi. Di tab, Anda akan melihat opsi yang disebut Lighthouse.




Setelah itu klik tombol Generate Report.

Catatan: Anda harus melakukan uji Chrome dalam mode Penyamaran untuk mendapatkan hasil yang paling akurat. Jika tidak, ekstensi browser Anda dapat berdampak negatif pada skor vital web inti yang ditunjukkannya kepada Anda.

Mengapa Core Web Vitals Penting?

Core Web Vitals penting karena mencerminkan performa situs Anda bagi pengguna. Ini difokuskan tidak hanya pada pemuatan situs web yang lebih cepat tetapi pada seberapa cepat pengguna benar-benar dapat menggunakannya.

Menurut penelitian terbaru, penundaan 1 detik dalam waktu muat halaman dapat menyebabkan hilangnya 7% konversi, 11% lebih sedikit tampilan halaman, dan penurunan kepuasan pelanggan sebesar 16%.




Itulah mengapa sangat penting untuk mengoptimalkan situs Anda untuk kecepatan dan performa. Namun, sebagian besar alat pengukur kinerja tidak benar-benar memperhitungkan kualitas pengalaman pengguna.

Situs web yang lebih cepat dengan pengalaman pengguna yang buruk masih membebani Anda dengan konversi, lebih sedikit tampilan halaman, dan kepuasan pelanggan yang buruk. Meningkatkan Web Vitals inti membantu Anda memperbaikinya

Pengalaman pengguna juga merupakan faktor penting dalam peringkat SEO. Google telah mengumumkan bahwa mulai Mei 2021 pembaruan algoritma pencarian akan memasukkan pengalaman halaman sebagai salah satu faktor peringkat.

Karena itu, mari kita lihat bagaimana Anda dapat dengan mudah meningkatkan data web inti Anda untuk menawarkan pengalaman pengguna yang lebih baik di situs web Anda.

Cara Meningkatkan Vital Web Inti Anda di WordPress (7 Tips)

Meningkatkan skor Web Vitals inti Anda di WordPress tidaklah sesulit itu. Dengan menggunakan beberapa kiat pengoptimalan kinerja yang penting, Anda dapat dengan mudah lulus skor Web Vitals

1. Optimalkan Hosting WordPress

Perusahaan hosting WordPress Anda memainkan peran paling signifikan dalam kinerja situs web Anda.

Mereka dapat mengoptimalkan server mereka untuk WordPress yang memberikan situs web Anda platform yang kokoh untuk dibangun.

Kami merekomendasikan menggunakan SiteGround untuk situs web berkinerja tinggi. Mereka adalah salah satu perusahaan hosting WordPress yang direkomendasikan secara resmi

Untuk memberi situs web Anda peningkatan kinerja yang dibutuhkannya, SiteGround menggunakan Google Cloud Platform untuk server mereka bersama dengan PHP ultra cepat.

Plugin SG Optimizer mereka digunakan oleh lebih dari satu juta situs web. Itu secara otomatis membuat peningkatan kinerja lebih lanjut dan mengaktifkan caching bawaan yang melakukan semua yang dilakukan WP Rocket dan banyak lagi.

Penting untuk diperhatikan, bahwa plugin SG Optimizer mereka hanya berfungsi di akun hosting SiteGround, dan pengoptimalan kinerja ini tersedia untuk semua paket termasuk opsi terendah.

Jika Anda menggunakan penyedia hosting WordPress lain, sebaiknya gunakan WP Rocket bersama dengan beberapa alat lain untuk mencapai skor web vitals inti yang lebih baik.

WP Rocket adalah plugin caching WordPress terbaik di pasaran. Ini memungkinkan Anda untuk dengan mudah mengatur caching di situs WordPress Anda tanpa masuk ke detail teknis manajemen server apa pun.

2. Meningkatkan Skor Largest Content Paintful (LCP)

Seperti yang disebutkan sebelumnya, Largest Content Paintful (LCP) secara harfiah adalah bagian konten terbesar dalam viewport halaman. Misalnya, pada postingan blog, ini bisa berupa gambar unggulan atau teks artikel.

Semakin cepat konten ini dimuat, semakin tinggi skor LCP Anda.

Bagaimana Anda tahu konten mana yang dianggap terbesar menurut pengujian? Nah, Anda perlu menggulir ke bawah ke hasil tes dan memperluas tab 'Elemen Cat Isi Terbesar'.





Anda akan melihat elemen yang dipertimbangkan untuk skor LCP. Jika itu adalah gambar yang lebih besar, maka Anda dapat mencoba menggantinya dengan gambar yang lebih kecil atau gambar dengan ukuran dan kualitas file yang lebih rendah. Lihat panduan kami tentang cara mengoptimalkan gambar untuk kinerja web.

Jika itu teks, maka Anda dapat mencoba memecahnya menjadi paragraf dan judul.

3. Meningkatkan Skor First Input Delay (FID)

Skor Penundaan Masukan pertama mengukur waktu antara pengguna mengklik sesuatu di situs Anda dan browser mereka memulai elemen pemrosesan.

Tip paling penting untuk diperbaiki adalah dengan menggunakan hosting web yang lebih baik atau bahkan platform hosting WordPress yang dikelola.

Cara lain yang mudah untuk meningkatkan skor FID adalah dengan menggunakan plugin caching seperti WP Rocket. Muncul dengan fitur built-in yang memungkinkan Anda untuk mengoptimalkan pengiriman file.

Pertama, Anda perlu menginstal dan mengaktifkan plugin WP Rocket. Untuk lebih jelasnya, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.

Setelah itu, masuk ke halaman Settings »WP Rocket dan beralih ke tab File Optimization.




Gulir ke bawah ke bagian bawah halaman dan centang kotak di samping opsi 'Muat JavaScript yang ditangguhkan'.




Jangan lupa untuk mengklik tombol Simpan Perubahan untuk menyimpan perubahan Anda.

Menunda JavaScript memungkinkan situs web Anda memuat tanpa menunggu JavaScript dimuat. Ini meningkatkan Skor First Input Delay (FID) untuk halaman di mana JavaScript mungkin menjadi penyebabnya.

4. Meningkatkan Skor Pergeseran Tata Letak Kumulatif (CLS)

Skor Kumulatif Tata Letak (CLS) terpengaruh saat elemen berbeda di halaman web dimuat dengan lambat dan membuat elemen lain di layar bergerak.

Anda dapat melihat elemen mana yang memengaruhi skor CLS dengan memperluas tab 'Hindari perubahan tata letak yang besar' di hasil Wawasan Kecepatan Halaman.






Ini akan menunjukkan kepada Anda elemen-elemen yang menyebabkan paling banyak dampak perubahan tata letak selama pemuatan halaman.

Untuk memastikan tata letak visual halaman Anda tidak bergeser saat item lain dimuat, Anda perlu memberi tahu browser tentang dimensi (lebar dan tinggi) elemen seperti gambar, video embed, Iklan seperti Google AdSense, dan banyak lagi.

WordPress secara otomatis menambahkan atribut tinggi dan lebar ke gambar yang Anda tambahkan. Namun, Anda tetap dapat memeriksa semua media lain khususnya sematan untuk memastikan semuanya memiliki atribut tinggi dan lebar.

Salah satu cara untuk melakukannya adalah dengan menggunakan Alat Inspeksi. Cukup klik kanan di browser Anda dan pilih Periksa untuk membuka konsol pengembang.

Anda kemudian dapat mengarahkan dan mengklik elemen halaman yang berbeda untuk menyorot kode sumbernya. Di sana, Anda dapat melihat apakah elemen memiliki atribut lebar dan tinggi yang ditentukan.

5. Hilangkan Render Blocking Elements

Elemen pemblokiran render adalah elemen yang memuat lebih lambat tetapi memblokir elemen lain agar tidak dimuat lebih dulu. Ini memengaruhi keseluruhan skor Web Vitals dan pengalaman pengguna di situs Anda.

Hasil Page Speed Insights akan menunjukkan kepada Anda elemen pemblokiran render. Ini biasanya file JavaScript atau CSS yang ditambahkan oleh plugin WordPress Anda, alat pihak ketiga seperti Google Analytics, Facebook Pixel, Google Ads, dan banyak lagi.




Namun, sebagian besar elemen seperti itu ditambahkan secara terprogram ke situs Anda dengan plugin atau tema yang berbeda. Hal ini mempersulit pengguna pemula untuk menghapus atau memuatnya dengan benar.

Kami memiliki panduan langkah demi langkah tentang cara mudah menghilangkan elemen pemblokiran render di WordPress tanpa mengotak-atik kode apa pun di situs web Anda.

6. Ukuran Gambar dengan Benar di WordPress

Penyebab umum lain dari skor Web Vitals inti yang lebih rendah adalah gambar yang sangat besar. Banyak pengguna WordPress mengunggah gambar beresolusi tinggi ke situs web mereka yang membutuhkan waktu lebih lama untuk memuat dan dalam banyak kasus tidak diperlukan.



Ini menjadi lebih bermasalah bagi pengguna di perangkat seluler. Tema WordPress responsif dan WordPress Anda secara otomatis akan menyesuaikan gambar dengan layar seluler pengguna tetapi mereka masih memuat file yang lebih besar.

Kami memiliki panduan terperinci tentang cara mengoptimalkan gambar dengan benar untuk situs WordPress Anda tanpa kehilangan kualitas atau memengaruhi kinerja.

7. Gunakan CDN ke Server untuk Meningkatkan Skor Web Vitals

CDN atau jaringan pengiriman konten adalah layanan pihak ketiga yang memungkinkan Anda menyajikan konten statis situs web Anda dari berbagai server di seluruh dunia.

Ini memungkinkan pengguna untuk mengunduh file statis seperti gambar dan CSS dari server yang terdekat dengannya. Ini juga mengurangi beban di situs web Anda yang kemudian dapat terus memuat elemen lain.

Anda dapat menggunakan aplikasi firewall cloud seperti Sucuri yang dilengkapi dengan layanan CDN bawaan. Sucuri juga membantu Anda memblokir permintaan jahat dan spam yang selanjutnya membebaskan sumber daya situs web Anda.

Anda juga dapat menggunakan CDN gratis Cloudflare sebagai alternatif. Muncul dengan perlindungan firewall dasar dan layanan CDN yang akan meningkatkan skor web vitals situs web Anda.

Kami harap panduan ini membantu Anda mempelajari cara mengoptimalkan web vitals inti untuk WordPress. Aspek penting lainnya dari pengalaman pengguna yang baik adalah keamanan. Kami menyarankan Anda mengikuti daftar periksa keamanan WordPress kami untuk memastikan bahwa kinerja situs web Anda tidak terpengaruh oleh spam atau serangan DDoS.

Anda mungkin juga ingin melihat perbandingan perangkat lunak pengeditan video terbaik dan platform webinar terbaik kami untuk membuat konten media yang dioptimalkan dengan kinerja yang tidak memperlambat kecepatan situs web Anda.

Jika Anda menyukai artikel ini, silakan berlangganan saluran YouTube kami untuk tutorial video WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.

[rosalia]

Wah ini dia, jarang jarang ada yang mau bagi ilmu optimize core web Vitals, makasih kk

[halimputra]

Thx buat tutorial optimize core web vitalsnya, boleh request plugin WP rockers ya.... Trims sebelumnya

[charles]

Thx buat tutorial optimize core web vitalsnya, boleh request plugin WP rockers ya.... Trims sebelumnya

Pluginny sudah di sediakan ya, cek di tsnya webdevid di thread software,plugin. Terima kasih