De ce este posibil să aveți nevoie de WordPress Lazy Load pentru a accelera o pagină web?

Publicat: 2020-02-21
wordpress sarcină leneșă
Urmăriți @Cloudways

De ce să încărcăm mai multe date decât putem afișa?

Un site web rapid este mai durabil și, în general, mai eficient în atragerea mai multor utilizatori care pot găsi ceea ce au nevoie rapid și ușor. Dar, dacă imaginile nu sunt optimizate corespunzător, ele pot duce și la o încărcare semnificativă care poate încetini încărcarea paginii, capacitatea de reacție și multe altele.

Potrivit Akamai, 47% dintre vizitatori se așteaptă ca o pagină web să se încarce în decurs de două secunde sau mai puțin . Dacă o pagină durează mai mult de 3 secunde pentru încărcare, 40% dintre vizitatori vor părăsi site-ul web. În plus, o întârziere de 1 secundă poate costa o scădere de 7% a vânzărilor. Pentru că:

Nimeni nu vrea să „aștepte” încărcarea unei pagini web.

Nu numai acest lucru, gigantul motorului de căutare, Google, preferă, de asemenea, site-urile web care au timp de încărcare rapid mai mic de 2-3 secunde.

De obicei, un web sau o postare / pagină WordPress constă din mai multe conținuturi de pagini care includ HTML, CSS, JavaScript, imagini, videoclipuri, comentarii etc. În general, există o serie de moduri de a accelera un site web WordPress, dar majoritatea tehnicilor variază de la minimizarea codului la tehnica de încărcare leneșă pe WordPress.

În acest ghid, vom explica încărcarea leneșă, avantajele / dezavantajele acesteia, cazurile de utilizare și apoi vă vom arăta cum să încărcați leneș imaginile, videoclipurile, comentariile WordPress și cum să utilizați scroll infinit.

  • Ce este o încărcătură leneșă?
  • Cum funcționează încărcarea leneșă?
  • Lazy Load afectează SEO?
  • Media încetinește site-urile web?
  • Ar trebui să folosiți Lazy Load?
  • 3 Cazuri de utilizare a încărcăturii leneșe
    • Mediu
    • YouTube
    • imagini Google
  • Adăugați Lazy Load pe un site web WordPress
    • WordPress Lazy Load Plugins
    • WordPress Lazy Load Images
    • WordPress Lazy Load Video și iFrames
    • Comentarii WordPress Lazy Load
    • Mai multe pluginuri de încărcare leneșă pentru WordPress
  • WordPress Infinite Scroll
  • Google Chrome poate integra în mod implicit încărcarea leneșă

Ce este o încărcătură leneșă?

Când un vizitator deschide o pagină web, conținutul întregii pagini începe să se descarce și să fie redat, indiferent de cât de greu este conținutul. Există șanse ca un vizitator să închidă o pagină web după ce a vizionat numai prima pagină.

Vizitarea unei pagini consumă lățime de bandă și folosește memorie pentru a salva datele cache. Ieșirea din pagină foarte rapid poate duce la pierderea de memorie și a lățimii de bandă. Aici sare sarcina leneșă în:

Încărcarea leneșă este o tehnică pentru încărcarea conținutului web atunci când este necesar, mai degrabă decât dintr-o dată.

Prin utilizarea tehnicii de încărcare leneșă, conținutul paginii este încărcat numai pe măsură ce devin vizibile în fereastra de vizualizare (ecran).

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

Practic, încărcarea leneșă pune un atribut src de referință la resursele paginii web încărcate leneș (imagine, videoclip etc.) și adaugă un alt atribut pentru conținutul original, apoi folosește JavaScript pentru a detecta poziția de derulare a vizitatorilor unei pagini. Când poziția de derulare este cel mai apropiat de un obiect de referință, acesta înlocuiește atributul src referință cu src reală și încarcă conținutul.

De exemplu, dacă un vizitator deschide o pagină web și o părăsește imediat, atunci nu se încarcă nimic dincolo de partea superioară a unei pagini web.

Încărcarea activelor în timp de execuție reduce numărul de solicitări pe care o pagină trebuie să le trimită serverului pentru încărcarea inițială, rezultând o comunicare mai rapidă și minimă între serverul de găzduire WordPress și vizitator dintr-o dată.

Lazy Load afectează SEO?

Încărcătura leneșă nu este compatibilă cu SEO (cel puțin din momentul redactării acestui ghid). Deoarece conținutul (imagini, videoclipuri, comentarii etc.) nu este încărcat inițial pentru vizitatori, același flux este pentru păianjenii motorului de căutare. Există posibilitatea ca câteva dintre conținutul Lazy Loaded (imagine, videoclipuri) să nu se indexeze în secțiunea Google imagini / video, ceea ce nu este bun din perspectiva SEO.

Soluțiile alternative există, cum ar fi adăugarea de linkuri către conținutul dvs. Lazy Loaded. În acest fel, Google îl va lua ca o pagină web standard și va indexa conținutul în consecință. Cu toate acestea, vizitatorii vor vedea în continuare o pagină web ca Lazy Loaded.

