Cum să încărcați leneș în WordPress (imagini și videoclipuri)

Publicat: 2023-05-25

Dacă sunteți proprietarul unui site web, probabil că v-ați gândit la viteza site-ului cel puțin o dată în trecut. La urma urmei, Google ia în considerare viteza atunci când stabilește unde să plaseze site-urile în rezultatele căutării. Deci, dacă site-ul dvs. se încarcă lent, sunteți într-un dezavantaj când vine vorba de clasare. Și știm cu toții că clasamentele mai înalte duc la mai mult trafic.

Deci, cum vă asigurați că site-ul dvs. WordPress se încarcă cât mai repede posibil? O modalitate este să vă încărcați leneș imaginile.

Încărcarea leneră este o tehnică care întârzie redarea imaginilor și videoclipurilor până când sunt necesare. Implementarea acestui lucru vă poate accelera considerabil site-ul, iar vestea bună este că nu trebuie să fiți dezvoltator pentru a pune acest lucru în funcțiune.

Astăzi, vă vom arăta cum să încărcați leneș imagini și videoclipuri în WordPress folosind două metode: cu un plugin și fără.

Ce este încărcarea leneșă?

Încărcarea leneră este o tehnică comună folosită pentru a îmbunătăți viteza paginii. Ideea este simplă: în loc să încarce toate imaginile de pe o pagină când sosește prima dată un vizitator, redă doar imaginile care sunt vizibile. Apoi, pe măsură ce vizitatorul derulează în jos pe pagină, mai multe imagini sunt încărcate după cum este necesar.

Aceasta înseamnă că, dacă un vizitator nu derulează niciodată în josul unei pagini, imaginile de sub zona paginii vizualizate nu sunt niciodată încărcate. Astfel, încărcarea leneșă poate economisi milisecunde prețioase (sau chiar secunde) din timpul de încărcare a paginii.

În plus, încărcarea lenevă vă poate ajuta, de asemenea, să economisiți lățime de bandă. Acest lucru este important mai ales dacă aveți persoane care vă vizitează site-ul pe un dispozitiv mobil. Amânând încărcarea imaginilor și videoclipurilor care nu sunt vizibile, puteți reduce cantitatea de date utilizate.

Cum funcționează încărcarea leneșă?

În general, încărcarea leneșă funcționează în unul din două moduri. WordPress, începând cu versiunea 5.5, adaugă un atribut HTML5 numit „încărcare”. În acest caz, browserul gestionează toate părțile procesului de încărcare leneșă fără a fi nevoie de JavaScript suplimentar.

O altă metodă, dezvoltată înainte de atributul HTML5, este prin JavaScript creativ. În acest caz, un substituent gol este oferit la încărcarea paginii, apoi JavaScript este folosit pentru a încărca imaginile pe măsură ce acestea intră în fereastra de vizualizare.

Oricum, sunt încărcate doar imaginile necesare browserului. Alte imagini sunt încărcate odată ce un vizitator defilează în jos pe pagină.

Există câteva moduri diferite de a face acest lucru, pe care le vom discuta mai detaliat mai jos. Dar acesta este esența modului în care funcționează încărcarea leneșă.

Care sunt beneficiile încărcării leneșe?

Există trei beneficii principale pentru încărcarea leneșă a imaginilor:

  • Viteza crescută a site-ului
  • Utilizare redusă a lățimii de bandă
  • Experiență de utilizator mai bună

Viteza crescută a site-ului este de obicei motivația principală pentru implementarea încărcării leneșe. Așteptând să redați imagini inutile, puteți reduce timpul de încărcare a paginii. Acest lucru este valabil mai ales dacă aveți o mulțime de imagini pe o pagină sau dacă imaginile sunt mari.

În continuare, încărcarea lenevă vă poate ajuta să economisiți lățime de bandă. Dacă vizitatorii nu se aventurează niciodată în jos pe pagină, nu există o lățime de bandă irosită la încărcarea imaginilor pe care nu le vor vedea niciodată.

