Mi sitio
[site address] en mi servidor de Opus Growth (servidor
[server name], clave de sitio
[site key] si es un sitio adicional) se creó con el site kit y va lento en móviles. El kit carga Tailwind mediante el Play CDN, que compila en el navegador, las fuentes desde Fontshare y las librerías de animación desde jsDelivr, y genera el menú con JavaScript. Sin cambiar el aspecto del sitio, convierte todo esto en archivos compilados alojados en mi propio servidor. El objetivo: mientras se carga una página, el sitio no envía ni una sola solicitud fuera de su propio dominio.
1. Punto de partida. Anota la versión actual con site_versions. Ejecuta core_web_vitals para la página de inicio y
[heaviest page] en móvil y escritorio con resources=true. Reúne en una tabla la puntuación de rendimiento, el LCP, el CLS, el número total de solicitudes, el tamaño total y las solicitudes que salen de tu propio dominio. Lista los archivos HTML con site_list_files y extrae todas las etiquetas `<script>` y `<link>` de cada página.
2. Muéstrame el plan y espera mi aprobación. Enumera todos los archivos que cambiarán o se añadirán.
3. Compila Tailwind. Traslada la configuración en línea `tailwind.config` de las páginas a `_src/tailwind.config.js`; define content como `
["./*.html", "./**/*.html"]` y añade cualquier archivo JavaScript que aún genere clases. Crea `_src/input.css` con las líneas `@tailwind base; @tailwind components; @tailwind utilities;` seguidas del contenido de assets/app.css. Ejecuta `npx --yes tailwindcss@3 -c _src/tailwind.config.js -i _src/input.css -o assets/site.css --minify` con site_run_command. Dale al archivo un nombre derivado de un hash de su contenido, por ejemplo `assets/site.3f9a1c2b.css`, actualiza el enlace en cada página y elimina el script del Play CDN y la configuración en línea. Vuelve a compilar después de cada edición de HTML que cambie clases; de lo contrario, las clases nuevas no estarán en el CSS.
4. Aloja las fuentes tú mismo. Obtén el CSS de Fontshare con una solicitud SEPARADA para cada familia y cada peso, por ejemplo `https://api.fontshare.com/v2/css?f[]=satoshi@400&display=swap`; vimos que, al pedir varias familias o pesos a la vez, devolvían otras familias, así que comprueba cada vez el nombre font-family devuelto. Descarga los archivos woff2 en `assets/fonts/`, escribe las reglas `@font-face` con `font-display: swap` al principio de assets/app.css (design-check busca ahí la tipografía distintiva) y precarga la fuente del cuerpo y la fuente del titular grande de la primera pantalla con `<link rel="preload" as="font" type="font/woff2" crossorigin>`. Elimina los enlaces `preconnect` y de hoja de estilos de Fontshare. Comprueba que la licencia de la fuente permita alojarla en tu propio servidor.
5. Regenera las imágenes. Mueve los archivos JPG y PNG originales a `_src/img/`. Instala sharp fuera de la carpeta del sitio: lanza `mkdir -p /data/_build && cd /data/_build && npm init -y && npm i sharp` con site_run_command y background=true, y haz seguimiento con site_command_status; si esa carpeta no tiene permisos de escritura, dime por qué. Con un script de node, genera WebP (calidad 72) y AVIF (calidad 50) de 480, 800, 1200 y 1600 píxeles de ancho para cada imagen. En el HTML envuelve cada imagen en `<picture>`: un `<source type="image/avif" srcset sizes>` para AVIF, un `<img>` WebP como alternativa con su propio srcset y sizes, y el ancho y alto reales de la imagen original. La imagen principal de la primera pantalla lleva `fetchpriority="high"` y no es lazy; todas las demás llevan `loading="lazy" decoding="async"`. Escribe sizes de acuerdo con el ancho que la imagen ocupa realmente.
6. Limpia los scripts. Si el sitio no tiene animaciones, o solo ganchos decorativos como `data-reveal`, elimina por completo GSAP, ScrollTrigger, SplitText, Lenis, Swiper, motion.js y el script en línea que añade la clase `anim`, y borra de app.css las reglas de Lenis y de anim. Si de verdad hacen falta animaciones, copia la librería en `assets/vendor/`, cárgala con `defer` solo en las páginas que la usan y comprueba que el contenido siga visible con `prefers-reduced-motion`. Convierte el menú y el pie de página en HTML estático con un script `chrome-stamp.mjs`: lee site.config.js, escribe entre los marcadores `<!-- chrome:nav:start -->`, `<!-- chrome:nav:end -->` y chrome:footer, construye el menú móvil con `<details>`, mantiene los enlaces con una altura mínima de 44 píxeles y usa párrafos, no h4, para los títulos de las columnas del pie. Después elimina chrome.js y la etiqueta script de site.config.js de las páginas; site.config.js se queda solo como archivo de datos que leen los scripts.
7. Lleva las solicitudes de terceros a cero. Con site_run_command, busca en el HTML y el CSS los valores de src y href que empiecen por `https://`; traslada al sitio o elimina todo recurso ajeno a tu propio dominio, salvo los enlaces tel:, mailto: y wa.me. Coloca el favicon en `assets/img/` y enlázalo en cada página; si no, el navegador pedirá /favicon.ico y registrará un 404 en la consola.
8. Cabeceras de caché. Ejecuta site_headers con mode="list". Si ningún archivo de assets se va a reemplazar nunca conservando el mismo nombre (el nombre del CSS lleva un hash y las imágenes reciben un nombre nuevo cuando cambian), previsualiza la línea `/assets/* Cache-Control: public, max-age=31536000, immutable` con confirm=false y aplícala con confirm=true tras mi aprobación. No pidas Cache-Control para el HTML; la plataforma ya sirve el HTML como no-cache.
9. Controles y nueva medición. Ejecuta `node seo-stamp.mjs`, `node chrome-stamp.mjs`, la compilación del CSS, `node seo-check.mjs`, `node design-check.mjs` y `npx --yes html-validate "**/*.html"` en ese orden y llévalos todos a cero errores. Revisa cada página con site_preview en anchos de 360, 390, 768 y 1440 píxeles. Repite la medición de core_web_vitals del paso 1 sobre las mismas páginas y ejecuta además seo_audit con runs=2 para la página de inicio. Si el rendimiento en móvil queda por debajo de 95, encuentra la causa en las listas de resources=true y corrígela; la causa más habitual es el desplazamiento de diseño provocado por una fuente de titulares que no se precargó.
Resultado: una tabla de antes y después (página, dispositivo, rendimiento, LCP, CLS, número de solicitudes, KB totales, número de solicitudes de terceros), la lista de archivos añadidos y eliminados, las líneas activas de site_headers y una nota breve sobre qué comandos volver a ejecutar, y en qué orden, tras la próxima edición. Si algún paso rompe el sitio, vuelve a la versión que anotaste con site_restore y avísame.
