Llastosament carregant imatges: Guia completa Plus 3 maneres d’implementar-lo

Preguntes carregant imatges: Guia completa


A mesura que la funcionalitat i la interactivitat augmenten al web, hi ha hagut un augment constant de la mida de la pàgina web durant els darrers anys. A principis del 2018, la mida mitjana de la pàgina a Internet es va situar més de 2 MB! Com lluitar contra això? Una de les millors solucions, anomenades imatges de càrrega mandrosa, és una de les millors solucions.

En aquesta guia, recorrem totes les complexitats d’imatges de càrrega mandrosa, i parlar sobre tres maneres diferents d’implementar-lo.

Comencem amb la taula de continguts del que vindrà:

  • Per què importa la càrrega mandrosa?
  • Què carrega de mandra?
  • Beneficis de la càrrega mandrosa
  • Què cal tenir en compte quan carrega imatges
  • Opció 1: implementar la càrrega mandrosa des de zero (amable per a principiants: ⭐ / 5)
  • Opció 2: utilitzeu un complement JavaScript (amable per a principiants: ⭐⭐ / 5)
  • Opció 3: utilitzeu un complement de WordPress (amable per a principiants: ⭐⭐⭐⭐⭐ / 5)
  • Conclusió

Per què importa la càrrega mandrosa?

L’enorme càrrega útil d’una pàgina web consisteix principalment en imatges, scripts, fulls d’estils, tipus de lletra i vídeos. Tot i això, les imatges ocupen més del 60% de la mida d’una pàgina web típica. Les imatges també són fonamentals per al disseny d’una pàgina web, de manera que no és com que puguis desfer-se’n.

Sense cap optimització, el navegador web de l’usuari descarrega tots els recursos abans de presentar una pàgina completament. Això comporta augmentar els temps de càrrega que poden atreure les persones. Estimació de WooCommerce que per cada 100ms de millora de la velocitat de pàgina, un lloc web de comerç electrònic pot augmentar els ingressos un 1%.

En un escenari com aquest, fer tot el que calgui per optimitzar els temps de càrrega té molt sentit. I com que les imatges són el principal contribuïdor a la mida de la pàgina web, començar amb elles és una bona idea. Aquí és on entra en joc la càrrega mandrosa.

Què carrega de mandra?

Per entendre el funcionament de la càrrega mandrosa, aquí teniu un GIF animat ràpid que demostra com es mostren les imatges a CodeinWP.

Demostració de càrrega d'imatgesDemostració de càrrega pereçosa a CodeinWP

Quan es carrega la pàgina, totes les imatges no es descarreguen immediatament. Quan es desplaça cap avall cap a una imatge, primer veieu una versió borrosa i la imatge real comença a carregar-se en segon pla. Aquesta imatge borrosa és una versió de definició baixa de la imatge final, en una fracció de la mida. Aquest fenomen de diferir la baixada i la reproducció de la imatge fins que un usuari es desplaça per ella és precisament el que s’anomena “càrrega mandrosa”.

Tot i que "mandrosa" generalment s’associa negativament, la càrrega pereç és en realitat una bona pràctica i condueix a reduir els temps de càrrega de la pàgina mitjançant l’optimització del vostre lloc en general.

Nota. En aquesta publicació, analitzem el procés de càrrega d’imatges mandrosos, però no es limita a carregar mandrosos només a les imatges; podeu utilitzar la mateixa idea per presentar qualsevol altre recurs, com ara els vídeos (hi ha una secció sencera sobre com fer-ho. a aquesta publicació), i fins i tot tipus de lletra.

Beneficis de la càrrega mandrosa

Com que el temps de càrrega d’una pàgina web és un contribuent principal a l’abandonament, les càrregues d’imatges peregrines poden conduir significativament a un augment dels usuaris que es queden a la pàgina fins que es carrega, cosa que podria provocar conversions o vendes més elevades..

