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

Perlombaan untuk meningkatkan Core Web Vitals bukanlah hal yang mudah. ​​Akan lebih sulit jika Anda mengandalkan program periklanan seperti Google AdSense untuk memonetisasi situs web Anda.

Situs web yang menjalankan Google AdSense memiliki kemungkinan 10 kali lebih besar untuk gagal dalam uji Core Web Vitals daripada situs web yang sama tanpa Google AdSense. Hal 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, berukuran besar, dan tidak ramah pengguna.

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

Jika Anda kesulitan 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?

Core Web Vitals adalah metrik yang didukung oleh Google Lighthouse yang menentukan seberapa baik 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 yang digunakan untuk menentukan posisi halaman web dalam hasil pencarian.

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

Cat Konten Terbesar (LCP): LCP mengukur waktu yang dibutuhkan untuk memuat gambar atau blok teks terbesar yang terlihat pada halaman web. Jika teks atau gambar terbesar yang terlihat dimuat dengan cepat, gambar dan teks lainnya akan dianggap dimuat dengan cepat. Waktu muat yang dibutuhkan untuk lulus adalah 2.5 detik.

Delay Input Pertama (FID): FID mengukur interaktivitas halaman web. Hal ini ditentukan oleh berapa lama waktu yang dibutuhkan browser untuk mulai memproses event handler setelah pengguna mengklik situs Anda. Hal ini secara luas disebut sebagai kesan pertama situs web Anda. Waktu yang dibutuhkan untuk melewatinya adalah milidetik 100.

Pergeseran Tata Letak Kumulatif (CLS): CLS mengukur pergeseran tata letak yang terjadi pada halaman web. Saat halaman web dimuat dan tiba-tiba sesuatu muncul atau menghilang dan halaman harus menyesuaikan diri menjadi lebih besar atau lebih kecil, pergeseran itulah yang diukur. Hal ini buruk untuk pengalaman pengguna dan saya setuju. Skor yang harus Anda lulus adalah 0.1.

Cara mengoptimalkan situs web Anda untuk Core Web Vitals

Ikuti langkah-langkah berikut untuk mengoptimalkan situs web Anda:

1. Mulailah dengan web host yang cepat

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

Mengapa web host dengan Time to first byte (TTFB) yang cepat itu penting? Sebagian orang berpendapat bahwa TTFB tidak penting, tetapi penting. Itulah dasar dari segalanya. Jika Anda memiliki pengguna di kota-kota dengan internet yang lambat, seberapa cepat web host Anda dapat merespons akan sangat berarti. Semua web host dapat berkinerja baik jika Anda memiliki pengguna terutama dari kota-kota dengan internet supercepat.

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

Saat memilih a web host, selalu pastikan untuk mendapatkan pusat data yang lebih dekat dengan mayoritas pengguna situs web Anda. Anda dapat menemukan lokasi mereka dengan melihat analitik 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 pada Field Data Core Web Vitals sebuah situs web setelah mengganti web host. Saya tidak melakukan hal lain.

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 kecepatannya

Kiat ini sangat berguna khususnya bagi mereka yang bukan programmer dan bahkan bagi programmer yang memiliki waktu terbatas. Terutama jika Anda menggunakan WordPress yang memiliki banyak pilihan, pastikan Anda menggunakan tema yang ringan dan dioptimalkan untuk kecepatan.

Karena tema itu ibarat kerangka situs web Anda, jika kerangkanya rusak maka tubuhnya pun akan rusak. Itu saja.

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

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

3. Optimalkan gambar Anda

Gambar memang keren. Gambar membuat konten begitu menarik. Namun, gambar bisa menjadi beban jika tidak dioptimalkan. Memiliki gambar berukuran besar seperti 3 MB pasti akan memengaruhi kecepatan Anda. Dan jika gambar ini terlihat saat situs Anda dikunjungi sebelum digulir, gambar tersebut pasti akan memengaruhi metrik LCP Anda.

