DEV Community: Heorhii Lavrynenko

Inspeccionar enlaces externos con JavaScript: URLs, atributos rel y límites del DOM

Heorhii Lavrynenko — Sun, 01 Nov 2026 13:17:08 +0000

Transparencia: este artículo se ha preparado con ayuda de IA para la redacción y los ejemplos. El código de clasificación se ha comprobado con casos sintéticos; no es una auditoría de sitios de terceros.

Al revisar enlaces conviene separar dos preguntas: «¿a dónde enlaza este documento?» y «¿qué documentos de Internet enlazan a mi dominio?». JavaScript en la página puede ayudar con la primera. La segunda necesita un índice de enlaces o un rastreo con otro alcance.

Este ejemplo es deliberadamente pequeño: recoge enlaces HTTP(S) del documento principal y conserva evidencias, sin asignarles una puntuación SEO.

1. Definir qué significa externo

Aquí usaremos hostname diferente al de la página abierta. Es una decisión explícita, no una definición universal de sitio:

blog.example.com es externo respecto a www.example.com.
Un puerto diferente con el mismo hostname no es externo para esta regla.
No eliminamos www ni calculamos el dominio registrable. Agrupar subdominios necesitaría otra política y, para hacerlo correctamente, una lista de sufijos públicos.

No basta con buscar si un href contiene el nombre del dominio: example.com.evil.test y evil.test/?next=example.com darían falsos resultados.

2. Resolver la URL y conservar los atributos

La función recibe la base de resolución y el hostname de comparación por separado. Un <base href> puede cambiar el destino de un enlace relativo, pero no debería cambiar qué página estamos inspeccionando.

function externalLinkRecord(rawHref, baseURI, pageHostname, rel = '', text = '') {
  if (!rawHref || !rawHref.trim()) return null;

  let url;
  try {
    url = new URL(rawHref, baseURI);
  } catch {
    return null;
  }

  if (!['http:', 'https:'].includes(url.protocol)) return null;
  if (url.hostname === pageHostname) return null;

  const tokens = new Set(
    rel.toLowerCase().split(/[\t\n\f\r ]+/).filter(Boolean)
  );

  return {
    url: url.href,
    hostname: url.hostname,
    anchor: text.replace(/\s+/g, ' ').trim(),
    rel,
    nofollow: tokens.has('nofollow'),
    sponsored: tokens.has('sponsored'),
    ugc: tokens.has('ugc')
  };
}

new URL() resuelve referencias relativas y rechaza entradas no válidas. Filtrar el protocolo evita mezclar enlaces web con mailto:, tel: o javascript:. Los atributos se guardan como señales independientes: un enlace puede tener sponsored y nofollow simultáneamente.

3. Obtener una instantánea del documento

Este segundo bloque utiliza la función anterior:

const records = [...document.querySelectorAll('a[href]')]
  .map(a => externalLinkRecord(
    a.getAttribute('href'),
    document.baseURI,
    location.hostname,
    a.getAttribute('rel') || '',
    a.textContent || ''
  ))
  .filter(Boolean);

console.table(records);

const groups = new Map();
for (const record of records) {
  const group = groups.get(record.hostname) || [];
  group.push(record);
  groups.set(record.hostname, group);
}

console.table([...groups].map(([hostname, links]) => ({
  hostname,
  occurrences: links.length,
  uniqueURLs: new Set(links.map(link => link.url)).size
})));

Aquí anchor significa texto del nodo, no nombre accesible. Un enlace que solo contiene una imagen puede tener anchor vacío y seguir siendo perfectamente utilizable. Tampoco filtramos por visibilidad: textContent puede incluir texto oculto.

El total cuenta apariciones, mientras que uniqueURLs cuenta URLs serializadas distintas. No eliminamos fragmentos ni parámetros: decidir que dos destinos son equivalentes requiere una regla adicional. Repetir el mismo destino en el menú y el pie de página no demuestra un problema.

4. Casos pequeños que conviene probar

Con base https://example.com/docs/ y hostname example.com:

Entrada	Resultado esperado
`/contacto/`	Se excluye: mismo hostname
`https://example.com:8443/`	Se excluye con esta regla
`//other.test/help`	Se incluye como HTTPS
`https://blog.example.com/`	Se incluye: subdominio distinto
`https://example.com.evil.test/`	Se incluye: otro hostname
`mailto:hello@example.com`	Se excluye por protocolo
`http://[`	Se excluye: URL no válida

Añade una prueba con rel="UGC nofollow sponsored": las tres señales deben resultar verdaderas. Y prueba una base externa: un enlace relativo resuelto contra ella puede ser externo aunque su texto original no contenga un dominio.

