Taktik pertumbuhan penerbit untuk musim pilihan raya | WEBINAR
Taktik pertumbuhan penerbit untuk musim pilihan raya | WEBINAR
Pada akhir modul ini, anda harus mempunyai pemahaman yang jelas tentang pelbagai komponen yang menyumbang kepada Pengalaman Halaman, mengapa ia penting dan bagaimana setiap satu boleh dioptimumkan untuk meningkatkan pengalaman pengguna laman web anda dan SEOnya.
Tempoh Video
17:09
Jawab Kuiz
Ambil kuiz modul semasa
Bahan
Templat sedia untuk digunakan
Sumber
Laporan dan Sumber
2.3.1 Apakah Pengalaman Halaman?
Pengalaman halaman ialah satu set isyarat — termasuk Core Web Vitals (CWV), mesra mudah alih, HTTPS dan garis panduan interstisial yang mengganggu — yang digunakan oleh Google untuk mengekstrapolasi pengalaman pengguna di laman web.
Pengalaman halaman merupakan penilaian prestasi sesebuah laman web dan bukannya kandungannya. Walaupun Google masih mengutamakan kerelevanan kandungan semasa menjawab pertanyaan pengguna, pengalaman halaman secara efektifnya merupakan pemecah seri apabila beberapa laman web menawarkan tahap liputan yang serupa.
Isyarat pengalaman empat halaman ialah:
CWV mengukur pengalaman pengguna dengan menumpukan pada seberapa cepat halaman dimuatkan, daya tindak balasnya terhadap input pengguna dan juga kestabilan visualnya. Terdapat tiga metrik untuk ini:
Kemas kini Google pada April 2015 memperkenalkan metrik mesra mudah alih gergasi carian itu, yang meningkatkan kedudukan halaman mesra mudah alih pada SERP mudah alih.
Secara berkesan, Google akan mengutamakan laman web yang memastikan kandungan mereka mudah dibaca pada peranti mudah alih — bermakna tidak perlu zum, sasaran sentuh seperti butang log masuk tidak dijarakkan terlalu dekat antara satu sama lain, tiada skrol mendatar dan kandungan yang tidak boleh dimainkan dielakkan.
Kemas kini ini terpakai pada halaman individu, bukan keseluruhan laman web dan juga tidak menjejaskan kandungan yang dilihat pada pelayar desktop/komputer riba.
HTTPS, atau protokol pemindahan hiperteks selamat, ialah versi selamat bagi protokol komunikasi internet HTTP.
HTTPS, atau HTTP, membentuk bahagian pertama setiap URL yang dikenali sebagai "skema". Ini muncul sebelum nama domain, iaitu segmen URL yang dikenali sebagai "autoriti".
Perbezaan antara HTTPS dan HTTP ialah HTTPS selamat manakala HTTP tidak. Ini bermakna dalam praktiknya pengguna yang log masuk ke laman web melalui sambungan HTTP menghantar butiran peribadi mereka dalam teks biasa yang tidak disulitkan.
HTTPS menjamin keselamatan sambungan tersebut, bermakna sebarang data yang dihantar antara pelayar pengguna dan pelayan laman web disulitkan sepanjang proses tersebut. Laman web yang mahukan sambungan selamat memerlukan sijil SSL, yang akan disemak dan disahkan oleh pelayar pengguna.
Interstisial ialah format iklan mudah alih sahaja yang hanya muncul dalam jeda semula jadi dalam kandungan — seperti apabila pengguna beralih dari satu artikel ke artikel seterusnya — menutupi skrin dalam proses tersebut.
Interstisial dilihat sebagai mengganggu apabila ia menyekat atau mengaburkan sebahagian pandangan pengguna terhadap kandungan tersebut. Kotak dialog di laman web mudah alih yang bertindak serupa juga termasuk dalam kategori ini.
Kebanyakan kemahiran terkuat penerbit cenderung kepada penciptaan kandungan, penerbitan dan pemasaran, memberikan sedikit ruang untuk memahami dan mengoptimumkan pelbagai tonggak pengalaman halaman.
Sumber yang terhad bermakna penerbit akan menghadapi kesukaran untuk mewajarkan masa dan wang yang diperlukan untuk menggali bahagian belakang halaman web individu, apatah lagi keseluruhan laman web.
Walaupun penerbit dapat meluangkan masa untuk menangani masalah tersebut, seperti yang dapat kita lihat dari atas, pengalaman halaman merupakan isu pelbagai rupa yang memerlukan pendekatan holistik untuk memberikan peningkatan prestasi yang bermakna.
Mengetahui isyarat pengalaman empat halaman yang mana untuk mula digunakan boleh menjadi satu masalah.
Pengalaman halaman sangat penting untuk SEO penerbit, kerana kandungan yang hebat tidak mencukupi untuk menjamin kedudukan teratas dalam SERP.
Google masih mengutamakan maklumat terbaik sebelum apa-apa lagi, bermakna kandungan atau "skop" berita yang unik akan menunjukkan prestasi yang baik walaupun pengalaman halaman "kurang memuaskan" . Walau bagaimanapun, dalam kes di mana beberapa penerbit menyediakan liputan topikal yang sangat baik, pengalaman halaman menjadi faktor penentu penting yang mempengaruhi kedudukan SERP.
Setiap satu daripada empat tonggak pengalaman halaman mempunyai impak yang berbeza terhadap SEO laman web. Impak paling segera datang daripada memberi tumpuan kepada CWV, yang akan diterjemahkan kepada laman web yang dimuatkan dengan lebih pantas.
Banyak kajian menunjukkan bahawa semakin lama masa yang diperlukan untuk memuatkan sesebuah laman web, semakin cepat audiens hilang minat dan semakin tinggi kadar lantunan.
Contohnya, satu kajian Google dari tahun 2018 mendapati bahawa kebarangkalian lantunan melonjak sebanyak 32% apabila masa pemuatan halaman meningkat daripada 1 saat kepada 3 saat.
Satu lagi kajian Google dari tahun 2020 mendapati bahawa laman berita yang lulus ujian CWV menyaksikan kadar pengabaian sebanyak 22% lebih rendah berbanding laman yang gagal. Sementara itu, Yahoo! JAPAN meningkatkan skor CLSnya sebanyak 0.2 dan menyaksikan peningkatan sebanyak 15.1% dalam paparan halaman setiap sesi dan peningkatan sebanyak 13.3% dalam tempoh sesi.
Walaupun Google telah menyatakan secara jelas bahawa ia tidak menggunakan kadar lantunan sebagai isyarat kedudukan , kadar lantunan yang tinggi menunjukkan faktor yang diambil berat oleh Google — iaitu kelajuan pemuatan, daya tindak balas dan kestabilan visual halaman.
Penerbit yang menyasarkan khalayak pada peranti mudah alih perlu memastikan laman web mereka menghantar isyarat mesra mudah alih yang boleh dikesan oleh Google dan Bing. Kedua-dua enjin carian akan mengutamakan laman web mesra apabila menyampaikan hasil carian kepada pengguna mudah alih.
Berbanding dengan CWV dan mesra mudah alih, pelaksanaan HTTPS akan memberi impak yang jauh lebih kecil terhadap SEO penerbit. Google berkata pada tahun 2014 bahawa ia akan menggunakannya sebagai isyarat kedudukan dan mula menandakan semua tapak HTTP sebagai "tidak selamat" dalam Chrome pada tahun 2018. Walau bagaimanapun, faedah terbesar di sini ialah keselamatan data yang dipertingkatkan, terutamanya jika modul perniagaan anda berdasarkan hasil langganan.
Sementara itu, iklan interstisial atau kotak dialog yang mengganggu boleh mengehadkan keupayaan perayap web untuk merangkak dan mengindeks halaman, menghalang enjin carian daripada dapat meletakkannya di kedudukan tertinggi, apatah lagi memaparkan hasil carian yang tinggi.
Langkah pertama ke arah meningkatkan pengalaman halaman bermula dengan menilai keberkesanan semasa laman web anda.
Terdapat pelbagai alat pihak pertama dan ketiga untuk mencapai matlamat ini tetapi, untuk panduan ini, kita akan melihat alat pihak pertama Google.
Kini kita tahu bahawa CWV merupakan faktor kedudukan yang penting. Tetapi bagaimana ia diukur? Jadual di bawah menyenaraikan parameter yang sepatutnya merangkumi nombor CWV optimum untuk pengalaman halaman terbaik.
Sekarang kita tahu apa yang perlu kita ukur dan berapa banyak, kita boleh melihat cara mengukur pengalaman halaman.
Berikut adalah senarai beberapa kaedah yang paling biasa digunakan.
Pilihan pertama yang terbuka kepada penerbit setakat ini adalah yang paling mencabar dari segi teknikal dan bukanlah pilihan yang kami cadangkan untuk dipertimbangkan melainkan anda mempunyai pembangun yang baik untuk membantu pelaksanaannya.
Kita sedang membincangkan tentang pengumpulan data pengguna daripada laman web anda, satu proses yang dikenali sebagai pemantauan pengguna sebenar (RUM), dan kemudian menganalisis keputusan dalam Google Analytics 4 (GA4). Google mempunyai alatan lain, seperti PageSpeed Insights (PSI), yang menggunakan pensampelan data untuk menilai laman web anda. Tetapi jika matlamatnya adalah untuk mendapatkan gambaran pengalaman pengguna yang lengkap untuk laman web anda, maka anda memerlukan data dunia sebenar yang dikumpulkan daripada laman web anda.
Kami menasihatkan penggunaan GA4 untuk tugasan ini atas sebab mudah bahawa Google berhasrat untuk mula "menghentikan" generasi Google Analytics sebelumnya, Universal Analytics (UA), mulai pertengahan 2023.
Sebagai penerbit, anda sepatutnya telah menyediakan akaun GA4 untuk menjangkakan pertukaran tersebut. Jika belum, sila ikuti panduan Google tentang cara menyediakannya buat kali pertama atau cara menambahkannya ke tapak yang sudah mempunyai UA .
Setelah selesai, langkah seterusnya adalah memautkan gudang data BigQuery Google ke GA4 daripada Pentadbir Analitis. Memautkan BigQuery akan membolehkan anda membuat pertanyaan tentang data anda menggunakan SQL. Berikut ialah panduan tentang cara memautkan kedua-duanya .
Dengan langkah-langkah tersebut, kini kita boleh menambah pustaka web-vitals ke laman web anda.
Perpustakaan tersebut, yang merupakan perpustakaan JavaScript modular yang sangat kecil untuk pengumpulan data, tersedia di GitHub.
Pustaka boleh dipasang sama ada daripada repositori dalam talian npm sumber terbuka dengan menjalankan “npm install web-vitals” dalam terminal arahan anda atau melalui<script> tags on a content distribution network (CDN).
Berikut ialah contoh skrip sedemikian:
Setelah pustaka web-vitals dipasang, data pengguna kemudiannya boleh dihantar ke Pengurus Tag Google (GTM), menggunakan tag templat tersuai yang disyorkan oleh Google yang dicipta dan diselenggara oleh Simo Ahava.
Setelah teg dipasang, metrik CWV dan data atribusi yang berkaitan kemudiannya boleh menghantarnya ke GA4.
Sebaik sahaja anda menyediakan analitik untuk menjejaki data GTM, anda akan dapat melihat data peristiwa dalam antara muka BigQuery. Data ini kemudiannya boleh ditanya seperti berikut:
Sebaik sahaja pertanyaan dikembalikan, laporan tersebut sepatutnya kelihatan seperti ini:
Kami benar-benar perlu menekankan sekali lagi bahawa ini adalah penyelesaian pembangun dan sebenarnya, jauh lebih kompleks daripada ini. Walau bagaimanapun, penggunaan penyelesaian ini akan memberikan anda bacaan yang paling tepat tentang prestasi laman web anda.
Untuk penjelasan yang lebih terperinci tentang proses ini, lihat panduan Google untuk melihat CWV dalam GA4 .
Walaupun ini merupakan pendekatan paling tepat untuk memantau CWV, terdapat pendekatan yang lebih mudah untuk menangani masalah ini.
PSI kurang tepat berbanding pendekatan GA/RUM, namun ia sering disebut sebagai salah satu alat terpenting untuk mengukur CWV — berkat kemudahan penggunaan alat ini.
Walaupun ia mungkin hanya menggunakan sampel pengalaman pengguna sebenar yang diambil daripada Laporan Pengalaman Pengguna Chrome (CrUX) sepanjang tempoh 28 hari sebelumnya, PSI menyediakan antara muka pengguna yang ringkas dan senang difahami . Ini bermakna mentafsir data adalah proses yang lebih mudah.
Seperti yang anda dapat lihat dalam contoh kami di bawah, memeriksa laman web Forbes serta-merta memberikan banyak maklumat tentang laman web desktop dan mudah alih penerbit.
PSI menggunakan kategori hijau, kuning dan merah dari atas apabila memberikan gred prestasi Baik, Perlu Penambahbaikan dan Lemah.
Pendekatan persampelan CrUX bermaksud bahawa walaupun penilaian Forbes di atas mengambil kira beberapa pengalaman pengguna laman web di dunia sebenar, ia tidak dapat mengambil kira semua data pengguna laman web tersebut.
Pendekatan persampelan ini menjadi masalah untuk tapak yang lebih kecil, yang kebanyakannya tidak akan dipaparkan dalam data lapangan CrUX.
alat Lighthouse sumber terbuka Google . Lihat contoh di bawah:
Masalah dengan pendekatan ini ialah Lighthouse mengumpul datanya menggunakan tetapan peranti dan rangkaian yang telah ditetapkan, yang tidak akan mencerminkan tetapan pengguna anda. Ini bermakna ia merupakan pengganti yang lemah untuk data sebenar.
GSC ialah alat yang direka untuk menyediakan penerbit dengan pandangan menyeluruh tentang isu CWV laman web mereka, sekali gus membuka pintu kepada pendekatan holistik untuk meningkatkan prestasi laman web tersebut.
Ia melakukan ini dengan mengumpulkan laporan prestasi URLnya berdasarkan status, jenis metrik atau persamaan topikal. Ia tidak mengenal pasti isu dengan halaman individu, sekali gus menafikan peluang untuk melaksanakan pembetulan pada peringkat terperinci.
Di sinilah PSI memainkan peranan. Walau bagaimanapun, perlu diingatkan bahawa laporan halaman individu PSI mungkin berbeza dengan ketara daripada keputusan kumpulan GSC. Ini kerana halaman individu hanyalah salah satu komponen keputusan kumpulan agregat GSC.
Apabila pengguna log masuk ke papan pemuka GSC, mereka akan melihat tab Core Web Vitals di sebelah kiri. Mengklik pada tab ini akan memaparkan laporan CWV mudah alih dan desktop yang berasingan untuk kumpulan URL.
Walaupun terdapat tiga metrik CWV — LCP, FID dan CLS — URL akan menerima gred keseluruhan berdasarkan metrik berprestasi terburuknya untuk peranti tertentu yang turut akan mempengaruhi laporan kumpulan.
Contohnya, jika URL pada mudah alih menerima FID Lemah dan LCP Baik, ia akan dilabelkan sebagai Lemah pada mudah alih.
Sekali lagi, penting untuk diperhatikan bahawa GSC tidak bertujuan untuk pembetulan terperinci. Walau bagaimanapun, ia sesuai untuk penerbit yang mempunyai banyak halaman yang serupa. Contohnya, laman berita mungkin mempunyai reka bentuk dan susun atur yang agak standard untuk halaman artikel mereka yang menggunakan imej sebagai elemen terbesar di atas lipatan. Dalam kes ini, GSC boleh membantu mengenal pasti masalah LCP dengan cepat merentasi pelbagai URL.
Alat terakhir dalam toolkit pengukuran prestasi Google ialah Lighthouse . Alat ini sama sekali berbeza daripada yang sebelumnya kerana ia meniru prestasi pengguna berdasarkan set parameter yang ditetapkan.
Ia tidak menggunakan data lapangan dan oleh itu lebih terhad dari segi kegunaan praktikal. Contohnya, data lapangan dipengaruhi oleh sambungan rangkaian pengguna dan jarak mereka ke pelayan tapak, manakala Lighthouse meniru peranti jarak pertengahan untuk mengumpul data dalam persekitaran terkawal.
Penting juga untuk difahami bahawa skor Lighthouse bukan sekadar gabungan skor CWV. Ia tidak termasuk FID, kerana data makmal secara semula jadinya tidak termasuk interaksi pengguna akhir, sambil menambah jumlah masa sekatan (TBT), indeks kelajuan (SI) dan masa kepada metrik interaktif (TTI) ke dalam campuran. Bagi mereka yang ingin mensimulasikan pengalaman FID di makmal, TBT boleh digunakan sebagai proksi.
Walau bagaimanapun, kami tidak mengesyorkan penggunaan Lighthouse sebagai sumber pengukuran utama. Sebaliknya, ia harus digunakan sebagai alat pendamping bersama PSI untuk membantu menyelesaikan masalah halaman tertentu.
Penerbit yang ingin menggunakan Lighthouse dalam ujian mereka boleh berbuat demikian melalui Chrome Devtools yang dimasukkan terus ke dalam pelayar Chrome, sambungan untuk pelayar tersebut atau di web.dev/measure .
Lighthouse akan mengaudit laman web anda dan memberikan skor daripada 100 dalam empat bidang:
Beginilah rupanya apabila kita meletakkan laman utama kita melalui pilihan web.dev.
Reka bentuk web mudah alih berbeza daripada reka bentuk web desktop tradisional kerana peranti mudah alih mempunyai skrin yang lebih kecil, biasanya menampilkan perkakasan yang kurang berkuasa dan hanya bergantung pada input sentuh.
Laman web mesra mudah alih mengutamakan pengalaman pengguna dengan mengikuti satu set amalan terbaik yang akan kita terokai kemudian. Buat masa ini, cara terbaik untuk menyemak sama ada halaman anda mesra mudah alih adalah dengan Ujian Mesra Mudah Alih .
Memasukkan URL halaman web mesra mudah alih akan mengembalikan hasil berikut:
Halaman yang gagal dalam ujian ini akan dipaparkan dengan beberapa pilihan pembetulan untuk diteruskan. Kita akan bincangkan perkara tersebut kemudian.
Memeriksa sama ada laman web anda mempunyai sambungan yang selamat adalah proses yang sangat mudah, melibatkan membuka pelayar anda dan melihat simbol di sebelah kiri URL dalam bar alamat.
Dalam Chrome, sambungan selamat akan dilambangkan melalui simbol mangga tertutup seperti ini:
Sambungan yang tidak selamat akan mempunyai simbol Maklumat seperti ini:
Menentukan sama ada iklan interstisial anda mengganggu atau tidak semudah memasukkan laman web anda ke dalam alat dalam talian dan menunggu ia mengembalikan tanda semak atau tidak.
Ia memerlukan kajian iklan interstisial dan kotak dialog di tapak anda dan memutuskan sama ada iklan tersebut lulus parameter tertentu.
Anggap parameter ini sebagai soalan, contohnya:
Jika anda menjawab ya kepada mana-mana soalan ini, ia mungkin menunjukkan bahawa iklan atau kotak dialog itu mengganggu.
Sekarang kita telah memahami dengan jelas komponen berbeza daripada empat komponen yang dikira dalam pengalaman halaman, serta cara untuk memantau prestasinya, mari kita teruskan meneroka bagaimana sebenarnya kita boleh meningkatkan isyarat kedudukan tapak web kita
Kita akan melihat CWV terlebih dahulu, kerana penyahpepijatan dan pengoptimuman LCP, CLS dan FID akan memberi impak terbesar kepada keupayaan anda untuk bersaing untuk tempat teratas dalam kedudukan SERP yang dipertikaikan.
Walaupun mesra mudah alih sangat penting untuk tapak yang menyasarkan pengguna mudah alih, penambahbaikan CWV akan meningkatkan prestasi halaman untuk tapak tanpa mengira sama ada ia dilihat pada peranti mudah alih atau desktop.
Menangani HTTPS dan interstisial yang mengganggu telah dibiarkan sehingga akhir kerana ia lebih mudah dan kurang bermanfaat.
Terdapat beberapa pilihan untuk meningkatkan prestasi CWV, yang telah kami pecahkan kepada susunan kepentingan yang kami percaya merit.
Mengoptimumkan Vitals Web Teras bagi mana-mana halaman merupakan spektrum tindakan dan penting untuk mengetahui di mana hendak bermula bagi memaksimumkan sumber anda.
Seperti yang telah kami nyatakan di atas, largest contentful paint (LCP) mengukur berapa lama masa yang diperlukan untuk memuatkan sepenuhnya aset teks atau imej terbesar yang kelihatan di atas lipatan.
Gunakan PSI untuk Mengenal pasti kandungan halaman yang mencetuskan ujian LCP, dengan menuju ke bahagian diagnosis laporan dan mengklik pada “Elemen Cat Kandungan Terbesar”. Inilah yang kami lihat dari laman utama SODP:
Skor LCP yang lemah biasanya boleh dikurangkan kepada sama ada masa tindak balas pelayan yang perlahan, JavaScript dan CSS yang menyekat pemaparan, masa pemuatan sumber atau pemaparan bahagian klien, atau gabungan keempat-empatnya.
Mengoptimumkan halaman anda sebenarnya melibatkan pengoptimuman empat subbahagian berbeza dalam proses pemuatan LCP:
Semua langkah ini mesti dioptimumkan agar anda dapat melihat peningkatan dalam skor LCP anda. Walau bagaimanapun, ini tidak bermakna semua subbahagian adalah sama pentingnya.
Google telah mencadangkan jumlah masa LCP harus dipecahkan dengan TTFB dan masa pemuatan sumber yang masing-masing menyumbang sekitar 40% manakala kelewatan pemuatan sumber dan pemaparan elemen masing-masing harus menyumbang kurang daripada 10%.
Sebaik-baiknya, dua fasa terakhir ini harus sedekat mungkin dengan sifar dan diutamakan berbanding dua fasa yang lain.
Terdapat dua cara untuk membantu mengurangkan kelewatan beban sumber sedekat mungkin dengan sifar:
Kami akan mengatakannya dengan segera, kami mengesyorkan agar anda berunding dengan pembangun web anda sebelum membincangkan pembetulan ini. Ini adalah operasi bahagian belakang dan memerlukan tenaga kerja yang berpengalaman untuk menjadikannya berfungsi seperti yang dikehendaki.
Penemuan sumber
Setiap pelayar web dilengkapi dengan pengimbas pramuat, yang tugasnya adalah untuk membantu penghurai HTML utama pelayar dalam mengesan kandungan halaman.
Walaupun penghurai HTML utama memproses penanda mentah sehingga ia memasuki sumber penyekat — seperti skrip yang tidak mengandungi asinkron atau penangguhan , pengimbas pramuat memainkan peranan yang lebih spekulatif.
Dalam erti kata lain, pengimbas pramuat sedang mencari sumber untuk diambil sebelum penghurai HTML utama sampai kepada mereka dan terus berfungsi walaupun penghurai disekat. Pengimbas pramuat boleh digunakan untuk mencari dan memuatkan LCP sedekat mungkin dengan permintaan halaman awal.
Bagi memastikan sumber LCP boleh ditemui daripada sumber HTML, pembangun mempunyai pilihan khusus aset.
Contohnya, jika LCP ialah imej, maka src atau srcsetnya perlu ada dalam kod sumber. Sementara itu, imej latar belakang CSS boleh dimuatkan terlebih dahulu dengan memasukkan dalam markup HTML atau dalam pengepala. Akhir sekali, fon boleh dimuatkan secara serupa melalui .
Walau bagaimanapun, perlu diingatkan bahawa penggunaan pramuatan untuk mengurangkan masa pemuatan LCP boleh menimbulkan masalah baharu, seperti mengurangkan keutamaan asinkron . Terdapat sebab kami mengesyorkan untuk berbincang dengan pembangun anda tentang perkara ini.
Untuk maklumat lanjut tentang subjek ini, lihat kajian mendalam Google tentang pengoptimuman LCP dan pengimbas pramuat .
Keutamaan sumber
Pelayar cuba memuat turun aset CSS, fon, skrip, imej dan iframe seoptimum mungkin dengan menetapkan keutamaan. Pelayar sangat baik dalam menentukan keutamaan aset, tetapi itu tidak bermakna ia sempurna.
Untuk mengoptimumkan pengutamaan aset, pembangun boleh menggunakan Petunjuk Keutamaan berasaskan penanda untuk memberi isyarat kepada pelayar aset mana yang mempunyai keutamaan yang lebih tinggi. Contohnya, pembangun boleh menggunakan JavaScript dan API Ambil untuk menanda imej LCP dengan fetchpriority=”high” , mempercepatkan metrik CWV tertentu tersebut.
Perlu diingatkan bahawa Petunjuk Keutamaan hanya berfungsi pada pelayar berasaskan Chromium seperti Google Chrome dan Microsoft Edge.
Pembangun anda mungkin telah melaksanakan pemuatan malas untuk aset di bawah lipatan, semak dengan mereka untuk memastikannya, tetapi adalah juga berbaloi untuk mereka menggunakan Petunjuk Keutamaan untuk aset di atas lipatan.
Untuk maklumat lanjut tentang pemuatan keutamaan, kami sangat mengesyorkan anda menyemak panduan Google untuk pemuatan sumber .
Pasukan pembangun gergasi carian itu dapat menggunakan Petunjuk Keutamaan untuk meningkatkan LCP daripada 2.6 saat kepada 1.9 saat dalam ujian Google Flights.
FID menjejaki berapa lama masa yang diperlukan oleh pelayar pengguna untuk mula memproses input pertama — tidak termasuk penatalan dan zum.
Ukuran ini adalah untuk merakam pengalaman pengguna berinteraksi dengan halaman web, yang bermaksud halaman web yang lembap akan mendapat skor yang rendah. Mengekalkan skor FID di bawah 100 milisaat adalah sasarannya.
Daya tindak balas yang lemah biasanya disebabkan oleh penggunaan JavaScript yang berlebihan, yang akan diproses oleh pelayar sebelum input.
Kod yang menggunakan fokus pelayar selama 50 milisaat atau lebih digelar Tugasan Panjang dan dilihat sebagai tanda JavaScript yang semakin membesar. Memecahkan Tugasan Panjang ini kepada bahagian kod yang lebih kecil boleh menangani prestasi lembap dan meningkatkan FID.
Tetapi itu bukanlah satu-satunya perkara yang perlu dibincangkan dengan pembangun anda. Adalah penting untuk membincangkan bagaimana pelaksanaan skrip pihak pertama dan pihak ketiga boleh memperlahankan laman web anda. Pemuatan kod dan ciri secara progresif boleh membantu menangani cabaran yang pertama, manakala pemuatan atas permintaan dan keutamaan pemuatan boleh membantu dengan yang kedua.
Pilihan lain adalah dengan menggunakan pekerja web untuk menjalankan JavaScript di latar belakang dan mengelakkan pelayar anda daripada tersekat semasa memproses skrip.
CLS pada asasnya merupakan ukuran kestabilan visual laman web anda. Jika pelawat anda kehilangan tempat mereka di halaman disebabkan oleh kandungan yang dialihkan untuk memberi laluan kepada iklan dan imej dimuatkan, maka laman web anda akan mendapat markah yang rendah.
Semakin kurang susun atur halaman anda melantun, semakin baik skor CLS anda. Google menilai laman web dengan mempertimbangkan gangguan dalam viewport serta sejauh mana aset melonjak berbanding dengannya.
Meminimumkan perubahan susun atur yang tidak dijangka pada asasnya berkisar tentang menetapkan ruang untuk iklan, imej dan video terbenam.
Ingat src atau srcset yang kita lihat ketika bercakap tentang penemuan sumber? Ini agak penting untuk meningkatkan skor CLS.
Untuk imej statik, tetapkan lebar dan tinggi menggunakan src untuk memberitahu pelayar supaya menyimpan ruang untuk aset yang memuatkan lebih perlahan, sekali gus mengelakkan perubahan susun atur.
Lihat contoh kod daripada Google di bawah:
Imej responsif memerlukan srcset untuk menentukan had lebar dan tinggi maksimum yang boleh dipilih oleh pelayar. Pastikan anda menggunakan imej dengan nisbah aspek yang sama.
Berikut adalah contoh lain:
Apabila berurusan dengan iklan, terdapat beberapa langkah yang boleh anda ambil:
Menempah ruang statik juga dinasihatkan jika anda berhasrat untuk melaksanakan iFrames, kandungan terbenam dan kandungan dinamik, seperti seruan bertindak (CTA).
Apabila pelayar memuat turun dan memaparkan fon web, terdapat kemungkinan sama ada teks tidak bergaya (FOUT) atau teks halimunan (FOIT) akan muncul secara tiba-tiba. Yang pertama berlaku apabila fon sandaran ditukar dengan fon baharu, manakala yang kedua adalah hasil daripada kelewatan paparan fon baharu.
Anda boleh menyelesaikan kedua-dua masalah dengan menggunakan untuk memberitahu pengimbas pramuat supaya mengambil fon web lebih awal. Fon pramuat mempunyai peluang yang lebih besar untuk memenuhi cat pertama.
Terdapat penyelesaian lain dalam panduan penyelesaian masalah CLS serta kajian mendalamnya tentang penggunaan pramuat untuk mencegah FOIT .
Jika anda mencari penambahbaikan kelajuan laman web dan masih menggunakan pilihan pengehosan pelayan tunggal tradisional, maka mungkin sudah tiba masanya untuk mempertimbangkan untuk beralih kepada rangkaian penghantaran kandungan (CDN).
CDN terdiri daripada rangkaian pelayan yang terletak di pusat data yang berbeza di seluruh dunia yang mengedarkan kandungan laman web untuk meningkatkan prestasi. Walaupun pilihan pelayan tunggal — juga dikenali sebagai pengehosan tempatan — dan CDN menyampaikan kandungan laman web kepada pelawat, hanya CDN yang boleh mengambil kira lokasi geografi pengguna dan kemudian memilih pelayan terdekat untuk mengurangkan masa pemuatan.
Walau bagaimanapun, geografi bukanlah satu-satunya kelebihannya, kerana CDN juga lebih bersedia untuk mengurus lonjakan trafik secara tiba-tiba serta sumber pelayan root seperti lebar jalur.
Akhirnya, pengalaman melayari yang lebih pantas menghantar isyarat CWV yang kuat kepada Google. Walaupun Cloudflare merupakan salah satu penyedia CDN paling terkenal di pasaran, terdapat beberapa pesaing serius yang perlu dipertimbangkan .
Terlepas dari penyedia hosting yang anda gunakan, pelayan mereka akan terikat dengan kekangan perkakasan tertentu.
Pelayan sebahagian besarnya mengandungi komponen utama yang sama yang membolehkan komputer riba/desktop anda berfungsi — iaitu CPU dan RAM — yang mengendalikan semua tugas akaun anda. Anda sepatutnya boleh menggunakan papan pemuka penyedia hosting anda untuk menyemak CPU dan RAM yang dipasang pada pelayan anda dan juga boleh meminta sumber tambahan untuk meningkatkan prestasi laman web anda.
Jika anda melihat CPU pelayan anda, maka penting untuk memahami bahawa hanya satu teras sahaja yang digunakan untuk memenuhi permintaan pelawat untuk halaman web. Ini bermakna kelajuan jam teras tunggal yang lebih pantas sentiasa menjadi faktor. CPU berbilang teras dapat memproses berbilang paparan halaman dan perkhidmatan pelayan lain.
Ini satu lagi untuk pembangun anda.
Semak pangkalan data anda secara separa kerap untuk memastikan ia tidak dipenuhi dengan foto dan fail yang tidak digunakan. Memadam fail yang tidak diperlukan akan mengurangkan kesesakan, sekali gus mempercepatkan purata masa muat halaman.
Menggunakan imej yang sangat besar boleh dan akan memperlahankan laman web anda. Berapa besar? Apa-apa sahaja yang melebihi 1MB adalah terlalu besar.
Dan seperti yang kita sedia maklum, masa muat yang lebih perlahan akan menyebabkan kadar lantunan yang lebih tinggi dan menghantar isyarat yang tidak diingini kepada Google.
Bagi mereka yang menggunakan WordPress, terdapat beberapa plugin pengoptimuman imej untuk dipilih yang dapat memudahkan tugas manual yang membosankan. Selain itu, banyak juga yang didatangkan dengan ciri lain seperti pemuatan malas dan saiz semula automatik.
Sama ada sesebuah laman web itu mesra mudah alih atau tidak bergantung kepada sama ada anda telah memudahkan dan menyelaraskan laman web anda untuk pengalaman penyemakan imbas mudah alih.
Pengguna mudah alih berinteraksi dengan halaman secara berbeza dan kurang sabar untuk masa muat yang perlahan dan tapak yang sukar dinavigasi. Jika tapak anda gagal dalam ujian mesra mudah alih yang diterangkan di atas, atau walaupun ia lulus tetapi anda berminat untuk pengoptimuman selanjutnya, mari kita bincangkan beberapa amalan terbaik.
Ini sepatutnya menjadi perhatian utama setiap penerbit. Cara mudah untuk menangani kemudahan penggunaan adalah dengan bertanya kepada diri sendiri soalan seperti:
Jawapan-jawapan ini akan banyak membantu dalam mengenal pasti titik masalah pengguna. Contohnya, anda tidak mahu pengguna anda melaraskan skrin mereka untuk melihat kandungan anda. Anda boleh melihat apa yang kami maksudkan dalam contoh di bawah.
Untuk mengoptimumkan kandungan anda untuk peranti mudah alih, terdapat tiga pilihan pembangunan:
Kami telah memesannya dari segi kemudahan pelaksanaan dan kami mengesyorkan penggunaan reka bentuk responsif, kerana ia adalah yang paling kurang mencabar daripada tiga pilihan tersebut.
Pembangun hanya menambah meta name=”viewport” pada kod sedia ada halaman web
Kelebihannya di sini ialah anda hanya perlu menyelenggara satu laman web, yang boleh dipaparkan dengan mudah merentasi sebarang jenis skrin.
Sebaliknya, reka bentuk dinamik berfungsi dengan menyediakan kod HTML yang berbeza berdasarkan peranti pengguna. Halaman perlu menggunakan pengepala HTTP Vary untuk mengelakkan kod yang salah disampaikan kepada peranti yang salah.
Akhir sekali, terdapat subdomain mudah alih, yang kami tidak cadangkan memandangkan jumlah sumber yang diperlukan untuk dilaksanakan dengan berkesan. Subdomain mudah alih ialah laman web yang berasingan sepenuhnya yang mengasingkan keperluan pengehosan. Untuk memastikan perayap memahami hubungan antara domain dan subdomain, anda perlu memasukkan rel=”canonical” .
Oleh kerana reka bentuk responsif adalah pilihan yang paling mudah, ia adalah pilihan yang kami cadangkan untuk penerbit. Untuk melihat lebih dekat reka bentuk responsif, lihat panduan pelaksanaan Google .
Berikut ialah senarai ringkas pertimbangan teknikal untuk sebarang reka bentuk:
Langkah terakhir ini merupakan cara paling mudah untuk menambah baik pengalaman halaman, tetapi juga sangat membantu dalam meningkatkan ketenangan fikiran pengguna anda.
Beralih kepada HTTPS melindungi dan menyulitkan maklumat pengguna anda, ia juga membantu mencegah serangan Man in the Middle (MitM). Selain itu, mempunyai sijil SSL menghapuskan amaran pelayar tentang kekurangan keselamatan.
Pembekal hosting anda sepatutnya dapat menyediakan keselamatan HTTPS kepada anda, jika tidak, anda mungkin berbaloi untuk mempertimbangkan peralihan kepada pembekal yang menyediakannya. Terdapat beberapa pembekal hosting terkenal yang menyediakan HTTPS secara percuma . Tambahan pula, pembekal hosting yang menyediakan sijil SSL menggunakan perkhidmatan mereka sendiri dan bukannya perkhidmatan luaran, menjadikan prosesnya lebih mudah dan pantas untuk dilaksanakan.
Jika anda ingin meminta dan memasang sijil SSL daripada Pihak Berkuasa Sijil (CA), terdapat empat langkah yang perlu anda ikuti. Ini adalah:
Adalah penting untuk memastikan bahawa ia tidak menjejaskan strategi pendapatan iklan anda semasa memindahkan tapak anda ke HTTPS. Masalahnya ialah HTTPtidak akan berfungsi di tapak yang menggunakan HTTPS.
Kami menasihatkan anda berunding dengan rakan kongsi teknologi iklan anda sebelum membuat sebarang perubahan pada tapak anda.
Untuk maklumat lanjut, sila lihat panduan komprehensif Google mengenai perkara ini.
Iklan interstisial dan kotak dialog yang mengganggu menyukarkan enjin carian untuk memahami kandungan halaman web, yang boleh menjejaskan prestasi SERP.
Adalah lebih baik jika terdapat cara untuk mencipta interstisial yang tidak mengganggu pengalaman pengguna, tetapi itulah tujuan utama iklan sedemikian. Iklan tersebut akan mengambil alih keseluruhan skrin pada waktu rehat kandungan untuk menarik perhatian pengguna.
Oleh itu, penerbit adalah lebih baik menggunakan iklan sepanduk dan bukannya iklan celahan, kerana ia hanya mengambil sebahagian kecil daripada skrin. Lebih baik mengambil risiko kebutaan sepanduk daripada kekecewaan pengguna.
Penerbit boleh menggunakan sepanduk yang disokong pelayar atau sepanduk HTML ringkas yang memautkan ke halaman destinasi CTA.
Kotak dialog juga boleh digunakan untuk kempen promosi, tetapi ini boleh direka bentuk agar tidak mengganggu. Anda perlu memastikan pengguna boleh mengakses kandungan tanpa gangguan.
Tiada jalan pintas sebenar untuk mengoptimumkan pengalaman halaman anda dan adalah penting untuk anda membetulkan perkara di atas. Dengan itu, adalah wajar untuk menunjukkan bahawa walaupun WordPress merupakan platform penerbitan paling popular di dunia, ini tidak semestinya bermakna ia adalah CMS terbaik dalam meningkatkan prestasi CWV.
Melihat Laporan Teknologi CWV menunjukkan bahawa hanya sekitar 29% laman web WordPress mempunyai CWV yang baik, manakala 41% laman web Wix mendapat tanda hijau.
Adalah wajar untuk mempertimbangkan sama ada beralih kepada CMS khusus boleh menambah baik CWV anda secara asli.
Terdapat banyak perkara yang perlu dibincangkan dalam mengoptimumkan pengalaman halaman dan bermula mungkin sedikit sukar. Walau bagaimanapun, adalah penting untuk diingat bahawa anda akan mengalahkan segalanya dengan mengambil satu gigitan pada satu masa.
Menyasarkan skor "Baik" merentasi semua metrik CWV anda tidak diperlukan untuk membantu laman web anda mendaki SERP. Walau bagaimanapun, lebih daripada itu, menetapkan matlamat yang tinggi sedemikian boleh menjadi tidak produktif kerana ia boleh menjadi usaha yang melemahkan semangat.
Sebaliknya, sasarkan kemenangan kecil apabila melibatkan CWV anda, fokus untuk menangani keputusan "Lemah" tanpa terlalu risau tentang bar "Perlu penambahbaikan". Itu boleh berlaku kemudian, apabila anda mempunyai lebih banyak masa dan sumber untuk didedikasikan untuk proses tersebut.
Kita telah pun membincangkan tentang skor CLS Yahoo! JAPAN yang lebih baik, mari kita lihat beberapa laman web lain yang boleh kita pelajari beberapa pengajaran daripadanya.
Akhbar harian India, The Economic Times, yang menawarkan perkhidmatan kepada lebih 45 juta pengguna aktif bulanan, telah mengurangkan skor CLS sebanyak 250% daripada 0.25 kepada 0.09 dan masa LCP sebanyak 80% daripada 4.5 saat kepada 2.5 saat.
Antara Oktober 2020 dan Julai 2021, penerbit tersebut telah mengurangkan skor LCP dalam julat "Lemah" sebanyak 33%, manakala nilai CLS dalam julat "Lemah" menurun sebanyak 65%. Keuntungan ini membolehkan The Economic Times melepasi ambang CWV merentasi keseluruhan asalnya sambil mengurangkan kadar lantunan keseluruhan sebanyak 43%.
Penerbit mencapai matlamat ini dalam beberapa cara, dengan yang pertama adalah mengutamakan keutamaan muat turun aset menggunakan Petunjuk Keutamaan. Ia juga menangani Tugas Panjang, memecahkan sebahagian kod untuk memastikan sumber yang penting untuk pemaparan halaman atas lipatan dimuatkan terlebih dahulu.
Laman web berita UK telah meningkatkan skor CLSnya daripada 0.25 kepada 0.1 , sambil meningkatkan bilangan URL yang menerima gred lulus daripada 57% kepada 72%.
Telegraph menggunakan Chrome DevTools untuk mengenal pasti contoh individu bagi susun atur peralihan.
Sebelum itu, gunakan WebPageTest untuk mencari di mana dalam garis masa perubahan susun atur berlaku.
Dengan data ini, pasukan mula memberi tumpuan kepada mengurangkan perubahan susun atur dengan menangani bidang-bidang ini
Untuk iklan, The Telegraphed mula menempah ruang untuknya dan menggunakan saiz iklan yang paling biasa untuk menentukan dimensi. Ini juga membantu menghalang iklan daripada runtuh apabila dilihat pada tablet.
Pasukan itu menangani isu yang serupa dengan imej sebaris di bahagian atas artikel, yang tidak mempunyai dimensi tertentu.
Telegraph telah membuat pelarasan lain, seperti mengalihkan pengepala ke bahagian atas markup dan menggunakan ruang letak untuk video terbenam, tetapi akhirnya menggambarkan proses itu sebagai "agak mudah" sambil masih mempunyai impak yang ketara.
Meningkatkan pengalaman halaman tidak perlu terlalu membebankan. Ukur empat tonggak pengalaman halaman dan kemudian tentukan sumber yang boleh anda peruntukkan untuk meningkatkan hasil anda.
Jika anda penerbit yang lebih kecil, pengimbangan sumber adalah penting dan kami mengesyorkan untuk mengenal pasti hasil yang agak mudah untuk projek pertama anda.
Melihat pendekatan Telegraph, mereka memberi tumpuan kepada satu aspek CWV dan bukannya ketiga-tiganya dan membuat penambahbaikan yang ketara. The Economic Times memberi tumpuan kepada dua daripada tiga aspek tersebut untuk memberikan beberapa hasil yang mengagumkan.