Gigantul motorului de căutare, Google lucrează și pregătește documentele de ajutor în legătură cu modul în care se poate profita de Lazy Loading și poate obține conținutul Lazy Loaded descoperit de GoogleBot.

Media încetinește site-urile web?

Imaginile și videoclipurile fac parte din elementele de conținut web ale unei pagini web. Astfel, Da, impactul asupra timpului de încărcare.

Cu cât dimensiunea unei pagini web este mai grea, cu atât va dura mai mult timp pentru încărcare.

Prin urmare, este întotdeauna sugerat să optimizați imaginile înainte de a le încărca pe un site WordPress. Puteți utiliza WP Compress, ShortPixel, WP Smush It etc. pentru a reduce dimensiunea imaginii.

De asemenea, specificați dimensiunile imaginii, de exemplu, dacă aveți o imagine de 1000 × 1000 px, dar ați redimensionat-o la 100 × 100 px, browserul va încărca de zece ori mai mult decât este necesar. În plus, evitați formate de fișiere complexe precum TIFF, BMP etc., deoarece browserele pot încărca rapid imagini JPG, PNG și GIF.

Ar trebui să folosiți Lazy Load?

Aceasta este era vitezei!

Fiecare vizitator se așteaptă ca o pagină web să se încarce într-o clipită. Trebuie să găsiți în continuare modalități de îmbunătățire a timpilor de încărcare a paginii, iar încărcarea leneșă este una dintre modalitățile de a face acest lucru.

Odată cu creșterea masivă a utilizatorilor de telefonie mobilă, peste 52% din traficul mondial este deservit prin intermediul smartphone-urilor. Ar trebui să luați în considerare cu siguranță utilizatorii de dispozitive mobile în timp ce optimizați un site web WordPress.

3 Cazuri de utilizare a încărcăturii leneșe

De cele mai multe ori, sarcina leneșă este utilizată pentru imagini, dar aceasta nu se limitează doar la imagini. Poate fi folosit pentru a se integra cu videoclipuri, comentarii, scripturi etc. Giganții de pe Internet folosesc deja încărcătura leneșă într-un fel sau altul. Iată câteva dintre ele:

  1. Mediu

Lazy Load Medium

Dacă ați vizitat vreodată Medium, trebuie să fi observat că acesta afișează un înlocuitor neclar pentru imagini de încărcare leneșă până când imaginea reală de înaltă rezoluție este complet încărcată, astfel încât vizitatorii se așteaptă ca o imagine să se încarce. Acest lucru îmbunătățește experiența utilizatorului arătând o parte din conținutul încărcat inițial pentru a menține atenția vizitatorilor.

  1. YouTube

Lazy Load YouTube

În mod implicit, primul lucru pe care îl afișează YouTube este videoclipul pe care intenționați să-l vizionați și nu încarcă comentarii și miniaturi ale altor videoclipuri sugerate pe încărcarea inițială. Când începeți derularea, aceasta va începe să încarce articolele încărcate leneș, cum ar fi miniaturile și comentariile. În acest fel, vizitatorul nu trebuie să aștepte încărcarea unei pagini întregi. Poate începe să vizioneze clipul imediat.

  1. imagini Google

Încărcați mai multe imagini WordPress

Este posibil să fi observat că, atunci când căutați o imagine pe Google, aceasta înlocuiește imaginile substituente cu miniaturi și, după afișarea unui număr de imagini, încarcă mai multe imagini. Google folosește o abordare diferită pentru a combina defilarea infinită și încărcarea leneșă pentru a-și îmbunătăți rezultatele de căutare.

Adăugați Lazy Load pe un site web WordPress

Puteți reduce numărul de solicitări prin implementarea unei tehnici de încărcare leneșă pe un site web WordPress care ajută la reducerea timpului de răspuns al serverului, rezultând o experiență mai rapidă de încărcare a paginii.

Implementarea încărcării leneșe în conținutul WordPress nu este atât de tehnică, mulțumită Comunității WordPress pentru contribuțiile lor.

  1. WordPress Lazy Load Plugins

Lazy Load a3 WordPress Plugin

Dacă căutați „ încărcare leneșă ” în directorul de pluginuri WordPress, veți întâlni o serie de pluginuri de încărcare leneșă. Dar pentru acest ghid, am ales a3 Lazy Load , unul dintre cele mai populare, bogate în funcții și utilizate pe scară largă pentru a implementa tehnica de încărcare leneșă pe un site web WordPress.

  1. WordPress Lazy Load Images

Lazy Load Images WordPress

Imaginile consumă multe resurse și consumă multă lățime de bandă și spațiu de stocare. Cu pluginul a3 Lazy Load, puteți comuta între ON / OFF. Nu numai acest lucru, când sarcina leneșă pentru imagini este activată, puteți controla unde ar trebui să funcționeze, care include:

  • Postare, pagini și tipuri de postări personalizate (toate zonele de conținut)
  • Widgeturi (bara laterală, antet și subsol)
  • Aplicați pentru a posta miniaturi
  • Aplicați la Gravatars
  1. WordPress Lazy Load Video și iFrames

