Preload (carga de recursos web)
Contenido
- 1 ¿Qué es el preload (carga de recursos web)?
- 2 ¿Para qué se utiliza el valor preload?
- 3 ¿Por qué se introdujo el preload?
- 4 Compatibilidad con los navegadores
- 5 ¿Cuáles son los recursos que se precargan habitualmente?
- 6 Ejemplos de precargas
- 7 Diferencias entre el preload y el prefetch
- 8 ¿Cuál es su importancia en SEO y para el desarrollo web?
- 9 Ampliar conocimientos
- 10 Contenidos relacionados
¿Qué es el preload (carga de recursos web)?
El preload (carga de recursos web), preloading o la precarga es un valor HTML que permite a las/los desarrolladoras/es solicitar a los navegadores que comiencen a cargar un recurso que se necesitará inmediatamente, de este modo las/los webmasters tienen mayor control sobre la carga de una página web y de sus diferentes recursos.
Entre otras cosas, el preload puede prevenir, por ejemplo, problemas como el bloqueo del renderizado de los recursos al cargarlos en el inicio, mejorando así la experiencia de usabilidad al optimizar la velocidad de carga de una página.
¿Para qué se utiliza el valor preload?
El valor preload mejora los tiempos de carga de los sitios web al comunicarle a los navegadores cuáles son los recursos a priorizar, generalmente antepone aquellos recursos críticos que ralentizan la página cuando se van solicitando mucho después que otros.
Sin embargo, durante los últimos años, los navegadores han mejorado la manera de descubrir y obtener los recursos necesarios con mayor velocidad, por lo tanto, en la actualidad el atributo preload se usa con menos frecuencia y solo para elementos que deben ser recargados para optimizar la velocidad de una página.
¿Por qué se introdujo el preload?
El valor preload se introdujo como una versión mejorada de subresource, empleado en un principio para cargar recursos de manera anticipada.
Sin embargo, como subresource no cumplió su propósito original, pues no funcionaba correctamente debido a diversos bugs, se desarrolló preload para mejorarlo y optimizar así el proceso de carga de determinados recursos.
En este sentido, el preload facilita al navegador la identificación de cada tipo de recurso para establecer su prioridad y además le permite comprobar si cada contenido cumple con las políticas de seguridad, mejorando la experiencia de usabilidad al prevenir la descarga automática de contenidos peligrosos.
Por todo ello, desde 2016 la mayoría de los navegadores han dejado de trabajar con subresource y a favor de preload.
Antes de utilizar un valor preload, es importante asegurarse de que sea compatible con los navegadores principales para garantizar la mayor efectividad posible. A continuación, se muestran algunos de los más importantes que admiten el uso de dicho recurso:
- Google Chrome
- Firefox
- Microsoft Edge
- Safari
- Android browser
- Opera
- Samsung internet
¿Cuáles son los recursos que se precargan habitualmente?
Existen diversos elementos que se pueden precargar en un sitio web, por ejemplo, los ficheros más importantes de CSS o de JavaScript, siendo que en un website la precarga de estos archivos garantiza que los recursos se detecten a tiempo. Sin embargo, la precarga tiene muchos otros usos. A continuación, se enlistan los más comunes:
- Archivos CSS.
- Archivos Javascript.
- Documentos.
- Imágenes.
- Audio y vídeo.
- Fuentes.
Ejemplos de precargas
Estos son algunos ejemplos de cómo utilizar preload en el head (<head></head>) o cabecera de una página:
<link rel="preload" href="ejemplo-vídeo.mp4" as="vídeo" type="video/mp4"> <link rel="preload" href="emplo-vídeo.webm" as="vídeo" type="video/webm">
En el primer ejemplo, se muestra la precarga de un archivo de vídeo de manera sencilla.
<link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script">
En este segundo ejemplo se muestra cómo las páginas CSS y Javascript están precargadas, lo cual ayuda a evitar los bloqueos de renderizado, mejorando además la velocidad percibida y la rapidez real de la página.
Diferencias entre el preload y el prefetch
Además de precargar un recurso, también existe la posibilidad de anticipar su carga o prefetching.
En este sentido, la principal diferencia entre el preload y el prefetch reside en que preload le indica al navegador que puede comenzar a buscar un elemento porque existe total seguridad de que será utilizado a continuación, por lo cual ese recurso pasa a ser de alta prioridad.
Mientras que, prefetch le comunica al navegador que hay un recurso que, probable y no definitivamente, puede ser necesitado, lo que le asigna menor prioridad a este elemento.
Además, otra diferencia es que preload suele referirse a los recursos que se utilizan en la página actual. En cambio, prefetch se usa más para los recursos que se necesitan más bien para la página siguiente.
¿Cuál es su importancia en SEO y para el desarrollo web?
El preload o precarga puede ayudar a las/los profesionales del SEO y desarrolladores/as a establecer las prioridades de ciertos recursos, mejorando así la experiencia de usabilidad al incrementar la velocidad de una página.
Cabe mencionar que la velocidad de una web no solo impacta positivamente en la experiencia de usuario, sino que además mejora las señales de usabilidad de un sitio, lo cual supone un punto positivo para el SEO. Esto quiere decir que, aplicando el recurso correcto, se puede generar un buen impacto en el rendimiento de una website en las SERPs.
Ampliar conocimientos
- http://www.forosdelweb.com/f4/precarga-preload-pagina-html-completa-767166/
- https://yeisondaza.com/optimizar-sitio-web-preload-prefech
- https://programmerclick.com/article/7600946479/
- https://www.lawebdelprogramador.com/foros/JavaScript/299829-Precarga-de-pagina-preload.html
| Sobre las autoras y autores: |
 |