Priorización de recursos CSS para mejorar rendimiento web

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:50

Priorización de recursos CSS para mejorar rendimiento web

Curso de Optimización Web

Clase 9 de 38

Clase 9 / 38

Recursos

¿Cómo priorizar recursos CSS de manera eficiente?

Optimizar la carga de recursos es crucial para mejorar el rendimiento de cualquier página web. Al cargar archivos CSS, muchas veces se incluyen estilos para diversas situaciones como modos oscuros, impresión y dispositivos de diferentes tamaños sin distinción. Este enfoque puede resultar ineficiente, especialmente para usuarios móviles que deben descargar estilos que no les son relevantes. Afortunadamente, priorizar recursos CSS nos permite indicar al navegador cuáles archivos son de mayor importancia, dependiendo de las condiciones del dispositivo del usuario.

¿Cómo funciona la priorización de recursos CSS?

Priorizar recursos CSS implica asignar diferentes niveles de importancia a los archivos de estilo, de acuerdo con las características del dispositivo del usuario. Esto se logra, por ejemplo, indicando al navegador si un archivo CSS es esencial al momento de cargar la página o si puede esperar. En un dispositivo en modo oscuro, los estilos correspondientes deben cargar con alta prioridad, permitiendo que la página mantenga su funcionalidad con el mínimo de recursos necesarios.

¿Cómo implemento la optimización en CSS?

Para ver un ejemplo de optimización en acción, imagina que estás trabajando en un proyecto con styles.css como tu principal archivo de estilo. Inicialmente, este archivo contiene una media query para dispositivos con un ancho mayor a 600 píxeles, es decir, optimizada para móviles. Veamos el proceso para mejorar:

Optimizar para "mobile first": Cambia la media query para enfocarse en dispositivos desktop moviendo las propiedades hacia un nuevo archivo, digamos desktop.css.

/* styles.css */
h2 {
  font-size: 24px; /* tamaño para móviles */
}

/* Nueva media query */
@media screen and (min-width: 600px) {
  h2 {
    font-size: 30px; /* tamaño para desktop */
  }
}

Modificar el HTML: Agrega el nuevo archivo en tu documento HTML y define su prioridad usando el atributo media.

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 600px)">

Con este enfoque, el navegador solo descarga desktop.css cuando es necesario (en pantallas mayores a 600 píxeles), mejorando el tiempo de carga en dispositivos móviles.

¿Cuándo deben dividirse los archivos CSS?

Es importante balancear las ventajas de dividir el CSS con la cantidad de solicitudes HTTP adicionales que el navegador debe hacer. Cada archivo CSS separado implica un nuevo request, lo que puede impactar negativamente en el rendimiento si se sobre-utiliza.

Consideraciones finales

Utilizar estratégicamente la priorización de recursos en CSS puede mejorar significativamente el rendimiento de tu aplicación, haciendo el navegador más eficiente. Sin embargo, si decides segmentar tus estilos, evalúa el impacto en las solicitudes HTTP. Además, la priorización también se aplica a recursos de terceros, como los CDNs y analytics, mejorando así el rendimiento de recursos que no forman parte directamente de tu aplicación.

Continúa explorando y experimentando con estas técnicas para aprender a maximizar el rendimiento de tus aplicaciones. La siguiente clase te enseñará cómo manejar recursos externos con antelación. ¡Nos vemos allí!

Fernando Quinteros Gutierrez

Hace 6 años

💇‍♀️ Priorización de recursos

Ideas/conceptos claves

Se debe tener un balance entre lo que necesita la app y como le podemos ayudar al navegador

Todas las herramientas que serán vistas dentro de todo el curso serán de doble filo como podemos ayudar al navegador también podemos hacer que su trabajo sea más duro

Apuntes

No todos los recursos tienen la misma prioridad
Por ejemplo, en el CSS pasa que metemos todos los estilos para todos los casos que se pueden llegar a dar
- Estilos dark mode
- Estilos de desktop
- Estilos de tablet
- Estilos de mobile
Pénesenos en el caso de alguien que navega en el móvil, el deberá descargar todos estos estilos, así no le sea de interés o relevantes
Con la priorización de recursos en CSS podemos ayudarle a navegador a darles "pistas" para decirle cual tiene mayor prioridad

<!-- Especificamos el atributo media -->
<link
  rel="stylesheet"
  href="/desktop.css"
  media="screen and (min-width: 600px)"
/>

Esta técnica es simple pero eficiente
Nos ayuda bastante a decirle al navegador que puede ser importante que cargue y que no
Se debe considerar que cada vez que hagamos esto sera un nuevo request que debamos hacer hacia el servidor

RESUMEN: Podemos decirle al navegador que recursos tengan una prioridad mayor con el atributo media en los elementos link, pero se debe tener cuidado porque cada archivo nuevo sera una nueva petición HTTP

Comentarios (29)29 comentarios

Cristian Gomez

Jesus Manuel Hernandez Diaz

Gianni Alvarado

Martin Campos

Hace 5 años

Edgar Lopez Arroyo

Roberto Fernandez Mata

Emma Estrada

Carlos Rodríguez

Adrián Ortiz Martín

Carlos Eduardo Gomez García

Axlin Miranda

Jonathan 🦑 Alvarez

Profesor

Hebert Ferrer Fernandez

Bryan David Castañeda Aranzales

Hace 4 años

Omar Gabriel Aguilar Moscoso

Luis Alejandro Vera Hernandez

Kenneth Angulo L

Hace un mes

Jesus Antonio Castaneda Valencia

Rubén Ernesto Aragón Gil

Gilbert Ardila

Hugo Ricardo Méndez Canul

Héctor Eduardo López Carballo

Nazareno Aznar Altamiranda

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Priorización de recursos CSS para mejorar rendimiento web