5. Lo que este resultado no demuestra

La consulta devuelve una instantánea: los enlaces añadidos después por JavaScript requieren otra lectura. No entra en iframes ni atraviesa Shadow DOM. No extrae enlaces de botones, manejadores de eventos ni todo el historial de navegación de una aplicación.

Tampoco realiza solicitudes HTTP, sigue redirecciones, comprueba indexación o descubre backlinks. Un enlace sin esos tres atributos rel no garantiza transferencia de PageRank. Una señal aislada no sustituye la revisión del destino y del contexto.

Si amplías el ejemplo con CSV, trata las celdas como datos no confiables: las hojas de cálculo pueden interpretar texto que empiece por ciertos caracteres como fórmulas. Entrecomillar valores no elimina por sí solo ese riesgo. Este ejemplo se queda en console.table para mantener el alcance visible.

La parte útil de una herramienta de inspección empieza en su contrato: qué documento lee, cómo decide qué es externo y qué conclusiones deja deliberadamente fuera.

Referencias: constructor URL en MDN y hostname de los enlaces en MDN.

Performance-first WordPress for a real business site: decisions that helped us reach 98 on mobile

Heorhii Lavrynenko — Sat, 24 Oct 2026 18:48:13 +0000

Editorial note: publish as a technical story. Keep the single homepage benchmark in scope, rather than implying site-wide 98 scores. If DEV requests a canonical for a close duplicate, set it to the case URL; this is a distinct English adaptation.

I recently worked on the website for a small digital-marketing project in Spain. It needed the things most business websites need: service landing pages, an editorial section, contact forms, analytics, a consent interface, and room to grow.

We used WordPress, Kadence, and the Gutenberg editor. One of my goals was to avoid turning performance into a separate rescue project after the design was finished.

The homepage eventually recorded a 98/100 mobile Performance score and 98/100 desktop score in PageSpeed Insights on October 22, 2026. GTmetrix rated it A in a separate test.

Here are the choices I think mattered most.

1. A familiar theme, but controlled components

We did not build a CMS from scratch. Kadence gave us the foundation, and Gutenberg made content editing practical.

For shared interface elements such as the header and footer, we used small custom modules rather than introducing an all-purpose visual builder for every detail.

We also reused page patterns for services, sectors, and locations without making every landing page identical. The same structure can support very different content, but each page should still answer its own question.

2. CSS before another JavaScript dependency

Menus, forms, consent, and some components require JavaScript. That is fine.

For animations and responsive layout, though, I preferred native CSS whenever it could do the job. I wanted to avoid adding a whole library for a small visual effect.

The important question was not "Can I remove every script?" It was "What work does this script do, and does every page need it?"

3. Images are a layout and loading problem, not just a format problem

We prepared most content images in WebP and used different hero assets for mobile and desktop where needed.

Above-the-fold imagery received a different loading priority from images lower down the page.

The goal was not just a smaller file. It was to give the browser the right asset early enough for the first screen to make sense.

4. Self-hosted fonts

We used locally hosted Inter WOFF2 files, with font-display: swap and a priority for the font needed early in the page.

Fonts are easy to ignore in performance discussions, but their loading behavior affects how the first content appears.

5. Third-party tags need deliberate placement

Business sites need measurement. Ours also needed Google Tag Manager and a consent flow.

We separated early consent initialization from later analytics loading and controlled how third-party code entered the page.

This comes with a trade-off: delaying tracking can affect the capture of short visits and early interactions. That is why I treat measurement integrity as part of the performance work, not something to sacrifice for the score.

Results and context

The homepage test on October 22 showed 98/100 in mobile Performance, 98/100 in desktop Performance, and 100/100 in the Lighthouse SEO category. GTmetrix gave the homepage an A grade in its October 20 report.

Those are snapshots of a specific page, not a universal score for every URL or real-user metric.

Separately, Google Search Console recorded 106 organic clicks and 14,785 impressions between September 17 and October 20. We also worked on the site's content and SEO architecture, so I would not attribute that search growth to speed alone.

What I'd repeat

Start with the actual page types and the user journey. Define the components you need, think about loading priorities early, and measure the resulting pages.

It's much easier to stay disciplined with a WordPress site when performance is part of the design process rather than a late plugin-shopping exercise.

The full case, including screenshots and the Spanish write-up, is here:
https://mapalocal.es/casos-de-exito/mapalocal-wordpress-pagespeed-98/

I'm curious how other WordPress developers balance analytics and consent requirements with fast initial rendering.