Videoclipuri și iframe WordPress Lazy Load

a3 Lazy Load nu se limitează doar la încărcarea leneșă a imaginilor, ci vă permite și încărcarea leneșă a videoclipurilor. Acceptă toate încorporările video WordPress care utilizează iFrames pentru a încărca videoclipuri la încărcarea inițială. Din nou, conține comutări pentru ON / OFF. Dacă este activat, puteți controla zonele menționate mai jos:

  • Videoclipuri încorporate de URL în postări și pagini (toate zonele de conținut)
  • Videoclipuri în tipuri de widget, widget text și widget HTML
  • Complet compatibil cu popularul plugin YouTube Embed
  1. Comentarii WordPress Lazy Load

wordpress încărcat leneș

Există o serie de pluginuri pentru comentarii WordPress care sunt utilizate de majoritatea utilizatorilor WordPress. Încărcarea leneșă poate fi aplicată multora dintre ele utilizând diferite pluginuri de încărcare leneșă WordPress:

  • Pentru comentariile WordPress implicite, puteți folosi Lazy Load pentru Comentarii
  • Pentru comentariile Disqus, puteți utiliza Disqus Conditional Load
  • Pentru comentariile de pe Facebook, puteți utiliza Lazy Facebook Comments
    1. Mai multe plugin-uri Lazy Load pentru WordPress

Pe lângă a3 Lazy Load, există o serie de pluginuri utile care pot lua în considerare:

  • a3 Încărcare leneșă
  • BJ Lazy Load
  • WordPress Infinite Scroll - Ajax Încarcă mai mult
  • Lazy Load de WP Rocket
  • Încărcați mai multe produse pentru WooCommerce
  • Încărcare leneșă pentru comentarii
  • Disqus Încărcare condiționată
  • Încărcare leneșă pentru videoclipuri

WordPress Infinite Scroll

WordPress Infinite Scroll

După cum sugerează și numele, derularea infinită adaugă automat următoarea pagină, economisind timpul de pe o pagină completă pentru încărcare simultană. De exemplu, probabil că l-ați experimentat în Facebook Newsfeed. Continuați să derulați în jos și fluxul se actualizează automat, mai degrabă decât întreaga încărcare a paginii.

În WordPress, puteți implementa acest lucru folosind Descărcați WordPress Infinite Scroll - Ajax Load More plugin. Este folosit pentru încărcarea leneșă a postărilor, postări unice, pagini, comentarii și multe altele cu interogări bazate pe AJAX.

Nu numai acest lucru, dar este, de asemenea, util pentru derularea interminabilă cu plugin-uri de comerț electronic populare, cum ar fi WooCommerce și Easy Digital Downloads, care afișează mii de produse fără a încărca întreaga pagină web.

Google Chrome poate integra în mod implicit încărcarea leneșă

Lazy Load Google Chrome

Google lucrează pentru a face mai accesibil conținutul încărcat leneș. De asemenea, experimentează posibilitățile de a adăuga suport pentru încărcarea leneșă în Google Chrome. Deci, acesta va încărca doar părțile de pagini care sunt afișate în prezent pe ecran și tot ce se află sub dedesubt va fi încărcat pe măsură ce derulați în jos.

În prezent, este disponibil pentru a testa pe Google Chrome Canary, o versiune de lansare timpurie destinată dezvoltatorilor și adoptatorilor timpurii. Pentru a încerca, descărcați Canary, apoi introduceți mai jos în bara de adrese:

  • chrome: // flags / # enable-lazy-image-loading
  • chrome: // flags / # enable-lazy-frame-loading

Când aceste semnalizatoare sunt active, Google Chrome nu va încărca nicio imagine sau iFrame care nu sunt vizibile în prezent pe ecran. Acesta va ajuta la încărcarea mai rapidă a paginilor web în Google Chrome și va reduce utilizarea lățimii de bandă, făcându-l o caracteristică deosebit de utilă pentru browserele mobile. Mergeți mai departe și serviți vizitatorii dvs. de telefon mobil într-un mod mai bun!

Î. Ce este încărcarea leneșă în WordPress?

Încărcarea leneșă în WordPress ajută pagina web să se încarce mai repede. Încarcă imaginile numai atunci când utilizatorul ajunge la acea secțiune și nu înainte de aceasta.

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

Încărcarea leneșă nu încarcă imaginea pe pagina web decât dacă nu este vizibilă pentru utilizator. Diferă încărcarea unei imagini pentru a îmbunătăți timpul de încărcare.

Î. Cum testați încărcarea leneșă?

Pentru a testa încărcarea leneșă; navigați pe pagina web și observați comportamentul imaginilor. Dacă imaginea începe să se încarce când o vedeți și nu înainte de aceasta, atunci încărcarea leneșă funcționează.

Î. Cum să leneviți să încărcați imagini în WordPress?

Încărcarea leneșă încarcă doar imaginile în fereastra de vizualizare și nu toate imaginile de pe o pagină web pentru a ajuta la reducerea timpului de încărcare inițial.