Un método estructurado para entender un sitio, auditar rendimiento, SEO, accesibilidad y prácticas de seguridad defensiva.

Análisis de un sitio web: método, herramientas y buenas prácticas

0

Un método estructurado para entender un sitio, auditar rendimiento, SEO, accesibilidad y prácticas de seguridad defensiva.

Foto: Pixabay / Pexels
10 min read

Objetivo y alcance

Analizar un sitio web no es solo ver el código fuente. Un sitio moderno combina HTML, CSS, JavaScript, medios, llamadas API, cookies, almacenamiento local, scripts de terceros, analytics y a veces autenticación.

El objetivo puede ser entender cómo funciona, auditar tu propio sitio, mejorar rendimiento, revisar SEO, analizar accesibilidad o identificar malas prácticas de seguridad defensiva.

Esta guía se mantiene en un marco legal y ético. No busca saltarse autenticaciones, explotar fallos, descargar masivamente un sitio, acceder a datos privados ni perturbar un servicio.

Definir el alcance

Antes de empezar, documenta el marco:

Sitio analizado:
Objetivo: aprendizaje / auditoría interna / rendimiento / SEO / accesibilidad / seguridad
Propietario:
Autorización: sí / no
Páginas cubiertas:
Acciones permitidas:
Acciones prohibidas:
Fechas de prueba:
Contacto técnico:

Inspeccionar HTML/CSS/JS cargados en tu navegador, usar DevTools, medir rendimiento, revisar accesibilidad, leer headers HTTP o consultar robots.txt y sitemap.xml suele ser aceptable. Saltarse autenticación, acceder a endpoints privados, lanzar escaneos intrusivos o recoger datos personales requiere autorización clara.

Grandes áreas de análisis

Un análisis web combina varios ángulos:

  • front-end: HTML, CSS, JavaScript, DOM, componentes, frameworks;
  • red: peticiones, APIs, scripts de terceros, CDN, códigos HTTP, tiempos;
  • rendimiento: peso de recursos, render inicial, caché, Core Web Vitals;
  • SEO: title, meta description, encabezados, URLs, enlaces internos, sitemap;
  • accesibilidad: contraste, teclado, texto alternativo, labels, ARIA;
  • seguridad defensiva: headers, cookies, CORS, CSP, errores visibles, dependencias.

La idea es comprender el sitio, no forzarlo fuera de su uso normal.

Preparar el entorno

Un navegador moderno ya ofrece mucho. Herramientas útiles:

  • Chrome DevTools o Firefox DevTools;
  • Lighthouse, PageSpeed Insights y WebPageTest;
  • Wappalyzer o BuiltWith;
  • curl, wget o httpie;
  • axe DevTools para accesibilidad;
  • Screaming Frog SEO Spider para SEO;
  • Playwright o Puppeteer para comprobar tu propio sitio;
  • mitmproxy o Burp Suite solo en auditorías autorizadas.

Usa un perfil de navegador dedicado, desactiva extensiones innecesarias, prueba caché fría y caliente, revisa móvil y escritorio, y anota fecha, navegador y páginas probadas.

Primera inspección con DevTools

Abre DevTools con F12 o clic derecho e Inspeccionar. Las pestañas clave son Elements, Console, Network, Sources, Application, Performance y Lighthouse.

Empieza recargando la página con Network abierto y "Preserve log" activado.

HTML, CSS y JavaScript

En HTML, verifica:

[ ] Un único h1 principal
[ ] Encabezados en orden lógico
[ ] Etiquetas semánticas
[ ] Imágenes con alt pertinente
[ ] Formularios con labels
[ ] Enlaces comprensibles fuera de contexto
[ ] Ningún contenido importante solo en imagen

El CSS muestra la arquitectura visual: framework, clases utilitarias, variables, media queries, animaciones, estilos inline y responsive. Señales positivas: variables claras, pocos inline styles, componentes reutilizables, responsive ordenado y coherencia visual.

El JavaScript revela stack, lógica front-end, llamadas API y dependencias. Indicios comunes:

React   → __REACT_DEVTOOLS_GLOBAL_HOOK__, root React
Vue     → __VUE__, data-v-xxxx
Angular → ng-version
Next.js → __NEXT_DATA__, /_next/static/
Nuxt    → __NUXT__, /_nuxt/

Los source maps pueden exponer nombres de archivos, comentarios, rutas internas o lógica de negocio. No siempre es crítico, pero conviene revisarlo en producción.

Network y headers HTTP

Network muestra peticiones, orden, duración, tamaño, headers, respuestas, errores y redirecciones. Flujo simple:

  1. Abrir DevTools.
  2. Ir a Network.
  3. Activar "Preserve log".
  4. Recargar.
  5. Filtrar por JS, CSS, Img, Fetch/XHR, Doc.
  6. Identificar recursos pesados, lentos o fallidos.

Con curl puedes leer headers:

curl -I https://example.com

Headers interesantes:

Strict-Transport-Security
Content-Security-Policy
X-Frame-Options
X-Content-Type-Options
Referrer-Policy
Permissions-Policy
Cache-Control

Su ausencia no prueba una vulnerabilidad, pero suele indicar mejoras posibles.

Cookies y almacenamiento local

En DevTools, abre Application y revisa Cookies, Local Storage, Session Storage e IndexedDB.

