Existen multitud de técnicas para mejorar el rendimiento de las páginas web y conseguir mejores tiempos de respuesta, aunque la mayor parte de estas mejoras se deben realizar en el servidor. Sin embargo existen algunas cosas que podemos hacer desde el propio código HTML, en el Front-End y sin la intervención del servidor, para mejorar la velocidad de carga de las páginas siguientes a la actual y que creo que no son muy conocidas por la comunidad de desarrolladores.
Imagina la siguiente situación: tienes una presentación basada en HTML en la que el usuario se va moviendo hacia adelante para ir visualizando una serie de recursos. Cada pulsación del botón «adelante» hace que se cargue un nuevo recurso. El caso típico es un carrusel de imágenes en el que, cada vez que pulsas en el botón de «adelante» se carga la siguiente imagen que haya en la lista. Si las imágenes son grandes, con mucha resolución, no están muy optimizadas o simplemente la conexión es lenta, es posible que tarden en cargar y por lo tanto no se visualicen correctamente durante unos instantes, o quizá se vayan cargando progresivamente de arriba a abajo, con un efecto muy feo. Seguro que lo has sufrido alguna vez.
HTML dispone de una característica muy interesante para casos así denominada Prefetch, o carga previa de recursos.
Esta carga previa sirve para situaciones como la descrita: cuando sabemos de antemano que es muy probable que el usuario vaya a necesitar uno o varios recursos (páginas, imágenes, fuentes, scripts…) justo a continuación de haber visitado la página actual, podemos avisar al navegador de este hecho y conseguir que los vaya pre-cargando para ahorrar tiempo.
SIGUE LEYENDO para descubrir:
- Cómo podemos precargar en segundo plano cualquier conjunto de recursos sin tener que programar.
- Cómo podemos pre-renderizar páginas completas
- Qué navegadores soportan estas técnicas.
- Cuáles son los posibles problemas