Cara mengoptimalkan situs web Anda untuk Core Web Vitals (Adsense)

Perlombaan untuk meningkatkan Data Web Inti tidaklah mudah. Semakin sulit jika Anda mengandalkan program periklanan seperti Google AdSense untuk memonetisasi situs web Anda.

Situs web yang menjalankan Google AdSense 10 kali lebih mungkin gagal dalam tes Core Web Vitals daripada situs web yang sama tanpa Google AdSense di dalamnya. Ini sebagian besar disebabkan oleh jumlah permintaan dan aset pihak ketiga yang ditambahkan Google AdSense ke situs web Anda. Sebagian besar aset ini tidak dioptimalkan, besar, dan tidak ramah pengguna.

Di luar platform AdSense dan periklanan, jika Anda memiliki banyak gambar, JavaScript, dan CSS yang tidak dioptimalkan terutama di paro atas, kemungkinan besar Anda juga akan gagal dalam tes Core Web Vitals.

Jika Anda telah berjuang untuk lulus tes Core Web Vitals dan meningkatkan potensi peringkat mesin pencari Anda, Anda akan menemukan solusi praktis dalam artikel ini.

Apa itu Data Web Inti?

Data Web Inti adalah metrik yang didukung oleh Google Lighthouse yang menentukan bagaimana situs memberikan pengalaman halaman yang baik. Meskipun ada banyak metrik saat menjalankan pengujian, metrik yang paling penting adalah Largest Contentful Paint (LCP), First Input Delay (FID), dan Cumulative Layout Shift (CLS).

Google telah mengumumkan bahwa mulai Mei 2021, metrik ini akan menjadi bagian dari sinyal peringkat mereka yang digunakan untuk menentukan posisi halaman web dalam hasil pencarian.

Singkatnya, Anda dapat mengatakan bahwa Data Web Inti tidak dimaksudkan untuk menjadi teror bagi Webmaster tetapi sarana untuk meningkatkan pengalaman halaman situs web.

Cat Konten Terbesar (LCP) : LCP mengukur waktu yang diperlukan untuk memuat gambar atau blok teks terbesar yang terlihat pada halaman web. Jika teks atau gambar terbesar yang terlihat dimuat dengan cepat, dianggap bahwa sisa gambar dan teks Anda akan dimuat dengan cepat. Waktu muat yang diperlukan untuk lulus adalah 2,5 detik .

First Input Delay (FID) : FID mengukur interaktivitas halaman web. Ini ditentukan oleh berapa lama waktu yang dibutuhkan browser untuk mulai memproses event handler setelah pengguna mengklik situs Anda. Ini secara luas disebut Kesan pertama situs web Anda. Waktu yang dibutuhkan untuk lulus adalah 100 milidetik .

Pergeseran Tata Letak Kumulatif (CLS) : CLS mengukur pergeseran tata letak yang terjadi pada halaman web. Ketika halaman web dimuat dan kemudian tiba-tiba sesuatu muncul atau menghilang dan halaman harus menyesuaikan menjadi lebih besar atau lebih kecil, pergeseran itulah yang diukur. Ini mengerikan untuk pengalaman pengguna dan saya setuju. Skor yang harus Anda lewati adalah 0,1 .

Cara mengoptimalkan situs web Anda untuk Core Web Vitals

Ikuti langkah-langkah ini untuk mengoptimalkan situs web Anda:

1. Mulailah dengan host web yang cepat

Jika Anda memiliki host web dengan waktu respons yang buruk, maka setiap hal lain yang akan saya sebutkan di sini mungkin tidak memberikan hasil yang diinginkan. Semakin cepat server Anda menanggapi permintaan, semakin baik.

Mengapa web host dengan Time to first byte (TTFB) yang cepat itu penting? Beberapa orang akan berargumen bahwa TTFB tidak penting, tetapi memang penting. Itu adalah dasar dari segala sesuatu yang lain. Jika Anda memiliki pengguna di kota-kota dengan internet lambat, seberapa cepat host web Anda dapat merespons akan berarti segalanya. Host web mana pun dapat berkinerja baik jika Anda memiliki pengguna terutama dari kota-kota dengan internet supercepat.

Coba uji bagaimana host web Anda akan merespons 3G atau 2G, bukan 4G. Karena jika Anda mendapatkan banyak pengguna yang terhubung melalui 3G atau 2G, itu akan menambah skor Core Web Vitals Anda. Jadi, setiap milidetik berarti. Perbedaan antara mendapatkan 100ms di FID Anda dan mendapatkan 101ms adalah bahwa dengan 100ms, Anda lulus tetapi dengan 101ms Anda gagal. Jadi, jika seseorang memberi tahu Anda bahwa 1 ms tidak masalah, orang itu mungkin saja salah.

