Desain web

Nyepetake Kaca Paling Alon Kanthi Prefetching

Ngapikake kacepetan situs e-dagang sampeyan kudu dadi prioritas kanggo 2020. Nalika peningkatan kinerja bisa uga mbutuhake wektu lan larang, ana perbaikan cepet sing nggawe bedane gedhe.

Kacepetan kaca penting, utamane amarga tim Google Chrome ngrencanakake ngisinake situs loading alon ing taun iki kaya sing diterangake ing November 2019 ing Blog Chromium:

Ing mangsa ngarep, Chrome bisa ngenali situs sing biasane mbukak cepet utawa alon kanggo pangguna kanthi badging sing jelas. Iki bisa njupuk sawetara formulir lan kita rencana kanggo eksprimen karo macem-macem opsi, kanggo nemtokake kang menehi nilai paling kanggo kita kedhaftar.

Badging dimaksudake kanggo ngenali nalika situs digawe kanthi cara sing umume alon, ndeleng latensi muatan historis. Salajengipun, kita bisa nggedhekake iki kanggo nyakup ngenali nalika kaca bisa dadi alon kanggo pangguna adhedhasar kahanan piranti lan jaringan.

Google ngandika bakal ngenali situs loading alon. Sumber: Blog Chromium.

Google ngandika bakal ngenali situs loading alon. Sumber: Blog Chromium.

Ing artikel sadurunge, aku wis mbahas ide kanggo nambah kinerja, kayata caching HTML lan ngisolasi sumber daya loading alon. Ing kirim iki, aku bakal nerangake carane nemtokake kaca sing paling alon lan aplikasi fix prasaja kanggo nyepetake.

Google Analytics nglaporake kaca sing paling alon ing sawijining situs lan carane pangguna bisa nyedhaki. Kita bisa nuntun browser web supaya "prefetch" kaca kasebut supaya nalika pangguna ngeklik, mbukak kanthi cepet.

Mangkene prosese.

Slow Pages

Ing Google Analytics, bukak Prilaku > Kacepetan Situs > Wektu Kaca. Pilih tampilan data (grid) lan urut kolom miturut "Rata-rata. Wektu Muat Halaman."

Kanggo ndeleng kaca sing mbukak alon ing Google Analytics, pindhah menyang Prilaku> Kacepetan Situs> Wektu Kaca. width=”975″ dhuwur=”505″ sizes=”(max-width: 975px) 100vw, 975px” />Kanggo ndeleng kaca sing mbukak alon ing Google Analytics, pindhah menyang Prilaku > Kacepetan Situs > Wektu Kaca. Klik gambar kanggo nggedhekake.

Iki bakal nuduhake kaca sing paling alon dhisik. Kolom pungkasan, "Nilai Kaca," normalake revenue sing digandhengake karo saben kaca kanthi nganggep e-commerce sing ditingkatake diaktifake. Iki minangka metrik sing apik kanggo para pedagang supaya prioritas kaca kanggo fokus.

Sabanjure, kita kudu ngerti dalan internal sing ndadékaké pengunjung menyang kaca sing paling alon. Kita bakal nggawe laporan khusus kanggo iki. Nanging, pisanan, ayo mirsani path pangguna khas ing Prilaku > Alur Prilaku.

Ing kene kita bisa ndeleng dalan sing paling populer kanggo pengunjung. (Laporan kasebut uga bisa mbantu ngerteni kaca endi sing ngasilake pengunjung sing paling gedhe.)

Pindhah menyang Behavior > Behavior Flow kanggo ndeleng path pangguna sing khas. width=”975″ dhuwur=”488″ sizes=”(max-width: 975px) 100vw, 975px” />menyang Prilaku > Alur Prilaku kanggo ndeleng path pangguna sing khas. Klik gambar kanggo nggedhekake.

Kanggo nggawe laporan khusus, pindhah menyang Kustomisasi > Laporan Kustom > Laporan Kustom Anyar. Temtokake judhul kanggo laporan - Aku wis nggunakake "Slow Page Paths" ing gambar ing ngisor iki - lan pilih minangka Dimensi "Previous Page Path," "Page," lan "Exit Page." Kanggo Metrik, pilih "Nilai Kaca" lan "Rata-rata. Wektu Muat Halaman."

Gawe laporan khusus ing Kustomisasi> Laporan Kustom> Laporan Kustom Anyar. width=”975″ dhuwur=”488″ sizes=”(max-width: 975px) 100vw, 975px” />Nggawe laporan adat ing Kustomisasi > Laporan Kustom > Laporan Kustom Anyar. Klik gambar kanggo nggedhekake.

Kita entuk laporan kaya ing ndhuwur (ing Prilaku > Kacepetan Situs > Wektu Halaman), nanging iki kalebu kaca sadurunge ing sesi pangguna sing khas.

Laporan khusus ing Google Analytics kalebu kaca sadurunge ing sesi pangguna sing khas.

Laporan khusus ing Google Analytics kalebu kaca sadurunge ing sesi pangguna sing khas. Klik gambar kanggo nggedhekake.

Langkah sabanjure yaiku ngetrapake konsep sing kuat: petunjuk browser web.

Petunjuk Browser Web

"Petunjuk" minangka pandhuan kanggo browser web kanggo mbukak sumber daya kaca lan pranala luwih dhisik. Proses kasebut ningkatake kacepetan kaca. Ora saben browser ndhukung saben pitunjuk. Telu sing paling populer yaiku "preloading," "prefetching," lan "prerendering."

