Optimización de la carga de imágenes

Hablemos de la carga lenta
En Tilda, la carga lenta está activada por defecto para todos los sitios web. Permite que los sitios web se carguen más rápido, incluso en dispositivos móviles.
Implementar la carga lenta es un paso más 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 plugin 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. Veamos cómo funciona.

Seleccionemos una plantilla normal de Tilda y publiquémosla: http://project130385.tilda.ws/

Abra la consola de desarrollador del navegador, active la imitación de velocidad lenta (3G) en la configuración y actualice la página.
Browser DevTools "Network" tab showing page loading metrics under 3G throttling: transferred size, total finish time, and "DOMContentLoaded" time.
DOMContentLoaded: 628 milisegundos
Este parámetro indica que todos los scripts básicos y el HTML se han cargado, permitiendo al usuario ver la página directamente.

Finish: 1,65 segundos
Este parámetro indica el tiempo que ha tardado en cargarse toda la página web.

Transferido: 263KB
Este parámetro indica la cantidad de datos transferidos (en bytes).
Estas cifras parecen muy optimistas, pero todo es relativo, ¿no? Ve a Ajustes del sitio → Más y selecciona la casilla "Desactivar Lazy Load para imágenes". Prueba la página una vez más.
In browser DevTools: the "Network" panel showing page loading speed metrics under 3G emulation, including transferred size, DOMContentLoaded time, and finish time.
DOMContentLoaded: 697 milisegundos
Este parámetro indica que todos los scripts básicos y el código HTML se han cargado, lo que significa que el usuario puede ver la página directamente.

Finish: 10,14 segundos
Este parámetro indica el tiempo que ha tardado en cargarse toda la página web.

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 utilizando PageSpeed Insights. Comprobemos la página con la optimización desactivada.
Google PageSpeed Insights report on the "Desktop" tab showing performance suggestions, including the "Optimize images" recommendation under "Should Fix:".
Ahora, habilitemos Lazy Load para las imágenes:
Google PageSpeed Insights: analysis results for a webpage under the "Desktop" tab showing the performance score and optimization suggestions.
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ápidamente.
Nota
¿Cómo puedo eliminar 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 hacer el test. Google desaconseja utilizar scripts en la parte superior de la página.
PageSpeed Insights report: the "Should Fix:" section highlighting recommendations to eliminate render-blocking JavaScript and CSS.
En teoría, puedes eliminar los scripts. Sin embargo, hay que tener en cuenta que es un análisis automatizado, y no es exacto. Como hemos visto, las páginas se cargan muy rápido cuando Lazy Load está activado porque hemos optimizado todo lo que había que optimizar. El análisis ha mostrado que eliminar scripts ahorra 0,3 segundos, pero apenas supone 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?
In Google PageSpeed Insights: the webpage URL field next to the "ANALYZE" button.
¡Uy!
Hecho en
Tilda