Saat memilih host web, selalu pastikan untuk mendapatkan pusat data yang lebih dekat dengan sebagian besar pengguna situs web Anda. Anda dapat menemukan lokasi mereka dengan melihat analytics Anda. Dari mana sebagian besar pengguna Anda berasal? Pilih pusat data yang lebih dekat dengan mereka. Semakin dekat semakin baik.

Saya pribadi telah melihat perubahan signifikan dalam Data Bidang Situs Web Inti Vitals setelah mengubah host web. Saya tidak melakukan apa-apa lagi.

Jika Anda mencari web host yang cepat, ada banyak rekomendasi di luar sana yang murni didorong oleh afiliasi tanpa ketulusan. Jika Anda menjalankan WordPress dan Anda mampu membelinya, saya sangat merekomendasikan Kinsta. Mereka adalah yang terbaik untuk WordPress. Jika Anda membutuhkan sesuatu yang lebih murah atau Anda tidak menggunakan WordPress, maka Cloudways juga sangat efektif.

2. Gunakan tema yang ringan dan dioptimalkan kecepatan

Tip ini sangat berguna untuk non-coders dan bahkan coders dengan waktu yang lebih sedikit. Terutama jika Anda menggunakan WordPress di mana ada begitu banyak pilihan, pastikan Anda menggunakan tema yang ringan dan dioptimalkan dengan kecepatan.

Karena tema itu seperti kerangka website Anda, jika kerangkanya rusak maka badannya akan rusak. Itu saja.

Ada daftar panjang praktik terbaik yang harus Anda cari dalam sebuah tema. Beberapa praktik buruk yang paling umum adalah terlalu bergantung pada JQuery, memuat terlalu banyak CSS/JS saat tidak diperlukan, ukuran tema besar, dan banyak lagi. Anda selalu dapat menggunakan alat seperti laboratorium Kuning, untuk menguji demo.

Jika Anda menggunakan WordPress, Anda dapat memeriksa daftar tema WordPress tercepat.

3. Optimalkan gambar Anda

Gambarnya keren. Mereka membuat konten begitu menarik. Tapi mereka bisa menjadi beban jika mereka tidak dioptimalkan. Memiliki gambar besar seperti 3 MB pasti akan mempengaruhi kecepatan Anda. Dan jika gambar ini terlihat saat situs Anda dikunjungi sebelum menggulir, itu pasti akan memengaruhi metrik LCP Anda.

Yang benar adalah bahwa gambar yang tidak dioptimalkan menambah ukuran halaman Anda. Semakin besar ukuran halaman, semakin lama waktu yang dibutuhkan untuk memuat.

Saya pribadi lebih suka mengoptimalkan setiap gambar sebelum mengunggahnya. Saya tidak menggunakan layanan eksternal apa pun untuk pengoptimalan gambar. Namun, jika Anda menggunakan WordPress atau CMS serupa, ada plugin dan solusi untuk mengoptimalkan gambar secara otomatis. Ada juga solusi cloud terlepas dari apa yang Anda gunakan.

4. Hapus atau kurangi ukuran gambar latar belakang

Gambar latar biasanya berukuran sangat besar. Dan itu dapat memperlambat waktu muat Anda karena harus dimuat terlebih dahulu sebelum konten yang bermakna ditampilkan.

Anda dapat sepenuhnya menghapus gambar latar belakang untuk memiliki situs web yang lebih cepat. Jika sangat penting, pertimbangkan untuk mengoptimalkannya ke ukuran sekecil mungkin atau menggunakan pola alih-alih gambar.

5. Gunakan cache browser

Jika Anda memiliki banyak pembaca setia maka Anda harus mempertimbangkan cache browser. Saat pengguna mengunjungi situs web Anda untuk pertama kalinya, browser akan menyimpan situs web tersebut di cache. Untuk setiap kunjungan lainnya, itu akan dimuat dalam sekejap. Ini dapat sangat meningkatkan FID dan LCP dari kunjungan kedua ke atas.

Untuk pengguna WordPress, sebagian besar plugin caching dapat membantu Anda mencapai ini.

6. Perkecil JavaScript dan tunda JavaScript yang tidak digunakan

Meskipun JavaScript luar biasa, seringkali pemblokiran render. Ini berarti dapat memengaruhi waktu buka Anda dan pada akhirnya FID Anda.

Cobalah untuk mengecilkan JavaScript dengan menghapus spasi dan komentar untuk mengurangi ukuran file. Selain itu, pastikan Anda menunda JavaScript yang tidak penting. Ini akan meningkatkan FID Anda.

Untuk pengguna WordPress, ada plugin seperti Autoptimize, WP Rocket, dan lainnya yang dapat melakukan ini untuk Anda.

7. Setel atribut ukuran AdSense