Faktanya, gambar yang tidak dioptimalkan akan 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 berbasis cloud, apa pun yang Anda gunakan.

4. Hapus atau kurangi ukuran gambar latar belakang

Gambar latar belakang biasanya berukuran sangat besar. Hal ini dapat memperlambat waktu pemuatan karena gambar tersebut harus dimuat terlebih dahulu sebelum konten yang penting ditampilkan.

Anda dapat menghapus gambar latar sepenuhnya agar situs web Anda lebih cepat. Jika gambar latar sangat penting, pertimbangkan untuk mengoptimalkannya ke ukuran sekecil mungkin atau menggunakan pola sebagai pengganti gambar.

5. Gunakan cache browser

Jika Anda memiliki banyak pembaca setia, Anda harus mempertimbangkan cache browser. Saat pengguna mengunjungi situs web Anda untuk pertama kalinya, browser akan menyimpan cache situs web tersebut. Untuk setiap kunjungan berikutnya, situs web akan dimuat dalam sekejap. Ini dapat meningkatkan FID dan LCP secara signifikan sejak kunjungan kedua ke atas.

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

6. Minimalkan JavaScript dan tunda JavaScript yang tidak digunakan

Meskipun JavaScript luar biasa, ia sering kali menghalangi proses render. Ini berarti bahwa ia dapat memengaruhi waktu muat dan akhirnya FID Anda.

Cobalah untuk mengecilkan JavaScript dengan menghapus spasi dan komentar untuk mengurangi ukuran file. Pastikan juga 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. Tetapkan atribut ukuran AdSense

Jika Anda menjalankan AdSense di situs web Anda dan mengalami kesulitan dengan CLS, maka ini dapat menyelesaikan semua masalah Anda. Ini berhasil bagi saya dan seharusnya juga bagi Anda.

Jika Anda memiliki unit iklan yang dekat dengan tajuk yang terlihat saat pengguna berkunjung, salah satu masalahnya adalah iklan tersebut mungkin tidak langsung dimuat. Iklan tersebut mungkin dimuat setelah halaman dimuat, dan saat dimuat, terjadi perubahan tata letak. Hal ini sangat umum terjadi pada unit iklan responsif. Jika hal itu terjadi, mustahil untuk lulus metrik CLS.

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

Berikut ini adalah contoh unit iklan responsif yang saya gunakan di blog saya tepat di bawah tajuk. Saya telah mengganti ID Penerbit dan slot Iklan saya dengan XXXXXX. Saya perhatikan bahwa saya menambahkan atribut tinggi (min-height: 300px). Saat saya melakukannya, semua masalah CLS hilang selamanya.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     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>

Yang dilakukannya adalah memesan ukuran tersebut pada halaman. Jadi, setiap kali iklan muncul, tidak ada perubahan tata letak, karena Anda telah mengatur ukurannya.

8. Atur atribut ukuran untuk gambar dan media lainnya

Sama halnya dengan Iklan, gambar dan media lain dapat menyebabkan perubahan tata letak saat dimuat di situs web Anda. Anda mungkin sedang membaca sesuatu, lalu gambar dimuat dan tiba-tiba terjadi perubahan tata letak, apa yang Anda baca tidak terlihat dan yang Anda lihat hanyalah sesuatu yang lain atau Anda bahkan mengeklik sesuatu yang lain secara tidak sengaja.

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

9. Muat gambar secara malas.

Anda mungkin telah melihat saran di PageSpeed ​​Insight untuk tunda gambar di luar layarYang dimaksud dengan itu adalah memuat gambar Anda secara lambat.

Yang dilakukan lazy loading adalah mengurangi ukuran halaman dan juga mengurangi waktu pemuatan halaman saat pengguna berkunjung. Hal ini baik untuk metrik CWV.

Hal ini khususnya akan membantu meningkatkan LCP.

10. Optimalkan CSS dengan mengecilkan dan menghasilkan CSS yang penting

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

