Content Marketing Tallace-tallacen Neman Biya da Kwayoyin Halitta

Menene Preloading, kuma Ta Yaya Yayi Tasirin Mahimmancin Yanar Gizon Yanar Gizo da Ƙwarewar Mai Amfaninku?

Douglas KarrOct 16, 2024

5 minti na karanta

Bisa lafazin Shafin Farko na Google (GCS), wani yanki na ingantawa da nake da shi Martech Zone yana inganta aikin wayar hannu na kamar yadda yake Mahimman Bayanan Yanar Gizo (CWV), saitin ma'auni da Google ke amfani da shi don kimanta aikin shafi da ƙwarewar mai amfani. Gidan yanar gizona yana amfani da haruffa na al'ada, kuma na lura cewa akwai jinkiri sosai wajen loda shafin akan na'urorin tafi da gidanka saboda ana loda waɗancan rubutun a makare ta hanyar. CSS. Na sami damar inganta aikin wayar hannu ta ta hanyar shigar da fonts dina.

Teburin Abubuwan Ciki

Menene Preloading?

Preloading wata dabara ce mai ƙarfi da ake amfani da ita wajen haɓaka gidan yanar gizo don haɓaka aikin ɗorawar gidan yanar gizo ta hanyar ba da umarni mai bincike don ba da fifiko na musamman. Ta hanyar gaya wa mai binciken don loda wasu kadarorin da wuri fiye da yadda ake so, preloading yana haɓaka ƙwarewar mai amfani kuma yana iya tasiri sosai.

Yaya Preloading Tasirin Mahimmancin Yanar Gizon Yanar Gizo?

Mahimman Bayanan Yanar Gizo ya ƙunshi manyan ma'auni guda uku:

Mafi Girma Fenti Mai Ciki (Lcp) Yana auna yadda sauri babban abun ciki ke lodawa akan shafin yanar gizon. Ya kamata ya faru a cikin dakika 2.5 na lokacin shafi na farko yana farawa. Preloading na iya taimakawa haɓaka LCP ta rage lokacin mahimman abun ciki (kamar hoton gwarzo ko babban rubutu) yana ɗauka don bayyana.
Jinkirin Shigar da Farko (FID): Yana auna lokacin da mai amfani ya fara hulɗa da rukunin yanar gizon ku (kamar danna maballin) da kuma lokacin da mai bincike ya amsa. FID ya kamata ya zama ƙasa da miliyon 100. Yin lodawa a kaikaice yana fa'ida FID ta hanyar tabbatar da cewa albarkatun da ake bukata sun shirya don mu'amala, tare da hana mai bincike shiga cikin sarrafa abubuwan jinkiri.
Juyin Layout ɗin Tari (CLS): Yana auna daidaiton gani na shafi. Shafuka yakamata su sami makin CLS ƙasa da 0.1. Duk da yake preloading baya shafar CLS kai tsaye, yana rage damar jinkirin kadarorin da ke haifar da sauye-sauyen shimfidawa, inda abubuwan shafi ke motsawa ba zato ba tsammani yayin da suke lodawa.

Fahimtar Kashe-Kashewa

Wasu albarkatu, kamar CSS da JavaScript, na iya zama toshewa. Dole ne mai lilo ya loda da sarrafa waɗannan fayiloli kafin ya nuna wani abu akan allon. Misali, idan babban fayil ɗin CSS na shafi yana toshewa, mai binciken zai jira ya nuna shi har sai ya gama zazzagewa da sarrafa wannan fayil ɗin CSS. Wannan lokacin jira na iya jinkirta shafin Fenti na Farko, ko lokacin da abun ciki ya fara bayyana akan allon. Ta hanyar shigar da albarkatun toshewa, zaku iya rage wannan lokacin jira kuma ku sanya shafinku ya bayyana cikin sauri.

Yaushe Ya Kamata Ka Yi Amfani da Preloading?