Jika Anda menjalankan AdSense di situs web Anda dan Anda berjuang dengan CLS, maka ini dapat menyelesaikan semua masalah Anda. Itu untuk saya dan seharusnya untuk Anda.

Jika Anda memiliki unit iklan di dekat tajuk yang terlihat saat pengguna berkunjung, satu masalah adalah iklan mungkin tidak langsung dimuat. Ini mungkin dimuat setelah halaman dimuat, dan ketika itu terjadi, ada perubahan dalam tata letak. Ini sangat umum untuk unit iklan responsif. Dengan itu terjadi, tidak mungkin untuk melewati metrik CLS.

Cara terbaik untuk menangani ini adalah dengan sedikit mengedit kode AdSense Anda. Jangan khawatir, itu sangat sah. Cukup tentukan atribut ukuran untuk iklan, terutama tinggi. Setelah Anda melakukannya, Anda tidak akan lagi melihat perubahan tata letak setiap kali iklan dimuat.

Di bawah ini adalah contoh unit iklan responsif yang saya gunakan di blog saya tepat di bawah header. Saya telah mengganti ID Penayang dan slot Iklan saya dengan XXXXXX. Perhatikan bahwa saya menambahkan atribut height (min-height: 300px). Saat saya melakukan itu, semua masalah CLS hilang selamanya.

 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Header ad --> <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

Apa yang dilakukan adalah memesan ukuran itu di halaman. Jadi setiap kali iklan muncul, tidak ada perubahan tata letak, karena Anda telah mengatur ukurannya.

8. Setel atribut ukuran untuk gambar Anda dan media lainnya

Seperti halnya dengan Iklan, gambar dan media lainnya dapat menyebabkan perubahan tata letak saat dimuat di situs web Anda. Anda mungkin hanya membaca sesuatu, lalu sebuah gambar dimuat dan tiba-tiba ada perubahan tata letak, apa yang Anda baca tidak terlihat dan semua yang Anda lihat adalah sesuatu yang lain atau Anda bahkan tidak sengaja mengklik sesuatu yang lain.

Anda dapat menghindari semua ini dengan mengatur atribut ukuran ke file media Anda. Metrik CLS Anda akan senang Anda melakukannya.

9. Lazy Load gambar.

Anda mungkin telah melihat saran di PageSpeed ​​Insight untuk menunda gambar di luar layar. Maksudnya adalah malas memuat gambar Anda.

Apa yang dilakukan lazy loading adalah mengurangi ukuran halaman dan juga mengurangi waktu pemuatan halaman Anda saat pengguna berkunjung. Yang bagus untuk metrik CWV.

Ini khususnya akan membantu meningkatkan LCP.

10. Optimalkan CSS dengan mengecilkan dan menghasilkan CSS penting

CSS adalah apa yang membuat situs web terlihat keren, tetapi file CSS yang besar bisa menjadi masalah besar karena akan menunda rendering halaman ke pengguna.

Ketika pengguna mengunjungi situs web Anda, browser dengan perilaku normal akan menunda rendering halaman web Anda kepada pengguna hingga memuat, menguraikan, dan menjalankan semua CSS yang direferensikan di header halaman web Anda. Jika Anda memiliki file CSS yang besar, ini bisa menjadi masalah besar. Ini akan memperlambat situs Anda.

CSS penting dapat membantu dengan hanya memuat CSS yang diperlukan untuk memuat halaman. Sementara sisa CSS dapat dimuat secara tidak sinkron.

Juga mengecilkan CSS Anda dengan menghapus spasi dan komentar untuk mengurangi ukuran file dapat membantu.

Anda juga dapat menghapus CSS yang tidak digunakan. Jika layanan yang Anda gunakan mendorong CSS yang tidak digunakan, aman untuk menghapusnya.

Jika Anda menggunakan WordPress, ada plugin seperti WP Rocket, LiteSpeed ​​Cache, FlyingPress, dan lainnya yang dapat membantu Anda mencapai ini.

11. Terapkan pemuatan cerdas AdSense

Metode ini hampir dapat sepenuhnya menghilangkan semua tantangan jika AdSense bertanggung jawab untuk memperlambat situs web Anda.

Ini tentang memuat AdSense dengan cara yang cerdas. AdSense tidak akan dimuat hingga pengguna melakukan tindakan seperti menggulir atau mengeklik. Ini akan sangat meningkatkan waktu buka dan semua data web Inti yang terpengaruh oleh AdSense.

Ada banyak plugin WordPress yang dapat membantu Anda melakukan ini, WP Rocket dan Flying Scripts adalah contohnya. Metode ini sejauh yang saya tahu tidak melanggar kebijakan Google AdSense.

