Apa yang dimaksudkan oleh Kemas Kini Pengalaman halaman Google untuk imej di laman web anda

Sangat mudah untuk dilupakan bahawa, sebagai enjin carian, Google tidak hanya membandingkan kata kunci untuk menghasilkan hasil carian. Google tahu bahawa jika orang tidak menikmati pengalaman mereka di laman web, mereka tidak akan tinggal di halaman cukup lama untuk mengambil kandungan - tidak kira betapa relevannya.

Akibatnya, Google telah bereksperimen dengan cara untuk menganalisis pengalaman pengguna laman web menggunakan metrik yang boleh diukur. Memfokuskannya ke dalam ranking enjin cariannya, diharapkan dapat memberikan pengguna bukan sahaja dengan kandungan yang besar dan relevan tetapi dengan pengalaman pengguna yang mengagumkan juga.

Kemas kini pengalaman halaman Google yang akan dilancarkan adalah langkah utama ke arah ini. Pemilik laman web dengan laman web imej-berat perlu berhati-hati untuk menyesuaikan diri dengan perubahan ini atau risiko yang jatuh di tepi jalan. Dalam artikel ini, kami akan bercakap tentang semua yang anda perlu ketahui mengenai kemas kini ini, dan bagaimana anda boleh memanfaatkan sepenuhnya.

Nota: Google memperkenalkan rancangan mereka untuk pengalaman halaman pada bulan Mei 2020 dan diumumkan pada bulan November 2020 bahawa ia akan bermula pada bulan Mei 2021. Namun, Google telah menunda rancangan mereka untuk melancarkan pertengahan bulan Jun 2021.

Beberapa latar belakang

Sebelum kita masuk ke dalam lelaran terbaru perubahan bagaimana metrik pengalaman pengguna Google Factors ke dalam ranking enjin carian, mari kita dapatkan beberapa konteks. Pada bulan April 2020, Google membuat langkah yang paling penting dalam arah ini lagi dengan memperkenalkan inisiatif baru: teras Web Vitals.

Core Web Vitals (CWV) diperkenalkan untuk membantu pemaju web menangani cabaran untuk mengoptimumkan kedudukan enjin carian menggunakan metrik yang boleh diuji - sesuatu yang sukar dilakukan dengan perkara yang sangat subjektif seperti pengalaman pengguna.

Untuk melakukan ini, Google mengenal pasti tiga metrik utama (apa yang disebutnya "metrik prestasi pengguna yang berpusatkan pengguna"). Ini adalah:

1. LCP (cat kandungan terbesar): Elemen terbesar di atas lipatan apabila laman web pada mulanya dimuatkan. Biasanya, ini adalah imej atau tajuk yang besar. Berapa cepat beban elemen kandungan terbesar memainkan peranan yang besar dalam seberapa cepat pengguna melihat kelajuan pemuatan keseluruhan halaman.
2. FID (Kelewatan Input Pertama): Masa yang diperlukan antara pengguna pertama berinteraksi dengan halaman dan apabila benang utama adalah percuma untuk penyemak imbas untuk memproses acara tersebut. Ini boleh mengklik/mengetuk butang, pautan, atau berinteraksi dengan unsur dinamik yang lain. Kelewatan apabila berinteraksi dengan halaman jelas boleh mengecewakan kepada pengguna yang mengapa menjaga FID rendah adalah penting.
3. Peralihan susun atur kumulatif (CLS): Ini mengira kestabilan visual halaman apabila ia dimuat pertama. Algoritma mengambil saiz unsur -unsur dan jarak yang mereka bergerak relevan dengan kira -kira. Halaman yang dimuatkan dengan ketidakstabilan yang tinggi boleh menyebabkan kesalahan oleh pengguna, juga membawa kepada situasi yang mengecewakan.

Metrik-metrik ini telah berkembang dari yang lebih asas yang telah digunakan untuk beberapa waktu, seperti Si (Indeks Kelajuan), FCP (Cat Contentful First), TTI (Time-to-Interactive), dan lain-lain.

Alasannya adalah penting kerana imej dapat memainkan peranan penting dalam bagaimana skor CWVS laman web anda. Sebagai contoh, LCP lebih kerap daripada tidak imej di atas atau, sekurang-kurangnya, perlu bersaing dengan imej yang akan dimuatkan terlebih dahulu. Imej yang tidak digunakan dengan betul juga boleh memberi kesan negatif terhadap CL. Imej lambat juga boleh memberi kesan kepada FID dengan menambahkan kelewatan selanjutnya kepada rendering keseluruhan halaman.

Lebih-lebih lagi, ini datang di belakang fokus Google yang diperbaharui pada pengindeksan mudah alih. Oleh itu, bukan sahaja metrik ini penting untuk laman web anda, tetapi anda perlu memastikan bahawa halaman anda juga mendapat skor pada peranti mudah alih.

