Optimización de carga de imágenes

Hablemos de carga diferida
En Tilda, la carga diferida está habilitada de forma predeterminada para todos los sitios web. Permite que los sitios web se carguen más rápido, incluso en dispositivos móviles.
La implementación de la carga diferida es otro paso en la optimización de sitios web en Tilda para una carga más rápida. Las tecnologías evolucionan constantemente y siempre estamos trabajando para que la carga sea aún más rápida.
Lazy Load es un complemento que bloquea la carga de imágenes fuera del área de visualización. Es decir, las imágenes se cargan a medida que el usuario se desplaza por la página. Echemos un vistazo a cómo funciona.

Seleccionemos una plantilla Tilda normal y la publiquemos:http://project130385.tilda.ws/

Abra la consola de desarrollador del navegador, habilite la imitación de baja velocidad (3G) en la configuración y actualice la página.
DOMContentLoaded: 628 milisegundos
Este parámetro indica que todos los scripts básicos y HTML se han cargado, lo que permite al usuario ver la página de inmediato.

Finalización: 1,65 segundos
Este parámetro indica cuánto tiempo ha tardado todo el sitio web en cargarse.

Transferido: 263KB
Este parámetro muestra cuántos datos se han transferido (en bytes).
Estas cifras parecen muy optimistas, pero todo es relativo, ¿no? Vaya a la Configuración del sitio → más y seleccione la casilla de verificación "Deshabilitar carga diferida para imágenes". Pruebe la página una vez más.
DOMContentLoaded: 697 milisegundos
Este parámetro indica que se han cargado todos los scripts básicos y el código HTML, lo que significa que el usuario puede ver la página de inmediato.

Finalización: 10.14 segundos
Este parámetro muestra cuánto tiempo ha tardado todo el sitio web en cargarse.

Transferido: 1.8MB
Este parámetro muestra cuántos datos se han transferido (en bytes).
El tiempo total de carga de la página y la cantidad de datos transferidos se han multiplicado.

Veamos qué más podemos aprender usando PageSpeed Insights. Revisemos la página con la optimización desactivada.
Ahora, habilitemos Lazy Load para imágenes:
Lazy Load bloquea las imágenes que no son visibles para los usuarios,
lo que permite que los sitios web se carguen más rápido.
Nota
¿Cómo elimino el código JavaScript y CSS que impide que se muestre la parte superior de la página?
Esta pregunta suele surgir después de realizar el examen. Google desaconseja el uso de scripts en la parte superior de la página.
En teoría, puede eliminar los scripts. Sin embargo, debe tener en cuenta que se trata de un análisis automatizado y no es preciso. Como hemos visto, las páginas se cargan muy rápido cuando se activa Lazy Load porque hemos optimizado todo lo que había que optimizar. El análisis ha demostrado que la eliminación de secuencias de comandos ahorra 0,3 segundos, pero apenas hace ninguna diferencia.

Por eso recomendamos ignorar los resultados de la prueba automatizada que reacciona tan mal a los scripts en la parte superior de la página.

Por cierto, ¿cómo pasa Google su propia prueba?
¡Vaya!
Hecho en
Tilda