Cum să utilizați Lazy Loading pentru a obține un rezultat perfect de viteză mobilă

Site-ul dvs. trece testul de viteză pentru site-ul mobil Google? Nu? Poate doriți să vă uitați la imagini cu încărcare leneșă.

Performanța site-ului este critică. Dacă blogul sau site-ul dvs. web se încarcă lent, este groaznic pentru experiența utilizatorului.

Nimeni nu va aștepta cinci sau zece secunde pentru ca site-ul dvs. să se încarce. Viteza de internet sau viteza de descărcare trebuie să fie rapidă. Un site lent va crește rata de respingere și va reduce rata de conversie.

Când faceți un test de viteză pentru site-ul dvs., viteza desktopului este de obicei ok. Dar cum funcționează paginile tale pentru un test de viteză mobil?

Pregătiți-vă pentru utilizatorii de telefonie mobilă

Majoritatea programelor de blog și site-uri web sunt destul de bine construite pentru vizualizarea pe desktop.

Ei folosesc design responsive pentru a oferi o versiune mobilă.

Deși aceasta este o soluție practică, are un dezavantaj semnificativ.

Dacă site-ul dvs. este receptiv, acesta va funcționa pe dispozitive mobile.

Dar dimensiunile fișierelor imaginilor tale sunt pentru desktop, așa că viteza site-ului tău mobil este mult mai mică.

Dacă faceți un test Google Pagespeed Insights, rezultatul dvs. ar putea fi rezonabil și în verde pentru desktop, dar arată așa pentru versiunea dvs. mobilă.

Când considerați că jumătate, sau chiar mai mulți dintre vizitatorii site-ului dvs. folosesc dispozitive mobile, trebuie să îmbunătățiți timpul de încărcare a paginii și viteza mobilă.

Google se îndreaptă spre utilizarea indexului său pe mobil ca factor de clasare.

Există multe servicii gratuite de testare a vitezei site-ului pe care le puteți utiliza pentru monitorizarea performanței.

Cu toate acestea, nu toate aplicațiile speedtest măsoară vitezele site-urilor mobile. Așadar, nu fiți liniștit de rezultatele bune pentru viteza paginii site-ului dvs. desktop.

WebpageTest vă permite să selectați diferite versiuni mobile, deci este o alternativă la Google.

Asigurați-vă întotdeauna că vă puteți verifica versiunea mobilă, deoarece dispozitivele se conectează cu o viteză de conexiune la internet mult mai mică.

Dacă rezultatele tale sunt nesatisfăcătoare, ai de lucru.

Cum vă îmbunătățiți performanța mobilă?

Mulți factori contribuie la reducerea vitezei site-ului atât pe desktop, cât și pe mobil.

Fișierele Javascript și CSS se pot încărca prea devreme și pot bloca redarea. Dacă utilizați WordPress, puteți remedia acest lucru ușor, folosind un plugin de cache.

Este posibil să aveți o problemă cu gazda dvs. web care face ca TTFB (Time To First Byte) să fie puțin mai mare de jumătate de secundă.

Cu toate acestea, majoritatea gazdelor sunt cel mult cu doar 10 până la 20 la sută peste această perioadă, ceea ce nu este o problemă mare.

Cea mai mare problemă o reprezintă aproape întotdeauna imaginile și cadrele iframe. Când adăugați o imagine la o postare, aceasta nu este comprimată, dimensionată sau formatată pentru mobil.

Puteți folosi un plugin pentru a ajuta. Smush este un plugin popular pentru comprimarea imaginilor atunci când încărcați. Rezultatul va îmbunătăți puțin versiunea pentru desktop, dar nu și versiunea pentru mobil.

Pentru a îmbunătăți timpul de încărcare a paginii pe mobil, trebuie să difuzați imagini mult mai mici. Dar asta presupune multă muncă.

Până de curând, cea mai bună soluție era să ai o versiune mobilă separată a site-ului tău sau să folosești pagini AMP. Oricum, toate imaginile de pe site-ul existent au trebuit să fie înlocuite cu imagini Next-Gen.

Lucrarea implicată în oricare dintre soluții poate dura săptămâni sau luni, în funcție de dimensiunea site-ului dvs.

Pentru majoritatea proprietarilor de site-uri, dacă nu cunoașteți despre un API observator de intersecție sau despre un img src, un atribut data src, class lazy, img tags sau img class, atunci nu veți construi un nou site mobil.

Hai sa recunoastem. Este prea greu și consuma mult timp.

Mai multe lectură: Cum să opriți formularul de contact și spamul de comentarii

Aplicarea comportamentului de încărcare leneș

Din fericire, există o modalitate ușoară de a remedia timpul de încărcare a paginii mobile. Răspunsul este să vă faceți toate imaginile încărcate leneș.

Încărcarea leneșă întârzie livrarea imaginilor până când cititorul are nevoie de ele. Pe măsură ce un cititor derulează o pagină web, imaginile de sub ceea ce este vizibil sunt reținute.

Procedând astfel, timpul inițial de încărcare pentru o pagină este redus enorm față de timpul de încărcare dornică. Există multe plugin-uri și soluții pentru adăugarea de încărcare leneșă pe blogul sau site-ul dvs. web.

Efectuarea de teste de încărcare leneșă

În ultimele câteva săptămâni, am testat beta un nou mod de a face un site mobil să funcționeze.

S-ar putea să fi auzit de rețele de livrare a conținutului, de încărcare leneșă și de imagini amânate în afara ecranului.