Apa yang akan berubah? Pengalaman Halaman untuk Carian Google

Sudah jelas bahawa, secara umum, Google semakin mengutamakan pengalaman pengguna ketika datang ke kedudukan enjin carian. Yang membawa kita ke kemas kini terkini-Google Now merancang untuk menggabungkan pengalaman halaman sebagai faktor ranking, bermula dengan pelancaran awal pada pertengahan bulan Jun 2021.

Jadi, apakah pengalaman halaman? Singkatnya, ia adalah isyarat ranking yang menggabungkan data dari beberapa metrik untuk mencuba dan menentukan betapa baik atau buruk pengalaman pengguna halaman web. Ia terdiri daripada faktor -faktor berikut:

• Web Vitals Teras: Menggunakan vital web yang sama, tidak berubah, teras. Google telah menubuhkan garis panduan dan kedudukan yang disyorkan yang boleh anda temukan di sini. Anda memerlukan penarafan CWV "baik" keseluruhan untuk memenuhi syarat untuk skor pengalaman halaman "baik".
• Kegunaan mudah alih: URL mestilah tidak mempunyai kesilapan kebolehgunaan mudah alih untuk memenuhi syarat untuk skor pengalaman halaman "baik".
• Isu Keselamatan: Sebarang isu keselamatan yang ditandai akan membatalkan laman web.
• HTTPS: Halaman mesti disampaikan melalui HTTPS untuk memenuhi syarat.
• Pengalaman Iklan: Langkah -langkah ke tahap Iklan Tahap memberi kesan negatif kepada pengalaman pengguna di laman web anda, sebagai contoh, dengan mengganggu, mengganggu, dll.

Sebagai sebahagian daripada perubahan ini, Google mengumumkan hasratnya untuk memasukkan penunjuk visual, atau lencana, yang menyoroti laman web yang telah meluluskan kriteria pengalaman halamannya. Ini akan sama dengan lencana sebelumnya enjin carian telah digunakan untuk mempromosikan halaman mudah alih AMP (dipercepat) atau halaman mesra mudah alih.

Pengiktirafan rasmi ini akan memberikan laman web berprestasi tinggi kelebihan besar dalam arena yang sangat kompetitif iaitu SERP Google. Isyarat visual ini pasti akan meningkatkan CTRS dan trafik organik, terutamanya untuk laman web yang sudah berpangkat dengan baik. Ciri ini mungkin akan jatuh sebaik sahaja ia melewati fasa percubaan semasa.

Satu lagi berita baik untuk pengguna bukan amp adalah bahawa semua halaman kini akan menjadi layak untuk cerita teratas dalam kedua-dua pelayar dan aplikasi Google News. Walaupun Google menyatakan bahawa halaman dapat memenuhi syarat untuk cerita teratas "tanpa mengira skor terasnya atau status pengalaman halaman," sukar untuk membayangkan ini tidak memainkan peranan untuk kelayakan sekarang atau ke bawah.

Kunci Takeaway: Apakah maksudnya untuk imej di laman web anda?

Google mencatatkan lonjakan 70% dalam penggunaan pengguna rumah api dan alat -alat Insight Pagespeed mereka, menunjukkan bahawa pemilik laman web menangkap kepentingan mengoptimumkan halaman mereka. Ini bermakna piawaian hanya akan menjadi lebih tinggi dan lebih tinggi apabila bersaing dengan laman web lain untuk kedudukan enjin carian.

Google telah mengesahkan bahawa, walaupun perubahan ini, kandungan masih raja . Walau bagaimanapun, kandungan adalah lebih daripada sekadar teks di halaman anda, dan kandungan yang benar-benar menarik dan mesra pengguna juga terdiri daripada media yang digunakan, majoriti yang mungkin akan menjadi imej.

Dengan lencana pengalaman halaman yang dicadangkan dan kelayakan cerita teratas untuk dimenangi, taruhan tidak pernah lebih tinggi untuk berpangkat tinggi dengan algoritma carian Google . Anda memerlukan setiap kelebihan yang boleh anda dapatkan. Dan, seperti yang akan saya tunjukkan, mengoptimumkan aset imej anda boleh memberi kesan ketara pada pemarkahan dengan baik mengikut metrik ini.

Apa yang boleh anda lakukan untuk bersaing?

Sebelum saya mencadangkan penyelesaian saya untuk membantu anda mengoptimumkan aset imej untuk vital web teras, mari kita lihat mengapa imej sering merugikan prestasi:

