Uurige piltide ja iframe'ide laisa laadimise eeliseid ja rakendamist CSS-i abil, et parandada veebisaidi jÔudlust, SEO-d ja kasutajakogemust. See pÔhjalik juhend hÔlmab kaasaegseid CSS-i tehnikaid ja parimaid praktikaid.
CSS Lazy Rule: Piltide ja Iframe'ide laisa laadimise kasutamine veebilehe jÔudluse optimeerimiseks
Pidevalt arenevas veebiarenduse maailmas on veebisaidi jĂ”udluse optimeerimine ĂŒlimalt tĂ€htis. Aeglaselt laadiv veebisait vĂ”ib pĂ”hjustada pettunud kasutajaid, kĂ”rgemat pĂ”rkemÀÀra ja lĂ”ppkokkuvĂ”ttes negatiivset mĂ”ju teie otsingumootori jĂ€rjestusele. Ăks vĂ”imas tehnika jĂ”udluse suurendamiseks on laisk laadimine. See juhend uurib, kuidas rakendada piltide ja iframe'ide jaoks laisa laadimist CSS-i abil, pakkudes praktilisi nĂ€iteid ja parimaid praktikaid ĂŒlemaailmsele publikule.
Mis on laisk laadimine?
Laisk laadimine on tehnika, mis lĂŒkkab ressursside (nagu pildid ja iframe'id) laadimise edasi, kuni neid vajatakse. TeisisĂ”nu, selle asemel, et laadida kĂ”ik ressursid veebilehel, kui leht esmakordselt laaditakse, laaditakse ainult need ressursid, mis on kasutaja vaatevĂ€ljas nĂ€htavad. Kui kasutaja lehte allapoole kerib, laaditakse nĂ”udmisel tĂ€iendavaid ressursse. See lĂ€henemisviis vĂ”ib oluliselt vĂ€hendada lehe esialgset laadimisaega, parandada kasutajakogemust ja sÀÀsta ribalaiust.
Laisa laadimise eelised
- Paranenud lehe laadimisaeg: Laadides esialgu ainult nÀhtavaid ressursse, vÀheneb lehe esialgne laadimisaeg, mis viib kiirema veebisaidi kogemuseni.
- VÀhendatud ribalaiuse tarbimine: Laisk laadimine hoiab Àra ressursside tarbetu allalaadimise, mida kasutaja isegi ei pruugi nÀha, sÀÀstes ribalaiust nii veebisaidile kui ka kasutajale. See on eriti oluline piiratud andmepakettidega kasutajatele.
- TĂ€iustatud kasutajakogemus: Kiiremad lehe laadimisajad ja sujuvam kerimine aitavad kaasa paremale ĂŒldisele kasutajakogemusele. Kasutajad lahkuvad vĂ€hem tĂ”enĂ€oliselt veebisaidilt, mis laaditakse kiiresti.
- Paranenud SEO: Otsingumootorid eelistavad kiirema laadimisajaga veebisaite. Laisk laadimine vÔib aidata parandada teie veebisaidi SEO jÀrjestust.
- Madalamad serverikulud: VÀhendatud ribalaiuse tarbimine vÔib viia madalamate serverikuludeni, eriti veebisaitide puhul, millel on suur hulk pilte ja iframe'e.
- Parem ressursside kasutamine: Laisk laadimine optimeerib ressursside kasutamist, laadides neid ainult siis, kui neid vajatakse.
CSS Laisk laadimine: Kaasaegne lÀhenemisviis
Kaasaegsed brauserid toetavad nĂŒĂŒd HTML-is natiivset laisa laadimist, kasutades loading atribuuti. Seda atribuuti saab rakendada <img> ja <iframe> elementidele, muutes laisa laadimise rakendamise uskumatult lihtsaks, ilma et peaksite tuginema JavaScriptile.
Atribuut loading
Atribuut loading aktsepteerib kolme vÀÀrtust:
lazy: NĂ€itab, et brauser peaks lĂŒkkama ressursi laadimise edasi, kuni see on vaatevĂ€lja lĂ€hedal.eager: NĂ€itab, et brauser peaks ressursi kohe laadima, olenemata selle positsioonist vaatevĂ€ljas. See on vaikekĂ€itumine.auto: Laseb brauseril otsustada, kas laadida laisalt vĂ”i mitte. Brauser kĂ€itub tavaliselt nii, nagu oleks mÀÀratud `lazy`.
Piltide laisa laadimise rakendamine
Pildi laisalt laadimiseks lisage lihtsalt atribuut loading="lazy" sildile <img>:
<img src="image.jpg" alt="Pildi kirjeldus" loading="lazy">
NĂ€ide:
<img src="images/london-eye.jpg" alt="London Eye" loading="lazy">
<img src="images/eiffel-tower.jpg" alt="Eiffeli torn" loading="lazy">
<img src="images/great-wall.jpg" alt="Hiina mĂŒĂŒr" loading="lazy">
Selles nĂ€ites laaditakse London Eye, Eiffeli torni ja Hiina mĂŒĂŒri pilte ainult siis, kui need on kasutaja vaatevĂ€ljas nĂ€htavaks muutumas.
Iframe'ide laisa laadimise rakendamine
Sarnaselt saate iframe'e laisalt laadida, lisades atribuudi loading="lazy" sildile <iframe>:
<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>
NĂ€ide:
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" loading="lazy"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.9554733630316!2d-0.1269456842202068!3d51.50735097964078!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604ce1854c4f1%3A0x6f72d6a9740a5af!2sBuckingham%20Palace!5e0!3m2!1sen!2suk!4v1684752824355!5m2!1sen!2suk" loading="lazy"></iframe>
See hoiab Àra YouTube'i video ja Google Mapsi iframe'i laadimise, kuni need on vaatevÀlja lÀhedal, parandades lehe esialgset laadimisaega.
TĂ€iustatud CSS-i tehnikad laisa laadimise jaoks
Kuigi atribuut loading on lihtsaim viis laisa laadimise rakendamiseks, saate kasutajakogemust veelgi tÀiustada, kasutades CSS-i kohatÀidete ja visuaalsete vihjete pakkumiseks.
KohatÀite pildid
Selle asemel, et kuvada pildi laadimise ajal tĂŒhja ruumi, saate kasutada kohatĂ€ite pilti. See vĂ”ib olla tegeliku pildi madala eraldusvĂ”imega versioon vĂ”i ĂŒldine kohatĂ€itegraafika.
NĂ€ide:
<img src="placeholder.jpg" data-src="image.jpg" alt="Pildi kirjeldus" loading="lazy">
Sel juhul sisaldab atribuut src kohatĂ€ite pildi URL-i, samas kui atribuut data-src sisaldab tegeliku pildi URL-i. JavaScripti (vĂ”i polĂŒtĂ€idiseid) saab kasutada atribuudi `src` asendamiseks atribuudi `data-src` vÀÀrtusega, kui pilt on vaatevĂ€ljas.
CSS-i ĂŒleminekud
Pildi laadimisel saate luua sujuva sissefadeerimise efekti, kasutades CSS-i ĂŒleminekuid. See vĂ”ib parandada visuaalset atraktiivsust ja muuta laisa laadimise protsessi kasutaja jaoks vĂ€hem hĂ€irivaks.
NĂ€ide:
img {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
img[loading="lazy"] {
opacity: 1; /* VÔi mis iganes peaks olema lÔplik lÀbipaistmatus */
}
See CSS-i kood mÀÀrab kĂ”igi piltide esialgseks lĂ€bipaistmatuseks 0 ja seejĂ€rel muudab lĂ€bipaistmatuse 1-ks, kui pildil on atribuut loading="lazy". See aga nĂ”uab JavaScripti vĂ”i polĂŒtĂ€idiseid, et see Ă”igesti töötaks.
Brauseri tugi ja polĂŒtĂ€idised
Atribuuti loading toetavad enamik kaasaegseid brausereid. Vanemad brauserid ei pruugi seda aga toetada. Tagamaks, et laisk laadimine töötab kĂ”igis brauserites, saate kasutada polĂŒtĂ€idist. PolĂŒtĂ€idis on JavaScripti kood, mis pakub uuema funktsiooni funktsionaalsust vanemates brauserites.
Intersection Observer API
Intersection Observer API on vÔimas JavaScripti API, mis vÔimaldab teil tuvastada, kui element siseneb vÔi vÀljub vaatevÀljast. Seda API-t saab kasutada laisa laadimise rakendamiseks brauserites, mis ei toeta atribuuti loading.
NĂ€ide (lihtsustatud):
const images = document.querySelectorAll('img[loading="lazy"]');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
images.forEach((img) => {
observer.observe(img);
});
See kood loob Intersection Observeri, mis jÀlgib kÔiki pilte, millel on atribuut loading="lazy". Kui pilt siseneb vaatevÀlja, asendab vaatleja atribuudi src atribuudi data-src vÀÀrtusega, kÀivitades pildi laadimise. SeejÀrel lÔpetab vaatleja pildi jÀlgimise.
Laisa laadimise parimad praktikad
- Prioriseerige esmalt nÀhtav sisu: Veenduge, et sisu, mis on esialgses vaatevÀljas nÀhtav, laaditakse kohe. Laiska laadimist tuleks kasutada peamiselt esmalt nÀhtava sisu all oleva sisu jaoks.
- Kasutage sobivaid kohatÀiteid: Valige kohatÀite pildid, mis on kerged ja visuaalselt atraktiivsed. VÀltige suurte vÔi keerukate kohatÀidete kasutamist, mis vÔivad laisa laadimise eeliseid eitada.
- Arvestage kasutajakogemusega: Olge teadlik kasutajakogemusest. Kasutage CSS-i ĂŒleminekuid, et luua sujuvaid sissefadeerimise efekte ja vĂ€ltida ootamatuid nihkeid paigutuses, kui pildid laaditakse.
- Testige pÔhjalikult: Testige oma laisa laadimise rakendust erinevates brauserites ja seadmetes, et tagada selle Ôige toimimine ja et see ei tekita ootamatuid probleeme.
- JĂ€lgige jĂ”udlust: Kasutage veebi jĂ”udluse tööriistu, et jĂ€lgida laisa laadimise mĂ”ju teie veebisaidi laadimisajale ja ĂŒldisele jĂ”udlusele.
- KÀsitsege vigu graatsiliselt: Rakendage veakÀsitlust, et graatsiliselt kÀsitleda juhtumeid, kus piltide laadimine ebaÔnnestub. Kuvage kasutajale varupilt vÔi teade.
- LigipÀÀsetavuse kaalutlused: Veenduge, et teie laisa laadimise rakendus oleks ligipÀÀsetav puuetega kasutajatele. Esitage piltide jaoks alternatiivtekst ja kasutage ARIA atribuute, et edastada elementide laadimisolekut.
- VÀltige liigset laiska laadimist: Kuigi laisk laadimine vÔib parandada jÔudlust, vÔib liigne laisk laadimine negatiivselt mÔjutada kasutajakogemust. Laadige kriitilised ressursid kohe, et tagada veebisaidi reageerimisvÔime ja interaktiivsus.
Levinud lÔkse, mida vÀltida
- Esmalt nÀhtava sisu laisk laadimine: See vÔib viivitada kriitilise sisu laadimisega ja negatiivselt mÔjutada kasutajakogemust.
- Suurte kohatÀite piltide kasutamine: See vÔib eitada laisa laadimise jÔudluse eeliseid.
- Brauseri ĂŒhilduvuse ignoreerimine: Veenduge, et teie laisa laadimise rakendus töötaks erinevates brauserites ja seadmetes.
- PÔhjaliku testimise ebaÔnnestumine: Testige oma rakendust, et tuvastada ja parandada potentsiaalsed probleemid.
- JÔudluse mittejÀlgimine: JÀlgige laisa laadimise mÔju teie veebisaidi jÔudlusele.
Laisk laadimine ja SEO
Laisk laadimine, kui seda Ôigesti rakendada, vÔib avaldada positiivset mÔju SEO-le. Parandades lehe laadimisaega, vÔib see kaudselt parandada teie veebisaidi jÀrjestust otsingumootori tulemustes. Siiski on oluline tagada, et otsingumootori roomikud saaksid ikka teie piltidele juurde pÀÀseda ja neid indekseerida. Sildi <noscript> kasutamine aitab tagada, et otsingumootorid saavad pilte tuvastada isegi siis, kui JavaScript on keelatud.
NĂ€ide:
<img data-src="image.jpg" alt="Pildi kirjeldus" loading="lazy">
<noscript><img src="image.jpg" alt="Pildi kirjeldus"></noscript>
Silt <noscript> pakub varuvÔimalust brauseritele, mis ei toeta JavaScripti vÔi millel on JavaScript keelatud. Sel juhul kuvatakse sildi <noscript> sees olev silt <img> laisalt laaditud pildi asemel.
JĂ€reldus
Laisk laadimine on vĂ”imas tehnika veebisaidi jĂ”udluse optimeerimiseks ja kasutajakogemuse parandamiseks. LĂŒkates edasi mittekriitiliste ressursside laadimist, saate oluliselt vĂ€hendada lehe esialgset laadimisaega, sÀÀsta ribalaiust ja parandada oma veebisaidi SEO jĂ€rjestust. Atribuudi loading tulekuga on laisa laadimise rakendamine muutunud lihtsamaks kui kunagi varem. JĂ€rgides selles juhendis kirjeldatud parimaid praktikaid, saate oma veebisaidil tĂ”husalt laisa laadimise rakendada ja selle arvukalt eeliseid kasutada.
Ărge unustage prioriseerida esmalt nĂ€htavat sisu, kasutage sobivaid kohatĂ€iteid, testige pĂ”hjalikult ja jĂ€lgige jĂ”udlust, et tagada, et teie laisa laadimise rakendus pakub teie kasutajatele parimaid vĂ”imalikke tulemusi, olenemata sellest, kus nad maailmas asuvad.