CSS

Performance

April 10th

Less Requests

Images Optimization

Gzip/Brotli

HTTP/2 & HTTP/3

JavaScript Optimization

Code Spliting

Bundels

Web Performance ⚡️

Workers

Cache

Performance Budget

CSS?

CSS

Performance

Optimization

CSS

VS

CSS

Performance

Load Time

Block Time

Render Time

Optimization

CSS

Autid Tools

Optim. Tools

CSS Crafters

CSS

Performance

How does CSS work?

How does CSS work?

Network

CSS Performance

How does CSS work?

Render

CSS Performance

How does CSS work?

Render

CSS Performance

How does CSS work?

Render

Source: HTML Rendering

CSS Performance

CSS Performance

How does CSS work?

Render

CSS Performance

How does CSS work?

Render

CSS Performance

How does CSS work?

Render

CSS Performance

How does CSS work?

Render

CSS Performance

How does CSS work?

Render

CSS Performance

How does CSS work?

Render

CSS Performance

How does CSS work?

Render

CSS Performance

How does CSS work?

Render

CSS Performance

How does CSS work?

Render

CSS Performance

How does CSS work?

Render

CSS Performance

How does CSS work?

Render

CSS Performance

Optimization

CSS

CSS Audit Tools

CSS Optimization

CSS Audit Tools

CSS Optimization

DevTools

CSS Audit Tools

CSS Optimization

DevTools

CSS Audit Tools

CSS Optimization

DevTools

CSS Optimization

CSS Audit Tools

CSS Optimization

CSS Stats

CSS Optimization

CSS Audit Tools

CSS Optimization

Project Wallace

CSS Optimization

CSS Optimization

CSS Optimization

CSS Optimization

CSS Optimization

CSS Optimization

CSS Optimization

CSS Optimizarion

CSS Optimization

Critical Path

CSS Optimizarion

CSS Optimization

@media

<link rel="stylesheet" href="all.css" media="all" />
<link rel="stylesheet" href="small.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="medium.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="large.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />

CSS Optimizarion

CSS Optimization

Content Visibility

CSS Optimizarion

CSS Optimization

Content Visibility

CSS Conf Web Site

CSS Optimization

Tips

CSS Conf Web Site

CSS Optimization

Tips

1,3 MB

CSS Conf Web Site

CSS Optimization

Tips

350 KB

CSS Conf Web Site

CSS Optimization

Tips

Original

Grey + CSS

.mate {
  background-color: #ab3a3c;
}
.mate-image {
  ...
  mix-blend-mode: hard-light;
}

CSS Conf Web Site

CSS Optimization

Tips

CSS Conf Web Site

CSS Optimization

Tips

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmYmRlV9Su1caiTVo.woff) format('woff');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISma2RlV9Su1caiTVo.woff) format('woff');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmY2RlV9Su1caiTVo.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmbGRlV9Su1caiTVo.woff) format('woff');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmYGRlV9Su1caiTVo.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmYWRlV9Su1caiTVo.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmb2RlV9Su1cai.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap

CSS Conf Web Site

CSS Optimization

Tips

/* latin-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmYWRlV9Su1caiTVo.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap

Resources

CSS Optimization

Conclutions

CSS Optimization

Load only the CSS that you page needs

Use CSS Optimization Tools

Self host all resources as possible

¿?

CSS Performance

By Joan León

CSS Performance

La Web Performance está ganando popularidad, tanto en los departamentos técnicos como en los de producto y negocio. Mantener una web, o aplicación, rápida y ágil mejora la experiencia de usuario y aumenta los ratios de conversión. Solemos ver mucho foco en la optimización de las peticiones de recursos, la caché, protocolo HTTP/2, en las imágenes con lazy loading y responsive image, en modularizar y “bandelizar” el Javascript. Todo eso está muy bien, pero ¿qué pasa con el CSS? En CSS tenemos margen de mejora para optimizar la performance de la web, no sólo en la carga inicial optimizando el CSS necesario en cada página, sino también en la navegación, interacciones y animaciones mientras los usuarios están en nuestra web o aplicación. En esta charla conoceremos herramientas para detectar dónde podemos mejorar nuestro CSS, algunos trucos avanzados y ejemplos de una optimización CSS para conseguir la máxima fluidez para mejorar la experiencia de usuario.

  • 1,834