• Imej -imej yang mengalir saiz keseluruhan halaman laman web anda, terutamanya jika imej tidak dapat dioptimumkan (iaitu tidak dikompresi, tidak bersaiz betul, dll.)
• Imej perlu responsif terhadap peranti yang berbeza. Anda memerlukan saiz imej yang lebih kecil untuk mengekalkan kualiti visual yang sama pada skrin yang lebih kecil.
• Konteks yang berbeza (pelayar, OSS, dan lain -lain) mempunyai format yang berbeza untuk imej yang optimum. Walau bagaimanapun, kebanyakan imej masih digunakan dalam format .jpg/.png.
• Pemilik laman web tidak selalu tahu tentang amalan terbaik yang berkaitan dengan menggunakan imej di halaman laman web, seperti yang selalu menentukan atribut lebar/ketinggian secara eksplisit.

Menggunakan kaedah konvensional, ia boleh mengambil banyak darah, peluh, dan air mata untuk menangani isu -isu ini. Kebanyakan penyelesaian, seperti mengedit imej secara manual dan sintaks responsif pengekodan keras mempunyai masalah yang melekat dengan skalabilitas, keupayaan untuk mengemas kini/menyesuaikan diri dengan mudah, dan membasahi saluran paip pembangunan anda.

Untuk mengoptimumkan aset imej anda, terutamanya dengan tumpuan untuk meningkatkan CWV, anda perlu:

• Kurangkan muatan imej
• Melaksanakan caching yang berkesan
• Mempercepatkan penghantaran
• Mengubah imej menjadi format gen seterusnya yang optimum
• Pastikan gambar responsif
• Melaksanakan logik jangka masa untuk menggunakan tetapan optimum dalam konteks yang berbeza

Nasib baik, terdapat kelas alat yang direka khusus untuk menyelesaikan cabaran -cabaran ini dan menyediakan penyelesaian ini - CDN imej. Terutama, saya ingin memberi tumpuan kepada ImageEngine yang secara konsisten mengatasi CDN lain pada ujian prestasi halaman yang saya lakukan.

ImageEngine adalah CDN imej yang cerdas, peranti yang boleh anda gunakan untuk melayani imej laman web anda (termasuk GIF). ImageEngine menggunakan pengesanan peranti WURFL untuk menganalisis konteks halaman laman web anda diakses dari (peranti, saiz skrin, DPI, OS, penyemak imbas, dan lain -lain) dan mengoptimumkan aset imej anda dengan sewajarnya. Berdasarkan kriteria ini, ia dapat mengoptimumkan imej dengan saiz semula, memformat semula, dan memampatkannya secara bijak.

Ia adalah penyelesaian yang benar-benar automatik, set-it-forget-it yang memerlukan sedikit intervensi apabila ia ditubuhkan. CDN mempunyai lebih daripada 20 pop global dengan logik yang dibina ke dalam pelayan tepi untuk lebih cepat di seluruh kawasan yang berbeza. Tuntutan ImageEngine untuk mencapai nisbah cache-hit setinggi 98% serta mengurangkan muatan imej sebanyak 75%.

Ujian Langkah demi Langkah Cara Menggunakan ImageEngine Untuk Meningkatkan Pengalaman Halaman

Untuk menggambarkan perbezaan menggunakan CDN imej seperti ImageEngine boleh membuat, saya akan menunjukkan kepada anda ujian praktikal.

Pertama, mari kita lihat bagaimana halaman dengan jumlah besar skor kandungan imej menggunakan pandangan PageSpeed. Ia adalah halaman yang mudah, tetapi terdiri daripada sejumlah besar imej berkualiti tinggi dengan beberapa elemen interaktif, seperti butang dan pautan serta teks.

FID adalah unik kerana ia bergantung kepada data dari pengguna interaksi dunia sebenar dengan laman web anda. Akibatnya, FID hanya boleh dikumpulkan "di lapangan." Jika anda mempunyai laman web dengan trafik yang cukup, anda boleh mendapatkan FID dengan menghasilkan laporan pengalaman halaman di Konsol Google.

Walau bagaimanapun, untuk hasil makmal, dari alat seperti rumah api atau pandangan halaman, kita dapat mengandaikan kesan menyekat sumber dengan melihat TTI dan TBT.

Oh, ya, dan saya juga akan memfokuskan hasil audit mudah alih untuk beberapa sebab:

1. Google sendiri mengutamakan isyarat mudah alih dan pengindeksan pertama mudah alih
2. Mengoptimumkan laman web dan aset imej sering paling mencabar untuk peranti mudah alih/respons umum
3. Ia memberi peluang untuk menunjukkan peningkatan maksimum yang dapat diberikan oleh CDN imej

Dengan itu, inilah hasil untuk halaman kami:

Jadi, seperti yang anda lihat, kami mempunyai beberapa masalah. Dengan membantu, PageSpeed ​​Insights membentangkan dua CWV yang hadir, LCP dan CLS. Seperti yang anda lihat, kerana muatan imej yang besar (kira -kira 35 MB), kami mempunyai LCP yang tidak masuk akal hampir 1 minit.