Preloading yana da tasiri sosai lokacin da takamaiman kadarorin ke da mahimmanci ga farkon ma'anar shafinku. Yana da amfani a yi amfani da preloading lokacin da:

Mahimman abun ciki na sama-da-ninki ya dogara da takamaiman kadarori, kamar hoton gwarzo, maɓalli na aikin JavaScript, ko manyan haruffa. Wannan yana tabbatar da cewa masu amfani suna ganin babban abun ciki nan da nan.
Manyan hotuna ko hotuna na baya wanda ya bayyana a saman shafin dole ne ya yi sauri da sauri don kada masu amfani su kalli wuraren da ba komai ko masu wuri ba.
Kundin rubutu na yau da kullun waɗanda ke da mahimmanci ga alamar alama da ƙwarewar mai amfani, suna taimakawa wajen guje wa a Filashin Rubutun da ba a yi masa salo ba (Gyara) inda rubutun ya fara nunawa a cikin rubutun baya har sai font na al'ada ya yi lodi.
Mabuɗin rubutun da zane-zane da ake buƙata don ainihin ayyukan shafin ana loda su da wuri don gujewa sanya-tarewa jinkiri.

Fa'idodi da rashin amfani da Preloading

Duk da yake preloading kayan aiki ne mai ban mamaki, ana iya amfani da shi kuma yana haifar da wasu batutuwa:

Abũbuwan amfãni

Ingantacciyar Saurin lodi: Ta hanyar shigar da mahimman kadarori, kuna rage lokacin da mahimman abun ciki ya bayyana, haɓaka ma'aunin Fenti Mafi Girma (LCP).
Ingantaccen Experiencewarewar Masu Amfani (UX): Saurin lodawa da sauri don mahimman albarkatun haɓaka ƙwarewar mai amfani ta hanyar rage lokacin jira don bayyane, abun ciki mai mu'amala.
SEO amfanin: Tunda Core Web Vitals sune ma'auni mai daraja, haɓaka waɗannan ma'auni na iya tasiri ga martabar injin bincike, musamman ga masu amfani da wayar hannu.

disadvantages

Ƙara Amfani da Albarkatu: Preloading yana cinye bandwidth, wanda zai iya zama mara inganci idan an riga an shigar da kadarorin ba dole ba ko kuma ba a buƙata nan da nan. Yana da mahimmanci a gano da ba da fifiko kawai mafi mahimmancin albarkatun.
Damar Wuce-yawacen Browser: Idan an riga an loda albarkatun da yawa, mai binciken na iya zama mai cike da buƙatu, wanda zai iya jinkirta wasu mahimman kadarorin. Idan mai binciken yana kokawa don sarrafa duk albarkatun da aka riga aka ɗora, wannan na iya haifar da tsawon lokacin lodi gabaɗaya.
Rikici a cikin aiwatarwa: Ƙayyade waɗanne albarkatun da suka cancanci yin lodi yana buƙatar fahimtar yadda shafin ke lodawa da waɗanne abubuwa ne ke toshewa. Yana buƙatar gwadawa a hankali don daidaita abubuwan da aka fi dacewa da lodin albarkatun ba tare da mamaye mai binciken ba.

Yadda Ake Rubuce Umarnin Shigarwa na Kowane Nau'in Kadari

Kadarori daban-daban suna da buƙatu na musamman idan ana maganar yin lodi. Anan ga jagora don saita preloading don nau'ikan albarkatu daban-daban:

1. Fonts

Sau da yawa ana toshe fonts na al'ada, musamman idan yana da mahimmanci ga abun ciki na sama-ninki. Masu amfani za su iya samun Filasha na Rubutun da ba a sawa ba (Gyara) lokacin da fonts suka yi lodi a hankali, inda fonts na baya baya nunawa har sai font na al'ada ya loda. Kuna iya hana wannan ta amfani da <link rel="preload"> Tag tare da halayen da suka dace:

