Suena como una contradicción: acelere su sitio web utilizando tecnología con «perezoso» en el nombre. Pero funciona. En este tutorial, le mostraré cómo aumentar el rendimiento del sitio web mediante el uso de la «carga diferida» de WordPress.
¿Qué es la carga diferida?
La carga diferida se usa comúnmente en videos e imágenes y, a veces, incluso en bibliotecas. Nos estamos enfocando en las imágenes, por lo que la carga diferida significa no descargar o mostrar imágenes que están fuera de la pantalla hasta que el visitante se desplaza y las trae a la pantalla.
Puede imaginar cómo cargar una página y mostrar solo las imágenes que están visibles en la pantalla podría ahorrarle mucho tiempo. Si un usuario sale de una página sin desplazarse o ver la página completa, las imágenes fuera de pantalla nunca se cargan.
La carga diferida es una de esas cosas ingeniosas que parecen obvias una vez que alguien las implementa. La web temprana, cuando el ancho de banda era caro, podría haberse beneficiado mucho de la carga diferida.
No lo teníamos entonces, pero lo tenemos ahora, así que pongámoslo en práctica.
Instalación del complemento de WordPress a3 Lazy Load
La carga diferida generalmente se realiza mediante controladores de eventos de desplazamiento y cambio de tamaño , o una API llamada observador de intersección. Recientemente , se introdujo un mundo completamente nuevo de carga diferida nativa a nivel de navegador .
Todas esas son cosas geniales e impresionantes. Pero lo que es aún más genial es aprovechar toda esa tecnología sin escribir una línea de código.
Porque ahorrar tiempo también es algo genial.
Vamos a hacer eso instalando el complemento de WordPress a3 Lazy Load .
Inicie sesión en su panel de administración de WordPress.
En la navegación de la columna izquierda, pase el mouse sobre el enlace «Complementos» y haga clic en el enlace «Agregar nuevo».
En el cuadro «Buscar complementos…», ingrese «a3 Lazy Load».
Una vez que haya localizado el complemento, haga clic en el botón «Instalar ahora».
Cuando se haya instalado el complemento, haga clic en el botón «Activar».
Configuración y uso del complemento
Bien, configuremos WordPress para cargar nuestras imágenes de forma diferida. En la columna de navegación de la izquierda, coloque el mouse sobre el enlace «Configuración» y haga clic en el enlace «a3 Lazy Load».
La página de configuración de a3 Lazy Load le presenta muchas opciones. Nos vamos a centrar en algunas secciones importantes.
Tenga en cuenta que cualquier cambio realizado aquí debe guardarse desplazándose hacia abajo y haciendo clic en el botón «Guardar cambios» .
Primero, activación de carga diferida . «Habilitar carga diferida» debe estar activado (ON) de forma predeterminada cuando activa el complemento.
Lo mismo con Lazy Load Images . Todas las opciones deben estar habilitadas de forma predeterminada.
Una configuración útil aquí es «Omitir clases de imágenes». Puede usarlo para asegurarse de que las imágenes que desea cargar siempre eviten la carga diferida.
Por ejemplo, si ingresa «saltar» como nombre de clase aquí, puede aplicar esa clase a cualquier imagen que desee cargar, evitando la carga diferida.
Para agregar la clase «saltar» a una imagen, inserte la imagen en una publicación en el editor de WordPress.
- En el editor de Gutenberg, haga clic en la imagen, luego en la columna de la derecha, haga clic en «Avanzado». En el campo «Clase CSS adicional», ingresa skip .
- En el editor clásico de WordPress, haga clic en la imagen y haga clic en el icono «Editar». Haga clic en «Opciones avanzadas» e ingrese omitir en el campo «Clase CSS de imagen». Haga clic en el botón «Actualizar».
Las opciones en la sección Lazy Load Videos and iframes también están activas de manera predeterminada. Si no usa video o iframes, puede deshabilitar estas opciones.
Excluir por URI y tipos de página es similar a la configuración de clase de imagen que vimos anteriormente. Pero en lugar de usar clases, excluye páginas completas o URL de la carga diferida. También hay «Exclusiones de tipo de página», que están deshabilitadas de forma predeterminada.
Si desea excluir un tipo de página específico, actívelo, desplácese hacia abajo y haga clic en el botón «Guardar cambios».
Script Load Optimization controla dónde se carga el javascript a3 Lazy Load; en el encabezado o pie de página de su tema.
Effect & Style configura las imágenes de carga para que usen un icono de «spinner» de carga, o para que aparezcan gradualmente. El spinner utilitario es la configuración predeterminada, pero el fundido de entrada es mucho más elegante si te gusta el estilo visual.
De forma predeterminada, las imágenes se cargan cuando se vuelven visibles en la ventana gráfica. Puede usar la configuración Umbral de carga de imagen para expandir el área donde se cargará una imagen agregando un valor de píxel. Por ejemplo, si ingresa 50 en el campo Umbral de carga de imagen, se cargarán las imágenes que estén 50 píxeles por debajo de la ventana gráfica (50 píxeles lejos de ser visibles).
WordPress Lazy Loading, ¡misión cumplida!
Eso es todo al respecto. Incluso si nunca cambia ninguno de los ajustes de configuración de a3 Lazy Load, comenzará a cargar imágenes de forma diferida de inmediato. Es realmente uno de los pasos más sencillos para mejorar el rendimiento que puede tomar para su sitio web de WordPress.
Puede ver el efecto de la carga diferida con cualquier herramienta de buen rendimiento. Me gusta Google Lighthouse , Test My Site y PageSpeed Insights. Pero independientemente de lo que use para medir el rendimiento, verá una mejora cuando cargue imágenes de forma diferida.
Otros complementos de carga diferida
Nos hemos centrado en el plugin WordPress a3 Lazy Load, pero no es el único Lazy Loader disponible. También hay cargadores diferidos que funcionan específicamente en comentarios y varios complementos de manipulación de imágenes que también realizan carga diferida.
Smush Image Optimization, Compresión y Lazy Load
Más de un millón de usuarios de WordPress no pueden estar equivocados, y esa es la cantidad de sitios que han instalado Smush . Comprima, optimice y corrija el rendimiento de PageSpeed con imágenes del tamaño adecuado, carga diferida, conversión WebP de próxima generación, formato de imágenes y más.
No dejes que ese tipo de dibujos animados espeluznantes de superhéroes te desanime. 
Smush es una herramienta de rendimiento seria.
Puede ser excesivo si todo lo que buscas es una carga diferida. Pero para un optimizador de imagen completo, no puede ser vencido.
Autooptimizar
Autoptimize es otro gran éxito con más de un millón de instalaciones. También es un todoterreno que optimiza JS, CSS, imágenes (incluida la carga diferida), HTML y Google Fonts, sincronización de JS, eliminación de emoji cruft y más.
No sé qué es «emoji cruft», pero estoy bastante seguro de que no lo quiero en mi sitio web.
Lazy Load de WP Rocket
Lazy Load es un buen cargador perezoso, básico, sin muchos adornos, escalofríos o derrames. Simplemente instálelo, actívelo, marque algunas casillas para indicar qué desea cargar de forma diferida y estará listo para comenzar.
Si desea una carga diferida sin muchas otras funciones (y una gran cantidad de complementos), elija Lazy Load de WP Rocket.
La velocidad del sitio web lo es todo
Puede pasar meses y grandes cantidades de dinero en efectivo desarrollando y promocionando un sitio web. Pero si no es rápido y receptivo, nunca saldrá de los bloques de inicio. La velocidad es un factor importante en la clasificación de los resultados de búsqueda, por lo que si se toma en serio el éxito de su sitio web, debe tomarse en serio la mejora del rendimiento.
Aumentar la velocidad puede implicar mucho trabajo esotérico, denso y difícil. También puede ser tan simple como instalar un complemento, como hemos visto aquí. Mencioné antes que ahorrar tiempo puede considerarse algo genial, y lo mantengo.
Me encanta crear código desde cero en un editor de texto, pero si no tengo que hacerlo, si alguien ha hecho todo el trabajo sucio por mí, sería un tonto si no lo aprovechara.
¡Aproveche un complemento de carga diferida! Todo es recompensa y no hay riesgo.
¿Utiliza alguna herramienta de evaluación comparativa de rendimiento para probar la velocidad de su sitio web? ¿Lazy loading suena como algo que intentarás?