Kerana susun atur yang mudah dan hakikat bahawa saya secara eksplisit memberikan atribut lebar dan ketinggian imej, halaman kami berlaku stabil dengan 0 cls. Walau bagaimanapun, penting untuk menyedari bahawa imej pemuatan perlahan juga boleh memberi kesan kepada kestabilan halaman anda. Jadi, walaupun anda tidak dapat memperbaiki secara langsung CLS, unsur-unsur yang lebih pantas seperti beban imej, lebih baik pengalaman keseluruhan untuk pengguna dunia nyata.

TTI dan TBT juga sub-par. Ia akan mengambil masa sekurang -kurangnya dua saat dari saat unsur pertama muncul pada halaman sehingga ketika halaman dapat mulai menjadi interaktif.

Seperti yang anda dapat lihat dari peluang untuk penambahbaikan dan diagnostik, hampir semua isu berkaitan imej:

Menyiapkan ImageEngine dan menguji hasilnya

Ok, jadi sekarang sudah tiba masanya untuk menambah ImageEngine ke dalam campuran dan lihat bagaimana ia meningkatkan metrik prestasi pada halaman yang sama.

Menyediakan ImageEngine di hampir mana -mana laman web adalah agak mudah. Pertama, pergi ke ImageEngine.io dan mendaftar untuk percubaan percuma. Cukup ikuti proses pendaftaran 3 langkah mudah di mana anda perlu:

1. Sediakan laman web yang ingin anda mengoptimumkan,
2. lokasi web di mana gambar anda disimpan, dan kemudian
3. Salin alamat penghantaran ImageEngine diberikan kepada anda.

Yang terakhir akan berada dalam format {rawak rawak} .cdn.imgeng.in tetapi boleh dikemas kini dari dalam papan pemuka ImageEngine.

Untuk melayani imej melalui domain ini, hanya kembali ke markup laman web anda dan kemas kini atribut SRC. Contohnya:

Dari:

 <img  src="mywebsite.com/images/header-image.jpg" alt="Apa yang dimaksudkan oleh Kemas Kini Pengalaman halaman Google untuk imej di laman web anda" >

Ke:

 <img  src="myimages.cdn.imgeng.in/images/header-image.jpg" alt="Apa yang dimaksudkan oleh Kemas Kini Pengalaman halaman Google untuk imej di laman web anda" >

Itu sahaja yang perlu anda lakukan. ImageEngine kini akan menarik imej anda secara automatik dan mengoptimumkannya secara dinamik untuk hasil terbaik apabila pelawat melihat halaman laman web anda. Anda boleh menyemak panduan integrasi rasmi dalam dokumentasi tentang cara menggunakan ImageEngine dengan Magento, Shopify, Drupal, dan banyak lagi. Terdapat juga plugin WordPress rasmi.

Inilah hasil untuk halaman ujian ImageEngine saya setelah ia disediakan:

Seperti yang anda lihat, hasilnya hampir tidak sempurna. Semua metrik telah bertambah baik, menjaringkan gol dalam indeks kelajuan hijau dan LCP yang terjejas dengan ketara oleh imej besar.

Akibatnya, tidak ada peluang untuk penambahbaikan. Dan, seperti yang anda lihat, ImageEngine mengurangkan jumlah muatan halaman hingga 968 kb, memotong kandungan imej dengan kira -kira 90%:

Kesimpulan

Untuk beberapa tahap, ia lebih sama dari Google yang secara konsisten telah bergerak ke arah mudah alih dan menggunakan senarai metrik yang semakin meningkat untuk mengasah "pengalaman halaman" yang terbaik untuk pengguna enjin cariannya. Bersama dengan mengesahkan langkah mereka ke arah ini, Google menyatakan bahawa mereka akan terus menguji dan menyemak senarai isyarat mereka.

Metrik lain yang boleh muncul dalam alat mereka, seperti TTFB, TTI, FCP, TBT, atau mungkin metrik baru sepenuhnya boleh memainkan peranan yang lebih besar dalam kemas kini masa depan.

Mencari penyelesaian yang membantu anda menjaringkan gol untuk metrik ini sekarang dan pada masa akan datang adalah kunci untuk terus maju dalam persekitaran yang sangat kompetitif ini. Walaupun pengoptimuman imej hanya satu aspek, ia boleh mempunyai implikasi besar, terutamanya untuk laman web yang berat.

CDN imej seperti ImageEngine dapat menyelesaikan hampir semua isu yang berkaitan dengan kandungan imej, dengan masa dan usaha yang minimum serta bukti masa depan laman web anda terhadap kemas kini masa depan.

Atas ialah kandungan terperinci Apa yang dimaksudkan oleh Kemas Kini Pengalaman halaman Google untuk imej di laman web anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!