Para cookies, comprueba dominio, expiración, path, HttpOnly, Secure, SameSite y ausencia de datos sensibles legibles.

Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Lax; Path=/

Evita tokens sensibles en localStorage si existe una alternativa más segura, porque aumenta la exposición ante XSS.

Formularios

Inspecciona método GET o POST, endpoint, validación cliente, errores, autocomplete, labels, anti-spam, CSRF para acciones autenticadas y comportamiento ante fallos.

La validación cliente mejora la experiencia; la validación servidor es obligatoria para seguridad.

SEO técnico

Revisa las bases:

<title>Título claro de la página</title>
<meta name="description" content="Descripción útil y concisa.">
<link rel="canonical" href="https://example.com/page">

Comprueba jerarquía de encabezados, URLs, enlaces internos, datos estructurados JSON-LD, robots.txt y sitemap.xml.

Importante: robots.txt no es una protección de seguridad. Da instrucciones a robots, pero una URL listada puede seguir siendo pública.

Rendimiento

Mide con Lighthouse, PageSpeed Insights, WebPageTest, Performance y Network.

Métricas importantes:

LCP  → Largest Contentful Paint
INP  → Interaction to Next Paint
CLS  → Cumulative Layout Shift
TTFB → Time To First Byte
FCP  → First Contentful Paint

Causas comunes: imágenes pesadas, demasiado JavaScript, CSS bloqueante, falta de caché, fuentes mal cargadas, scripts terceros, servidor lento y redirecciones inútiles.

Optimizaciones: comprimir imágenes, usar WebP/AVIF, lazy-loading, minificar, eliminar código no usado, activar caché HTTP y diferir scripts no críticos.

Accesibilidad

Checklist rápida:

[ ] Navegación solo con teclado
[ ] Focus visible
[ ] Contraste suficiente
[ ] Imágenes con alt
[ ] Labels de formularios
[ ] Estructura de títulos
[ ] Lector de pantalla si es posible

Problemas frecuentes: botones sin nombre accesible, imágenes sin alt, contraste bajo, modales no navegables con teclado, focus invisible, enlaces "haz clic aquí" y títulos incoherentes.

Tecnologías y scripts terceros

Algunas pistas:

WordPress → /wp-content/, /wp-json/
Shopify   → cdn.shopify.com
Next.js   → /_next/static/
Nuxt      → /_nuxt/
Webflow   → webflow.js
Wix       → static.wixstatic.com

Lista scripts terceros: analytics, tag managers, pixels, chat, pago, reCAPTCHA, widgets marketing y CDN JS. Demasiados terceros pueden afectar rendimiento, consentimiento cookies y superficie de exposición.

Lighthouse y automatización

Lighthouse puntúa Performance, Accessibility, Best Practices y SEO. Es una ayuda, no un veredicto absoluto.

En tu propio sitio, Playwright permite automatizar:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
console.log(await page.title());
await browser.close();

Evita navegación automatizada masiva en sitios de terceros sin permiso.

Mini-análisis ficticio

Para https://example-demo.local, Network muestra:

main.js        900 KB
hero.jpg       3.4 MB
style.css      180 KB
analytics.js   tercero

Problemas probables: imagen principal demasiado pesada y bundle JavaScript grande.

El HTML muestra dos h1; mejora: conservar un único h1 y usar h2 para secciones.

Cookie de sesión bien configurada:

session_id
Secure: true
HttpOnly: true
SameSite: Lax

Checklist rápida

[ ] Objetivo y alcance definidos
[ ] Páginas principales identificadas
[ ] HTML inspeccionado
[ ] CSS inspeccionado
[ ] JavaScript inspeccionado
[ ] Errores console registrados
[ ] Peticiones Network analizadas
[ ] Headers HTTP revisados
[ ] Cookies revisadas
[ ] localStorage/sessionStorage inspeccionados
[ ] robots.txt consultado
[ ] sitemap.xml consultado
[ ] Rendimiento medido
[ ] SEO técnico revisado
[ ] Accesibilidad revisada
[ ] Scripts terceros listados
[ ] Informe redactado

Modelo de informe

# Informe de análisis web

## Información general
Sitio:
Fecha:
Navegador:
Páginas analizadas:
Objetivo:

## Resumen
Hallazgos principales.

## Tecnologías
CMS/framework:
Librerías JS:
Hosting/CDN:
Analytics:

## Rendimiento / SEO / Accesibilidad / Seguridad defensiva
Hallazgos:
Impacto:
Recomendaciones:

## Priorización
Crítico:
Alto:
Medio:
Bajo:

Qué evitar

Sin autorización explícita, evita escaneos agresivos, fuerza bruta, explotación, bypass de autenticación, extracción masiva de datos, pruebas destructivas, manipulación de parámetros sensibles, bypass de paywall o reutilización no autorizada de contenidos protegidos.

El análisis responsable busca mejorar, comprender y documentar, no abusar del servicio.

Conclusión

La metodología es simple: definir alcance, inspeccionar HTML/CSS/JS, observar red, revisar headers, cookies y almacenamiento, medir rendimiento, SEO y accesibilidad, identificar tecnologías, documentar hallazgos y proponer recomendaciones concretas.

Con un navegador y DevTools ya se aprende muchísimo. El límite sigue claro: observar y comprender, sí; saltarse, explotar o perturbar, no.