≡En resumen
- Un script es un programa interpretado que automatiza tareas; en la web, casi siempre JavaScript.
- Un script normal en el head bloquea el análisis del HTML hasta que se descarga y ejecuta.
- defer ejecuta en orden al terminar de leer el HTML; async ejecuta en cuanto llega, sin orden garantizado.
- Los scripts de terceros (analítica, publicidad, chats, vídeos) son los que más penalizan la velocidad y la privacidad.
- Auditar qué scripts cargas, retrasar los no críticos y eliminar los que sobran es la mejora de rendimiento con mejor retorno.
01 ¿Qué es un script?
| Tipo | Dónde se ejecuta | Lenguajes | Ejemplo |
|---|---|---|---|
| Del lado del cliente | Navegador del usuario | JavaScript | Carrito que se actualiza sin recargar la página |
| Del lado del servidor | Servidor web | PHP, Python, Node.js, Ruby | Generar la página de un producto con datos de la base de datos |
| De sistema o shell | Sistema operativo | Bash, PowerShell, Python | Copia de seguridad nocturna automática |
| Dentro de una aplicación | Una plataforma concreta | JavaScript, Apps Script | Scripts de Google Ads que pausan anuncios sin stock |
La frontera entre «script» y «programa» es difusa: un script suele ser corto, no se compila por separado y depende de un entorno que lo ejecuta. En esta ficha nos centramos en los scripts de una página web, que son los que afectan a la velocidad, al SEO y a la privacidad.
02 Cómo carga el navegador los scripts: bloqueantes, async y defer
Cuando el navegador lee el HTML y encuentra una etiqueta <script src="…"> sin atributos, se detiene: descarga el archivo, lo ejecuta y solo entonces sigue construyendo la página. Si el script está en el head y pesa o tarda en llegar, el usuario ve una pantalla en blanco. Es lo que las herramientas de rendimiento llaman un recurso que bloquea el renderizado.
| Forma | Descarga | Ejecución | Orden | Úsalo para |
|---|---|---|---|---|
| script normal | Detiene el análisis del HTML | Inmediata | El del documento | Casi nunca en el head; código crítico mínimo |
| async | En paralelo | En cuanto llega, interrumpiendo el análisis | No garantizado | Scripts independientes: analítica, algunos píxeles |
| defer | En paralelo | Al terminar de leer el HTML, antes de DOMContentLoaded | El del documento | Scripts que necesitan el DOM o dependen de otros |
| type="module" | En paralelo | Diferida por defecto | El del documento | Código moderno con import y export |
<script src="/js/menu.js"></script> bloquea hasta ejecutarse.<script src="/js/menu.js" defer></script> se ejecuta cuando el HTML está listo, en orden.<script src="https://analitica.ejemplo/tag.js" async></script> se ejecuta cuando llega, sin esperar a nadie.
Ojo: async y defer no tienen efecto en scripts en línea (los que llevan el código dentro de la etiqueta), y defer no cambia nada en los módulos porque ya se difieren solos.
03 Scripts de terceros: el gran problema de rendimiento
Un script de terceros es el que se carga desde un dominio que no controlas: Google Tag Manager y Analytics, el píxel de Meta, widgets de chat, vídeos incrustados, mapas, herramientas de mapas de calor o de pruebas A/B. Cada uno añade conexiones, kilobytes y trabajo en el hilo principal, y a menudo carga a su vez otros scripts.
92 %
De las páginas carga al menos un recurso de terceros
Fuente: HTTP Archive, Web Almanac 2024
30,5 %
De las peticiones a terceros son scripts, el tipo de contenido más frecuente
Fuente: HTTP Archive, Web Almanac 2024
04 Scripts, Core Web Vitals y velocidad de carga
Los scripts afectan a las tres Core Web Vitals: retrasan el LCP si bloquean el renderizado, provocan saltos de diseño (CLS) si insertan banners o anuncios sin espacio reservado y, sobre todo, empeoran el INP, la métrica de respuesta a la interacción que sustituyó a FID el 12 de marzo de 2024. Cada tarea de JavaScript de más de 50 ms en el hilo principal es una tarea larga que puede hacer que un botón tarde en reaccionar.
- ✓Usa defer para tus scripts propios y async solo para los independientes.
- ✓Elimina scripts que ya no usas: pruebas antiguas, píxeles de campañas terminadas, librerías como jQuery si ya no hacen falta.
- ✓Carga los widgets pesados (chat, vídeo, mapas) al hacer clic o al llegar a su zona, con una fachada o imagen previa.
- ✓Abre antes la conexión a dominios críticos con preconnect y usa dns-prefetch para los secundarios.
- ✓Divide el JavaScript por páginas para no servir en la portada el código del checkout.
- ✓Aprovecha la caché del navegador con nombres de archivo versionados y cabeceras de larga duración.
- ✓Revisa el contenedor de etiquetas: cada etiqueta es un script más.
- ✓Valora el etiquetado del lado del servidor para sacar lógica del navegador.
La guía de web.dev recoge casos reales: The Telegraph difirió todos sus scripts, incluidos publicidad y analítica, y mejoró el tiempo de carga de los anuncios una media de cuatro segundos. En WordPress, el exceso de plugins que añaden scripts en todas las páginas es la causa más común de lentitud; lo explicamos en qué hacer si tu WordPress va lento. Si la web ya está en marcha y no sabes por dónde empezar, la optimización de la velocidad web suele empezar precisamente por el inventario de scripts.
05 Scripts, privacidad y seguridad
Consentimiento de cookies
En España, el artículo 22.2 de la LSSI exige consentimiento antes de instalar cookies no exentas. Los scripts de analítica y publicidad no deben dispararse hasta que el usuario acepte.
Datos que salen de tu web
Cada script de terceros envía al menos la IP y la URL visitada a otro servidor. Debe figurar en tu política de privacidad y, si procede, en el registro de encargados.
Riesgo de cadena de suministro
Si el dominio que sirve un script cambia de manos, tu web ejecuta su código. En junio de 2024 el servicio polyfill.io empezó a distribuir código malicioso a las webs que lo cargaban.
Defensas
Aloja en tu servidor lo que puedas, usa Subresource Integrity (atributo integrity) para archivos estáticos externos y una política CSP que limite qué dominios pueden ejecutar scripts.
La privacidad también es cumplimiento legal: un script que envía datos personales a un tercero sin base jurídica te expone a sanciones según la normativa de protección de datos. Revisar los scripts es, por eso, tarea compartida entre desarrollo, marketing y legal.
06 Cómo auditar los scripts de tu web
-
1
Pasa PageSpeed Insights o Lighthouse
Mira las auditorías de JavaScript sin usar, recursos que bloquean el renderizado, tiempo de ejecución y uso de terceros.
-
2
Haz inventario
Lista cada script, su dominio, quién lo pidió, para qué sirve y en qué páginas carga.
-
3
Mide su coste
En las herramientas para desarrolladores del navegador, la pestaña Cobertura muestra el código descargado que no se usa y la de Rendimiento, las tareas largas.
-
4
Decide
Para cada script: mantener, diferir, cargar solo en ciertas páginas, sustituir por una alternativa ligera o eliminar.
-
5
Comprueba el consentimiento
Con el banner sin aceptar, verifica en la pestaña Red que no se cargan scripts de analítica ni de publicidad.
-
6
Repite cada trimestre
Los scripts se acumulan con cada campaña y cada herramienta nueva.
En proyectos nuevos es mucho más fácil: si el desarrollo web a medida fija desde el principio un presupuesto de JavaScript y una política para scripts de terceros, la web no se degrada con el tiempo.
Preguntas frecuentes sobre Scripts
Es un programa corto escrito en un lenguaje interpretado que otro programa ejecuta para automatizar tareas o añadir funciones. En las webs, suele ser JavaScript que ejecuta el navegador.
Para añadir interactividad (menús, formularios, carritos), cargar contenido sin recargar la página y conectar servicios externos como analítica, publicidad, chats o mapas.
Ambos descargan el script sin detener la lectura del HTML. async lo ejecuta en cuanto llega y sin orden garantizado; defer espera a que termine el HTML y respeta el orden del documento.
Un script que se carga desde un dominio ajeno a tu web, como Google Analytics, el píxel de Meta o un widget de chat. Son útiles pero suelen ser los que más ralentizan la página.
Sí, de forma indirecta: empeoran las Core Web Vitals y la experiencia de usuario, y si el contenido principal depende de JavaScript, Google tiene que renderizarlo para verlo.
JavaScript en el navegador; PHP, Python o Node.js en el servidor; Bash y PowerShell para automatizar sistemas operativos; y Apps Script o JavaScript dentro de plataformas como Google Workspace o Google Ads.
Abre las herramientas para desarrolladores del navegador, ve a la pestaña Red y filtra por JS. PageSpeed Insights también lista los scripts de terceros y lo que cuesta cada uno.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