Saat pengguna mengunjungi situs web Anda, browser secara normal akan menunda perenderan halaman web Anda kepada pengguna hingga halaman web tersebut memuat, mengurai, dan menjalankan semua CSS yang dirujuk di tajuk halaman web Anda. Jika Anda memiliki file CSS yang besar, ini bisa menjadi masalah besar. Ini akan memperlambat situs Anda.

CSS yang penting dapat membantu dengan hanya memuat CSS yang diperlukan agar halaman dapat dimuat. Sementara CSS lainnya dapat dimuat secara asinkron.

Memperkecil CSS Anda dengan menghapus spasi dan komentar untuk mengurangi ukuran file juga dapat membantu.

Anda juga bisa hapus CSS yang tidak digunakanJika 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 mencapainya.

11. Terapkan pemuatan cerdas AdSense

Metode ini hampir dapat sepenuhnya menghilangkan semua tantangan jika AdSense bertanggung jawab atas melambatnya 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 mempercepat waktu pemuatan dan data penting web yang terpengaruh oleh AdSense.

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

Catatan: Meskipun metode ini dapat membantu meningkatkan kecepatan dan skor halaman, metode ini dapat memengaruhi pendapatan AdSense Anda. Sebaiknya Anda menjalankan eksperimen untuk memastikan apakah metode ini bermanfaat.

12. Gunakan font System Stack jika Anda bisa

Font menambah waktu muat 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 secara langsung dipengaruhi oleh font Anda.

Meskipun Google Font dan Font Awesome terus mengalami peningkatan, penggunaan tumpukan font sistem menawarkan peningkatan yang signifikan. Meskipun tidak secanggih itu, tergantung pada perangkatnya.

13. Gunakan CDN

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

CDN secara sederhana membuat banyak salinan situs web Anda dan menyimpannya di berbagai Point of Presence (POP) di berbagai belahan dunia. Saat seseorang meminta situs web Anda, CDN akan menyajikan 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 yang cepat. Kecepatan.

Anda dapat checkout CDN terbaik di luar sana.

14. Mengatur prapengambilan DNS

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

DNS prefetching akan mengambil DNS terlebih dahulu sebelum dipanggil. Jadi, DNS akan dimuat dalam sekejap saat 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.

Terkait Google AdSense, skrip pihak ketiga lainnya, tidak banyak yang dapat Anda lakukan. Praktik terbaik adalah menggunakan maksimal 3 iklan yang disatukan pada satu halaman. Hindari Matched Contents karena menghasilkan pendapatan rendah tetapi menambah waktu pemuatan.

16. Hapus AdSense dari atas lipatan

Saran ini berdasarkan eksperimen. Jika semua metrik Anda bagus dalam laporan konsol penelusuran kecuali LCP, pertama-tama pastikan gambar dan font Anda dioptimalkan. Jika sudah dioptimalkan dan Anda masih gagal dalam LCP, AdSense mungkin bertanggung jawab.

Jika Anda mampu, hapus AdSense dari tampilan 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 adalah singkatan dari Accelerated Mobile Pages. Ide AMP adalah mengoptimalkan halaman web agar dapat dimuat lebih cepat di perangkat seluler. Dan tentu saja, AMP open source Proyek ini dimulai oleh Google.

Meskipun AMP awalnya ditujukan untuk mempercepat halaman seluler, ia 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 seluruh situs web Anda ke AMP. Saya pribadi memperhatikan bahwa di sebuah blog yang saya miliki, AdSense pada halaman AMP terkadang menghasilkan lebih banyak konversi daripada di perangkat seluler dan desktop!

Kesimpulan

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

Hal ini disebabkan oleh susunan pengguna Anda. Jika sebagian besar pengguna Anda berasal dari tempat-tempat dengan internet lambat, Anda mungkin telah melakukan pengoptimalan dengan baik tetapi masih gagal dalam data lapangan.