Diseña páginas web más rápidas, parte 3: Ajustes de fuente y CSS

Bienvenido de nuevo a esta serie de artículos sobre cómo diseñar páginas web más rápidas. La parte 1 y la parte 2 de esta serie cubrieron cómo perder peso en el navegador mediante la optimización y el reemplazo de imágenes. Esta parte analiza cómo perder grasa adicional en CSS ( Hojas de estilo en cascada ) y fuentes.

Ajustando CSS

Lo primero es lo primero: veamos dónde se origina el problema. CSS fue una vez un gran paso adelante. Puede usarlo para diseñar varias páginas desde una hoja de estilo central. Hoy en día, muchos desarrolladores web usan frameworks como Bootstrap.

Si bien estos marcos son ciertamente útiles, muchas personas simplemente copian y pegan todo el marco. Bootstrap es enorme; la versión “mínima” de 4.0 tiene actualmente 144,9 KB. Quizás en la era de los terabytes de datos, esto no es mucho. Pero como dicen, incluso el ganado pequeño hace un desastre.

Mira hacia atrás a la getfedora.org example. Recuerde en la parte 1, el primer análisis mostró que los archivos CSS usaban casi diez veces más espacio que el propio HTML. Aquí hay una muestra de las hojas de estilo utilizadas:

Son nueve hojas de estilo diferentes. Muchos estilos en ellos que también están sin usar en la página.

Eliminar, fusionar y comprimir/minificar

El CSS impresionante de fuentes habita el extremo de los estilos incluidos y no utilizados. Solo hay tres glifos de la fuente utilizada en la página. Para compensar eso en KB, el CSS impresionante de fuentes utilizado en getfedora.org es originalmente de 25,2 KB. Después de limpiar todos los estilos no utilizados, solo ocupa 1,3 KB. ¡Esto es solo alrededor del 4% de su tamaño original! Para Bootstrap CSS, la diferencia es 118,3 KB original y 13,2 KB después de eliminar los estilos no utilizados.

La siguiente pregunta es, ¿debe haber un bootstrap.css y un font-awesome.css? O se pueden combinar? Sí pueden. Eso no ahorra mucho espacio de archivo, pero el navegador ahora solicita menos archivos para representar la página con éxito.

Finalmente, después de fusionar los archivos CSS, intente eliminar los estilos no utilizados y minimizarlos. De esta forma ahorras 10,1 KB para un tamaño final de 4,3 KB.

Desafortunadamente, todavía no hay una herramienta “minificadora” empaquetada en los repositorios de Fedoras. Sin embargo, hay cientos de servicios en línea que pueden hacerlo por usted. O puedes usar CSS-HTML-JS Minimizar , que es Python, y por lo tanto fácil de instalar. No hay una herramienta disponible para purificar CSS, pero hay servicios web como UnCSS .

Mejora de fuentes

CSS3 vino con algo que a muchos desarrolladores web les gusta. Podrían definir las fuentes que el navegador descarga en segundo plano para representar la página. Desde entonces, muchos diseñadores web están muy contentos, especialmente después de descubrir el uso de fuentes de iconos para el diseño web. Conjuntos de fuentes como fuente impresionante son bastante populares hoy en día y ampliamente utilizados. Este es el tamaño de ese contenido:

                      current free version 912 glyphs/icons, smallest set ttf 30.9KB, woff 14.7KB, woff2 12.2KB, svg 107.2KB, eot 31.2
                    

Entonces la pregunta es, ¿necesitas todos los glifos? En todo Github .

La desventaja de estos conjuntos de fuentes personalizados es que debe alojar la fuente usted mismo. No puede usar otros servicios de fuentes en línea para proporcionar actualizaciones. Pero esto puede no ser realmente un inconveniente, en comparación con un rendimiento más rápido.

Conclusión

Ahora ha hecho todo lo posible con el contenido en sí, para minimizar lo que carga e interpreta el navegador. De ahora en adelante, solo los trucos con la administración del servidor pueden ayudar.

Una fácil de hacer, pero que mucha gente hace mal, es optar por un almacenamiento en caché inteligente. Por ejemplo, un archivo CSS o de imagen se puede almacenar en caché durante una semana. Hagas lo que hagas, si usas un servicio de proxy como Cloudflare o creas tu propio proxy, primero minimiza las páginas. A los usuarios les gustan las páginas de carga rápida. Te lo agradecerán (en silencio) y el servidor también tendrá una carga menor.

Related Posts