L’altre avantatge significatiu de les imatges de càrrega mandrosa és la disminució de les factures del servidor. Només serveix aquelles imatges que el visualitzador desplaça a través i estalvieu en amplada de banda per a parts de la pàgina que no es van veure. Com que les imatges formen una part dominant del pes de la pàgina, això podria conduir a costos de servidor potencialment més baixos.

La càrrega de totes les imatges és tan perjudicial per als lectors també. Si l’usuari té un pla de dades il·limitat per a la web, probablement no hauria d’importar-lo. Tanmateix, en els plans amb dades limitades, estareu desant les dades del vostre espectador mitjançant la càrrega d’imatges mandroses.

Què cal tenir en compte quan carrega imatges

Ara que heu decidit implementar la càrrega mandrosa al vostre lloc web de la manera correcta, anem a examinar algunes consideracions claus sobre com fer-ho..

Identifiqueu les imatges que voleu carregar mandroses

No totes les imatges són ideals per a la càrrega. Per exemple, no voldríeu carregar els mandrosos que són integrals de l’estructura del vostre disseny i s’han de carregar per tal de mostrar-ho tot correctament..

S’han de considerar només les imatges que es mostren fora de la pantalla i que no contribueixen a l’estructura de la pàgina per carregar-se. Normalment es tracta d’imatges de la secció  elements que apareixen al cos de la pàgina.

Escolliu els vostres marcador de imatge

El següent que cal tenir en compte és la imatge o el color intermedi que s’hauria de mostrar quan la imatge es carrega una vegada que un espectador s’ha desplaçat sobre ella. El temps de càrrega de la imatge depèn de la mida que és la imatge i fins i tot pot trigar fins a uns segons. Per tant, heu de considerar què preferiu utilitzar durant el temps de càrrega.

Hi ha dues direccions que els desenvolupadors solen adoptar en aquest sentit:

  • Utilitzeu el color dominant de la imatge com a fons
  • Utilitzeu una versió de baixa qualitat de la imatge

marcador de posició de baixa capacitatUn exemple de versions d’imatges de baixa qualitat com a marcadors de posició per carregar mandrosos

L’elecció correcta aquí depèn del disseny del vostre lloc i del que preferiu que es mostri a l’usuari quan espera que es carregui la imatge..

Tot i que una tècnica consisteix a carregar imatges tan aviat com a entrada al port de visualització, potser voldreu plantejar-vos afegir un temps de memòria intermèdia abans que tingui lloc, de manera que l’usuari no vegi mai el marcador de posició.

Aneu amb compte de modificar l’estructura de la pàgina quan carregueu imatges

Abans que es carregui una imatge, es pot mostrar mitjançant les dimensions de 0 px. Això no és ideal per mantenir la vostra estructura de disseny.

Això pot modificar fàcilment la disposició de la pàgina i la posició del text. Una solució senzilla és afegir les imatges correctes a la imatge de forma immediata, cosa que garanteix que la mida de l’element imatge es mantingui igual després de la càrrega.

Amb les consideracions anteriors, anem a veure com podem implementar la càrrega mandrosa en un lloc de WordPress.

Opció 1: implementar la càrrega mandrosa des de zero

Mirem primer com fer això sense fer servir cap complement. Aquesta opció es recomana per a aquells que estiguin còmodes amb JavaScript. L’ideal és que s’hagin de fer els passos següents:

  1. Eviteu carregar imatges durant la càrrega de la pàgina: quan especifiqueu l’URL o la ruta de la imatge a l’atribut src de la  durant la càrrega de la pàgina, la imatge serà descarregada pel navegador. Per evitar que el navegador descarregui la imatge, heu d’especificar la ubicació de la imatge a l’atribut data-src de la  al seu lloc, etiqueta.
  2. Registre les funcions del gestor d’esdeveniments a JavaScript per comprovar si hi ha elements de dos esdeveniments: la càrrega i el desplaçament.
  3. Quan un element entra al port de vista, carregueu el valor de l’element data-src a l’element src, que activa el navegador per carregar la imatge.

