Cómo aprovechar al máximo Lazy Load de WP Rocket en WordPress
Casi todos los sitios web utilizan imágenes porque son excelentes para captar la atención del visitante. Sin embargo, también pueden ralentizar considerablemente su sitio web, especialmente cuando los archivos de imagen son grandes. El uso de la técnica de carga diferida puede ayudar a acelerar su sitio web.
Esta técnica solo cargará una imagen en una página cuando un visitante la vea. Como resultado, la velocidad de carga general de la página es mucho más rápida. Esto es especialmente importante para los sitios web que tienen galerías de fotos.
Hoy demostraré cómo hacer esto con el complemento Lazy Load.
¿Qué puede hacer Lazy Load por su sitio web?
La carga diferida es una técnica poderosa para que la usen los desarrolladores que puede impactar más de lo que piensas.
Primero, comencemos con lo obvio, las imágenes. En realidad, la técnica fue desarrollada específicamente para ellos y funciona de maravilla. Mejorar el tiempo de carga de su sitio web no solo mejora la experiencia del usuario, sino que también mejora el SEO de su sitio web.
Después de todo, la velocidad es un factor confirmado que Google y otros motores de búsqueda utilizan para las clasificaciones.
Si bien las imágenes siguen siendo extremadamente populares, el contenido de video se ha convertido en el contenido más deseable en Internet. Y ahora puedes incluso cargar videos de forma diferida. De hecho, este complemento reemplazará específicamente los iframes de YouTube con la vista previa en miniatura.
No todos los visitantes van a hacer clic en un video, por lo que no hay razón para que ralentice su página.
Nota: Esto no debería afectar los videos que están configurados para reproducirse automáticamente cuando se carga una página.
Cómo agregar carga diferida a WordPress
Paso 1: instalar la carga diferida
El complemento Lazy Load de WP Rocket es bastante simple de configurar y tiene más de 100,000 instalaciones activas. Este complemento le permite usar la carga diferida tanto en imágenes como en video. También puede optar por deshabilitar la carga diferida en contenido específico. Esto es genial para las cosas que quieres que vean los visitantes.
Comencemos haciendo clic en Complementos y seleccionando la opción Agregar nuevo en el panel de administración de la izquierda.
Busque Lazy Load en el cuadro de búsqueda disponible. Esto abrirá complementos adicionales que pueden resultarle útiles.
Desplácese hacia abajo hasta que encuentre el complemento Lazy Load y haga clic en el botón "Instalar ahora" y active el complemento para su uso. Es el creado por WP Rocket.
Nota: vale la pena mencionar que si actualmente usa Jetpack, verá una opción para habilitar el módulo de carga diferida dentro de él. Es otra gran opción a considerar, especialmente si ya tienes Jetpack instalado.
Paso 2: habilite la carga diferida
Ahora dije, este complemento era fácil de usar y no estaba mintiendo. En realidad, consta de tres casillas de verificación que puede usar para activar y desactivar la función en diferentes tipos de contenido.
En el panel de administración de la izquierda, haga clic en Configuración y seleccione la opción LazyLoad.
Hay tres casillas de verificación para interactuar que permiten la carga diferida de imágenes, iframes y videos, y la capacidad de reemplazar el video de YouTube con una imagen en miniatura.
Si marca la casilla para imágenes o iframes, esto reducirá la cantidad de solicitudes HTTP que realizará una página cuando se cargue. Como resultado, se carga mucho más rápido.
La opción de reemplazo de miniaturas de carga diferida hace exactamente lo que parece. Esto puede tener un tremendo impacto en las páginas con contenido de video. Esto es especialmente importante para los usuarios móviles. Los teléfonos inteligentes han recorrido un largo camino, pero aún palidecen en comparación con una computadora de escritorio.
Por lo tanto, cargar varios videos en una página puede agregar segundos para los usuarios móviles, especialmente en hardware antiguo. Solo tenga en cuenta que esta opción no es excelente si el video es la característica principal de la página.
Marca las casillas como mejor te parezca.
También verá un anuncio de la versión premium de este complemento, WP Rocket. Este complemento premium se enfoca en maximizar la velocidad de su sitio web y va mucho más allá de simplemente agregar carga diferida a imágenes y videos. Es una excelente opción para cualquier desarrollador que busque acelerar su sitio web.
Haga clic en el botón "Guardar cambios".
Luego puede comenzar a ver qué tan rápido se cargan sus páginas. Asegúrese de probarlo tanto en contenido de imagen como de video para ver los resultados.
Paso 3: deshabilite la carga diferida
Las opciones disponibles en el paso anterior eran opciones globales, lo que significa que afectaban a todo el contenido de su sitio web. En realidad, es posible que solo desee excluir algunas páginas de la implementación de esta función.
Y en algunos casos, es posible que desee excluir imágenes individuales. Sin embargo, el complemento no tiene esta característica, al menos de forma nativa. En cambio, la página del complemento proporciona el código necesario para lograr estos resultados.
Nota: Dado que tendrá que editar el código de su sitio web, le recomiendo hacer una copia de seguridad de su sitio web . Esto garantizará que, si algo sale mal, pueda restaurar su sitio web y evitar el tiempo de inactividad. Dicho esto, nada es muy difícil.
Para desactivar la carga diferida en páginas específicas, agregue el siguiente código a su archivo de funciones:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
add_action('wp', 'deactivate_rocket_lazyload_on_single');
función deactivate_rocket_lazyload_on_single() {
si (es_soltero()) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
[/ht_mensaje]
Si está interesado en deshabilitar el complemento en ciertas imágenes, puede agregar la siguiente propiedad a su etiqueta img o iframe:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style= ”” ]data-no-lazy=”1″[/ht_message]
La única otra forma de deshabilitar esta función es desmarcar la casilla. Con suerte, en el futuro, se agregarán más opciones para deshabilitar para ayudar a los principiantes.
Felicitaciones por configurar el complemento Lazy Load en WordPress.
Optimice sus imágenes y videos
Utilizar la carga diferida es una excelente manera de mejorar el rendimiento de su sitio web, pero no reemplaza la optimización de sus imágenes. De hecho, incluso si lo usa, la optimización de sus imágenes mejorará el rendimiento de la página y la experiencia del usuario.
Después de todo, esas imágenes deben cargarse en algún momento.
Esto no solo afectará el rendimiento de su sitio web, sino que también puede ahorrar espacio en el servidor. La imagen típica solo debe tener unos pocos kb en total. Solo las imágenes muy grandes deben superar esta cantidad. Para sitios web con miles de imágenes, esto es esencial.
En algunos casos, los propietarios de sitios web pueden estar pagando cientos de dólares por espacio adicional en el servidor porque no están optimizando las imágenes.
Estos consejos también se aplican a los videos, y potencialmente aún más. Los videos son archivos enormes, especialmente si elige alojar el video en su propio sitio web. Esto nunca se recomienda; en su lugar, cárguelo siempre en YouTube e insértelo en su sitio web para obtener los mejores tiempos de carga.
Recuerde, los videos privados existen en YouTube y son excelentes opciones para los sitios web de membresía .
Haga que su sitio web sea rápido
No hay duda al respecto, los sitios web rápidos benefician tanto la experiencia del usuario como su clasificación. No hay motivo para conformarse con nada menos que un sitio web rápido y optimizado. Sin embargo, las imágenes y el contenido de video pueden ralentizar considerablemente las publicaciones y las páginas, pero esto se puede mitigar.
Dicho esto, están lejos de ser las únicas cosas que pueden afectar la velocidad del sitio web. Por ejemplo, ¿sabía que los complementos ralentizan su sitio web ? Es por eso que muchos desarrolladores intentan evitar agregar nuevos complementos siempre que sea posible.
Por lo tanto, este tutorial puede ser solo el primer paso para lograr los resultados más rápidos.
¿Eligió deshabilitar el complemento Lazy Load en alguna página? ¿Cuánto más rápido se cargan sus páginas?