Desarrollo
Por qué las webs codificadas a mano cargan más rápido que los constructores
Un constructor de páginas envía todo su motor a cada visitante. El código escrito a mano envía la página. Esa brecha es la diferencia entre pasar los Core Web Vitals y explicar por qué no.
Toda web es un conjunto de instrucciones que un navegador tiene que ejecutar antes de que el visitante vea nada. La pregunta que decide lo rápida que se siente tu web es simple: cuántas de esas instrucciones tratan de tu contenido, y cuántas de la herramienta que lo creó.
En una web codificada a mano, casi todas tratan de tu contenido. En un constructor de páginas, una gran parte trata del constructor.
¿Qué envía realmente un constructor de páginas al navegador?
Un constructor de páginas es un programa que te deja arrastrar bloques y luego reconstruye esos bloques en el navegador del visitante. Para hacerlo tiene que enviar la maquinaria de reconstrucción con cada página. En la práctica eso significa una hoja de estilos genérica escrita para cubrir cualquier diseño que la herramienta pueda producir, un runtime de JavaScript que vuelve a ensamblar los bloques, y una pila de scripts de plugins para los formularios, los sliders y el banner de cookies.
Nada de eso es tu texto ni tus fotografías. Todo se descarga, se interpreta y se ejecuta antes de que tu titular se pinte. Puedes verlo en tu propia web en 2 minutos: abre PageSpeed Insights, analiza tu página de inicio y lee las líneas llamadas "Reduce unused JavaScript" y "Reduce unused CSS". Esos dos números son el impuesto.
Un constructor de páginas envía su motor de maquetación a cada visitante porque reconstruye la página en el navegador. Una web codificada a mano envía la página terminada, así que el navegador no tiene nada que ensamblar. Por eso el mismo diseño, construido de las dos maneras, produce dos tiempos de Largest Contentful Paint muy distintos.
¿Qué significa exactamente codificado a mano?
Codificado a mano significa que una persona escribió el HTML, el CSS y la pequeña cantidad de JavaScript que la página necesita, y no hay nada más en el archivo. No hay runtime de constructor, porque no hay constructor. El código que inspeccionas en el navegador es el código que alguien tecleó.
No significa primitivo, y no significa que no puedas editarlo. Nuestros proyectos están escritos a mano y aun así se entregan con un CMS, de modo que el texto, las imágenes y las páginas son tuyos y los cambias desde un login en el navegador. Lo que te da un CMS es otro artículo. Codificar a mano trata de lo que el visitante descarga. El CMS trata de lo que tú controlas. Son preguntas separadas, y a la mayoría le dicen que tiene que elegir.
¿Cuánto importa la diferencia en realidad?
Google publica tres umbrales, llamados en conjunto Core Web Vitals, y son el marcador más justo disponible porque son iguales para todos:
| Métrica | Bueno | Qué mide |
|---|---|---|
| Largest Contentful Paint | menos de 2,5 s | Cuándo termina de dibujarse lo principal en pantalla |
| Interaction to Next Paint | menos de 200 ms | Cuánto tarda la página en responder al tocarla |
| Cumulative Layout Shift | menos de 0,1 | Cuánto salta la página mientras carga |
Interaction to Next Paint sustituyó a First Input Delay como Core Web Vital en marzo de 2024, y es el que más les cuesta a los constructores, porque mide lo ocupado que está el hilo principal. Un navegador ejecutando un motor de maquetación es un navegador que no puede responder a un toque.
El desplazamiento de diseño es la otra señal honesta. Un constructor que mide elementos con JavaScript después de cargar el CSS moverá cosas un instante después de que empieces a leer. El CSS escrito a mano fija el tamaño antes del primer pintado, así que no hay nada que mover.
¿Es la velocidad la única razón?
No. La velocidad es la medible, así que se lleva la atención, pero hay otras dos que cuestan más a lo largo de 3 años.
Superficie de mantenimiento. Una web típica de constructor funciona con un tema más 15 a 25 plugins, cada uno con su propio calendario de versiones, cada uno capaz de romper a los demás. Cada actualización es una pequeña apuesta que tienes que aceptar, porque saltarse actualizaciones es como las webs acaban comprometidas. Una web codificada a mano no tiene lista de plugins, así que no hay nada que reconciliar un martes por la mañana.
Portabilidad. El contenido encerrado en el formato de bloques propietario de un constructor es contenido que solo ese constructor puede renderizar. Cuando quieras mudarte, reconstruyes. Una web codificada a mano es HTML, CSS y JavaScript en un repositorio, que cualquier desarrollador del mundo puede abrir y continuar. Eso es lo que queremos decir con que el código es tuyo: no que te dan un login, sino algo en lo que otra persona puede trabajar de verdad.
Hazle a cualquier agencia una pregunta: si dejamos de pagaros mañana, ¿qué nos queda? La respuesta separa una web de un alquiler.
¿Cuándo es un constructor la respuesta correcta?
Cuando nadie va a escribir código por ti, nunca. Un constructor es genuinamente mejor que no tener web, y mejor que una web codificada a mano que se queda obsoleta porque nadie puede tocarla. Si tu plan es construirla tú mismo en un fin de semana y cambiarla constantemente, usa un constructor y no te sientas mal por ello.
El momento en que deja de ser la respuesta correcta es cuando la web empieza a mover dinero de verdad. En cuanto el tráfico de búsqueda, las reservas o las ventas dependen de la página, los 1 a 2 segundos que regalas al runtime del constructor, y la pila de plugins que heredas, se convierten en un coste corriente en lugar de una comodidad.
¿Qué deberías preguntar antes de firmar?
- ¿Qué es exactamente lo que poseo al final, y dónde vive?
- ¿Puedo editar el texto y las imágenes yo mismo sin llamaros? Enséñame el login.
- ¿Cuáles son los Core Web Vitals de las últimas 3 webs que habéis entregado? Pide las URLs y compruébalas tú mismo.
- ¿De cuántos plugins o extensiones dependerá esta web?
- Si contrato a otro desarrollador el año que viene, ¿qué le entrego?
Cualquier proveedor que no pueda responder esas 5 preguntas en un correo está respondiendo a una pregunta distinta de la que hiciste.
