Joan León PRO
⚡️ Web Performance Consultant | Speaker | Staff Frontend Engineer at @AdevintaSpain | @GoogleDevExpert in #WebPerf | @cloudinary Ambassador
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.
