Cómo hacer una web profesional y rápida, explicado con esta misma web

Lo esencial

• Lo que separa una web profesional de una que solo lo parece está debajo: lo que pesa, quién puede usarla, qué pasa cuando falla y qué entienden de ella Google y las IA.
• Esta web saca 100 en las cuatro notas de Lighthouse, en el móvil y en el ordenador, y la uso de ejemplo porque de ella puedo enseñarlo todo.
• Diez artículos, uno cada lunes desde el 16 de noviembre.
• En cada parte digo qué es imprescindible para cualquier empresa y qué hago yo porque me gusta hacerlo así.

Cuando alguien encarga una web, casi siempre la juzga por cómo se ve. Es normal: es lo único que se ve.

Pero lo que separa una web profesional de una que solo lo parece está debajo:

• lo que pesa;
• quién puede usarla;
• qué pasa cuando algo falla;
• qué entienden de ella Google y asistentes como ChatGPT.

Llevo más de 20 años haciendo webs y programas para empresas, y esta web, www.nantec.es, la he programado yo desde cero. Saca 100 sobre 100 en las cuatro notas de Lighthouse, la herramienta de Google que mide si una página está bien hecha, tanto en el móvil como en el ordenador.

En diez artículos la voy a desmontar pieza a pieza: lo que hago, por qué, y cuánto de eso necesita de verdad una empresa.

Por qué contarlo con esta web

Porque de esta puedo enseñarlo todo. De las webs de mis clientes no voy a publicar sus estadísticas ni su código, y tampoco están todas hechas igual: unas son WordPress, por el Kit Digital o porque el cliente lo prefería, y otras van a medida.

Esta es mi escaparate y mi banco de pruebas.

Una idea va a salir en todos los artículos, así que la adelanto: la web se hace para quien la visita, y Google y los asistentes de IA van después. Si alguien llega desde un buscador, no encuentra lo que busca y se va, haberlo traído no ha servido de nada.

Las diez partes

1. El 100 en Lighthouse

Qué mide Lighthouse, por qué Google tiene en cuenta la experiencia que da una página y qué significa cada nota, con las capturas de esta web.

Y una aclaración que conviene hacer pronto: de 90 a 100 la nota ya sale en verde, y para que una web funcione no hace falta un 100. Es la primera parte y ya está publicada: 100 en Lighthouse: qué mide, si hace falta y cómo lo saca esta web.

2. Accesibilidad

Una web accesible la puede usar quien ve mal, quien usa un lector de pantalla o quien navega solo con el teclado. Contaré qué es la WCAG 2.1, a quién obliga la ley y qué pedía el Kit Digital.

Y un caso de la portada de esta web: el carrusel con las webs de mis clientes lleva un botón de pausa porque la norma lo pide cuando algo se mueve solo durante más de cinco segundos. Lighthouse no avisa si falta. Es justo el tipo de detalle que se escapa.

3. Una web ligera

La portada de esta web pesa unos 220 KB en el móvil, con el carrusel, las letras y las estadísticas incluidas, y no pide nada a ningún otro dominio.

Poco JavaScript, ninguna librería que no haga falta, la hoja de estilos en menos de 8 KB, las letras servidas desde el propio servidor y cada imagen en WebP y en varios tamaños, para que el móvil no se descargue la del ordenador.

4. El servidor

La velocidad también depende de dónde vive la web: compresión, HTTP/2 y HTTP/3, y unas cabeceras de caché que eviten que el navegador vuelva a descargar lo que ya tiene. Esta va con Cloudflare delante, aunque todo eso se puede hacer con Apache o con nginx.

Y una curiosidad: con HTTP/3, que es mejor para quien visita, Lighthouse llegó a darle un 99 a una página que tenía un 100.

5. Seguridad

La conexión siempre cifrada, una lista cerrada de lo que la página puede cargar y una protección de los navegadores modernos llamada Trusted Types.

Ningún plugin de seguridad, porque no hay ningún plugin: lo que no está instalado no hay que actualizarlo. Y formularios sin captcha, sin pedirte que señales semáforos.

6. SEO sin atajos

Textos que dicen con claridad qué haces y dónde, enlaces entre tus propias páginas, la ficha de Google y los directorios que valen la pena. También lo que no hay que hacer, como comprar decenas de enlaces en webs que no tienen nada que ver contigo, que no suman y pueden hundirte.

No hay receta rápida. Una web nueva compite en desventaja con las que llevan años, y explicaré por qué y qué se puede ir haciendo mientras tanto.

7. Aparecer en ChatGPT y en las demás IA

Cada vez más gente le pregunta a ChatGPT, Gemini, Perplexity, Claude o Copilot en lugar de buscar en Google, y les pide recomendaciones. Qué leen esos asistentes de una web, qué se puede hacer para que te citen bien y qué es humo.

Con un caso propio: hay otras empresas que se llaman Nantec, en Vitoria y en Taiwán, y los asistentes tienden a mezclarlas.

8. Una web sin aviso de cookies

Aquí no ves ningún aviso de cookies porque no hay nada que aceptar. Un mapa de Google, un vídeo de YouTube incrustado o unas letras cargadas desde otro servidor ya obligan a ponerlo.

Para contar las visitas uso Matomo, en un servidor propio y sin cookies, en lugar de Google Analytics.

9. Una web que avisa cuando falla

Mi trabajo de cada día no es tanto programar como resolver incidencias, y una web que falla sin dejar rastro cuesta horas.

Esta apunta cada error con un código, y quien la visita ve ese código en lugar de una página en blanco. Así encontré siete segundos de errores justo después de una actualización, que nadie me habría contado.

10. Cómo la compruebo antes de entregarla

El cierre, y quizá el más útil si vas a encargar una web. Lo que reviso antes de dar una por terminada:

• Lighthouse en varios tipos de página, en el móvil y en el ordenador;
• el contraste de los colores, medido por un programa;
• capturas de antes y después, comparadas píxel a píxel;
• y una comprobación desde fuera de que no se ve nada que no deba verse.

Lo que no hace falta copiar

No todo lo de esta web lo necesita cualquier empresa. Un WordPress bien montado puede ir muy bien, y un 92 en Lighthouse es una buena nota.

Lo que sí debería tener cualquier web profesional es esto:

• que cargue rápido en el móvil;
• que la pueda usar todo el mundo;
• que diga claro qué haces y para quién;
• que alguien se entere cuando algo se rompe.

En cada parte diré qué es imprescindible y qué hago yo porque me gusta hacerlo así.

Cómo seguir la serie

La primera parte ya está publicada, y desde el 16 de noviembre saldrá una cada lunes, o eso espero. Al final de cada artículo tienes el índice de la serie, con lo publicado enlazado y la fecha de lo siguiente.

Si prefieres no estar pendiente, apúntate abajo al blog por correo y te llegará lo nuevo los martes.

Y si lo que buscas es una web así para tu empresa, hago diseño web en Cantabria con este mismo método. Cómo trabajo cada proyecto lo tienes en páginas web para empresas, y para contarme el tuyo, la página de contacto.