În cele din urmă, încărcarea lenevă vă poate îmbunătăți experiența utilizatorului. Acest lucru se datorează faptului că vizitatorii nu trebuie să aștepte ca toate imaginile de pe o pagină să se încarce înainte de a începe să interacționeze cu site-ul dvs.

WordPress se încarcă în mod implicit?

Da, începând cu WordPress 5.5, încărcarea leneră este activată în mod implicit automat la instalare. Cu toate acestea, există câteva modalități de a personaliza experiența care sunt destul de simple și intuitive. Vom discuta aceste metode mai detaliat mai jos.

Ar trebui să-mi încarc leneș imaginile? Există dezavantaje?

În cele mai multe cazuri, încărcarea leneșă a imaginilor este o idee grozavă dacă doriți să vă îmbunătățiți viteza paginii sau să economisiți lățimea de bandă. Cu toate acestea, există și câteva dezavantaje potențiale de luat în considerare.

Schimbarea aspectului

Dacă vă încărcați leneș imaginile, aspectul paginii dvs. se poate schimba. De exemplu, dacă aveți o bară laterală în partea dreaptă a paginii și încărcați leneș o imagine care se află în ea, bara laterală se poate deplasa în jos pentru a face loc. Acest lucru poate fi foarte dezorientator pentru vizitatorii dvs.

Ca regulă generală, se recomandă utilizarea substituenților pentru a evita această problemă.

Potențial lovitură pentru SEO

Dacă nu o faceți corect, încărcarea leneșă a imaginilor poate face ca motoarele de căutare, precum Google, să aibă probleme la indexarea lor. Conținutul este regele când vine vorba de clasamente și, în acest caz, ai putea pierde bucăți valoroase.

Este posibil ca imaginile dvs. să nu mai apară în rezultatele căutării și, în funcție de cât de importante sunt imaginile în raport cu restul conținutului paginii (cum ar fi imaginile de produse pentru o listă de comerț electronic), ar putea reduce și clasamentele dvs. obișnuite de căutare.

Acestea fiind spuse, dacă configurați corect încărcarea leneșă, aceasta nu va fi o problemă. De aceea, cu excepția cazului în care sunteți un dezvoltator încrezător, cel mai bun mod de acțiune este să utilizați un plugin de încărcare leneră sau să rămâneți cu încărcarea leneră implicită inclusă în WordPress.

Conflicte de pluginuri

În plus, încărcarea leneșă poate cauza probleme cu unele plugin-uri WordPress - cum ar fi pluginurile care folosesc imagini pentru a genera previzualizări pe rețelele sociale.

De fiecare dată când faceți modificări site-ului dvs., ar trebui să le testați cu atenție pentru a vă asigura că totul funcționează așa cum ar trebui.

Și, în cazul în care ceva nu merge bine, aveți la îndemână o copie de rezervă a site-ului dvs. WordPress pentru o recuperare rapidă.

Cum să activați încărcarea leneșă în WordPress

Încărcarea leneră este acum activată implicit în WordPress. Dacă nu utilizați o iterație WordPress modernă (deși vă recomandăm să o faceți) sau dacă doriți un control mai granular asupra procesului de încărcare leneșă, puteți face acest lucru folosind una dintre cele două metode distincte: folosind un plugin sau adăugarea codului la dvs. site-ul.

1. Încărcare leneșă cu un plugin

Dacă nu sunteți un dezvoltator cu experiență, vă recomandăm să utilizați un plugin, deoarece de fiecare dată când editați codul site-ului dvs., riscați să întâmpinați probleme. Chiar dacă aveți copii de rezervă la îndemână în cazul în care spargeți ceva, ar fi cel mai bine să utilizați pur și simplu un plugin de renume.

Pagina principală Jetpack Boost

Jetpack Boost este un plugin gratuit dedicat pentru a vă ajuta să evaluați și să îmbunătățiți performanța site-ului. Oferă funcționalități precum:

  • Amânarea JavaScript neesențial
  • Optimizarea încărcării CSS
  • Încărcare leneșă a imaginii
  • Testarea performanței site-ului

Pentru a începe cu Jetpack Boost, descărcați-l gratuit din directorul de pluginuri WordPress.

