Hacer más rápida tu página html

Noté que una página en PHP y MySQL que estaba haciendo empezó a ponerse lenta.

Y buscando encontré Lazysizes, un pequeño archivo en javascript que hace algo maravilloso: Posterga la carga de las imágenes hasta que el usuario llega a la parte de la página en que se encuentran.

Esto hace que la página cargue mucho más rápido.

Puedes descargar el JS de  aquí:
https://github.com/aFarkas/lazysizes

Y usarlo es muy simple.

Pones esto en la cabecera de tu HTML:
<script async="" src="lazysizes.min.js"></script>

Para diferir la carga de una imágen, sólo hay que cambiar esto:

<img src="laimagen.jpg" alt="Una imagen">

por esto:
<img data-src = "laimagen.jpg" class = "lazyload" alt="Una imagen" />

Y si se trata de un iframe, como los que se usa para incrustar videos de youtube, sólo hay que cambiar esto:

<iframe src = "// www.youtube.com/embed/UKwWnvB7R88" frameborder = "0" allowfullscreen> </iframe>

por esto:
<iframe data-src = "// www.youtube.com/embed/UKwWnvB7R88" class = "lazyload" frameborder = "0" allowfullscreen> </iframe>

Adicionalmente, se puede (y debería) hacer que algunos Javascript, especialmente los que no tienen que ver con la construcción del propio HTML cargen luego de terminar de leer el HTML.

Para eso se usa defer="defer"

Por ejemplo, para cargar jquery, la línea quedaría así:
<script src="/jquery-3.4.1.slim.min.js" defer="defer"></script>


Espero que te sea útil.

chaveztoro