Aquí hay 64 sitios web hermosos, ocho en cada una de ocho categorías, desde estudios y portafolios hasta restaurantes, museos y marcas de salud. No los elegí por gusto. Dibujé los 64 al azar de 227 sitios activos revisados a mano, verifiqué que cada uno cargara, medí cada uno en un teléfono, y anoté qué vale la pena copiar. El hallazgo incómodo es la velocidad: solo 11 de los 35 sitios con suficientes datos de visitantes reales pasan las tres métricas Core Web Vitals de Google, y la puntuación mediana de Lighthouse móvil es 61.
Cómo se seleccionaron y probaron estos 64
La mayoría de las listas de "mejores sitios web" son los favoritos de una persona. Eso funciona para inspiración, pero oculta el costo de velocidad de las páginas que se ven bien, porque los ejemplos lentos tienden a desaparecer de la lista corta. Usé el método opuesto.
- El conjunto: 227 sitios web activos de una base de datos de diseño curada que mantengo. Cada uno fue revisado a mano, tiene una captura de escritorio y móvil, y pasó una verificación de disponibilidad en los últimos 30 días.
- El sorteo: ocho sitios al azar de cada una de ocho categorías, con no más de dos de ningún estudio. Nada aquí es mi trabajo de cliente, y nadie pagó para ser incluido.
- La verificación en directo: cada sitio fue abierto en un navegador (Chromium) el 31 de octubre de 2026 y cargó el mismo sitio para el que fue listado. Dos sitios en el sorteo original estaban detrás de pantallas de verificación de edad que ocultan todo el diseño, así que fueron cambiados por los siguientes sitios en su categoría.
- La prueba de laboratorio: una prueba de Lighthouse móvil por sitio entre el 12 y el 31 de octubre de 2026, registrando la puntuación de rendimiento, Largest Contentful Paint y el peso total de la página.
- Los datos de visitantes reales: figuras del Informe CrUX de Chrome para teléfonos, que Google recopila de usuarios reales de Chrome durante una ventana móvil de 28 días. Los sitios pequeños a menudo no tienen suficientes visitantes para aparecer, así que 26 de los 64 muestran "sin datos".
- No es una clasificación: el orden dentro de cada categoría es el orden del sorteo.
Lo que 64 sitios web hermosos cuestan en velocidad
Google llama "bueno" a un LCP de 2.5 segundos o menos, un INP de 200 milisegundos o menos y un CLS de 0.1 o menos, medido en el percentil 75 de cargas de página (web.dev). Una página pasa Core Web Vitals cuando cumple con los tres. Los 64 sitios se distribuyeron así.
| Hallazgo | Resultado |
|---|---|
| Puntuación mediana de rendimiento de Lighthouse móvil | 61 |
| Puntuación 90 o superior | 7 de 64 |
| Puntuación menor a 50 | 16 de 64 |
| Peso mediano de página | 4.25 MB |
| Páginas mayores a 10 MB | 15 de 64 |
| Página más pesada | 104.4 MB (ERA Residence) |
| Sitios con datos de visitantes reales (CrUX) | 38 de 64 |
| Aprueban los tres Core Web Vitals, de los 35 con datos suficientes para evaluar | 11 |
| LCP de visitantes reales dentro de 2.5 segundos | 20 de 38 |
Para comparación, el informe Chrome UX Report de septiembre de 2026 de Google coloca la proporción de orígenes con Core Web Vitals buenos en 55.9% entre 18,376,044 orígenes (notas de lanzamiento de Chrome UX Report). Estos 64 sitios aprueban a poco más de la mitad de esa tasa: 11 de 35, o alrededor del 31%. Los sitios hermosos no necesariamente son lentos, pero la mayoría de estos lo son.
La puntuación de laboratorio y el resultado de visitantes reales a menudo no coinciden, lo que importa si juzgas un sitio por su número de Lighthouse. Lighthouse no puede medir INP en absoluto (web.dev), y se ejecuta una sola vez, en un entorno controlado, en lugar de hacerlo en dispositivos y redes reales. Heron AI obtiene 52 en laboratorio pero aprueba los tres Core Web Vitals para visitantes reales. Fauna Robotics pesa 68.6 MB y aun así aprueba, porque la parte visible de la página llega rápidamente.
Las categorías difieren menos de lo que podrías esperar. Los estudios tuvieron la mejor puntuación mediana de laboratorio en 69.5, y los sitios de cultura, educación y sin fines de lucro tuvieron la más baja en 50.5. Los sitios de comida, bebida y hospitalidad, que dependen fuertemente de fotografía y video a pantalla completa, no tuvieron ninguno que aprobara los tres Core Web Vitals.
Con qué están construidos los 64
Next.js ejecuta 13 de los 64 y Nuxt 10. WordPress tiene 9 y Webflow 8, Shopify 3 y Framer 2, con un sitio cada uno en Astro, Craft CMS, Gatsby, Remix y SvelteKit. En 14 sitios, el stack no era visible en el HTML. Si estás eligiendo un framework para tu propio proyecto, Astro vs Next.js y el centro de frameworks web cubren las compensaciones.
Lo que los 64 tienen en común
Cada sitio en la base de datos recibe una etiqueta de estilo durante la revisión, y la pila se detecta del HTML en vivo, por lo que estos patrones son conteos más que impresiones.
- La moderación gana. 23 de los 64 están etiquetados como minimalistas, más que cualquier otro estilo. Mucho espacio, una familia tipográfica y una paleta corta hacen la mayor parte del trabajo.
- La fotografía lleva la página. 22 encabezan con fotografía. Una única imagen fuerte a todo ancho vence a un collage casi siempre.
- El movimiento es común y cuesta. 20 sitios cargan una biblioteca de desplazamiento suave o animación, Lenis en 14 y GSAP en 11. Su puntuación mediana de Lighthouse es 56.5, contra 64 para los sitios sin una.
- Oscuro y colorido son igualmente populares. 14 sitios están etiquetados oscuro y 14 colorido. Elige uno deliberadamente y compromete con él.
- El tipo es la marca. 12 están etiquetados tipográficos, donde un titular de gran tamaño o una tipografía distintiva hace el trabajo que haría una imagen hero.
Estudios y agencias
Los sitios de estudios y agencias son la vidriera propia del diseñador, así que generalmente toman los mayores riesgos con tipografía y movimiento. Este grupo tuvo la mejor puntuación mediana de laboratorio de los ocho en 69.5, ayudado por DATT Studio, que obtiene 100 en una página de 0.1 MB. Si estás contratando un estudio, su propio sitio es una vista previa justa de sus hábitos de trabajo, y la página de agencia de diseño web de Londres explica cómo abordo el mismo proyecto.
| # | Sitio | Lighthouse (móvil) | LCP, visitantes reales | INP | CLS | Peso de página | Construido con |
|---|---|---|---|---|---|---|---|
| 1 | Little Plains | 55 | sin datos | sin datos | sin datos | 11.5 MB | Next.js |
| 2 | DATT Studio | 100 | sin datos | sin datos | sin datos | 0.1 MB | Astro |
| 3 | Ad Astra Marketing | 91 | sin datos | sin datos | sin datos | 0.7 MB | Next.js |
| 4 | Hattenberger Partner | 59 | sin datos | sin datos | sin datos | 3.8 MB | Gatsby |
| 5 | GM Studios | 67 | sin datos | sin datos | sin datos | 7.8 MB | Next.js |
| 6 | Boc.Studio | 72 | 2.5 s | 122 ms | 0.00 | 7.3 MB | Next.js |
| 7 | LxL Creative | 63 | 3.3 s | 442 ms | 0.02 | 1.9 MB | Webflow |
| 8 | Conjunto | 95 | 2.2 s | sin datos | 0.00 | 0.9 MB | Next.js |
1. Little Plains
Un panel blanco con esquinas redondeadas se superpone a una fotografía borrosa de cielo y mar, dando a la página una sensación tranquila y despejada. El dibujo lineal suelto de dos personas en un bote de remos y el encabezado en letra de pincel añaden calidez hecha a mano, mientras que el texto serif simple del cuerpo mantiene el mensaje legible. La paleta de colores se mantiene principalmente en azul marino, con algunos acentos suaves.
Toma esto: Empareja una ilustración hecha a mano con un titular en letra de guion y un párrafo serif simple, para que un pequeño estudio tenga una personalidad reconocible sin necesidad de una sesión de fotos.
Ten cuidado con: La prueba de laboratorio salió mediocre y la página es muy pesada, lo cual es mucho pedirle a una pantalla que contiene un dibujo, un encabezado y un párrafo. Google no tenía suficientes datos de visitantes reales para mostrar cómo se siente para usuarios reales.
Diseñado internamente. Visita littleplains.com.
2. DATT Studio
Una D mayúscula serif blanca y desproporcionadamente grande, con contraste marcado en sus trazos gruesos y finos, se asienta sobre negro puro y cumple el rol de un logotipo. El encabezado debajo utiliza una grojesca apretada y audaz, con la última línea subrayada como pista de enlace. El espacio vacío generoso da espacio a ambos elementos.
Toma esto: Empareja una forma de letra de exhibición distintiva con un titular sans-serif audaz y simple, y deja que un fondo de un solo color plano lleve el resto.
Ten cuidado con: La página se probó rápido en laboratorio y es ligera, lo que se adapta a un diseño sin imágenes, aunque Google no tenía suficientes datos de visitantes reales para mostrar cómo funciona para usuarios reales.
Diseñado internamente. Visita dattstudio.com.
3. Ad Astra Marketing
Una fotografía de un caminante del espacio sobre la curva de la Tierra lleva toda la idea, y el encabezado la responde directamente. El serif alto y condensado, con una palabra en cursiva, da calidez a la página negra, mientras que pequeñas etiquetas de espaciado monoespaciado mantienen el resto ordenado. El espacio vacío generoso alrededor del texto deja que la imagen respire.
Toma esto: Empareja una fotografía fuerte y relevante con un gran titular serif que establece una sola palabra en cursiva, y mantén el texto de apoyo pequeño y discreto.
Ten cuidado con: La prueba de laboratorio salió rápido y la página es ligera, así que el gran héroe oscuro cuesta poco, pero Google no tenía suficientes datos de visitantes reales para mostrar cómo funciona para usuarios reales.
Diseñado internamente. Visita adastramarketing.com.au.
4. Hattenberger Partner
Un enorme titular negro en sans-serif pesada y ancha se asienta sobre blanco puro, para que el mensaje llegue antes que cualquier otra cosa. Una mancha borrosa suave de azul eléctrico se filtra desde el borde izquierdo, y un distintivo azul redondo con texto alrededor de su borde da a la página un punto focal similar a un sello. El pequeño texto corporal tipo máquina de escribir y los iconos de corchetes en azul añaden sabor de programador sin desorden.
Toma prestado esto: Coloca el titular en sans-serif pesada en tamaño muy grande sobre blanco puro, luego añade una única forma de color borrosa detrás para profundidad.
Ten cuidado con: La página es clara, lo que ayuda, pero la prueba de velocidad en el laboratorio resultó intermedia y Google tiene muy pocos datos de visitantes reales para mostrar cómo se siente en el uso cotidiano.
Diseñado internamente. Visita hattenbergerpartner.de.
5. GM Studios
Una fotografía a sangre completa oscura del estudio, con dos presentadores en una mesa redonda bajo luces softbox, establece el tono inmediatamente. El enorme titular sans extendido pesado en blanco se desvanece en una base rojo-negra profunda, por lo que permanece legible. Una línea de script delgada arriba añade contraste sin abarrotar el diseño.
Toma prestado esto: Usa una fotografía real de tu propio espacio de trabajo detrás de un titular corto muy grande, y desvanece la parte inferior de la imagen a un color sólido para que el texto sea legible.
Ten cuidado con: La prueba en el laboratorio resultó intermedia y la página es más pesada que el promedio, lo que se ajusta a una imagen o video de estudio a pantalla completa. Google no tenía suficientes datos de visitantes reales para mostrar cómo se siente para usuarios reales.
Construido por tonsiteweb.io. Visita lesgmstudios.com.
6. Boc.Studio
Una banda naranja saturada cruza un fondo suave color polvo de rosa, con dos esferas translúcidas vidrosas en los bordes como accesorios. La marca de palabra usa sans geométrico limpio con espaciado apretado, y pequeñas líneas negrita y regular a su lado establecen una jerarquía clara. Las amplias áreas vacías dejan que el contraste de color lleve la pantalla.
Toma prestado esto: Usa una banda horizontal de color fuerte para llevar tu nombre y una breve descripción sobre un fondo tranquilo de tono único, para que la primera pantalla tenga un punto focal claro.
Ten cuidado con: La página es más pesada que el promedio y obtiene una puntuación intermedia en la prueba de laboratorio, pero los visitantes reales obtienen una buena experiencia en las tres métricas de Core Web Vitals, por lo que el peso no está perjudicando a la gente en la práctica.
Diseñado internamente. Visita boc.studio.
7. LxL Creative
Un único retrato en marco redondeado se asienta contra un fondo marrón profundo, y las letras anchas crema y el script manuscrito naranja extraen su color de la fotografía y la chaqueta. La marca de palabra de tamaño exagerado se superpone al borde de la imagen, uniendo fotografía y tipografía. Mucho espacio vacío mantiene el tagline tranquilo.
Toma prestado esto: Empareja un retrato fuerte con sans pesada y ancha en crema y un único acento manuscrito en un color brillante, todo sobre un fondo plano oscuro.
Cuidado con: La página en sí es ligera, pero los visitantes reales ven una carga lenta del contenido principal y una respuesta lenta a los toques y clics, lo que encaja en un sitio estratificado con animaciones escritas y transiciones de página.
Creado por Jordan Gilroy. Visita lxlcreative.co.uk.
8. Outfit
Una palabra enorme en una sans serif pesada y ancha llena todo el ancho en rojo saturado sobre un fondo blanco cálido. Todo lo demás es pequeño, rojo y alineado estrechamente a una cuadrícula de columnas, por lo que la jerarquía es inmediata. Las fotos de ropa negra, tomadas contra un gris pálido, proporcionan el único contraste.
Adopta esto: Elige un color fuerte, establece el nombre del negocio a todo ancho en una sans serif pesada y mantén todos los otros elementos pequeños, en ese mismo color, sobre un fondo cálido simple.
Cuidado con: La página se probó rápida en el laboratorio y se mantiene ligera, lo que se adapta a un diseño construido a partir de tipografía, color plano y algunas fotos, aunque Google no tenía suficientes datos de visitantes reales para juzgar cómo se desempeña para usuarios reales.
Creado por ++hellohello. Visita outfit.hellohello.is.
Portafolios
Los portafolios generalmente pertenecen a una persona o un equipo muy pequeño, y los mejores dejan que el trabajo llene la pantalla. Ninguno de los ocho pasó las tres Core Web Vitals, y dos pesan más de 35 MB, que es lo que sucede cuando el trabajo en resolución completa va directamente a la página. Para el tuyo, consulta diseño web de portafolio.
Para una muestra más grande, 20 portafolios extraídos del mismo grupo y medidos de la misma manera, consulta los 20 mejores sitios web de portafolio.
| # | Sitio | Lighthouse (móvil) | LCP, visitantes reales | INP | CLS | Peso de página | Construido con |
|---|---|---|---|---|---|---|---|
| 9 | Vivien's Creative | 57 | sin datos | sin datos | sin datos | 2.2 MB | Next.js |
| 10 | Studio K95 | 58 | 5.5 s | 245 ms | 0.00 | 2.3 MB | Nuxt |
| 11 | Jesper Landberg | 60 | 1.1 s | 219 ms | 0.00 | 36.1 MB | Nuxt |
| 12 | House of Honey | 74 | 3.0 s | sin datos | 0.00 | 1 MB | Next.js |
| 13 | Félix Péault | 76 | sin datos | sin datos | sin datos | 1.4 MB | SvelteKit |
| 14 | Nordpixel | 79 | sin datos | sin datos | sin datos | 4.1 MB | No detectado |
| 15 | Oimachi | 47 | sin datos | sin datos | sin datos | 35.4 MB | Webflow |
| 16 | Matthäus Jandl | 61 | sin datos | sin datos | sin datos | 6.9 MB | Framer |
9. Vivien's Creative
Una amplia fotografía de dos figuras cruzando dunas pálidas llena la pantalla, con la pesada marca de palabra blanca sentada en el borde inferior. La línea introductoria usa una serifa ligera de estilo libro, centrada contra el cielo gris verdoso. La navegación se reduce a tres pequeñas mayúsculas, así que la fotografía hace casi todo el trabajo.
Toma esto prestado: Empareja una sola fotografía a sangre completa y fuerte con una marca de palabra desmesurada y una línea introductoria de serifa corta, para que una pequeña empresa pueda decir quién es y qué hace sin paneles adicionales.
Ten cuidado con: La página es ligera, pero la prueba de laboratorio dio un resultado intermedio, y Google no tenía suficientes datos de visitantes reales para mostrar cómo funciona para usuarios reales.
Diseñado por Christopher Doyle & Co.. Visita vivienscreative.com.au.
10. Studio K95
Un azul saturado llena la pantalla, así que la rosa de aspecto vítreo construida con bloques gruesos se lee al instante como el punto focal. Los carteles de proyectos la rodean en anillos, y en el teléfono la tarjeta activa se hincha para llenar la mitad de la pantalla con una etiqueta suave de color rojo. La navegación se mantiene en mayúsculas pequeñas y simples con espaciado generoso, dejando que la obra de arte lleve la pantalla.
Toma esto prestado: Elige un único color de marca plano para todo el fondo, coloca una imagen central atrevida en él y mantén la navegación pequeña y blanca.
Ten cuidado con: La página en sí es ligera, pero el resultado de laboratorio es solo intermedio y los visitantes reales reportan carga lenta del contenido principal (LCP) y respuesta lenta a toques y clics (INP), lo que se ajusta a una página construida alrededor de una escena interactiva en movimiento.
Diseñado internamente. Visita k95.it.
11. Jesper Landberg
La habitación negra con una cuadrícula de perspectiva tenue le da toda la atención a los paneles de proyecto, y la luz ámbar cálida en el panel central atrae la vista directamente. Una serifa itálica alta y delgada se sienta sobre una esfera brillante y una piscina, dando a la página una sensación tranquila y táctil. Los enlaces se reducen a pequeñas mayúsculas en las esquinas, así que nada compite con la imaginería.
Toma esto prestado: Usa un fondo plano oscuro con pequeños enlaces de esquina para que algunas imágenes fuertes lleven toda la página.
Ten cuidado con: La página es muy pesada y obtuvo una puntuación intermedia en la prueba de laboratorio, y los visitantes reales reportan respuestas lentas a toques y clics (INP), que es el costo usual del movimiento rico e imágenes grandes.
Diseñado internamente. Visita jesperlandberg.com.
12. House of Honey
El logotipo se extiende de borde a borde en una sans pesada y ancha sin serif, con un delicado "of" en cursiva itálica atravesándolo. Rosa polvoso y marrón profundo son los únicos colores en el encabezado, así que la fotografía aporta toda la calidez debajo. Pequeñas mayúsculas serif en las esquinas mantienen el lema discreto y equilibrado.
Toma prestado esto: Combina un tipo de titular muy pesado con una sola palabra de acento en cursiva delicada, y mantén el encabezado en dos colores planos para que tu fotografía hable por sí sola.
Ten cuidado con: La página es ligera, pero los visitantes reales ven carga lenta del contenido principal (LCP), lo que se debe a una fotografía grande a todo ancho justo debajo del encabezado, así que esa imagen es lo primero que debes comprimir y ajustar con cuidado.
Creado por Edoardo Lunardi. Visita houseofhoney.com.
13. Félix Péault
Un gradiente de azul a verde se desvanece en un blanco cálido apagado, dándole atmósfera a la página sin adornos decorativos. Las enormes iniciales negras se sientan en esquinas opuestas, y el titular sans condensado y alto está centrado y muy comprimido. Todo lo demás permanece vacío, dejando que una sola fotografía lleve el peso en móvil.
Toma prestado esto: Usa un par de iniciales enormes o un logotipo corto en las esquinas, con un solo gradiente suave detrás, en lugar de una imagen hero de stock.
Ten cuidado con: La prueba de laboratorio salió regular aunque la página es ligera, y Google no tuvo suficientes datos de visitantes reales para mostrar cómo se siente para usuarios verdaderos.
Diseñado internamente. Visita felixpeault.com.
14. Nordpixel
Una fotografía de montaña brumosa en azul profundo y pizarra llena toda la pantalla, con una cabaña de vidrio brillando débilmente en la esquina inferior derecha. El logotipo se sienta en el medio en mayúsculas geométricas pesadas y espaciadas, terminando en un punto azul que refleja los botones. La barra de navegación redondeada blanca destaca limpiamente contra la imagen oscura, y la vista móvil mantiene la misma composición tranquila.
Toma prestado esto: Usa una fotografía grande y tranquila con un solo logotipo pesado sobre ella, y mantén un botón de color en la barra de navegación para la acción principal.
Ten cuidado con: La prueba de laboratorio salió regular y la página es más pesada que el promedio, lo que es acorde con una apertura fotográfica a pantalla completa, y Google no tuvo suficientes datos de visitantes reales para mostrar cómo funciona en la práctica.
Creado por Michael Schnyder. Visita nordpixel.ch.
15. Oimachi
El titular usa una grotesca sans grande y ligera, con una palabra cambiada a un serif en cursiva para contrastar sin otro color. Una página gris pálida, un panel hero oscuro y una columna estrecha de tarjetas postales crean zonas claras. En móvil, la cuadrícula de pictogramas negros sobre líneas de construcción dibujadas se ve deliberada y precisa.
Toma nota de esto: Mezcla una palabra serif única en itálica en un titular sans plano para darle un punto de diferencia a la página sin agregar color ni recursos adicionales.
Ten cuidado con: La prueba de laboratorio encontró que la página es lenta y muy pesada, y Google no tenía suficientes datos de visitantes reales para mostrar cómo se siente para los usuarios actuales.
Diseñado internamente. Visita oimachi.co.
16. Matthäus Jandl
Una cuadrícula de símbolos negros en negrita sobre un fondo gris pálido dice todo, y el nombre debajo usa una grotesca enorme y ancha que se extiende por todo el ancho de la página. Todo es un color, así que los iconos llevan la personalidad. Los espacios generosos mantienen un conjunto de formas ocupado, tranquilo y legible.
Toma nota de esto: Coloca tu nombre o marca en una línea sobretamaño de texto sans serif pesado que abarque el ancho completo, y deja que un único conjunto consistente de gráficos simples se sitúe encima.
Ten cuidado con: La página es más pesada que el promedio y solo mediana en la prueba de laboratorio, que es un precio justo por un héroe construido a partir de muchos gráficos grandes y una fila de desplazamiento de imágenes de proyectos, y no había suficientes datos de visitantes reales para mostrar cómo se siente en la práctica.
Diseñado internamente. Visita matthaeusjandl.com.
Tecnología y finanzas
Los sitios de tecnología y finanzas tienen que explicar algo abstracto y ganarse la confianza al mismo tiempo. Possible Finance y Fauna Robotics pasan las tres Core Web Vitals, y Fauna lo hace en una página de 68,6 MB. Para sitios de productos, consulta diseño web SaaS y diseño de sitio web de servicios financieros.
| # | Sitio | Lighthouse (móvil) | LCP, visitantes reales | INP | CLS | Peso de página | Construido con |
|---|---|---|---|---|---|---|---|
| 17 | Possible Finance | 74 | 1.6 s | 87 ms | 0.00 | 2.7 MB | Framer |
| 18 | Linealidad | 46 | 2.9 s | 403 ms | 0.01 | 4.3 MB | Nuxt |
| 19 | MagicShot.ai | 89 | 1.9 s | 213 ms | 0.00 | 3.8 MB | No detectado |
| 20 | Maxima Finance | 54 | sin datos | sin datos | sin datos | 2.7 MB | No detectado |
| 21 | Clarvos | 46 | sin datos | sin datos | sin datos | 1.9 MB | Webflow |
| 22 | Finance/able | 83 | sin datos | sin datos | sin datos | 4.3 MB | Webflow |
| 23 | Fauna Robotics | 88 | 1,3 s | 180 ms | 0.01 | 68.6 MB | No detectado |
| 24 | Serve Robotics | 41 | 4,6 s | 152 ms | 0.00 | 15.6 MB | No detectado |
17. Possible Finance
Un azul eléctrico saturado llena la mitad izquierda y la barra de navegación, con un titular sans serif blanco y casi negro muy grande y comprimido que se lee de un vistazo. La mitad derecha usa una fotografía cálida de una mujer riendo contra ladrillos y hojas, que contrasta bien con el azul frío. Un botón verde brillante e icono de dólar verde dan al ojo puntos de aterrizaje claros.
Toma esto: Empareja un color de marca plano con un titular grande y una fotografía cálida de un cliente real, luego mantén un color de acento contrastante solo para el botón principal.
Cuidado con: La prueba de laboratorio clasificó la página como mediocre, pero la página en sí es ligera y los visitantes reales obtienen una buena experiencia en todos los Core Web Vitals, así que la construcción de Framer se sostiene donde importa.
Visita possiblefinance.com.
18. Linearity
Una página casi negra deja que el titular ocupe la pantalla. Palabras conectoras grises se sientan junto a chips de forma de píldora brillantes que sostienen un avatar e iconos, para que la oración se lea como un formulario siendo completado. El botón naranja cálido y la flecha de envío naranja son el único color fuerte, indicando al ojo exactamente dónde hacer clic.
Toma esto: Convierte el titular en una oración con chips destacados para las palabras clave, y empareja un botón secundario oscuro con uno primario único y brillante.
Cuidado con: La página es más pesada que el promedio y lenta en la prueba de laboratorio, y los visitantes reales ven problemas con la carga (LCP) y la capacidad de respuesta (INP), así que los efectos animados tienen un costo en conexiones más lentas.
Construido por Konpo. Visita linearity.io.
19. MagicShot.ai
Una página casi negra con un titular sans serif blanco pesado y ancho, con su última línea resaltada en púrpura, da un orden claro a la parte superior de la página. El púrpura se reserva para acciones: el botón Get started, el botón Create y la pestaña Video activa. Un panel de video grande con pequeñas pestañas de miniaturas debajo muestra el producto funcionando, mientras que una fila de estadísticas monoespaciada añade una nota técnica.
Toma esto: Usa un solo color de acento solo para botones y la opción activa, para que el siguiente paso destaque contra un fondo oscuro o neutral.
Cuidado con: La página es ligera, pero la prueba de laboratorio resultó mediocre y los visitantes reales reportan problemas con la capacidad de respuesta (INP), así que los toques y clics pueden parecer lentos para responder.
Diseñado internamente. Visita magicshot.ai.
20. Maxima Finance
Una estatua gris recortada de una figura con túnica sin cabeza está en el medio de una página blanca clara, con el titular corriendo recto atravesándola. La tipografía mezcla un sans fino y ancho con una serif itálica de alto contraste, para que las dos palabras importantes se destaquen. Todo lo demás está contenido, dando espacio a la imagen.
Toma esto: Empareja una imagen fuerte y bien recortada con un titular que la superponga, y establece las palabras clave en una itálica de contraste para que el mensaje se lea de un vistazo.
Cuidado con: La prueba de laboratorio salió regular aunque la página es clara, y Google no tenía suficientes datos de visitantes reales para mostrar cómo funciona para usuarios reales.
Hecho por Dirty Martini. Visita maximafinance.co.uk.
21. Clarvos
Un panel casi negro con una barra de navegación con muesca crema le da a la página un marco confiado y contenido. El titular utiliza un sans geométrico limpio grande, con la última frase destacada en amarillo cálido. Las tarjetas de panel blancas en la esquina inferior derecha, con una tarjeta amarilla entre ellas, muestran el producto de inmediato y mantienen los colores muy controlados.
Toma esto: Destaca la frase clave de tu titular en un único color de acento sobre un fondo oscuro, luego repite ese color en una tarjeta y el botón principal.
Cuidado con: La prueba de laboratorio calificó la página como lenta aunque es clara, y la vista móvil se abre en una zona oscura grande vacía antes de que aparezcan las tarjetas, lo que corresponde a animación programada (se detectaron GSAP y Lenis) reteniendo contenido; Google tenía muy pocos datos de visitantes reales para juzgar.
Hecho por BRIGHTSCOUT. Visita clarvos.com.
22. Finance|able
Una página pálida, casi blanca, deja que el titular haga el trabajo, establecido en un sans serif redondeado grande y centrado arriba de un botón píldora azul. Debajo, triángulos metálicos grises flotan alrededor de una forma facetada vítrea, sugiriendo una escena renderizada con profundidad y movimiento. La barra de menú redondeada oscura da un anclaje firme al borde superior y repite la forma del botón.
Toma esto: Empareja un titular corto y simple con un botón píldora brillante sobre un fondo casi blanco, y deja que una imagen decorativa llene el espacio debajo.
Cuidado con: La página es más pesada que el promedio y puntuó regular en la prueba de laboratorio, que es el costo habitual de una escena renderizada hecha con Spline y GSAP, y no había suficientes datos de visitantes reales para juzgar más.
Hecho por Outcrowd. Visita finance-able.com.
23. Fauna Robotics
Un fondo crema cálido y un titular en tipografía oscura y compacta dan a la página un aire amable antes de que aparezca robot alguno. La foto grande con esquinas generosamente redondeadas muestra a una persona en un banco de trabajo junto a un robot sentado, lo que hace que el producto se sienta accesible en lugar de clínico. La navegación en forma de píldora y el botón naranja refuerzan las formas suaves.
Toma esto prestado: Empareja una única frase de titular simple con una foto grande y honesta de tu propia gente trabajando, y mantén la paleta de colores limitada a crema, casi negro y un acento cálido.
Ten cuidado con: La página es muy pesada y el resultado de la prueba de laboratorio es solo regular, aunque los visitantes reales tienen una buena experiencia en los tres Core Web Vitals, así que el peso no está afectando a las personas en la práctica.
Visita faunarobotics.com.
24. Serve Robotics
Un video a sangre completa llena la pantalla, con un encuadre cerrado del robot de reparto en blanco y verde oscuro que combina con el logo. El titular se posiciona abajo a la izquierda en una tipografía sans serif grande y limpia con espaciado compacto, para que se lea de un vistazo sobre la toma oscura. Las pequeñas pestañas de navegación blancas flotan en la parte superior y se mantienen fuera del camino.
Toma esto prestado: Empareja un titular blanco de tamaño exagerado con una etiqueta entre corchetes pequeña encima de él, colocado sobre una foto o video oscurecido, para que el mensaje se lea en un segundo.
Ten cuidado con: La página es muy pesada, tuvo un desempeño lento en el laboratorio, y los visitantes reales ven una carga lenta de la imagen o video principal, que es el costo habitual de la toma a pantalla completa.
Creado por WILD. Visita serverobotics.com.
Comercio electrónico y moda
Los sitios de moda y comercio electrónico venden el ambiente primero y el producto segundo. Ferm Living y EMO Altar II pasan los tres Core Web Vitals, y RemyShoots obtiene 93 en el laboratorio. Para tiendas, consulta desarrollo de comercio electrónico headless y diseño de sitios web de moda.
| # | Sitio | Lighthouse (móvil) | LCP, visitantes reales | INP | CLS | Peso de página | Construido con |
|---|---|---|---|---|---|---|---|
| 25 | Miu Miu, una casa que ayudamos a moldear | 42 | 3,4 s | 194 ms | 0.01 | 3.8 MB | No detectado |
| 26 | Un océano de ideas | 57 | 4,3 s | sin datos | 0.00 | 2.2 MB | Remix |
| 27 | RemyShoots | 93 | 1.6 s | sin datos | 0.00 | 3 MB | Next.js |
| 28 | Coutumes | 69 | sin datos | sin datos | sin datos | 2.6 MB | Shopify |
| 29 | Ferm Living | 61 | 1,2 s | 112 ms | 0.00 | 7.2 MB | Shopify |
| 30 | Laboratorio Índigo | 49 | sin datos | sin datos | sin datos | 16.3 MB | No detectado |
| 31 | EMO Altar II | 60 | 1,4 s | 114 ms | 0.00 | 3.9 MB | No detectado |
| 32 | Music Sound | 61 | 4,0 s | 99 ms | 0.00 | 3.1 MB | WordPress |
25. Miu Miu, Una casa que formamos
Un campo plano de azul marino profundo que no lleva nada más que mayúsculas blancas en una tipografía sans serif ancha y pesada. Cada línea se empuja hacia los bordes de una columna estrecha, y la última palabra tiene un espaciado de letras que llena el mismo ancho, convirtiendo la oración en un bloque ordenado. Un delgado indicador de sonido con un icono de altavoz se sienta solo en la parte superior.
Toma esto prestado: configura una única declaración breve en mayúsculas pesadas dentro de una columna estrecha, justifica cada línea hacia los bordes y espacía la línea más corta para que coincida.
Ten cuidado con: la página fue lenta en la prueba de laboratorio y los visitantes reales ven problemas con la carga del contenido principal (LCP), aunque la página en sí es ligera, por lo que el peso de la página no es la causa del retraso.
Creado por Merci Michel. Visita immersivebags.miumiu.com.
26. Un océano de ideas
La página divide la pantalla por la mitad, con una figura en cuclillas en una falda amarilla pálida fruncida a la izquierda y una escultura oscura con grano y un abanico de incrustación rayada a la derecha. Un logo blanco grande en un serif de alto contraste con picos afilados y acampanados se sienta justo en el centro sobre ambos. La navegación utiliza pequeñas mayúsculas espaciadas en blanco, por lo que la fotografía hace el trabajo.
Toma esto prestado: empareja dos fotografías contrastantes una al lado de la otra bajo un logo centrado único para que la primera pantalla muestre lo que hace la marca sin necesidad de texto.
Ten cuidado con: la página es ligera, pero la puntuación de laboratorio es media y los visitantes reales ven una carga lenta del elemento más grande, lo que sugiere que la imagen a pantalla completa tarda un momento en aparecer.
Creado por Airnauts. Visita aoiofficial.com.
27. RemyShoots
Un marco casi negro deja que la fotografía lo lleve todo. La imagen del centro está en rojo completo mientras que sus vecinas están drenadas en escala de grises, por lo que el ojo aterriza en un lugar. El tipo monoespacio con recuentos entre paréntesis y una línea de tiempo marcada con una marca añaden un orden tranquilo y técnico que se ajusta al archivo de un fotógrafo.
Toma esto: Usa una imagen a todo color contra vecinos en escala de grises atenuada para dirigir la atención, con un pie de foto monoespaciado simple y un número entre paréntesis debajo.
Ten cuidado con: La prueba de laboratorio muestra que la página es rápida y ligera a pesar de la fotografía grande, aunque Google no tenía suficientes datos de visitantes reales para mostrar cómo funciona para usuarios reales.
Creado por Arc Marumo. Visita remyshoots.co.za.
28. Coutumes
Una fotografía a sangre completa hace todo el trabajo, con un recorte cerrado de un aro plateado a la izquierda y una pulsera a la derecha. El titular condensado y alto en amarillo mostaza recoge la impresión en la camiseta de la imagen, así que el tipo y la imagen se sienten relacionados. La navegación en un serif ligero se mantiene discreta en blanco en la parte superior.
Toma esto: Extrae el color del titular directamente de la fotografía del producto, para que un título condensado y audaz y la imagen se lean como un conjunto a juego.
Ten cuidado con: La prueba de laboratorio fue mediocre, aunque la página en sí es ligera, y Google no tenía suficientes datos de visitantes reales para mostrar cómo funciona para clientes reales.
Visita coutumes.com.
29. Ferm Living
El hero es una fotografía cálida y cerrada de taburetes metálicos sobre una alfombra tupida, con un titular serif ligero y un único botón delineado sobre él. Los marrones tierra se mantienen en los mosaicos de productos debajo, así que toda la página se lee como una paleta. Mucho espacio en blanco y navegación pequeña y discreta mantienen la atención en la fotografía.
Toma esto: Usa una fotografía cálida y recortada ajustadamente por sección con un único botón delineado, y mantén todos los demás colores de la página extraídos de esa misma fotografía.
Ten cuidado con: La página es más pesada que el promedio y solo mediocre en la prueba de laboratorio, aunque los visitantes reales obtienen una buena experiencia en las tres métricas principales de Web Vitals, así que la fotografía grande está funcionando en la práctica.
Creado por Signifly. Visita fermliving.com.
30. Indigo Laboratory
La pantalla de entrada está construida casi completamente con negro, blanco y gris suave. Un logotipo de palabras enorme y desenfocado en un sans geométrico pesado llena la parte superior, y la línea de bienvenida se sienta centrada debajo en un sans más ligero y amigable. El bloque blanco detrás del botón enter es la única forma de borde duro, así que el ojo llega allí inmediatamente.
Toma esto: Usa un único bloque de alto contraste para el botón principal, blanco sobre negro aquí, así que el siguiente paso es obvio sin ninguna decoración extra.
Ten cuidado con: La prueba de laboratorio encontró la página lenta y muy pesada, y Google no tenía suficientes datos de visitantes reales para mostrar cómo se comporta para visitantes reales.
Creado por FPTP Studio. Visita indigo-laboratory.it.
31. EMO Altar II
Un único render de teclado negro flota sobre un fondo negro puro, de modo que el producto es lo único que atrae la vista. El logotipo usa un serif alto y de alto contraste junto a un tagline sans gris simple, y un único botón rojo saturado es el único color fuerte. La tarjeta de precio es redondeada y discreta, manteniendo la llamada a la acción obvia.
Toma nota de esto: Dale a la página una imagen hero en un fondo plano oscuro y reserva un único color de acento para el botón principal, para que la vista no tenga a dónde más ir.
Ten cuidado con: El test de laboratorio salió regular, aunque la página es ligera y los visitantes reales tienen una buena experiencia en los tres Core Web Vitals, que es el resultado que cuenta para una tienda.
Creado por Electronic Materials Office. Visita electronicmaterialsoffice.com.
32. Music Sound
Un gradiente de rosa fuerte a violeta profundo llena la página y lleva un titular geométrico sans blanco pesado, apilado en cuatro líneas con la tercera sangrada. La mujer sonriente en luz magenta se superpone a las letras, y los tiles de productos a la derecha se sientan sobre fondos limpios de color verde pálido y rojo, por lo que los audífonos y auriculares permanecen fáciles de leer.
Toma nota de esto: Apila un titular corto en un sans pesado sobre un gradiente de color único y deja que una foto se superponga a las letras para darle profundidad a la página.
Ten cuidado con: La página es ligera, pero los visitantes reales reportan carga lenta del contenido principal (LCP), y la foto de lifestyle grande y los tiles de productos son los candidatos probables, así que comprimir y priorizar esas primeras imágenes ayudaría.
Creado por Gummy Industries. Visita musicsound.com.
Alimentos, bebidas y hostelería
Los sitios de alimentos, bebidas y hostelería venden apetito, así que se apoyan en fotografía y video de gran formato. Esta fue la única categoría donde ningún sitio pasó los tres Core Web Vitals, y la puntuación de laboratorio mediana fue 56.5. Para restaurantes y hoteles, consulta diseño de sitios web de restaurantes y diseño de sitios web de hoteles.
Para una muestra más grande, 20 sitios de alimentos y bebidas extraídos del mismo grupo y medidos de la misma manera, consulta los 20 mejores sitios web de restaurantes y alimentos.
| # | Sitio | Lighthouse (móvil) | LCP, visitantes reales | INP | CLS | Peso de página | Construido con |
|---|---|---|---|---|---|---|---|
| 33 | Vamvalis Foods | 54 | 3.0 s | 90 ms | 0.26 | 3.8 MB | WordPress |
| 34 | Best Bean Best Cup | 75 | 1,4 s | sin datos | 0.00 | 19.3 MB | Shopify |
| 35 | Benvenusa Italian Wines | 79 | sin datos | sin datos | sin datos | 4.9 MB | No detectado |
| 36 | White Desert | 20 | 2.3 s | 194 ms | 0.23 | 8.5 MB | Next.js |
| 37 | Don Molinico | 48 | 3.8 s | 136 ms | 0.16 | 2.6 MB | Nuxt |
| 38 | Meyers | 43 | 2.1 s | 161 ms | 0.12 | 2.6 MB | Nuxt |
| 39 | Qissa | 87 | 2.7 s | 137 ms | 0.00 | 5.2 MB | WordPress |
| 40 | Pier88 Coast By MONARQ | 59 | sin datos | sin datos | sin datos | 39.3 MB | WordPress |
33. Vamvalis Foods
Un campo azul plano sostiene toda la primera pantalla, con un logo blanco centrado y un titular en una sans ligera y redondeada que se lee fácilmente en tamaño grande. Pequeñas mayúsculas espaciadas en una tipografía monoespaciada manejan la navegación y la línea introductoria. Un borde curvo suave separa el azul del gris pálido debajo, y en móvil las formas de hojas coloreadas enmarcan una foto redonda de una barra de semillas.
Toma prestado esto: Empareja un titular grande y ligero con pequeñas mayúsculas espaciadas para las etiquetas, para que la jerarquía sea clara usando solo dos estilos de tipo y un color de fondo.
Ten cuidado con: La página en sí es ligera, pero los visitantes reales ven una carga lenta del contenido principal y elementos que se desplazan mientras carga, por lo que vale la pena ajustar el héroe vacío y la imagen tardía.
Creado por Point Blank. Visita vamvalisfoods.com.
34. Best Bean Best Cup
Un verde profundo saturado llena la página, con un titular negro pesado en una tipografía sans-serif apretada y en mayúsculas colocada directamente sobre él. Detrás, una banda de semicírculos y formas de cuarto en gris-verde apagado da al héroe una apariencia gráfica e impresa. La nav en forma de píldora y el botón de carrito negro se mantienen simples, dejando que el arte lleve la personalidad.
Toma prestado esto: Usa un único color de fondo audaz con un patrón repetido construido a partir de formas geométricas simples, para que la marca se vea reconocible sin necesidad de fotografía.
Ten cuidado con: La página es muy pesada, y las herramientas de animación detectadas (gsap y lottie) se suman a eso, por lo que el resultado de la prueba de laboratorio fue medio y no había suficientes datos de visitantes reales para juzgar cómo se siente para los clientes.
Creado por Nam Bui. Visita bestbeanbestcup.com.au.
35. Benvenusa Italian Wines
Un logotipo de palabra en negrita, mayúsculas negras anchas corre de borde a borde, luego una banda plana de púrpura saturado lleva una pequeña declaración serif y una lista de regiones. El paisaje en blanco y negro debajo lo une todo. Tres colores planos y uno serif lo mantienen confiado y legible.
Toma nota de esto: Pon el nombre del negocio en una línea enorme y pesada en la parte superior, luego dale a tu mensaje principal un único bloque de color plano con mayúsculas serif simples.
Ten cuidado con: La página es más pesada que el promedio y solo regular en la prueba de laboratorio, lo que encaja con las fotografías grandes, y Google no tenía suficientes datos de visitantes reales para mostrar cómo se siente para los usuarios reales.
Creado por Sons & Co. Visita benvenusa.com.
36. White Desert
Una única vista desde la ventanilla de un avión de una plataforma de hielo llena la pantalla, enmarcada por bordes casi negros que hacen brillar los azules pálidos. Las enormes mayúsculas blancas y condensadas del titular se sientan en la parte inferior, y una pequeña línea serif itálica en cursiva proporciona un contrapunto tranquilo. Las finas líneas de guía verticales añaden estructura sin desorden.
Toma nota de esto: Empareja un titular grande y condensado con una pequeña línea serif itálica sobre una única fotografía sólida o un clip en bucle, y mantén la navegación con botones simples delineados.
Ten cuidado con: La página es más pesada que el promedio y lenta en la prueba de laboratorio, y los visitantes reales reportan cambios de diseño mientras carga, así que el video a toda sangre y el tipo grande tienen un costo en estabilidad y velocidad.
Creado por Malvah. Visita white-desert.com.
37. Don Molinico
Una fotografía aérea a toda sangre de una mesa dispuesta con carnes curadas, queso, frascos y platos con patrón llena la pantalla, por lo que el producto se encuentra dentro de una comida real en lugar de sobre un fondo blanco. El bloque de logo rojo cuelga del borde superior en el centro, y las enormes mayúsculas condensadas en crema se leen claramente sobre la imagen ocupada. Los tonos cálidos de terracota, rojo y mostaza todos tiran en la misma dirección.
Toma nota de esto: Cuelga un bloque de logo de color sólido del borde superior sobre una fotografía a toda anchura de tu producto en uso, luego establece un titular corto en mayúsculas crema grandes en la parte superior.
Ten cuidado con: La prueba de laboratorio califica la página como lenta, y los visitantes reales ven problemas con la rapidez con que aparece el contenido principal y con el cambio de diseño mientras carga, a pesar de que la página en sí es ligera.
Creado por AUGE EXPERIENCE. Visita donmolinico.es.
38. Meyers
Una fotografía a toda sangre de papas asadas, col rizada oscura y semillas de granada llena la pantalla, y el titular se sienta directamente sobre ella en una tipografía de capital pesada, ancha y de losa. El tipo en mostaza y crema se lee claramente contra la imagen oscurecida. La barra superior marrón oscuro y la pestaña de cuenta color arena mantienen la paleta cálida y consistente.
Toma nota de esto: Usa una fotografía de alimentos grande y bien iluminada con una superposición oscura suave y establece un titular de dos colores en el tercio inferior para que siga siendo legible.
Ten cuidado con: La página es ligera en peso, pero la prueba de laboratorio se ejecutó lentamente y los visitantes reales reportan problemas de estabilidad de diseño, por lo que el cambio de contenido mientras la página carga es el problema a solucionar primero.
Creado por Dwarf. Visita meyers.dk.
39. Qissa
Un fondo azul marino profundo con un único acento metálico dorado da a la página un ambiente tranquilo de cena nocturna. La marca tipográfica utiliza una serif ligera y de alto contraste con versalitas pequeñas ampliamente espaciadas encima, y la pila centrada deja espacio generoso alrededor del texto. En móvil, un sutil abanico de cubiertos se sitúa detrás del texto como una marca de agua.
Toma prestado esto: Elige un color de acento, úsalo solo para la acción principal y etiquetas pequeñas, y mantén todo lo demás discreto para que el botón de reserva sea lo primero en lo que el ojo se posa.
Ten cuidado con: La página es más pesada que el promedio y los visitantes reales ven una carga lenta del contenido principal (LCP), por lo que el héroe oscuro probablemente aparezca más tarde de lo que debería, muy probablemente en conexiones móviles.
Hecho por Red Dash Media. Visita qissa.co.uk.
40. Pier88 Coast By MONARQ
Un único camarón recortado en un tenedor se sitúa sobre un mar tranquilo y cielo pálido, de modo que el ojo se posa en una forma naranja cálida contra azul y verde azulado fríos. El titular se curva en versalitas blancas delgadas encima en escritorio, luego se convierte en una escritura manuscrita suelta en móvil. Un borde blanco ondulado en la base suaviza el acabado.
Toma prestado esto: Empareja una fotografía nítida e iluminada de tu mejor plato con un fondo plano y tranquilo y un titular corto en tipografía blanca delgada.
Ten cuidado con: La página es muy pesada y solo media en la prueba de laboratorio, lo que se ajusta a un héroe fotográfico a sangre completa con librerías de animación de desplazamiento cargadas, y no había suficientes datos de visitantes reales para juzgar cómo se siente para los visitantes reales.
Visita pier88coast.com.
Cultura, educación y sin fines de lucro
Los museos, escuelas, organizaciones benéficas y proyectos culturales tienden a tener mucho que decir y presupuestos muy ajustados. Este grupo tuvo la puntuación mediana de laboratorio más baja en 50.5, aunque el Musée de Rochechouart aprueba los tres Core Web Vitals. Ver diseño de sitio web educativo y diseño de sitio web sin fines de lucro.
| # | Sitio | Lighthouse (móvil) | LCP, visitantes reales | INP | CLS | Peso de página | Construido con |
|---|---|---|---|---|---|---|---|
| 41 | Musée de Rochechouart | 64 | 1.8 s | 136 ms | 0.00 | 2.8 MB | WordPress |
| 42 | RPA Comunicación | 56 | sin datos | sin datos | sin datos | 10.5 MB | No detectado |
| 43 | Colonia Zacamil | 22 | 4.2 s | 438 ms | 0.00 | 6.8 MB | Nuxt |
| 44 | CauseHouse | 92 | sin datos | sin datos | sin datos | 0.8 MB | Next.js |
| 45 | NCCER | 45 | 3.5 s | 235 ms | 0.04 | 21.8 MB | WordPress |
| 46 | CalArts Graphic Design 2026 | 68 | sin datos | sin datos | sin datos | 1.6 MB | Nuxt |
| 47 | Manual | 28 | 4,7 s | 362 ms | 0.00 | 2.4 MB | Webflow |
| 48 | Más allá del traje espacial | 28 | sin datos | sin datos | sin datos | 11.8 MB | Next.js |
41. Musée de Rochechouart
Un bloque de logo azul marino audaz con una línea de tejado de castillo estilizada ancla la esquina superior izquierda, y la navegación se sitúa en pequeñas mayúsculas en una sans geométrica limpia. Debajo, un par de imágenes divididas lleva la página: una fotografía de desempeño en blanco y negro de alto contraste junto a un primer plano cálido de columnas de piedra retorcida. El texto azul cian pálido y el espacio blanco generoso mantienen la página tranquila.
Toma esto prestado: usa un par cerrado de fotografías contrastantes una al lado de la otra bajo un encabezado simple, para que la página comunique cómo es el lugar antes de que se lea cualquier texto.
Ten cuidado con: la prueba de laboratorio califica la velocidad como intermedia, pero la página es ligera y los visitantes reales obtienen una buena experiencia en todas las métricas de Core Web Vitals.
Construido por OCITOCINE. Visita musee-rochechouart.com.
42. RPA Comunicación
El azul marino profundo y el lima ácido son los únicos colores planos, así que la fotografía rosa brillante se lee como el punto focal. El corte angular, con palabras de titular insertadas en sus esquinas, se siente suelto y energético en lugar de encerrado. El logo sans ancho y grueso y el botón de menú con esquinas recortadas repiten esa geometría de corte.
Toma esto prestado: recorta una fotografía hero a una forma angulada y repite ese ángulo en los botones e iconos, para que una paleta cerrada y un poco de CSS le den a la página una identidad clara.
Ten cuidado con: la página es muy pesada e intermedia solo en la prueba de laboratorio, y Google tiene muy pocos datos de visitantes reales para mostrar cómo funciona para visitantes reales, así que la introducción vale la pena sopesarla contra la espera.
Construido por LaNegrita. Visita rpacomunicacion.com.
43. Colonia Zacamil
Un titular negro condensado y alto corre de borde a borde sobre un fondo de piedra cálida, con una tira redondeada de metraje aéreo cortada en la oración como una palabra. El pequeño botón mono y el epígrafe serif dejan mucho espacio tranquilo. En móvil, el metraje llena la pantalla bajo un logotipo modular y bloqueado en blanco hueso.
Toma esto prestado: reemplaza una palabra en tu titular principal con un recorte redondeado de una fotografía real, y mantén todo lo demás sobre un fondo plano de un solo color.
Ten cuidado con: la página es más pesada que el promedio y lenta en la prueba de laboratorio, y los visitantes reales encuentran carga lenta del contenido principal y respuesta perezosa a los toques, así que el metraje de pantalla completa tiene un costo medible.
Construido por Adoratorio Studio. Visita coloniazacamil.com.
44. CauseHouse
Un titular serif pesado y de alto contraste en verde oscuro descansa sobre un fondo crema cálido, con una palabra destacada en lima y una sombra desplazada marcada. La colina dibujada a mano, la casa, el árbol y la gallina dan a la página un carácter amigable que se adapta al nombre. Los botones y las etiquetas en forma de píldora comparten el mismo lima y contorno, por lo que la página se siente consistente.
Toma esto prestado: Elige un color de acento, aplícalo a una palabra del titular y a los botones principales, y deja que una ilustración simple lleve la marca en lugar de fotografías de archivo.
Ten cuidado con: La prueba de laboratorio muestra una página rápida y ligera, que es un buen resultado por usar ilustración plana en lugar de fotografías, aunque Google no tenía suficientes datos de visitantes reales para mostrar cómo funciona para usuarios reales.
Diseñado internamente. Visita causehouse.co.
45. NCCER
El fondo azul marino oscuro y el acento naranja quemado dan a la página una paleta firme y profesional que coincide con el logo. El titular utiliza una sans geométrica redonda grande con espaciado de línea generoso, y la fotografía de un hombre señalando un dibujo de estructura muestra el oficio sin una apariencia de foto de archivo. El pop-up toma prestado el mismo degradado azul marino a naranja.
Toma esto prestado: Usa un color de acento único contra un fondo oscuro, repetido en el logo, botones y reglas de borde, para que cada página se sienta relacionada sin gráficos adicionales.
Ten cuidado con: La prueba de laboratorio califica la página como lenta y muy pesada, y los visitantes reales encuentran problemas con la carga (LCP) y la capacidad de respuesta (INP), por lo que la imagen hero grande y los superposiciones apiladas tienen un costo.
Construido por Isadora Digital Agency. Visita nccer.org.
46. CalArts Graphic Design 2026
Una sans blanca pesada y ajustada en mayúsculas llena la pantalla negra, con un único amarillo ácido usado para el año, la pestaña activa y los subrayados de enlaces. El tachado escrito a mano añade una marca humana, y cambia de color entre escritorio y dispositivo móvil. El generoso espacio negro vacío lo mantiene claro.
Toma esto prestado: Empareja un titular enormemente grande con un color de acento único sobre un fondo plano oscuro, y reserva ese acento para el año, el elemento de menú actual y los subrayados de enlaces.
Ten cuidado con: La prueba de laboratorio resultó regular aunque la página es ligera, y Google tenía muy pocos datos de visitantes reales para juzgar cómo funciona para las personas reales.
Visita design2026.calarts.edu.
47. Primer
Una única fotografía recortada de niños, cada uno sosteniendo un accesorio como una cuerda de saltar, un aro o un podio, se extiende de borde a borde en una página blanca. Líneas de cuadrícula negras delgadas y algunos bloques de azul, amarillo, naranja y verde lo enmarcan como un ejercicio de cuaderno escolar. El titular serif alto y ajustado se sienta tranquilamente en el centro.
Toma esto prestado: Usa una fotografía de grupo recortada y ancha sobre un fondo blanco plano, luego añade algunos bloques de color plano y reglas delgadas para dar a la página una estructura reconocible.
Ten cuidado: La página es ligera, pero fue lenta en la prueba de laboratorio, y los visitantes reales reportan problemas al cargar la imagen principal y al responder a toques y clics, por lo que una fotografía hero grande aún requiere un manejo cuidadoso.
Construido por newkid. Visita primer.com.
48. Beyond Spacesuit
Un titular geométrico enorme en blanco cálido roto descansa sobre negro puro, por lo que el nombre es legible de un vistazo. Pequeñas ilustraciones planas en naranja y verde menta, un planeta anillado, estrellas de cuatro puntas y una línea de órbita delgada, añaden diversión sin desorden. El texto centrado breve y el botón único dejan mucho espacio vacío.
Adopta esto: Empareja un titular gigante con un único botón que contraste y algunas formas de acento planas en dos colores, para que la página tenga una acción clara en primer lugar y un aspecto memorable.
Ten cuidado: La prueba de laboratorio encontró la página lenta y muy pesada, y Google no tenía suficientes datos de visitantes reales para mostrar cómo se siente para los usuarios actuales, por lo que los extras animados vale la pena pesar contra el tiempo de carga.
Construido por Airnauts. Visita beyondspacesuit.org.
Arquitectura, propiedad y viajes
Arquitectura, propiedad y viajes son negocios visuales, y los mejores sitios en este grupo se salen del camino de la fotografía. KAAN Architecten y Colours of Istria pasan los tres Core Web Vitals y puntúan 93 y 91 en el laboratorio. Para propiedad, ver diseño de sitio web de bienes raíces.
| # | Sitio | Lighthouse (móvil) | LCP, visitantes reales | INP | CLS | Peso de página | Construido con |
|---|---|---|---|---|---|---|---|
| 49 | Storey Architecture | 69 | sin datos | sin datos | sin datos | 4.9 MB | Nuxt |
| 50 | LPAS | 64 | 2.0 s | 138 ms | 0.50 | 4.9 MB | WordPress |
| 51 | arcoglobal | 61 | sin datos | sin datos | sin datos | 5.2 MB | Nuxt |
| 52 | Warren & Mahoney Architects | 69 | sin datos | sin datos | sin datos | 10.9 MB | No detectado |
| 53 | Lithuania Travel | 47 | 4.2 s | 172 ms | 0.00 | 4.2 MB | No detectado |
| 54 | GetYourGuide Trend Tracker | 38 | 2.6 s | 370 ms | 0.10 | 6.4 MB | Webflow |
| 55 | Colores de Istria | 91 | 2.0 s | 125 ms | 0.00 | 7.5 MB | Next.js |
| 56 | KAAN Architecten | 93 | 1.1 s | 62 ms | 0.00 | 4.1 MB | Craft CMS |
49. Storey Architecture
Una fotografía a sangre completa de una casa con frente de vidrio, listones de madera y ladrillo pálido, enmarcada por pinos altos y un cielo azul despejado, es lo que lo dice todo. El texto usa un sans serif ligero y uniforme en blanco, colocado sobre el follaje más oscuro para mantener la legibilidad. Líneas de progreso delgadas arriba de la introducción sugieren que la imagen cambia en una galería de diapositivas.
Toma esto como referencia: usa una única fotografía grande y bien iluminada de tu mejor trabajo terminado detrás de texto blanco corto colocado sobre su área más oscura, con un botón sencillo debajo.
Ten cuidado con: la página es más pesada que el promedio y tiene un desempeño medio en la prueba de laboratorio, lo que encaja con una galería de diapositivas fotográfica a pantalla completa, y no hay suficientes datos de visitantes reales para mostrar cómo se desempeña para usuarios reales.
Construido por Dirty Martini. Visita storeyarchitecture.co.uk.
50. LPAS
Una fotografía a sangre completa de una cocina con paredes de ladrillo, ventanas altas y taburetes de madera pálida hace la venta antes de que aparezca texto alguno. En móvil, una superposición oscura mantiene el titular blanco grande legible, en un sans geométrico limpio. La marca delgada, el pequeño botón de menú y una única indicación subrayada dejan mucho espacio para la imagen.
Toma esto como referencia: usa una fotografía honesta de tu propio espacio de trabajo o trabajo terminado como apertura a ancho completo, luego coloca un tinte oscuro y una única oración grande sobre ella.
Ten cuidado con: la página es más pesada que el promedio, la prueba de laboratorio resultó media, y los visitantes reales ven el cambio de diseño mientras carga, que es un costo común de imágenes y videos hero grandes.
Construido por Studio Naam. Visita lpas.com.
51. arcoglobal
La vista de escritorio se compromete con blanco y negro, con un único gris oscuro para la marca de palabra de tamaño excesivo que abarca casi el ancho completo en la parte inferior. El titular usa un sans geométrico ligero con formas de letras redondas, centrado bajo una barra de menú flotante con forma de pastilla. Mucho espacio vacío hace que el mensaje se lea al instante, y el logo enorme da presencia a la marca sin necesidad de fotografía alguna.
Toma esto como referencia: usa el nombre de tu empresa como una marca de palabra de tamaño excesivo y contraste bajo al pie de la pantalla de apertura, que no necesita nada más que un estilo de texto y un fondo oscuro.
Ten cuidado con: la página es más pesada que el promedio y tuvo una puntuación media en la prueba de laboratorio, y Google no tenía suficientes datos de visitantes reales para mostrar cómo se desempeña para usuarios reales.
Construido por workattack. Visita arcoglobal.com.
52. Warren & Mahoney Architects
Un fondo azul plano lo sostiene todo, así que el titular blanco en un sans serif ligero y abierto se lee al instante. Debajo del párrafo corto, barras verticales altas contienen fotografía aérea de espuma marina, y los espacios entre ellas suben y bajan como una forma de letra en bloque. El azul del agua coincide con el fondo, dándole a la página calma y una forma clara.
Toma esto: Recorta una fotografía en barras verticales sobre un color de marca plano, así una página de texto simple obtiene una forma gráfica distintiva sin ilustración personalizada.
Ten cuidado con: La página es muy pesada y obtuvo una puntuación mediocre en la prueba de laboratorio, y Google no tenía suficientes datos de visitantes reales para mostrar cómo se desempeña con visitantes reales.
Creado por Sons & Co. Visita wam.studio.
53. Lithuania Travel
Un panel blanco redondeado lleva el titular y un botón, situado sobre una fotografía de bosque de otoño a sangre y una torre de observación de madera. Bloques lila y púrpura suave en el borde enmarcan la imagen sin competir. Los naranjas cálidos contra el verde profundo dan a la página un estado de ánimo claro, y el tipo es una sans geométrica amigable.
Toma esto: Coloca una sola tarjeta blanca redondeada sobre una fotografía grande y limítala a un titular, una línea de apoyo y un botón sólido.
Ten cuidado con: La prueba de laboratorio encontró la página lenta y más pesada que el promedio, y los visitantes reales ven carga lenta de la imagen principal (LCP), así que una fotografía de héroe tan grande necesita compresión más ajustada.
Visita lithuania.travel.
54. GetYourGuide Trend Tracker
Los recortes de fotos circulares de personas haciendo esnórquel, cocinando, paracaidismo en interiores y montando un toro mecánico aclaran el tema antes de que se lea cualquier texto. Pequeños puntos de iconos rosa y azul pastel y una línea zigzag tenue sugieren datos sin desorden. El titular azul marino oscuro pesado se sienta centrado en un espacio blanco generoso, con un botón azul tipo píldora como la única acción.
Toma esto: Recorta fotos de clientes en círculos y empárealas con pequeños puntos de iconos teñidos para darle a una página blanca simple un aspecto amigable y ordenado.
Ten cuidado con: La prueba de laboratorio encontró la página lenta y más pesada que el promedio, y los visitantes reales ven problemas con carga (LCP) y capacidad de respuesta (INP), así que el héroe animado y rico en imágenes cuesta velocidad.
Creado por Vovi. Visita getyourguide.supply.
55. Colores de Istria
Una foto aérea oscura y teñida de un pueblo en la cima de una colina se sienta detrás de un gran titular blanco en una sans redonda y geométrica, para que el texto se lea con claridad. Un botón azul píldora saturado se destaca contra el azul marino apagado. Cuatro pequeños iconos de flecha coloreados en naranja, verde y rosa hacen eco del logotipo de pétalo multicolor y dan al héroe un código de color tranquilo.
Toma esto: Tiñe una sola fotografía con una superposición oscura, luego coloca un titular audaz y un botón píldora brillante encima para que la acción principal sea obvia.
Ten cuidado con: La página es más pesada que el promedio, que es el costo de las tarjetas encabezadas por imágenes y un carrusel, pero se probó rápido en el laboratorio y los visitantes reales obtienen una buena experiencia en los tres Core Web Vitals.
Creado por ALT_digital. Visita coloursofistria.com.
56. KAAN Architecten
La pantalla completa se dedica a una fotografía a sangre perdida de una escalera de caracol blanca y un techo de celosía, fotografiados desde abajo, para que el edificio sea el que hable. La paleta se mantiene en grises pálidos y blanco, y la marca tipográfica es el único otro elemento. Una sans serif en mayúsculas negrita emparejada con un peso ligero para el descriptor crea una jerarquía discreta.
Toma prestado esto: Abre con una fotografía a pantalla completa de tu mejor trabajo terminado y coloca el nombre sobre ella en blanco, usando un peso negrita y un peso ligero para separar las dos partes.
Ten cuidado con: La página es rápida en la prueba de laboratorio y los visitantes reales obtienen un buen resultado en todas las medidas de Core Web Vitals, aunque es más pesada que el promedio, que es el costo habitual de una pantalla de apertura encabezada por una imagen.
Creado por Humanos y Máquinas. Visita kaanarchitecten.com.
Negocios y salud
Los sitios de negocios y salud tienen que ganarse la confianza rápidamente. Tres de estos ocho aprueban los tres Core Web Vitals, la mayoría de cualquier categoría, y este grupo también incluye la página más pesada de la muestra, ERA Residence con 104.4 MB. Para clínicas y consultorios, ver diseño de sitios web de atención médica.
| # | Sitio | Lighthouse (móvil) | LCP, visitantes reales | INP | CLS | Peso de página | Construido con |
|---|---|---|---|---|---|---|---|
| 57 | Twelve | 70 | sin datos | sin datos | sin datos | 5.4 MB | WordPress |
| 58 | Gielly Green | 73 | 1.9 s | 115 ms | 0.00 | 2.4 MB | Nuxt |
| 59 | DVO | 62 | 5.0 s | 170 ms | 0.01 | 24.5 MB | WordPress |
| 60 | Rejuvenation Health | 81 | 2.2 s | 96 ms | 0.00 | 0.7 MB | No detectado |
| 61 | Enerblock | 63 | sin datos | sin datos | sin datos | 24 MB | No detectado |
| 62 | Seasats | 49 | 3.3 s | 359 ms | 0.00 | 5 MB | Next.js |
| 63 | ERA Residence | 58 | 2.3 s | 339 ms | 0.54 | 104.4 MB | Webflow |
| 64 | Heron AI | 52 | 1.8 s | 172 ms | 0.01 | 1.7 MB | Webflow |
57. Twelve
Un fondo color crema cálido y un gran titular sans redondeado dan a la página un comienzo tranquilo y confiado. La fotografía se corta en un ligero ángulo, y barras coloreadas sueltas en coral, menta y azul se superponen al borde del texto para agregar movimiento. La marca rayada del logotipo en negro y coral se refleja en el icono de menú de coral.
Toma nota de esto: Usa un fondo cálido de blanco roto con un único color de acento repetido en el logotipo e ícono de menú, así una página simple seguirá sintiendo marca.
Ten cuidado con: El test de laboratorio salió regular y la página es más pesada que el promedio, lo que encaja con un diseño construido sobre fotografías grandes, y Google no tenía suficientes datos de visitantes reales para mostrar cómo se siente en la práctica.
Creado por Pixelfish. Visita twelvefutures.com.
58. Gielly Green
Una sola fotografía de producto llena la pantalla, con botellas de borgoña profundo y tapas de oro rosado sobre un fondo cálido de piedra pálida. Los colores están muy limitados, así que el empaque es el que habla. El serif alto y claro en las etiquetas se refleja en el pequeño monograma, y los botones de navegación redondeados se sientan discretamente alrededor de los bordes.
Toma nota de esto: Elige una fotografía bien iluminada de tu propio producto, colócala sobre un fondo simple en un único tono neutro, y mantén la navegación en unos pocos botones pequeños y redondeados.
Ten cuidado con: El test de laboratorio salió regular, aunque la página es ligera y los visitantes reales obtienen una buena experiencia en las tres Core Web Vitals, así que la velocidad que importa se está manteniendo.
Creado por Lovelace Studio. Visita giellygreen.co.uk.
59. DVO
Un titular geométrico sans muy grande y ligero se sitúa bajo en la izquierda sobre un gradiente gris suave, con una pequeña etiqueta mayúscula arriba y un botón delineado fino abajo. La contención es el atractivo: tipo blanco, espacio vacío generoso y una paleta discreta le dan una sensación tranquila y arquitectónica. Una barra delgada a lo largo de la parte inferior con títulos de diapositivas numeradas y pequeños botones de flecha mantiene los controles ordenados.
Toma nota de esto: Define un titular corto en un sans ligero y espaciado sobre un fondo apagado y añade un botón delineado simple, así el mensaje se lee antes que cualquier otra cosa en la página.
Ten cuidado con: La página es muy pesada, el test de laboratorio salió regular y los visitantes reales ven problemas con la rapidez con que carga el contenido principal del hero, así que la sección hero grande es la parte que debes mantener ligera.
Creado por Studio Idee Materia. Visita dvo.it.
60. Rejuvenation Health
Un gran retrato en blanco y negro del dentista llena toda la pantalla, así la primera impresión es una persona en lugar de una sonrisa genérica. El titular usa un serif sans limpio y ancho en blanco y se escalonea sobre la cara, dándole movimiento a la página sin gráficos extra. Una barra de menú principal de chocolate marrón oscuro y botones coincidentes mantienen la paleta tranquila y cálida.
Toma nota de esto: Usa un retrato honesto y bien iluminado del dueño detrás de una superposición oscura con texto blanco encima, así los visitantes ven con quién están tratando de forma inmediata.
Ten cuidado con: El resultado del test de laboratorio es regular, pero la página es ligera y los visitantes reales obtienen una buena experiencia en todas las medidas de Core Web Vitals, así que la fotografía grande no les está costando en la práctica.
Creado por Studio 3 Marketing. Visita rejuv-health.com.
61. Enerblock
Un campo plano de coral rojo saturado lleva un titular grotesco apretado y pesado en casi negro, para que el mensaje se lea de inmediato. Líneas de cuadrícula fina enmarcan una gran marca de logo angular, dando una sensación de dibujo técnico. Una fotografía de una bobina de acero detrás de una jaula de alambre se sitúa debajo, ancla la mitad gráfica superior en la industria real.
Toma esto: Empareja un solo color de fondo audaz con un titular de tamaño excesivo y una marca gráfica fuerte, luego coloca una fotografía real directamente debajo para probar que el trabajo es físico.
Ten cuidado con: Las notas muestran una página muy pesada y solo resultados de laboratorio mediocres, así que las imágenes industriales de ancho completo y probablemente el metraje en movimiento cuestan tiempo de carga a los visitantes, y hay demasiados pocos datos de visitantes reales para decir cómo se siente en la práctica.
Construido por BANILA Studio. Visita enerblock.net.
62. Seasats
Una fotografía tranquila de sangrado completo de pequeños barcos no tripulados en agua quieta llena la pantalla, con cielo gris azulado suave que se desvanece en azul marino oscuro. El titular utiliza un serif claro y espaciado en blanco y se lee claramente contra el cielo pálido. La columna derecha de pestañas apiladas cambia de arena a salvia a verde profundo, dando al menú un orden claro.
Toma esto: Usa una fotografía grande y tranquila con un solo titular corto y un botón claro, y mantén el cielo o el fondo lo suficientemente vacío para que el texto blanco sea legible.
Ten cuidado con: La página es lenta en la prueba de laboratorio y más pesada que el promedio, y los visitantes reales se encuentran con problemas de carga (LCP) y capacidad de respuesta (INP), que es un costo común de una gran imagen heroica en movimiento y desplazamiento con script.
Construido por Raw Materials. Visita seasats.com.
63. ERA Residence
Un campo púrpura oscuro con tipografía blanca cálida da a la página una sensación tranquila y cara. Las mayúsculas espaciadas ampliamente para la región flanquean un nombre centrado grande, y la palabra con estilo cursivo inclinada para el pueblo añade un toque manuscrito. Una firma gigante tenue se sienta detrás de todo, y un borde de inserción delgado enmarca la pantalla como una tarjeta impresa.
Toma esto: Usa un solo color profundo como fondo completo y establece un nombre corto en mayúsculas pálidas grandes, con una palabra ligeramente inclinada como el único adorno.
Ten cuidado con: La página es muy pesada, y los visitantes reales informan problemas con la capacidad de respuesta y la estabilidad del diseño, que se ajusta a una construcción que depende de bibliotecas de animación y muchos activos cargados.
Creado por The First The Last. Visita era-residence.com.
64. Heron AI
La página parece una hoja de dibujo de arquitecto. Una elevación sombreada con puntillismo de una casa de hormigón se sienta en papel blanco cálido, enmarcada por reglas de cabello, marcas de verificación y esquinas de retícula. El titular utiliza mayúsculas grotescas apretadas y pesadas, la navegación utiliza una cara monoespaciada pequeña, y un solo acento naranja aparece escasamente en el enlace de contacto y botones.
Toma esto: Empareja una sola ilustración con bordes de cabello, un fondo neutral cálido y un color de acento contenido para dar carácter a un diseño simple sin una sesión de fotos.
Ten cuidado con: El resultado de la prueba de laboratorio es mediocre, pero la página es ligera y los visitantes reales obtienen una buena experiencia en cada medida de Core Web Vitals.
Construido por Bearplus Agency. Visita heronaiapp.com.
Los sitios web hermosos no duran
Las listas de inspiración de diseño envejecen mal. Abrí todos los sitios vinculados desde una popular lista de 2026 de los mejores diseños web, 48 en total, en un navegador el 31 de octubre de 2026.
Ocho de los 48 ya no cargan el sitio destacado. Cuatro dominios ya no se resuelven, dos páginas devuelven un 404, una devuelve un error del servidor y una ahora redirige a una empresa diferente. Los micrositios de campaña son los más frágiles: se construyen para un lanzamiento, ganan atención, y luego termina el presupuesto de mantenimiento. Los sitios que duran son el sitio web principal de una empresa, cuidados año tras año.
Cómo obtener un sitio web hermoso que también sea rápido
Los 11 sitios que superan las tres Core Web Vitals apuntan a algunos hábitos, y ninguno requiere renunciar a verse bien.
- Haz la primera pantalla ligera. La página puede ser pesada siempre que lo primero que la gente ve llegue rápidamente. Fauna Robotics lo demuestra con 68.6 MB.
- Trata cada librería de animación como un costo. El desplazamiento suave se siente bien, pero los sitios que llevan uno obtuvieron puntuaciones más bajas en el laboratorio. Usa movimiento donde explique algo.
- Una gran imagen supera a diez buenas. Los sitios más rápidos liderados por imágenes aquí, como KAAN Architecten, se abren con una sola fotografía y casi nada más.
- Mide visitantes reales, no solo el laboratorio. Una puntuación de Lighthouse es un punto de partida. Los datos de visitantes reales son lo que Google usa para la experiencia de página (Chrome UX Report).
- Planifica para el largo plazo. Invierte el esfuerzo en el sitio que mantendrás, no en un micrositio que apagarás.
Si tu sitio actual se ve anticuado, o se ve bien pero carga lentamente, eso es exactamente lo que un rediseño de sitio web debe solucionar: un diseño que la gente recuerde, construido para superar Core Web Vitals desde el primer día. Si el diseño está bien y solo la velocidad es el problema, la optimización del rendimiento web es un trabajo más pequeño.
Preguntas que la gente hace
¿Qué hace que un sitio web sea hermoso?
En estos 64, el hilo común es la moderación: una paleta corta, una o dos tipografías usadas con confianza, espacio generoso y una imagen o titular fuerte por pantalla. Los sitios que se ven costosos generalmente tienen menos elementos en la primera pantalla, no más.
¿Puede un sitio web hermoso ser también rápido?
Sí. KAAN Architecten obtiene una puntuación de 93 en el laboratorio y supera las tres Core Web Vitals para visitantes reales, y Rejuvenation Health supera las tres en una página de 0.7 MB. Los sitios lentos en esta muestra son lentos por medios pesados, librerías de animación y scripts grandes, no porque se vean bien.
¿Cuáles son buenas puntuaciones de Core Web Vitals?
Google califica un LCP de 2.5 segundos o menos, un INP de 200 milisegundos o menos y un CLS de 0.1 o menos como bueno, medido en el percentil 75 de cargas de página. Una página supera cuando los tres son buenos (web.dev).
¿Por qué las puntuaciones de Lighthouse y los datos de visitantes reales no coinciden?
Lighthouse es una prueba de laboratorio ejecutada en un entorno controlado, y no puede medir INP. Los datos de visitantes reales de Chrome UX Report reflejan dispositivos y redes reales durante 28 días (web.dev). Por eso Heron AI puede obtener una puntuación de 52 en el laboratorio y aún superar las tres Core Web Vitals.
¿Dónde puedo encontrar más inspiración de diseño de sitios web?
Estos 64 son una muestra. Para navegar por diseño, industria o componente, el resumen de sitios de inspiración de diseño web enumera las galerías que vale la pena guardar, y la neurociencia del diseño UX explica por qué algunos diseños simplemente se sienten mejor.