Cómo optimizar la entrega de CSS: 7 pasos simples

imagen de vector de optimización cssAtrás quedaron los días en que los expertos en diseño y los bloggers líderes en la industria recomendaron crear páginas web de no más de 30 kilobytes …


En aquel entonces, se esperaba que este “límite” manejara HTML, JavaScript, imágenes, CSS y Flash. Seamos honestos, no se necesita mucho para superar completamente los 30 kb.

A medida que JavaScript y CSS ganaron popularidad, se hizo común que solo CSS superara el límite máximo de 30 KB. Esto es especialmente cierto para sitios web más grandes..

Sin embargo, no debe centrarse demasiado en su “conteo de kilobytes” al crear y diseñar páginas para su sitio web. Es importante mantener tus páginas. optimizado y apretado al escribir tu CSS.

La optimización no se trata solo de minimizar el tamaño de sus archivos. Se trata de mantener sus páginas libres de desorden e hinchazón, haciéndolas tan organizadas y eficientes como sea posible. A medida que aprenda más sobre las mejores prácticas de optimización de CSS, encontrará que crea automáticamente tamaños de archivo más pequeños.

Aquí hay 5 cosas simples que puede hacer para optimizar su CSS en este momento.

Cómo optimizar completamente la entrega de CSS

1. Use la taquigrafía

Escribir en taquigrafía se ha convertido en una práctica muy común. Esta es, con mucho, la forma más simple de reducir su código y cuánto tiempo le lleva codificar. Si aún no está haciendo esto, no hay tiempo como el presente.

propiedad de fuente css

Hay una multitud de elementos para los que puede usar la taquigrafía, pero los más comunes incluyen:

  • Margen
  • Relleno
  • Fuente
  • contorno
  • Frontera
  • Antecedentes
  • Estilo de lista

valores de configuración abreviadosTambién puede combinar valores usando taquigrafía. Al especificar diferentes valores, el navegador esencialmente usará una manera específica para interpretar las reglas.

Usando cualquier taquigrafía haga que su código general sea mucho más sucinto. Estás guardando caracteres y líneas.

Si usa taquigrafía en todas las áreas posibles, esto puede reducir drásticamente el tamaño general del archivo.

2. Deshazte de los hacks

es decir, regla cssPara servir reglas CSS específicas de IE, el uso de hacks CSS condicionales le brinda la ventaja de servir un archivo CSS predeterminado más pequeño y limpio.

Ayuda con los navegadores que son más compatibles con los estándares. Sin embargo, el peso de página adicional solo será descargado por los navegadores que lo requieran..

Si debe usar un hack, es imprescindible que el código que use sea específico para la versión de Internet Explorer en la que está enfocado.

Existen numerosos códigos preescritos que sirven como hacks si no quieres escribir los tuyos. Simplemente tómese el tiempo para mirar realmente el código escrito previamente y asegurarse de que sea preciso o de lo contrario esto podría resultar en más problemas.

Ahora, si puede usar CSS para obtener los resultados que desea, hágalo sin ningún truco. Por supuesto, esto depende de que todas las demás cosas sean iguales. Su código general será mucho más ligero y simple cuando use menos hacks en su sitio.

3. Sea inteligente sobre el uso de espacios en blanco

Para su código CSS, el espacio en blanco es imperativo para facilitar la lectura.

El espacio en blanco incluye elementos, como pestañas, espacios y saltos de línea adicionales. Cada espacio en blanco que puedes eliminar es similar a eliminar un personaje.

eliminar líneas vacíasSin embargo, a menudo no se recomienda escatimar en espacios en blanco por el bien de un archivo más pequeño. Aún necesita mantener una legibilidad óptima en sus páginas web.

El espacio en blanco es importante para el formateo, por lo que desea encontrar un equilibrio. Si escribe en bloques grandes en el texto para eliminar algunos espacios en blanco, La corta capacidad de atención de los lectores en Internet hará que hagan clic.

Una forma de proporcionar tanto un tamaño de archivo más pequeño como legibilidad es deshacerse de las pestañas y solo poner una sola línea entre los párrafos. Esto proporciona suficiente espacio en blanco desde un punto de vista de legibilidad, pero también elimina parte de ese espacio en blanco que no es necesario.

Ahora, para la versión de producción de su archivo CSS, puede eliminar el espacio en blanco. Seguirá estando presente en su archivo de trabajo..

Esta es otra forma de comprometerse para que tenga archivos más pequeños y un formato legible.

4. Pode los reinicios y marcos

Cuando utiliza un marco CSS, es imprescindible que revise la documentación.

Es igualmente importante mirar cada línea que está dentro de su archivo CSS. Hay momentos en los que descubrirá que hay algunas reglas en el marco que no desea para su proyecto actual. Estos pueden ser eliminados.

eliminó las reglas CSS no utilizadas

Puede descubrir que puede lograr detalles de presentación de una manera más concisa y elegante …

Es posible que esto no sea lo que normalmente usa, pero si funciona, puede permitir un marco más limpio. Cuando los conozca, esto también lo ayudará a evitar la duplicación involuntaria de conjuntos de reglas.

La misma información también se aplica a los reinicios. Cuando usa restablecimientos, ayudan a neutralizar el estilo predeterminado de un navegador. Ahora, si está familiarizado con el sitio web que está creando, no es raro encontrar ciertas declaraciones que sabe que no va a necesitar..

