Кто я?
- доброжелюбный бородач
- пятый голос подкаста «Веб-стандарты»
- редактор ленты новостей по фронтенду
- организатор митапов, конференций и воркшопов
- разработчик интерфейсов в Яндекс.Поиске
0,1с
×
200.000.000
=
232 дня
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS — язык программирования</title>
<link rel="stylesheet" href="/main.ac74gsac.css">
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS — язык программирования</title>
<link rel="stylesheet" href="/main.ac74gsac.css">
</head>
<body>
<h1>Правда-правда!</h1>
</body>
</html>
<link rel="stylesheet" href="https://awesome.cdn/style.css">
https://awesome.cdn/style.css
awesome.cdn
⬇
222.111.3.4
Как ускориться?
- Пересадить пользователя ближе к DNS-серверам 🤔
- Сразу указывать в ссылке IP-адрес 😱
- Избавиться от получения IP-адреса ✅
https://awesome.cdn/style.css
HTTPS
- Получить SSL-сертификат с сервера
- Проверить сертификат в Центре сертификации
- Сгенерировать ключи для общения
- Зашифровать запрос приватным ключом
- Расшифровать ответ приватным ключом
Как ускориться?
- Пересадить пользователя ближе к серверам 🤔
- Отказаться от HTTPS (на самом деле нет) ❌
- OCSP Stapling ✅
HTTPS
- Получить SSL-сертификат с сервера
- Проверить сертификат без Центра сертификации
- Сгенерировать ключи для общения
- Зашифровать запрос приватным ключом
- Расшифровать ответ приватным ключом
Как ускориться?
- Пересадить пользователя ближе к серверам 🤔
- Отказаться от HTTPS (на самом деле нет) ❌
- OCSP Stapling ✅
- Перенести сервера ближе к пользователю ✅
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
.example {
display: -ms-grid;
display: grid;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
background: -o-linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);
}
.example {
display: -ms-grid;
display: grid;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
background: -o-linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);
}
Link: </css /styles.css>; rel=preload; as=style
1459 байт = 1 сегмент
1 байт = 1 сегмент
Минификация
- CSSO
- CSSNano
- CSSMinifier
- руки и терпение 🤓
- и т.д.
Сжатие
- gzip
- brotli
- gzip + zopfli
159515 bootstrap.min.css
22783 index.html
23699 bootstrap.min.css.gz
6524 index.html.gz
------------
30223 total gzipped
182145 index-css-inline.html
30380 index-css-inline.html.gz
Не отдавать неиспользуемое ⚙️
Секрет успеха
- Самостоятельные компоненты 💪
- Аккуратная сборка 🧩
<div class="block"></div>
<style>
.block {
display: block;
}
</style>
Убрать значения по умолчанию
- CSS знает про HTML 👎
- тяжело поддерживать 👎
.wrapper {
color: #0077FF;
border-color: #0077FF;
}
.wrapper:hover {
color: #11EE66;
border-color: #11EE66;
}
.wrapper {
color: #0077FF;
border-color: currentColor;
}
.wrapper:hover {
color: #11EE66;
}
<div class="Row Bgc(#0280ae) C(#fff)">
<div class="Fl(start) W(300px) Ta(c) P(10px)">
Box-1
</div>
<div class="Fl(end) W(300px) Ta(c) P(10px)">
Box-2
</div>
</div>
Atomic CSS
<div class="md:flex bg-white rounded-lg p-6">
<img class="h-16 w-16 rounded-full" src="avatar.jpg">
<div class="text-center md:text-left">
<h2 class="text-lg">Erin Lindford</h2>
<div class="text-purple-500">Customer Support</div>
<div class="text-gray-600">erinlindford@example.com</div>
<div class="text-gray-600">(555) 765-4321</div>
</div>
</div>
tailwindcss.com
Что всё это время видел пользователь?
@import "blocks/header.css";
body > div.card > p.text > span.icon ~ * + * {
color: red !important;
}
.card_type_warning {
color: red;
}
background: url(img.jpg) 20px 20px / 20px 20px no-repeat;
⬇
background-image: url(img.jpg);
background-position-x: 20px;
background-position-y: 20px;
background-size: 20px 20px;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
Braces to Pixels
<!DOCTYPE html>
<html>
<head>
<style>
.critical {
/* ... */
}
</style>
</head>
<body>
...
<link rel="stylesheet" href="after.css">
</body>
</html>
filamentgroup / loadCSS
<link rel="preload"
href="path/to/mystylesheet.css"
as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="path/to/mystylesheet.css">
</noscript>
filamentgroup / loadCSS
<link rel="stylesheet"
href="style.css"
media="(min-width: 1000px)">
<head>
</head>
<body>
<!-- HTTP/2 push this resource, or inline it -->
<link rel="stylesheet" href="/site-header.css">
<header>…</header>
<link rel="stylesheet" href="/article.css">
<main>…</main>
<link rel="stylesheet" href="/comment.css">
<section class="comments">…</section>
</body>
The future of loading CSS
#define FOR_EACH_COMPOSITING_REASON(V) \
/* Intrinsic reasons that can be known right away by the layer. */ \
V(3DTransform) \
V(Video) \
V(Canvas) \
V(Plugin) \
V(IFrame) \
V(BackfaceVisibilityHidden) \
V(ActiveTransformAnimation) \
V(ActiveOpacityAnimation) \
V(ActiveFilterAnimation) \
V(ActiveBackdropFilterAnimation) \
V(ScrollDependentPosition) \
V(OverflowScrolling) \
V(OverflowScrollingParent) \
V(OutOfFlowClipping) \
V(VideoOverlay) \
V(WillChangeTransform) \
V(WillChangeOpacity) \
V(WillChangeFilter) \
V(WillChangeBackdropFilter) \
...
compositing_reasons.h
⚠️ Браузер ничего не обещает ⚠️
<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.html" />
Preload, prefetch и другие теги
Harry Roberts: FaCSSt—CSS and
Performance
Парсим CSS: performance tips &
tricks
Из-за режима самоизоляции интернет-трафик вырос на 10–30%
Системный подход к скорости:
онлайн-измерения на фронтенде
First Contentful Paint (FCP)
Largest Contentful Paint (LCP)
What Is DNS? | How DNS
Works
How HTTPS works
Building Blocks of TCP
Встречайте бабушку, Виталий Харисов
SSR: DIY, Джеймс Аквух
A Comprehensive
Guide To HTTP/2 Server Push
Slow-Start
Виталий Харисов, 10k
Find Unused
JavaScript And CSS Code With The Coverage Tab In Chrome DevTools
How Do You
Remove Unused CSS From a Site?
CSS code coverage: идентификация
неиспользуемого CSS кода / Антон Холкин (Booking.com)
victor-homyakov/detect-unused-css-selectors.js
БЭМ
Reduce the Scope and Complexity of Style Calculations
URL-encoder для SVG
Constructing the Object Model
Про сервис-воркеры. Снова! Кирилл Чугаинов
Web Performance 101
