¿Necesita mejorar el rendimiento de las CSS? Consejos de nuestros expertos en diseño web para dar un salto de calidad y rapidez a las páginas agilizando los formatos de estilo CSS.
Cómo bién sabrá las CSS se encuentran en la capa de presentación del diseño del sitio web. Si se hace bien, agrega belleza para sus usuarios y la sensación correcta a los tags en HTML. Si no, podría resultar en una mala experiencia de usuario (UX) y hacer un estrago en la velocidad y el rendimiento de su sitio web.
En este artículo, aprenderás cómo evitar algunas decisiones comunes de codificación CSS que atascarán tu sitio web. Al final, podrás acelerar tu web y mejorar la experiencia del usuario, ¡justo lo que todos los diseñadores web más desean y, con los cambios de Google en posicionamiento orgánico, más demandan los clientes!
Abarcamos estos seis temas de CSS para mejorar el código fuente y aumentar el rendimiento de la página web:
1. Escribe selectores simples
CSS tiene una amplia y flexible gama de opciones de codificación que puede usar para dirigirse a los elementos HTML para aplicar estilos. A lo largo de los años, los expertos han aconsejado a los desarrolladores que escriban selectores simples para reducir la carga en el navegador y mantener el código limpio y simple.
Este siguiente bloque de código muestra de qué se trata la simplicidad:
.gestpromedia-image {
width: 62%
}
Sin embargo, CSS no impide escribir lo siguiente:
main > div.blog-section + article > * {
}
En este ejemplo, en segundo plano, el explorador analizará el selector de derecha a izquierda, empezando por el selector universal () y leyendo hasta el selector. Esto implica más trabajo para el navegador de lo habitual. Aunque estamos hablando de una diferencia de milisegundos para analizar este selector, esos milisegundos realmente se suman cuando este método de selector se produce varias veces en la hoja de estilos.*main
Además, cuanto más largos sean los selectores, más bytes añadirán al tamaño total de la hoja de estilos, siendo una página más «pesada». Teniendo en cuenta lo quisquilloso que se está poniendo Google, cualquier reducción en el peso final de la página web redundará en conseguir optimizar nuestros resultados SEO.
2. Evita animaciones excesivas
Ahora que la animación está disponible en CSS nativo, no es necesario usar JavaScript para agregar animaciones a nuestros diseños web. Esto implica que agregar animaciones a nuestra web sea un poco más fácil y significa que, si se hace bien, puede aprovecharlas para crear una mejor experiencia de usuario.
Sin embargo, cuando nos excedemos, podemos conseguir una cosa muy mala: puede distraer al usuario en la realización de la tarea que está tratando de lograr cuando visita su sitio web (que probablemente sea una compra o, como mínimo conseguir un lead cualificado). Esto implica reducciones en nuestra CRO y CRT.
Tenga en cuenta también que cada animación que agregue toma tiempo para analizar, por lo que la animación excesiva podría ralentizar o, incluso, detener el navegador web. Esto es un problema en ordenadores que tengan cierta antigüedad porque estaremos complicando el acceso a un porcentaje de usuarios que, según la temática y orientación de nuestra web, no será despreciable.
3. Saber cuándo animar propiedades costosas
Es simple: las propiedades que hacen que toda la página se reajuste o estructure globalmente, no deben animarse. Estas propiedades se conocen normalmente como «costosas o de alto impacto» porque pueden implicar un tiempo de carga significativo en la web.
¿Cuáles son estas propiedades? Pues, por ejemplo, estas:
marginpaddingheightwidth
La razón de esto es que cuando se cambian propiedades como las indicadas y otras dimensiones de un solo elemento DOM (Document Object Model), se produce cambios en todos los demás elementos en cadena:
.margin
Algunas otras propiedades, como y , se pueden animar porque no afectan al diseño de otros elementos. Esto hace posible que los navegadores web descarguen esos cálculos en la GPU (procesador gráfico) para que sean aún más rápidos:
opacitytransform
Otras propiedades CSS se usan con más frecuencia, pero aún tardarán más en generarse. Algunas de estas propiedades incluyen:
nth-childbox-shadowborder-radiusposition: fixed
Estas propiedades deben usarse de forma moderada. En ocasiones, nuestros especialistas se encuentran con repeticiones masivas en multitud de archivos css que conforman las webs de nuestros clientes. Esto redunda en un mal rendimiento de la web, un error conceptual de base y unos costes de resolución (optimización de código) más elevado para el cliente.
4. La declaración @import
La instrucción se utiliza principalmente para incluir archivos como fuentes, aunque puede incluir otros archivos CSS.
CSS es el bloqueo de representación, lo que significa que cuando usa la instrucción en el archivo CSS para obtener una fuente u otro archivo CSS, el navegador recuperará el recurso antes de continuar procesando el código CSS restante.
@import Ejemplo de código explicativo:
/* styles.css */
/**
* The browser would fetch base.css before
* processing the remaining code in styles.css
*/
@import url("principal.css");
Cuando el recurso es un archivo de fuente, el navegador utilizará la fuente disponible en el sistema mientras espera a que se descargue la otra fuente. Después de descargar, intercambiará la fuente del sistema del usuario por la fuente descargada. Por lo tanto, el usuario podría estar leyendo el contenido en una fuente y, de repente, la fuente cambia a otra. Esto es malo para la experiencia del usuario y está penalizado por Google
A continuación se muestra un ejemplo de cómo cargar una fuente con la instrucción:@import
/**
* Ejemplo de carga de fuente
* @import statement.
* La fuente sólo está disponible tras ser descargada desde la api de Google
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
En lugar del ejemplo anterior, en GESTPROMEDIA recomendamos usar la etiqueta en el código HTML para cargar las fuentes de la siguiente manera:
linkhead
<link rel="preload" as="font" href="https://fonts.googleapis.com/css?family=Open+Sans" crossorigin="anonymous"> Nota: este ejemplo usa anonymous aunque no es obligatorio. Indica que no habrá intercambio de credenciales de usuario. Por ejemplo, a nivel de cookies.
De este modo, le indicamos al navegador que descargue la fuente en cuanto sea posible.
También puede tomar medidas para asegurarse de que el archivo de fuente que está en precarga coincida con los de su CSS para evitar que el usuario descargue dos versiones de la misma fuente y malgaste su ancho de banda.rel="preload"as="font" y tiempo de descarga.
5. Optimiza los tamaños de tus archivos
En el diseño y desarrollo web, el tamaño importa. Imágenes, un archivo HTML o JavaScript u otros archivos multimedia, hay una regla de oro: siempre debemos comprimir cuando sea posible hacerlo.
Reduzca el tamaño de su archivo CSS por minificación. Las imágenes de nuestra web deben optimizarse para reducir su velocidad de carga. Aquí debemos valorar el uso de archivos de imagen de última generación como WebP o SVG.
6. Evitar las imágenes de mapa de bits base64
Las imágenes Base64 se encuentran entre las opciones para insertar imágenes en una página web. Nosotros descartamos que se usen por motivos como estos:
- Aumentan significativamente el tamaño total del archivo CSS
- Se descargan independientemente de si se usan o se ven
- La codificación Base64 da como resultado un tamaño de archivo de imagen mucho más grande de lo recomendable y de lo que ocuparía si se usasen otro tipo de archivos.
- El explorador debe analizar toda la cadena base64 antes de que se pueda utilizar ese archivo:
¿Quieres diseñar una web optimizada para ocupar las primeras posiciones en Google? Contacta con nosotros
GESTPROMEDIA
E-mail: info@gestpromedia.com
Web: https://www.gestpromedia.com
