Optimiza las fuentes web sin cambiar la representación
De Wikiprompt, la enciclopedia libre de prompts
Optimiza las fuentes web sin cambiar la representación Un mensaje completo para un agente de IA para subdividir y optimizar fuentes web mientras se preserva la fidelidad visual, con pasos detallados de medición y verificación.
Contenido del PromptGuardar
🌐
Haz que las fuentes web de este sitio carguen más rápido sin cambiar cómo se ven. Reduce los bytes de las fuentes tanto como sea posible, mantén el renderizado idéntico y demuéstralo con diffs de píxeles antes/después. Trata cualquier cambio visual como una regresión a menos que yo lo apruebe. Si una optimización cambiara el renderizado, dime qué ahorra y qué cambia, y mantén el sitio con el mismo aspecto por defecto. Conserva el comportamiento de carga actual: no toques font-display ni las fuentes de respaldo. No agregues procesamiento de fuentes al build; escribe un script que yo ejecute manualmente, confirma su salida y anota cuándo necesita volver a ejecutarse. Primero mide el estado actual: el tamaño de cada archivo de fuente, el número de glifos, los ejes variables, las características OpenType y el hinting, además de los bytes de fuente por página y qué precarga cada página. Luego averigua qué usa realmente el sitio, revisando estilos de componentes en línea además de las hojas de estilo: qué caracteres aparecen en el contenido, qué valores de eje y pesos necesita cada fuente (incluyendo anulaciones puntuales y negrita dentro de cursiva), qué características OpenType están activadas y efectos secundarios de CSS como `hyphens: auto` que usan el guion U+2010. Reduce cada fuente a eso. Conserva los caracteres usados más Latin-1 y Latin Extended-A, y deja el CJK a las fuentes del sistema si así se renderiza hoy. Limita los ejes variables a los rangos en uso, y solo fija un eje en un valor si nada lo anula. Elimina las características OpenType y el hinting no utilizados. Divide cada fuente en dos archivos. Un núcleo pequeño con ASCII y la puntuación que usan la mayoría de las páginas (comillas curvas, guiones, puntos suspensivos) se precarga. Un archivo extendido detrás de `unicode-range` solo se descarga cuando una página necesita uno de sus caracteres. El `unicode-range` de cada archivo debe listar solo los caracteres que realmente contiene. Ten cuidado con algunas cosas. Una cara de respaldo generada entre los archivos núcleo y extendido dibujará los caracteres extendidos antes de que llegue la fuente real. Las fuentes con un Reserved Font Name bajo la OFL deben renombrarse internamente una vez subdivididas. Revisa los archivos generados, ya que las herramientas de fuentes tienen peculiaridades. Antes de dar por terminado, construye una línea base con el mismo contenido y haz diff de píxeles antes y después en páginas con código, cursivas, caracteres acentuados, componentes con su propia configuración de fuentes y CJK. Explica cada diferencia visible: cambio de contenido, regresión a corregir o redondeo de subpíxeles inofensivo. Vuelve a medir los bytes por página y confirma que los archivos extendidos solo se cargan donde se necesitan. Cuando termines, dime los bytes antes y después por fuente y por página, los resultados del diff de píxeles, cualquier desviación de lo que pedí y qué costó, y cómo volver a ejecutar el script. Más adelante, puede valer la pena incrustar la fuente núcleo en la hoja de estilo global y precargar los archivos extendidos después del idle.
Iniciá sesión para ver el prompt completo
Continuar con:
Al iniciar sesión, aceptás nuestros Términos de uso y Política de privacidad
Uso
Este prompt está diseñado para usarse con coding. Copiá el contenido de arriba y pegalo en tu herramienta de IA preferida.
Para mejores resultados, personalizá los marcadores (indicados con corchetes o mayúsculas) con tus requisitos específicos.
Referencias
- Categoría: Prompts de coding
- Fuente: https://x.com/shuding/status/2115855028737200211
Discusión
0 comentarios