Preloading mbutuhake kode ing HEAD dokumen HTML, kayata:

Petunjuk preloading minangka arahan sing meksa browser ngundhuh sumber daya sadurunge nemokake ing dokumen kasebut. Conto apik yaiku font ing file CSS sing didhelikake. Tinimbang ndownload browser lan ngolah file CSS banjur fon, arahan preloading ndownload font ing latar mburi, supaya kasedhiya nalika dibutuhake.

Kanggo luwih lengkap babagan preloading lan browser sing ndhukung, deleng kiriman saka CanIUse.com.

Prefetching mbutuhake kode ing HEAD dokumen HTML, kaya iki:

Petunjuk iki ngidini browser web njupuk sumber daya sing bisa uga dibutuhake nalika pangguna njupuk tindakan sabanjure. Browser bakal nindakake mung sawise nerjemahake kaca saiki yen ana bandwidth sing cukup.

Aku bakal nggedhekake prefetching ing kirim iki kanggo nyepetake kaca alon.

Sinau luwih lengkap babagan prefetching lan browser sing ndhukung ing kene.

Prerendering biyen dadi arahan sing kuat, nanging saiki wis ora digunakake. Iku ngidini kanggo prefetching sumber ing kaca target lan, uga, rendering. Sampeyan mbutuhake kode kaya iki ing HEAD dokumen HTML:

Prerendering dadi intensif banget sumber daya nalika, contone, Chrome nemoni petunjuk prerendering ing sawijining kaca lan nindakake "Ora Ana Prefetch Negara," sing padha nanging ora nglakokake JavaScript utawa rendering sing gegandhengan.

Sinau luwih lengkap babagan prarendering lan browser sing isih ndhukung ing kene.

Prediksi Urutan Cepet

Kita bisa kanthi manual nglebokake pitunjuk kanggo njaluk browser kanggo prefetch kaca mbesuk sing paling alon. Kita ngerti kaca endi kanggo nyelehake link iki saka data Google Analytics, sing diterangake ing ndhuwur.

Laporan sampelku, Nanging, ngenali kira-kira 20,000 urutan potensial. Nglebokake pitunjuk ing kabeh mau bakal entuk akeh wektu!

Nanging kita bisa mbangun model nggunakake kaca sadurunge lan kaca saiki sing prédhiksi kaca sabanjuré pangguna kamungkinan kanggo klik. Banjur kita bisa prefetch.

Kita bisa nglatih jaringan saraf sing canggih, kaya sing dak jelasake ing artikel pungkasan. Nanging cara sing luwih cepet lan prasaja yaiku Pohon Prediksi Kompak, sawijining konsep sing dikembangake dening telung profesor ilmu komputer. Saka kertas kasebut:

Diwenehi sakumpulan urutan latihan, masalah prediksi urutan kalebu nemokake unsur sabanjure saka urutan target kanthi mung mirsani item sadurunge. Jumlah aplikasi sing ana gandhengane karo masalah iki akeh. Iki kalebu aplikasi kayata prefetching kaca web, rekomendasi produk konsumen, ramalan cuaca lan ramalan pasar saham.

Kanggo ngleksanakake, aku bakal nggunakake JavaScript saka repositori Github.

Iku relatif gampang. Lebokake data latihan, nemtokake target kanggo prediksi, lan entuk pertandhingan sing paling apik.

Conto data latihan saka laporan khusus Google Analytics bakal katon kaya:

let data = [['/page1-sadurunge', '/kaca-saiki1', '/kaca-alon-sabanjure'], ['/kaca-sadurunge1', '/kaca-saiki2', '/sabanjur-alon- page2'], ['/page2-sadurunge', '/kaca-saiki3', '/kaca-alon-sabanjure'], ['/kaca-sadurunge3', '/kaca-saiki', '/sabanjur-alon- page1'], ['/page4-sadurunge', '/kaca-saiki1', '/kaca-alon-sabanjure'], ['/kaca-sadurunge-2', '/kaca-saiki2', '/sabanjur-alon- page3'], ['/page3-sadurunge', '/kaca-saiki3', '/page2-next-slow'], ]

Lan ing kene kita bakal nyoba kaca target:

let target = [['/previous-page2', '/current-page3']];

Lan pungkasane, prediksi bakal dadi:

console.log(prediksi) // [['/next-slow-page3]']

Putaren It Together

Kanggo tetep prasaja, kita kudu nyakup file JavaScript ing kabeh kaca (utawa kaca sing ngarah menyang kaca sing pengin ditambahake). Skrip bakal entuk path referrer kaca saiki, path URL saiki, lan prédhiksi kaca sabanjure sing paling mungkin diklik pangguna.

Banjur kita mung nglebokake siji utawa luwih petunjuk browser kanthi prediksi.

link rel="prefetch" href="https://wp2wp.com/next-slow-page3

Kaca conto ing Github duwe kode sing nindakake.

Baris iki ngimpor file perpustakaan.

script src="index.js"

Aku nemoni masalah karo kode asli ing repositori, nanging thanks kanggo David Sottimano, konsultan marketing digital, aku bisa ngowahi file supaya bisa digunakake minangka script siji. Punika file index.js kang.

Aku uga kudu matur nuwun marang Michelle Robbins, teknolog lan insinyur pemasaran, sing ngenalake aku menyang Pohon Prediksi Kompak ing webinar anyar.

Artikel web

0 komentar
Umpan Balik Inline
Ndeleng kabeh komentar
Bali menyang ndhuwur tombol