Sau, în tabloul de bord WordPress, accesați Plugin-uri → Adăugați nou, apoi căutați „Jetpack Boost” și faceți clic pe Instalați acum . Odată instalat, faceți clic pe Activare .

Jetpack Boost în depozitul de pluginuri

Apoi, accesați noua opțiune de meniu a tabloului de bord intitulată Boost . Apoi, faceți clic pe Start gratuit .

Pe pagina următoare, derulați în jos până la comutatorul mare care spune Lazy Image Loading și activați-l. Acum, aruncați o privire pe site-ul dvs. și asigurați-vă că totul este redat corect și arată bine. Asta este! Încărcarea leneșă este bună de făcut cu doar câteva clicuri.

Dacă doriți să faceți lucrurile cu un pas mai departe și să personalizați încărcarea leneșă a site-ului dvs., puteți face acest lucru folosind fragmente de cod, pe care le puteți adăuga în fișierul functions.php . Sau le puteți insera cu un plugin de funcționalitate.

Iată doar câteva sarcini pe care le puteți îndeplini:

  1. Dezactivați încărcarea leneră pe anumite pagini
  2. Setați un substituent care să fie afișat până când imaginea este încărcată
  3. Dezactivați încărcarea leneșă pentru anumite imagini
  4. Dezactivați încărcarea leneră pentru o anumită clasă CSS

De exemplu, dacă doriți să excludeți o clasă CSS din procesul de încărcare leneșă, veți folosi acest cod:

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

Pentru mai multe detalii, consultați documentația completă de încărcare leneră.

2. Cum să încărcați leneș imagini în WordPress fără un plugin

După cum am menționat mai devreme, WordPress, în mod implicit, permite încărcarea leneșă pentru toate imaginile care au dimensiuni setate. Nu trebuie să activați nimic sau să adăugați niciun cod pentru a face acest lucru. Cu toate acestea, pot exista situații în care doriți să personalizați modul în care funcționează această funcționalitate.

De exemplu, să presupunem că nu doriți ca imaginile șablon să fie incluse. Veți adăuga acest cod în fișierul functions.php :

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

Sau poate doriți să obțineți o detaliere super-granulară și să dezactivați încărcarea leneșă pentru anumite imagini. Puteți face acest lucru atribuind o clasă de imagine suplimentară fiecărei imagini atunci când este adăugată la o pagină sau postare și apoi adăugând acea clasă la următorul cod din fișierul functions.php :

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

Pentru a adăuga la o imagine clasa de imagine skip-lazy din exemplul de mai sus:

  1. Adăugați imaginea pe pagină sau postați prin Media Library.
  2. După ce ați adăugat imaginea, găsiți setările pentru imagine. Acest lucru poate apărea diferit, în funcție de dacă utilizați editorul Gutenberg Blocks, editorul clasic sau un plugin pentru constructor de site-uri. Posibilitatea de a adăuga o nouă clasă CSS se găsește, de obicei, fie în zona Setări avansate (Gutenberg și editorii clasici), fie în partea de jos a opțiunilor de setări ale imaginii (majoritatea celorlalți constructori de site-uri).
  3. Adăugați clasa skip-lazy la imagine și salvați actualizarea.

Puteți afla mai multe despre posibilități în documentația WordPress.

Cum să încărcați leneș videoclipuri în WordPress

Dacă doriți să vă încărcați leneș videoclipurile, puteți face acest lucru adăugând cod la videoclipul însuși în postare sau pagină. Acest cod ar trebui să arate cam așa:

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

Întrebări frecvente despre încărcarea leneșă în WordPress

Doriți să aflați mai multe despre încărcare leneră WordPress? Am răspuns la câteva întrebări frecvente mai jos:

Încărcarea leneșă și amânarea imaginilor în afara ecranului este același lucru?

Amânarea imaginilor în afara ecranului înseamnă așteptarea încărcării imaginilor până când restul conținutului esențial de deasupra paginii s-a încărcat. Există mai multe moduri de a face acest lucru, dar site-urile WordPress folosesc de obicei încărcare leneșă.

În esență, încărcarea leneră este o metodă de amânare a imaginilor în afara ecranului.