S’ha explicat una senzilla implementació d’aquest procés Robin Osborne i la demostració està disponible a CodePen.

Opció 1.1: utilitzeu l’API d’observador de la intersecció

API de l’observador de la intersecció ajuda a identificar elements DOM que es troben al port de vista en un moment donat. Aquesta és una manera més neta d’implementar la càrrega mandrosa sense escriure funcions del gestor d’esdeveniments. També disminueix considerablement el nombre de línies de codi per implementar la càrrega mandrosa. Tanmateix, la compatibilitat del navegador continua sent un problema.

Blog de desenvolupadors de Google explica la implementació de l’API d’observadors de la intersecció a través aquesta demostració CodePen.

Opció 2: utilitzeu un complement JavaScript

Les dues opcions comentades anteriorment necessiten un coneixement intermedi de JavaScript. Si esteu cercant una implementació més fàcil de la càrrega mandrosa sense utilitzar un complement pesat que carrega el servidor, podeu provar el complement simple de JavaScript, bLazy.

El bLazy biblioteca a una mida inferior a 2 KB no aporta càrrega addicional a la càrrega útil, alhora que permet manejar fàcilment imatges de càrrega mandrosa.

Per utilitzar la biblioteca bLazy, heu d’inicialitzar  elements amb els atributs següents:

  • classe: estableix la classe de tots  etiquetes a b-lazy
  • src: enllaç amb la imatge del marcador de lloc
  • data-src: enllaç a la imatge per carregar
  • data-src-small: enllaç a la imatge per carregar-se a les pantalles de menys de 420 píxels d’ample

Heu d’inicialitzar la biblioteca de bLazy en poques línies de codi i totes les vostres imatges es mostraran mitjançant la càrrega mandrosa..

; (funció () {
// Inicialitzar
var bLazy = Blazy nou ();
}) ();

Hi ha disponible una demostració CodePen aquí.

Opció 3: utilitzeu un complement de WordPress

Hi ha un parell d’opcions que hi poden oferir càrregues de mandra. El més destacable:

Tots aquests complements us gestionaran automàticament la càrrega pereçosa. Cadascuna també inclou algunes característiques laterals agradables.

Per exemple, Lazy Load by WP Rocket també carrega vídeos de YouTube i els substitueix per una miniatura.

L’Optimole, a més de ser la incorporació més nova a la família ThemeIsle, també us ofereix una optimització d’imatges sòlida en roca (com es va provar aquí) amb funcions força avançades en aquest sentit. Per exemple, us permet canviar la mida dinàmic en funció de la mida de la pantalla de l’usuari.


Optimització d’imatges & Lazy Load d’Optimole Optimització d’imatges & Càrrega pereç d’Optimole

Autor (a): Optimol

Versió actual: 2.3.1

Darrera actualització: 21 d’abril de 2020

optimole-wp.zip


96% de valoracions


50.000 + instal·lacions


WP 4.7 + Requereix

Igual que amb la majoria de plugins, per obtenir una càrrega pereçosa, només cal que instal·leu el connector i activeu la funció al tauler de control del connector:

Optimole per a la càrrega d'imatges

Conclusió

Aquest post explorava la necessitat i els avantatges de les imatges de càrrega mandrosa. També es va parlar de tres maneres diferents d’implementar la càrrega mandrosa en un lloc web de WordPress:

  • Si teniu competències intermèdies en JavaScript, podeu implementar la càrrega perezosa des de zero
  • Si coneixeu alguna programació però no voleu cap complement, és una opció una biblioteca JavaScript de JavaScript, és una opció bLazy
  • Si voleu una solució d’un clic per carregar imatges d’impressió mandrosa al vostre lloc web, haureu d’anar a un complement com Optimole

Què en penses de la càrrega mandrosa? Heu provat d’utilitzar-lo per millorar el rendiment del vostre lloc web?

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map