Dacă nu ați făcut-o, acestea sunt elemente care servesc doar imagini pe măsură ce o pagină este încărcată și pe măsură ce utilizatorul derulează în jos pe pagină. Este posibil să fi văzut acest lucru în acțiune pe site-uri precum Medium.

Când vizitați prima dată un site, o imagine va apărea neclară pentru o fracțiune de secundă. Ele sunt numite imagini substituenți.

Apoi imaginea apare clar într-o clipă.

Aceasta este încărcare leneșă în acțiune. Pe măsură ce un utilizator derulează în jos pe pagină, imaginile nu sunt încărcate până când sunt necesare.

Face ca o pagină să funcționeze foarte rapid, mai ales pe dispozitivele mobile. Un încărcător leneș poate fi aplicat la orice număr de imagini de pe paginile web.

Dar încă mai lipsește un element din această soluție. Imaginile nu sunt în formate Next-Gen.

Din fericire, acum există o soluție, așa că nu trebuie să vă înlocuiți toate imaginile. Optimole este un plugin WordPress care face o mulțime de sarcini grele.

Nu numai că încărcă leneș imaginile, dar vă înlocuiește și imaginile cu o nouă adresă URL a imaginii care oferă imagini de ultimă generație.

În plus, redimensionează imaginile din mers.

Punând la încercare Optimole

Am făcut o mulțime de teste și de fiecare dată când am verificat o pagină, aceasta a obținut un scor foarte mare la un test de viteză mobil Google.

Unul dintre testele mele a fost cu o pagină web cu lățime completă care conținea zece imagini mari, necomprimate și nedimensionate.

Cu alte cuvinte, am pălmuit o grămadă de imagini mari pe o pagină și am publicat-o. (Imaginile au fost oferite de Pixabay, deci nu au avut nevoie de atribuirea creative commons.)

Pagina era atât de mare încât nu am putut să-ți arăt o imagine. Așa că ți-o voi arăta într-un videoclip.

Când am testat pagina pe Google, acesta a fost rezultatul.

Nu este surprinzător, având în vedere dimensiunea tuturor imaginilor.

Apoi am activat Optimole. Puteți vedea setările pe care le-am folosit mai jos. Asta e tot ce trebuie să faci.

Deci care a fost rezultatul?

Pentru desktop, un scor perfect.

Pentru mobil, un scor aproape perfect.

Pe GTmetrix, scorul este din nou aproape de perfect.

Amintiți-vă că acestea sunt rezultate din lumea reală pentru o pagină plină de imagini uriașe la rezoluție înaltă.

Instalarea pluginului și obținerea unei chei API a durat doar câteva minute, iar apoi doar câteva secunde pentru a activa setările.

Deci, în mai puțin de cinci minute, am avut o pagină și un site mobil aproape perfect.

Aflați mai multe despre Optimole

Pentru a vedea pluginul în acțiune în lumea reală, vizitați site-ul web CodeinWP. Funcționează pe Optimole, așa că puteți rula teste pe viteza site-ului său.

Vă puteți verifica site-ul accesând site-ul Optimole.

Faceți clic pe butonul Verificați site-ul meu și introduceți adresa URL a site-ului dvs. Veți vedea o listă cu toate imaginile dvs. și cu economiile care pot fi făcute pe site-ul dvs. web.

Dacă aveți un site mic, există o versiune gratuită a pluginului disponibilă. Dar dacă aveți un site mare, poate doriți să luați în considerare o opțiune premium.

Ți-a luat mai mult să citești acest articol decât va dura pentru ca site-ul tău să funcționeze foarte rapid pentru vizitatorii tăi mobili. Deci ce mai aștepți?

Mai multe alternative de încărcare leneșă

Dacă nu doriți să configurați livrarea CDN a imaginilor Nextgen, există o mulțime de opțiuni gratuite pe care le puteți utiliza.

WordPress încorporează acum încărcare leneră în mod implicit. Cu toate acestea, aveți puțin control asupra modului în care funcționează. De obicei, este mai bine să utilizați un plugin, astfel încât să puteți regla performanța.

Smush este un plugin WordPress popular și gratuit pentru reducerea imaginilor atunci când le încărcați în biblioteca dvs. media.

Dar are o opțiune pentru a activa încărcarea leneșă. L-am încercat pe câteva de pe site-urile mele și funcționează impecabil. Pur și simplu activați opțiunea și ați terminat.

A3 Lazy Load este un alt plugin gratuit. L-am folosit de mult timp pe multe dintre site-urile mele, inclusiv pe acesta.

Ceea ce îmi place la el este că pot rafina o mulțime de opțiuni. Are opțiunea de a exclude widget-urile, ceea ce rezolvă unele probleme de sărituri cu unele teme.

BJ Lazy Load există de mult timp. Are peste 90.000 de utilizatori. Cu toate acestea, nu a fost actualizat de ceva vreme.

Lazy Load este un plugin gratuit cu 60.000 de instalări. Este o componentă gratuită de la WP Rocket, care este o soluție all-in-one pentru optimizarea vitezei site-ului.

Un ultim plugin este Lazy Load pentru videoclipuri. Este un instrument bun de utilizat dacă aveți o mulțime de videoclipuri YouTube pe site-ul dvs.

Ce alegere! Acum nu aveți niciun motiv să aveți un site web mobil lent.

Notă: nu am nicio afiliere cu acest produs. Revizuirea mea Optimole se bazează pe experiențele mele ca utilizator.

Mai multe citiri: Verificatori gratuite de site-uri și instrumente SEO