<link rel="preload" href="/fonts/my-custom-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Ta hanyar shigar da fonts, kuna tabbatar da cewa suna samuwa da zaran an buƙata, hana sauye-sauyen shimfidawa da haɓaka ƙwarewar mai amfani. A cikin WordPress, Na sami damar shigar da fonts ɗin da aka shirya akan sabar tawa ta haɗa da aikin mai zuwa functions.php a cikin taken yara.

Preload fonts from the site
function mtz_preload_fonts() {
    $child_theme_uri = get_stylesheet_directory_uri();

    // Preload each font on a separate line
    echo '<link rel="preload" href="' . $child_theme_uri . '/fonts/opensans_regular/OpenSans-Regular-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">';
    echo '<link rel="preload" href="' . $child_theme_uri . '/fonts/opensans_semibolditalic/OpenSans-SemiboldItalic-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">';
    echo '<link rel="preload" href="' . $child_theme_uri . '/fonts/muli_bold/muli-bold-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">';
}
add_action('wp_head', 'mtz_preload_fonts');

2. images

Preloading yana da kyau don hotuna masu mahimmanci, kamar hoton gwarzo a saman shafin. Don shigar da hotuna, yi amfani da <link rel="preload"> yi alama tare da as="image":

<link rel="preload" href="/images/hero-image.jpg" as="image">

Koyaya, iyakance preloading zuwa mahimman hotuna kawai. Loda hotuna da yawa a lokaci ɗaya na iya yin lodin mai binciken, yana jinkirta ɗaukar shafin.

3. CSS Stylesheets

Fayilolin CSS galibi suna toshewa ta tsohuwa, ma'ana dole ne mai lilo ya zazzage kuma yayi amfani da su kafin ya nuna kowane abun ciki. Don taimakawa wajen ba da fifikon babban rubutun salo, zaku iya riga-kafi da shi:

<link rel="preload" href="/css/main-styles.css" as="style">

Idan kun riga kun loda CSS, ku tuna kun haɗa na yau da kullun <link rel="stylesheet"> alama don dalilai na fadowa tun da mai bincike bazai yi amfani da rubutun salo da aka riga aka ɗora ba nan da nan.

4. Fayilolin JavaScript

Preloading JavaScript yana da amfani ga rubutun da dole ne a aiwatar da su nan da nan don tabbatar da ingantaccen aikin shafi. Yi la'akari da cewa fayilolin JavaScript kuma na iya zama toshewa, don haka yana da kyau kawai a fara loda mahimman rubutun:

<link rel="preload" href="/js/critical-script.js" as="script">

A guji shigar da fayilolin JavaScript waɗanda basu da mahimmanci don aikin shafin farko. Idan mai lilo ya cika makil da rubutun toshewa, wannan na iya rage saurin aiwatarwa.

Kammalawa

Preloading wata dabara ce mai mahimmanci don haɓaka aikin ɗorawa gidan yanar gizo da haɓaka Core Web Vitals, musamman ma'aunin LCP. Lokacin da aka yi amfani da shi da tunani, ƙaddamar da mahimman albarkatu yana tabbatar da cewa mahimman abubuwan ciki suna ɗaukar nauyi cikin sauri, yana haifar da ingantacciyar ƙwarewar mai amfani da yuwuwar fa'idodin SEO. Koyaya, yin amfani da preloading fiye da kima na iya ja da baya, rage jinkirin shafi da ɓata albarkatu.

Mayar da hankali kan ƙaddamarwa kawai mafi mahimmancin kadarorin sama-nayawa, kamar fonts, hotunan jarumai, da mahimman fayilolin CSS ko JavaScript. Ta hanyar fahimtar wadanne albarkatu ke toshewa da aiwatar da ƙaddamarwa da dabaru, za ku iya sa gidan yanar gizonku ya yi lodi da sauri, ƙirƙirar ƙwarewar mai amfani mai sauƙi da haɓaka hangen nesa na rukunin yanar gizonku a cikin sakamakon bincike.