No solo la carga diferida de imágenes en las páginas web ayudan en el rendimiento de la edad, pero también ayuda en SEO como se observó. Puedes usar jQuery e incluso Mootools para imágenes de carga diferida. Las imágenes solo se mostrarán cuando se desplace hacia ellas.
Esta sugerencia de jQuery reduce muchas solicitudes externas mientras se carga la página, lo que finalmente ayuda a que su blog de WordPress se cargue más rápido. Mientras usa este truco, también debe usar la Técnica de caché para simplificar la carga de la página.
Contenido
¿Qué es la carga diferida?
La carga diferida es cuando descarga contenido cuando lo necesita, en lugar de descargarlo todo a la vez.
La carga diferida es una técnica de optimización utilizada en Internet. Carga solo la sección de la página web que necesita al principio, y no carga ninguna otra parte hasta que haga clic en ellas. De esta forma, no tiene que cargar toda la información de principio a fin.
Una forma de carga diferida se llama desplazamiento infinito. Esto significa que a medida que se desplaza hacia abajo en la página, se cargará más contenido automáticamente.
¿Por qué es importante la carga diferida?
La enorme carga útil de una página web está llena de imágenes, scripts, hojas de estilo, fuentes y videos. Toma de imágenes hasta más del 60% del tamaño de una página web típica. No es posible deshacerse de ellos porque son importantes para el diseño de una página web.
Sin ninguna optimización, su navegador web descarga todo antes de renderizar la página. Esto hace que la página se cargue más lentamente.
Tiene sentido hacer todo lo posible para que sus páginas web se carguen más rápido. Y cuando se trata de imágenes, son las que más contribuyen al tamaño de un sitio web.
Entonces, si comienza con ellos, es una buena idea porque su sitio web se cargará rápidamente. Aquí es donde la carga diferida es útil porque solo descarga las partes de una imagen que están a la vista en su página en un momento dado.
¿Cómo configurar la carga diferida con jQuery?
Hay complementos que te permiten realizar cosas simples, pero cuantos menos complementos uses, más eficiente será tu blog.
No importa qué tema de WordPress esté utilizando, puede implementar la carga diferida muy fácilmente.
Es solo un tutorial de dos pasos, uno para agregar jQuery y el otro para asignar una clase a la etiqueta img, si desea cargar imágenes específicas en su blog de WordPress.
Aquí está la función jQuery, que deberá agregar a los scripts de su tema.
/ * lazyload.js (c) Lorenzo Giuliani * Licencia MIT (http://www.opensource.org/licenses/mit-license.html) * /! function (window) {var $ q = function (q, res) {if (document.querySelectorAll) {res = document.querySelectorAll (q); } más {var d = documento, a = d.styleSheets [0] || d.createStyleSheet (); a.addRule (q, 'f: b'); for (var l = d.all, b = 0, c = [], f = l.length; b = 0 && rect.left> = 0 && rect.top)} var images = new Array (), query = $ q ('img.lazy'), processScroll = function () {for (var i = 0; i <images.length; i ++) {if (elementInViewport (images [i])) {loadImage (images [i], function () {images.splice (i, i);}); }}; }; // Array.prototype.slice.call no se puede llamar bajo nuestro encantador IE8 para (var i = 0; i <query.length; i ++) {images.push (query [i]); }; processScroll (); addEventListener ('desplazamiento', processScroll); }(esta);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
Y así es como puede llamar a la función jQuery para implementar la carga diferida de imágenes de forma dinámica. Necesita usar la clase perezosa para cada imagen que desee cargar usando la función jQuery.
Conclusión
Lazyload es algo bueno para su blog o sitio web corporativo. Ayuda con el SEO y Google puede verlo. Pero no necesita preocuparse por esto porque ellos saben cómo funciona la carga diferida.
También puede personalizarlo como desee cambiando la animación y agregando un retraso.
Hola,
Es una buena información y es muy útil. Lazy It es muy útil ya que estaba usando temas para mostrar imágenes.
Buen trabajo y sigue adelante…!