Home-theater-designers
Sa mabilis na digital na mundo ngayon, ang pagkakaroon ng website na may mataas na pagganap ay mahalaga. Ang isang kritikal na aspeto nito ay ang pagtiyak na mahusay na naglo-load ang iyong mga larawan. Inaasahan ng mga user ang isang maayos at mabilis na karanasan sa pagba-browse, at ang artikulong ito ay magpapakita sa iyo kung paano makamit iyon.
MUO Video ng araw MAG-SCROLL PARA MAGPATULOY SA NILALAMAN
Tuklasin mo ang konsepto ng tamad na pag-load ng mga larawan at matutunan kung paano ito ipatupad gamit ang HTML at JavaScript gamit ang Intersection Observer API.
Ano ang Lazy Loading?
Inaantala ng tamad na pag-load ang pag-load ng mga elemento, tulad ng mga larawan, hanggang sa kinakailangan. Sa halip na i-load ang lahat ng mga larawan kapag nag-load ang isang pahina, nilo-load lang ng tamad na pag-load ang mga larawang kasalukuyang nakikita o malapit sa lugar ng pagtingin ng user. Ang pagpapahusay na ito sa pagganap ng website ay nagpapababa sa paunang oras ng pagkarga at nakakatipid ng bandwidth.
Bakit Gumamit ng Lazy Loading?
Mayroong ilang mga nakakahimok na dahilan upang gumamit ng tamad na pag-load ng mga larawan sa iyong website, gaya ng:
- Mas Mabilis na Paunang Pag-load ng Pahina : Pinipigilan ng tamad na pag-load ang lahat ng mga imahe mula sa paglo-load nang sabay-sabay, na binabawasan ang unang oras ng pag-load ng pahina. Maaaring magsimulang makipag-ugnayan ang mga user sa iyong site nang mas maaga, na humahantong sa mas magandang karanasan ng user.
- Pinahusay na Pagtugon sa Pahina : Sa pamamagitan ng paglo-load ng mga larawan habang nag-i-scroll ang mga user, nananatiling tumutugon at tuluy-tuloy ang website, tinitiyak ang maayos na pag-scroll at pag-navigate nang hindi na kailangang maghintay para mag-load ang lahat ng nilalaman.
- Bandwidth Savings : Ang tamad na pag-load ay nakakatipid ng bandwidth, na ginagawa itong perpekto para sa mga mobile user at sa mga mabagal na koneksyon sa internet. Maaari itong bawasan ang pagkonsumo ng data ng iyong website , na nakikinabang sa mga gumagamit.
- Mga Benepisyo sa SEO : Mga search engine tulad ng Google isaalang-alang ang bilis ng pahina bilang isang kadahilanan sa pagraranggo. Lazy loading pwede positibong nakakaapekto sa pagganap ng SEO ng iyong site sa pamamagitan ng pagpapabuti ng oras ng paglo-load.
Ngayong naiintindihan mo na kung bakit kapaki-pakinabang ang lazy loading, tuklasin natin kung paano ito ipatupad.
Pagpapatupad ng Lazy Loading: Ang HTML Markup
Upang makapagsimula, kakailanganin mong baguhin ang iyong HTML code upang maisama ang loading='lazy' katangian sa iyong mga tag.
<body>
<main>
<section>
<img src="./image-one-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-two-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-three-high.jpg" alt="" loading="lazy" />
</section>
</main>
</body>
Ang naglo-load Ang attribute ay ginagamit sa HTML upang kontrolin ang pag-load ng mga elemento sa isang web page. Kapag nagtakda ka loading='lazy' nasa tag, sinasabi nito sa browser na ipagpaliban ang pag-load ng mapagkukunan hanggang sa kailanganin ito.
Sa ngayon, ganito ang hitsura ng page:
Pagpapatupad ng Lazy Loading: Ang Pagpapatupad ng JavaScript
Upang dalhin ang iyong tamad na pag-load sa susunod na antas, gamitin ang Intersection Observer API. Hinahayaan ka ng API na ito na manood kapag ang isang elemento ay pumasok o lumabas sa viewport.
Ang katwiran sa likod ng paggamit ng Intersection Observer para sa tamad na pag-load ng mga larawan ay simple: kapag nag-load ang page, kumukuha ito ng mas mababang kalidad na larawan.
kung paano manuod ng youtube kasama ang mga kaibigan
Pagkatapos, habang nakikita ang larawang ito sa loob ng viewport, pinapalitan ito ng JavaScript para sa mas mataas na kalidad na bersyon. Upang maisagawa ito, baguhin ang iyong HTML.
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-one-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-one-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-two-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-two-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-three-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-three-high.jpg"
/>
</section>
Dito, ang pangunahing pinagmumulan ng larawan ay ang mababang kalidad na bersyon at ang mataas na kalidad na larawan ang pangalawang pinagmumulan. Ang pahina ay ganito ang hitsura:
Susunod, piliin ang lahat ng mga larawang nais mong i-lazy-load:
"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
Pagkatapos nito, lumikha ng isang IntersectionObserver bagay.
const observer = new IntersectionObserver();
Pagkatapos ay ipasa ang mga entry (isang hanay ng IntersectionObserverEntry mga bagay, na kumakatawan sa mga elementong inoobserbahan at ang kanilang intersection sa viewport) at tagamasid (ang IntersectionObserver halimbawa mismo).
const observer = new IntersectionObserver((lazyImages, observer) => { });
Susunod, tingnan kung may mga intersection at ipagpalit ang mababang kalidad na larawan para sa mataas na kalidad sa tuwing nagsa-intersect ang elementong iyon.
const observer = new IntersectionObserver((lazyImages, observer) => {
lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
lazyImage.src = lazyImage.dataset.src; // Swap the image source
observer.unobserve(lazyImage); // Stop observing this image
}
});
});
Panghuli, simulan ang pagmamasid para sa bawat elemento.
// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });
At kasama nito, nagpatupad ka ng tamad na pag-load gamit ang JavaScript.
Mga Pagsasaalang-alang sa Lazy Loading
Kapag isinasama ang tamad na pag-load, nagiging mahalaga na isaalang-alang ang mga sumusunod na aspeto:
- Accessibility : Upang matiyak ang pagiging naa-access, magbigay ng alternatibong teksto para sa mga larawang may lahat katangian. Ang impormasyong ito ay nagsisilbing reliance point para sa mga screen reader.
- Pagkakatugma ng Browser : Bago ang pagpapatupad ng lazy loading, kumpirmahin ang pagiging tugma nito sa iba't ibang mga browser. Hindi lahat ng browser ay nagpapalawak ng suporta para sa feature na ito. Sa ilang partikular na pagkakataon, ang pagsasama ng isang polyfill ay maaaring maging kinakailangan, lalo na para sa mga mas lumang browser. Isang tool tulad ng Maaari ko bang gamitin ay isang mahalagang mapagkukunan para sa pagsusuri ng pagiging tugma ng browser.
- Pagsubok : Ang komprehensibong pagsubok ng lazy loading na pagpapatupad sa isang spectrum ng mga device at mga dimensyon ng screen ay nagpapalagay ng pinakamahalaga.
Pagpapahusay sa Bilis ng Website at Karanasan ng User
Kapag isinama mo ang tamad na pag-load para sa mga larawan sa iyong website, maaari mong pabilisin ang iyong site at pagbutihin ang karanasan ng user. Ang mas mabilis na oras ng paglo-load at mas maayos na mga karanasan sa pagba-browse ang gusto ng mga user, at ang diskarteng ito ay naghahatid ng pareho.
Dagdag pa, masisiyahan ka sa mas mahusay na SEO at makatipid sa paggamit ng bandwidth. Kaya, bakit maghintay? Simulan ang pag-optimize ng iyong website ngayon gamit ang prangka ngunit makapangyarihang paraan na ito.