Pot încărca leneș imagini de fundal în WordPress?

Da, puteți încărca leneș imaginile de fundal dacă doriți. Jetpack Boost activează încărcarea leneșă pentru imaginile de fundal. Cu toate acestea, în funcție de modul în care sunt configurate imaginile dvs., este posibil să nu le poată identifica pe toate. De exemplu, dacă imaginea este încărcată prin proprietatea background:url, pluginul nu o va citi ca imagine și, prin urmare, nu va activa încărcarea leneră pentru aceasta.

În această situație, puteți utiliza un instrument precum Lazy Loader, care vă va permite să selectați imaginile de fundal specifice pe care doriți să le încărcați.

Pot încărca leneș un videoclip YouTube?

Da, poti! Pentru a face acest lucru, inserați următorul fragment de cod din WPOrbit în fișierul functions.php al temei. Dacă nu sunteți sigur cum să faceți acest lucru, consultați ghidul nostru pentru accesarea și editarea fișierului functions.php .

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

Încărcarea leneșă afectează SEO?

Da, încărcarea lenenă poate avea un impact pozitiv asupra clasamentului în motoarele dvs. de căutare. Google ia în considerare viteza site-ului atunci când decide unde se clasează paginile în rezultatele căutării. Și, deoarece încărcarea leneșă îmbunătățește performanța, poate crește și percepția Google asupra site-ului dvs.

Dacă o faci manual, în loc să folosești un plugin de încărcare leneș și faci o greșeală, poate avea un impact negativ asupra SEO prin împiedicarea abilităților motoarelor de căutare de a-ți recunoaște imaginile.

Încărcarea leneșă afectează experiența utilizatorului?

Da, încărcarea leneră vă poate îmbunătăți experiența utilizatorului, deoarece reduce timpul de încărcare a site-ului dvs., asigurând totodată că vizitatorii vă pot vizualiza conținutul imediat. Acest lucru, la rândul său, le poate îmbunătăți percepția asupra mărcii dvs.

Am nevoie de un plugin pentru a încărca leneș conținutul meu?

Nu, nu aveți nevoie de un plugin pentru a vă încărca leneș conținutul. Încărcarea leneră este activată în WordPress în mod implicit. Cu toate acestea, dacă doriți mai mult control asupra procesului de încărcare leneș, este posibil să doriți să utilizați un plugin. Iată o selecție a celor mai bune pluginuri lazy load pentru WordPress.

Există un dezavantaj la încărcarea leneșă a conținutului?

Nu există multe dezavantaje ale conținutului de încărcare leneșă. Îți îmbunătățește viteza, experiența utilizatorului și clasamentul în motoarele de căutare. Cu toate acestea, poate provoca ocazional schimbări ciudate în aspectul paginii. Prin urmare, ar trebui să vă testați întotdeauna site-ul după ce ați activat încărcarea leneră.

Trebuie să încarc leneș tot conținutul meu?

Nu, nu trebuie să vă încărcați leneș tot conținutul. Puteți alege să încărcați leneș numai anumite elemente, cum ar fi imagini, videoclipuri sau iFrame.

Ce altceva pot face pentru a îmbunătăți vitezele de încărcare?

Pe lângă încărcarea leneșă, există o serie de alte moduri prin care puteți îmbunătăți viteza site-ului dvs. WordPress, inclusiv:

  • Utilizarea unei rețele de livrare de conținut (CDN)
  • Concentrarea pe îmbunătățirea acelorași lucruri care îmbunătățesc și Core Web Vitals.
  • Optimizarea imaginilor dvs
  • Activarea memoriei cache a browserului
  • Minimizarea resurselor

Accelerează-ți site-ul cu încărcare leneră WordPress

Încărcarea leneșă a imaginilor este o modalitate excelentă de a optimiza performanța site-ului și de a îmbunătăți experiența generală a utilizatorului. Jetpack Boost oferă cea mai convenabilă și robustă modalitate de a activa încărcarea leneșă, oferind în același timp și alte instrumente puternice de viteză. Sunteți gata să începeți? Obțineți Jetpack Boost!