Catatan: Meskipun metode ini dapat membantu meningkatkan persepsi kecepatan dan skor halaman, metode ini mungkin memengaruhi pendapatan AdSense Anda. Saya sarankan Anda menjalankan eksperimen untuk memastikan apakah itu sepadan

12. Gunakan font System Stack jika Anda bisa

Font menambah waktu buka ekstra di situs web mana pun. Dan untuk halaman web tanpa gambar, blok teks Anda mungkin bertanggung jawab atas peringkat LCP Anda. Dalam hal ini skor LCP Anda akan langsung dipengaruhi oleh font Anda.

Sementara Google Font dan Font Awesome terus meningkat, menggunakan font tumpukan sistem menawarkan peningkatan yang signifikan. Meskipun tidak terlalu fantastis tergantung pada perangkatnya.

13. Gunakan CDN

Jika Anda memiliki pengguna dari berbagai belahan dunia, menggunakan CDN dapat membantu meningkatkan kecepatan dan secara tidak langsung metrik Data Web Inti Anda.

CDN dalam penjelasan sederhana membuat banyak salinan situs web Anda dan menyimpannya di berbagai Point of Presence (POP) di berbagai belahan dunia. Ketika seseorang meminta situs web Anda, ia melayani situs web Anda dari lokasi terdekat.

Misalnya, jika situs Anda dihosting di Amerika Serikat dan Anda memiliki pengunjung dari Inggris Raya, alih-alih mengambil situs Anda dari Amerika Serikat, CDN akan menayangkan situs Anda dari Inggris Raya. Efeknya adalah pengiriman cepat. Kecepatan.

Anda dapat memeriksa CDN terbaik di luar sana.

14. Siapkan prefetching DNS

Jika Anda mengandalkan layanan eksternal seperti CDN untuk pengiriman situs web Anda, maka Anda mungkin perlu menyiapkan DNS Prefetching untuk meminimalkan penundaan karena pencarian DNS.

Prefetching DNS akan mengambil DNS terlebih dahulu sebelum dipanggil. Sehingga memuat dalam sekejap ketika akhirnya dipanggil.

15. Optimalkan skrip pihak ketiga

Periksa untuk memastikan bahwa beberapa layanan yang Anda gunakan di situs Anda tidak menambahkan skrip pihak ketiga yang dapat memperlambat situs Anda.

Anda dapat mengganti solusi dengan permintaan pihak ketiga yang memperlambat situs Anda dengan solusi yang lebih baik.

Ketika datang ke Google AdSense, skrip pihak ketiga lainnya, hanya sedikit yang dapat Anda lakukan. Praktik terbaik adalah menggunakan maksimal 3 iklan yang disatukan dalam satu halaman. Hindari Konten yang sesuai karena menghasilkan pendapatan rendah tetapi menambah waktu buka.

16. Hapus AdSense dari paro atas

Saran ini didasarkan pada eksperimen. Jika semua metrik Anda bagus di laporan konsol pencarian kecuali LCP, pertama-tama pastikan gambar dan font Anda dioptimalkan. Jika mereka dioptimalkan dan Anda masih gagal LCP maka AdSense mungkin bertanggung jawab.

Jika Anda mampu, hapus AdSense dari paro atas selama sebulan dan lihat apakah masalahnya hilang.

Jika Anda tidak ingin menghapusnya, Anda dapat menundanya secara manual atau dengan bantuan plugin seperti Flying Scripts.

17. Beralih ke AMP

AMP berarti Halaman Seluler yang Dipercepat. Ide AMP adalah untuk mengoptimalkan halaman web agar dimuat lebih cepat di seluler. Dan tentu saja, proyek open source AMP dimulai oleh Google.

Meskipun AMP awalnya ditujukan untuk mempercepat halaman seluler, AMP juga dapat mempercepat halaman desktop.

Halaman AMP secara konsisten lebih cepat daripada halaman seluler atau desktop, terkadang lebih dari 100% menurut pengamatan kami.

Jika satu-satunya strategi monetisasi situs web Anda adalah Google AdSense, maka Anda dapat mempertimbangkan untuk mengalihkan semua situs web Anda ke AMP. Saya pribadi memperhatikan bahwa di blog yang saya miliki, AdSense di halaman AMP terkadang menghasilkan lebih banyak konversi daripada di seluler dan desktop!

Kesimpulan

Core Web vitals dapat membantu Anda meningkatkan situs web untuk pengguna Anda, bukan hanya untuk Google. Sangat umum untuk memiliki skor tes data lab yang baik tetapi skor data lapangan yang buruk.

Ini karena riasan pengguna Anda. Jika sebagian besar pengguna Anda berasal dari tempat dengan internet lambat, Anda mungkin telah melakukan pengoptimalan dengan baik tetapi masih gagal dalam data lapangan.