Por ejemplo, en un blog general, es probable que no los use. Simplemente deshágase de lo que no necesita para el sitio específico que está construyendo. Usted puede Asegure un trabajo mejor optimizado cuando utiliza un conjunto de reglas con respecto a un reinicio o marco.

Sin embargo, en su estado predeterminado, no deben aceptarse. Para mantener sus archivos CSS legibles y ajustados, mire cada declaración individualmente y reduzca las innecesarias.

5. Prepara tu CSS para el futuro

Sintaxis CSS

Otra opción útil de optimización de CSS: separe la mayoría de sus reglas de sus declaraciones específicas de diseño.

Asigne el diseño a su propio archivo individual si esto es posible. Si no, al menos darle su propia sección puede ser beneficioso.

En última instancia, el posicionamiento y los flotantes, que son los métodos actuales que utilizan CSS, no estaban destinados a servir como herramientas de diseño.

Algunos van tan lejos como para decir que estos son realmente similares a los hacks de diseño. No hay una alternativa viable en este momento y la esperanza es que una vez que se hayan acordado los estándares de diseño, comiencen a recibir soporte de los navegadores..

Una vez que se produce este soporte, no debería ser muy difícil intercambiar las propiedades del modelo de caja que están pirateadas por aquellas destinadas a diseños.

En este momento, el la mejor opción es manejar su diseño usando las propiedades correctas. Esto generalmente condensará el peso de la página de manera más efectiva que usar el conjunto limitado de propiedades actualmente disponibles para compensar las peculiaridades..

6. Mantenga siempre la documentación actualizada sobre su trabajo

Ya sea que esté trabajando en un sitio web en equipo o solo, es imprescindible realizar un seguimiento de todo lo que ha hecho..

Por ejemplo, solo, puede olvidar algo que haya hecho. Como equipo, alguien puede hacer algo, y es posible que no se dé cuenta hasta que realice cambios que puedan causar problemas con varios elementos del código.

agregar comentario cssLa duplicación de códigos es un área de gran preocupación tanto para los equipos como para los diseñadores individuales, especialmente cuando se utilizan creadores de sitios web populares. Wix, Squarespace y otro software de creación de sitios web son conocido por duplicar el código o por perderlo por completo de su base de datos.

El uso de guías de hoja de estilo y guías de marcado son opciones de documentación viables. También puede usar los comentarios CSS es otra opción y esto puede ser beneficioso para separar los elementos de los archivos CSS que son largos. Ponerlos en la guía de estilo o marcado, evita que agreguen el tamaño del archivo.

Una de las formas más rápidas de inflar código es haciendo el mismo trabajo dos veces. La codificación es compleja, por lo que es imprescindible mantener una documentación precisa de todo lo que ha hecho..

Si trabaja solo, es ideal revisar esta documentación cada vez que se siente para comenzar a trabajar. Cuando trabaje como parte de un equipo, asegúrese de que todos codifiquen en el mismo documento se adhiere a una guía de estilo o marcado de la comunidad para que todos los miembros del grupo entiendan fácilmente los cambios de codificación.

7. Comprima sus archivos (CSS Optimization 101)

GIF de compresión y optimización CSS

Compresión: hay algo más que esto …

Una forma efectiva de optimizar CSS es mediante la compresión. Esta es una manera de garantizar que sus archivos sean amigables con el navegador, aunque los humanos no puedan leerlos.

En comparación con las copias de trabajo, serán una fracción del tamaño. Existen diferentes aplicaciones que puede aprovechar para facilitar el proceso de compresión..

Estos realizarán tareas, como encontrar y corregir cualquier propiedad CSS que se sobrescriba entre sí, comprimir espacios en blanco y buscar oportunidades para usar CSS de forma abreviada.

Además de la conveniencia de estas aplicaciones, también pueden ayudarlo a aprender más sobre las tareas que puede hacer a mano si lo prefiere. También puede usar varios editores de texto para ayudar a formatear sus archivos CSS.

Pueden servir versiones zip de los diversos archivos CSS que tiene. Esto se hace típicamente usando PHP. Si desea utilizar herramientas de optimización y compresión, asegúrese de revisar varias opciones antes de elegir la correcta para usted.

Ahora, estas aplicaciones son generalmente buenas para minimizar errores, pero no son perfectas. Debido a esto, siempre debe revisar su CSS después de usar una aplicación para garantizar la precisión. El código que está optimizado y limpio es crítico para el tamaño del archivo, pero también para la legibilidad y el mantenimiento..

Tu turno

Los principios discutidos aquí son consideraciones sólidas para CSS, pero también para JavaScript, HTML y otros lenguajes de programación. En comparación con la representación de su sitio web, los archivos CSS no son tan destacados para el usuario final.

Sin embargo, los principios discutidos aquí ayudan tanto con la experiencia de desarrollo como con la experiencia del usuario..

La mayoría de las buenas empresas de alojamiento web lo ayudarán con la optimización de CSS. Los sitios web más rápidos lo hacen un cliente feliz, pero los archivos más pequeños también son menos pesados ​​en sus servidores.

Hemos probado todos los servidores web canadienses y recomendamos SiteGround. No solo lo ayudan a optimizar la entrega de CSS, sino que su soporte técnico no tiene paralelo.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map