css-cost/index.html

<!DOCTYPE html>
<html lang="ru">

<head>
    <title>Дорогая цена стилей</title>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <link rel="stylesheet" href="../src/shower/themes/ribbon-3/styles/styles.css">
    <link rel="stylesheet" href="../src/highlight/styles/github-gist.css">
    <link rel="stylesheet" href="style.css?v=0.0.0">
</head>

<body class="shower list">

    <header class="caption">
        <h1>Дорогая цена стилей</h1>
        <p>
            <a href="https://twitter.com/dark_mefody">Никита Дубко</a>, Яндекс
        </p>
    </header>

    <section class="slide clear">
        <img src="../src/shower/themes/yandex2/images/logo-ru.svg" alt="" class="place" style="width: 25%" />
    </section>


    <section class="slide clear" id="cover">
        <h2 style="font-size: 3em; font-weight: 400; text-shadow: 0 0 2px black; color: white;">
            Дорогая <br>цена стилей
        </h2>
        <p style="margin-top: 30%; color: white; text-shadow: 0 0 1px black">
            <a href="https://twitter.com/dark_mefody" style="color: var(--yandex-yellow)">Никита Дубко</a>, Яндекс
        </p>
        <img src="./images/cover.jpg" alt="" class="cover height">
    </section>


    <section class="slide">
        <div>
            <h2>Кто я?</h2>
            <ul>
                <li>доброжелюбный бородач</li>
                <li>пятый голос подкаста «Веб-стандарты»</li>
                <li>редактор ленты новостей по фронтенду</li>
                <li>организатор митапов, конференций и воркшопов</li>
                <li>разработчик интерфейсов в <span style="color: red;">Я</span>ндекс.Поиске</li>
            </ul>
        </div>
    </section>


    <section class="slide clear black">
        <img src="./images/wst-mc.jpg" alt="" class="cover">
    </section>


    <section class="slide clear">
        <img src="./images/dicaprio-mad.jpg" alt="" class="cover height">
    </section>


    <section class="slide title">
        <h2 class="shout">Зачем?</h2>
    </section>


    <section class="slide clear">
        <img src="./images/load-js-fast-yandex.jpg" alt="" class="cover">
    </section>


    <section class="slide clear">
        <img src="./images/load-css-fast-yandex.jpg" alt="" class="cover">
        <img src="./images/counter_strike.png" alt="" class="place bottom right next" width="300">
    </section>


    <section class="slide clear">
        <img src="./images/load-js-fast-google.jpg" alt="" class="cover">
        <div class="spotlight next" style="
                --spotlight-radius: 0;
                --spotlight-opacity: 0.2;
                --spotlight-width: 22%;
                --spotlight-height: 26px;
                --spotlight-top: -187px;
                --spotlight-left: -27%;
        "></div>
    </section>


    <section class="slide clear">
        <img src="./images/load-css-fast-google.jpg" alt="" class="cover">
        <div class="spotlight next" style="
                --spotlight-radius: 0;
                --spotlight-opacity: 0.2;
                --spotlight-width: 22%;
                --spotlight-height: 26px;
                --spotlight-top: -189px;
                --spotlight-left: -27%;
        "></div>
    </section>


    <section class="slide black">
        <img src="./images/talks-js-addy-osmani.jpg" alt="" width="400">
        <img src="./images/talks-js-steve-souders.jpg" alt="" width="400" class="next">
        <img src="./images/talks-js-filip-rakowski.jpg" alt="" width="400" class="next">
        <img src="./images/talks-js-netflix.jpg" alt="" width="400" class="next">
    </section>


    <section class="slide">
        <img src="./images/talks-css-harry-roberts.jpg" alt="" class="cover">
        <a href="https://www.youtube.com/watch?v=2Rn8an74khk" class="copyright white">Harry Roberts: FaCSSt—CSS and
            Performance</a>
    </section>


    <section class="slide">
        <img src="./images/talks-css-roman-dvornov.jpg" alt="" class="cover">
        <a href="https://www.youtube.com/watch?v=5XUuWVq-djs" class="copyright">Парсим CSS: performance tips &
            tricks</a>
    </section>


    <section class="slide">
        <h2 class="shout">CSS 🤷‍♂️</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Я вижу<br>HTML</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Я вижу<br>CSS</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Я не вижу<br>JavaScript</h2>
    </section>


    <section class="slide">
        <img src="./images/js-error.jpg" alt="" class="place" width="800">
    </section>


    <section class="slide clear">
        <img src="./images/netflix-css-broken.jpg" alt="" class="cover width">
    </section>


    <section class="slide">
        <blockquote style="font-size: 1.5em;">38% пользователей прекратят пользоваться сайтом, если контент или разметка
            не привлекательны.</blockquote>
        <blockquote style="font-size: 1.5em; margin-top: 1em;" class="next">88% онлайн-потребителей скорее всего
            не вернутся на сайт после плохого впечатления.</blockquote>
        <a href="https://www.sweor.com/firstimpressions" class="copyright">27 Eye-Opening Website Statistics: Is Your
            Website Costing You Clients?</a>
    </section>


    <section class="slide">
        <img src="./images/stayhome.png" alt="" class="place" width="400">
    </section>


    <section class="slide clear">
        <img src="./images/traffic-more-30.jpg" alt="" class="cover width place top">
        <a href="https://thebell.io/iz-za-rezhima-samoizolyatsii-internet-trafik-vyros-na-10-30/"
            class="copyright">Из-за режима самоизоляции интернет-трафик вырос на 10–30%</a>
    </section>


    <section class="slide">
        <h2 style="line-height: 1; font-size: 3em">0,1с<br>
            <span class="next"><span style="color: #aaa; line-height: 0.5;">×</span><br>200.000.000</span><br>
            <span class="next"><span style="color: #aaa; line-height: 0.5;">=</span><br>232 дня</span></h2>
    </section>


    <section class="slide">
        <h2 class="shout" style="font-size: 5em;">🕵🏻‍♂️</h2>
    </section>


    <section class="slide title">
        <h2 class="shout">Замеряйте! 📐</h2>
    </section>


    <section class="slide">
        <img src="./images/talks-andrey-prokopyuk.jpg" alt="" class="cover height">
        <a href="https://habr.com/ru/company/jugru/blog/426571/" class="copyright white">Системный подход к скорости:
            онлайн-измерения на фронтенде</a>
    </section>


    <section class="slide">
        <h2>Инструменты</h2>
        <ul>
            <li class="next"><a href="https://www.webpagetest.org/">WebPageTest</a></li>
            <li class="next">Lighthouse</li>
            <li class="next">DevTools → Performance</li>
        </ul>
    </section>


    <section class="slide">
        <img src="./images/perf-tab-throttling.jpg" alt="" class="cover">
        <div class="spotlight" style="
            --spotlight-radius: 0;
            --spotlight-opacity: 0.2;
            --spotlight-width: 19%;
            --spotlight-height: 76px;
            --spotlight-top: -130px;
            --spotlight-left: 14%;
        "></div>
    </section>


    <section class="slide">
        <h2 class="shout">RUM</h2>
        <a href="https://levelup.gitconnected.com/improve-your-websites-performance-with-real-user-monitoring-e84948f71313"
            class="copyright">Improve your Website’s Performance with Real User Monitoring</a>
    </section>


    <section class="slide">
        <h2 class="shout">R<span style="color:#aaa">eal</span> U<span style="color:#aaa">ser</span> M<span
                style="color:#aaa">onitoring</span></h2>
        <a href="https://levelup.gitconnected.com/improve-your-websites-performance-with-real-user-monitoring-e84948f71313"
            class="copyright">Improve your Website’s Performance with Real User Monitoring</a>
    </section>


    <section class="slide">
        <h2 class="shout" style="font-size: 5em;">🤖 vs 🙋‍♂️</h2>
    </section>


    <section class="slide">
        <h2><b>F</b>CP</h2>
        <img src="./images/fcp-filmstrip.jpg" alt="" height="320">
        <a href="https://web.dev/fcp/" class="copyright">First Contentful Paint (FCP)</a>
    </section>


    <section class="slide">
        <h2><b>L</b>CP</h2>
        <img src="./images/lcp-cnn-filmstrip.jpg" alt="" height="320">
        <a href="https://web.dev/lcp/" class="copyright">Largest Contentful Paint (LCP)</a>
    </section>


    <section class="slide title">
        <h2 class="shout">Загрузка CSS</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Critical Rendering Path</h2>
        <a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path"
            class="copyright">Critical Rendering Path</a>
    </section>


    <section class="slide">
        <pre><code class="next">&lt;!DOCTYPE html&gt;</code>
<code class="next">&lt;html lang=&quot;ru&quot;&gt;</code>
<code class="next">&lt;head&gt;</code>
<code class="next">    &lt;meta charset=&quot;UTF-8&quot;&gt;</code>
<code class="next">    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</code>
<code class="next">    &lt;title&gt;CSS — язык программирования&lt;/title&gt;</code>
<code class="next">    <mark>&lt;link rel=&quot;stylesheet&quot; href=&quot;/main.ac74gsac.css&quot;&gt;</mark></code></pre>
    </section>


    <section class="slide clear">
        <img src="./images/dicaprio-wat.jpg" alt="" class="cover height">
    </section>


    <section class="slide clear">
        <img src="./images/loading_icon.gif" alt="" class="place">
    </section>


    <section class="slide">
        <pre><code>&lt;!DOCTYPE html&gt;</code>
<code>&lt;html lang=&quot;ru&quot;&gt;</code>
<code>&lt;head&gt;</code>
<code>    &lt;meta charset=&quot;UTF-8&quot;&gt;</code>
<code>    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</code>
<code>    &lt;title&gt;CSS — язык программирования&lt;/title&gt;</code>
<code>    <mark>&lt;link rel=&quot;stylesheet&quot; href=&quot;/main.ac74gsac.css&quot;&gt;</mark></code>
<code class="next">&lt;/head&gt;</code>
<code class="next">&lt;body&gt;</code>
<code class="next">    &lt;h1&gt;Правда-правда!&lt;/h1&gt;</code>
<code class="next">&lt;/body&gt;</code>
<code class="next">&lt;/html&gt;</code></pre>
    </section>


    <section class="slide clear">
        <img src="./images/dicaprio-we-need-to-go-deeper.jpg" alt="" class="cover">
    </section>


    <section class="slide title">
        <h2 class="shout">&lt;link&gt;</h2>
    </section>


    <section class="slide">
        <pre
            class="place"><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://awesome.cdn/style.css&quot;&gt;</code></pre>
    </section>


    <section class="slide">
        <h2 class="shout">1. Куда идти?</h2>
    </section>


    <section class="slide">
        <pre style="font-size: 2em;" class="place"><code>https://<mark>awesome.cdn</mark>/style.css</code></pre>
    </section>


    <section class="slide" style="background-color: #f2f2f2;">
        <img src="./images/dns-lookup.jpg" alt="" class="cover">
        <a href="https://www.cloudflare.com/learning/dns/what-is-dns/" class="copyright">What Is DNS? | How DNS
            Works</a>
    </section>


    <section class="slide">
        <h2 class="shout">
            awesome.cdn<br>
            <span style="color: var(--yandex-yellow)">⬇</span><br>
            222.111.3.4
        </h2>
    </section>


    <section class="slide">
        <h2>Как ускориться?</h2>
        <ul>
            <li class="next">Пересадить пользователя ближе к DNS-серверам 🤔</li>
            <li class="next">Сразу указывать в ссылке IP-адрес 😱</li>
            <li class="next">Избавиться от получения IP-адреса ✅</li>
        </ul>
    </section>


    <section class="slide">
        <h2 class="shout">
            static.mysite.zz<br>
            <span style="color: var(--yandex-yellow)">⬇</span><br>
            mysite.zz/static
        </h2>
        <a href="https://twitter.com/jsunderhood/status/1243447428918976512"
            class="copyright">https://twitter.com/jsunderhood/status/1243447428918976512</a>
    </section>


    <section class="slide">
        <pre
            class="place"><code>&lt;link rel=&quot;dns-prefetch&quot; href=&quot;https://awesome.cdn&quot;&gt;</code></pre>
        <a href="https://3perf.com/blog/link-rels/" class="copyright">Preload, prefetch and other &lt;link&gt; tags</a>
    </section>


    <section class="slide">
        <h2 class="shout">2. Как идти?</h2>
    </section>


    <section class="slide">
        <pre style="font-size: 2em;" class="place"><code><mark>https</mark>://awesome.cdn/style.css</code></pre>
    </section>


    <section class="slide">
        <img src="./images/how-https-works.jpg" alt="" class="cover">
        <a href="https://howhttps.works/" class="copyright">How HTTPS works</a>
    </section>


    <section class="slide">
        <img src="./images/https-sequence-diagram.png" alt="" class="cover" height="90%">
    </section>


    <section class="slide">
        <h2>HTTPS</h2>
        <ol>
            <li>Получить SSL-сертификат с сервера</li>
            <li>Проверить сертификат в Центре сертификации</li>
            <li>Сгенерировать ключи для общения</li>
            <li>Зашифровать запрос приватным ключом</li>
            <li>Расшифровать ответ приватным ключом</li>
        </ol>
    </section>


    <section class="slide">
        <h2>Как ускориться?</h2>
        <ul>
            <li class="next">Пересадить пользователя ближе к серверам 🤔</li>
            <li class="next">Отказаться от HTTPS (на самом деле нет) ❌</li>
            <li class="next">OCSP Stapling ✅</li>
        </ul>
    </section>


    <section class="slide">
        <h2>HTTPS</h2>
        <ol>
            <li>Получить SSL-сертификат с сервера</li>
            <li><mark>Проверить сертификат без Центра сертификации</mark></li>
            <li>Сгенерировать ключи для общения</li>
            <li>Зашифровать запрос приватным ключом</li>
            <li>Расшифровать ответ приватным ключом</li>
        </ol>
    </section>


    <section class="slide">
        <h2 class="shout">Не работает в Chrome ☹️</h2>
    </section>


    <section class="slide">
        <h2>Как ускориться?</h2>
        <ul>
            <li>Пересадить пользователя ближе к серверам 🤔</li>
            <li>Отказаться от HTTPS (на самом деле нет) ❌</li>
            <li>OCSP Stapling ✅</li>
            <li>Перенести сервера ближе к пользователю ✅</li>
        </ul>
    </section>


    <section class="slide">
        <h2 class="shout">CDN 🕸</h2>
    </section>


    <section class="slide clear">
        <img src="./images/dicaprio-we-need-to-go-deeper.jpg" alt="" class="cover">
    </section>


    <section class="slide">
        <h2 class="shout">HTTPS = f(HTTP)</h2>
        <a href="https://www.httpvshttps.com/" class="copyright">httpvshttps.com</a>
    </section>


    <section class="slide clear">
        <img src="./images/dicaprio-we-need-to-go-deeper.jpg" alt="" class="cover">
    </section>


    <section class="slide">
        <h2 class="shout">HTTP = f(TCP/IP)</h2>
    </section>


    <section class="slide">
        <img src="./images/three-way-handshake.svg" alt="" class="cover" height="60%">
        <a href="https://hpbn.co/building-blocks-of-tcp/#slow-start" class="copyright">Building Blocks of TCP</a>
    </section>


    <section class="slide">
        <img src="./images/nohandshake.jpg" alt="" class="cover">
    </section>


    <section class="slide">
        <h2 class="shout">TCP Fast Open</h2>
        <a href="https://tools.ietf.org/html/rfc7413" class="copyright">tools.ietf.org/html/rfc7413</a>
    </section>


    <section class="slide">
        <h2 class="shout">3. Что забирать?</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Сервер<br><span style="color: var(--yandex-yellow)">⬇</span><br>Клиент</h2>
    </section>


    <section class="slide">
        <h2 class="shout">User-Agent</h2>
    </section>


    <section class="slide">
        <code class="place"
            style="width: 900px;text-align:center"><mark>User-Agent:</mark> 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</code>
    </section>


    <section class="slide">
        <pre><code>.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);
}</code></pre>
    </section>


    <section class="slide">
        <pre><code>.example {
    <span style="opacity: 0.15;">display: -ms-grid;</span>
    display: grid;
    <span style="opacity: 0.15;">-webkit-transition: all .5s;</span>
    <span style="opacity: 0.15;">-o-transition: all .5s;</span>
    transition: all .5s;
    <span style="opacity: 0.15;">-webkit-user-select: none;</span>
       -moz-user-select: none;
    <span style="opacity: 0.15;">    -ms-user-select: none;</span>
    <span style="opacity: 0.15;">        user-select: none;</span>
    <span style="opacity: 0.15;">background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));</span>
    <span style="opacity: 0.15;">background: -o-linear-gradient(top, white, black);</span>
    background: linear-gradient(to bottom, white, black);
}</code></pre>
    </section>

    <section class="slide">
        <img src="./images/meet-granny.jpg" alt="" class="cover">
        <a href="https://www.youtube.com/watch?v=_muWJOUe420" class="copyright">Встречайте бабушку, Виталий Харисов</a>
    </section>


    <section class="slide">
        <img src="./images/james-slide-about-api.jpg" alt="" class="cover" height="70%">
    </section>


    <section class="slide">
        <img src="./images/james-akwuh-ssr.jpg" alt="" class="cover">
        <a href="https://www.youtube.com/watch?v=O_IEzdYi634" class="copyright">SSR: DIY, Джеймс Аквух</a>
    </section>


    <section class="slide">
        <video loop muted playsinline controls src="./images/screencast-yandex-prerender.mp4" class="cover"></video>
    </section>


    <section class="slide">
        <h2 class="shout">HTTP/2 Server Push</h2>
    </section>


    <section class="slide">
        <img src="./images/server-push-response.svg" alt="" class="cover" height="40%">
        <a href="https://www.smashingmagazine.com/2017/04/guide-http2-server-push/" class="copyright">A Comprehensive
            Guide To HTTP/2 Server Push</a>
    </section>


    <section class="slide">
        <pre class="place"
            style="font-size: 1.2em"><code>Link: &lt;/css /styles.css&gt;; rel=preload; as=style</code></pre>
    </section>


    <section class="slide clear">
        <img src="./images/dicaprio-we-need-to-go-deeper.jpg" alt="" class="cover">
    </section>


    <section class="slide">
        <h2 class="shout">TCP</h2>
    </section>


    <section class="slide">
        <img src="./images/tcp-file-fetching.svg" alt="" class="cover">
        <a href="https://hpbn.co/building-blocks-of-tcp/#slow-start" class="copyright">Slow-Start</a>
    </section>


    <section class="slide">
        <h2 class="shout">Сегмент <span style="color: var(--yandex-red)">=</span> 1460 байт</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Первое окно <span style="color: var(--yandex-red)">=</span> 14600 байт</h2>
    </section>

    <section class="slide">
        <img src="./images/harisov-10k.jpg" alt="" class="cover">
        <a href="https://youtu.be/RoO0Fcyf0FE?t=2438" class="copyright">Виталий Харисов, 10k</a>
    </section>

    <section class="slide">
        <h2 class="shout">1459 байт <span style="color: var(--yandex-red)">=</span> 1 сегмент<br>
            <span class="next">1 байт <span style="color: var(--yandex-red)">=</span> 1 сегмент</span></h2>
    </section>


    <section class="slide clear">
        <img src="./images/dicaprio-sad.jpg" alt="" class="cover height">
    </section>


    <section class="slide title">
        <h2 class="shout">Отправляем меньше</h2>
    </section>

    <section class="slide">
        <h2>Минификация</h2>
        <ul>
            <li>CSSO</li>
            <li>CSSNano</li>
            <li>CSSMinifier</li>
            <li>руки и терпение 🤓</li>
            <li>и т.д.</li>
        </ul>
    </section>

    <section class="slide">
        <h2>Сжатие</h2>
        <ul>
            <li>gzip</li>
            <li>brotli</li>
            <li>gzip + zopfli</li>
        </ul>
    </section>


    <section class="slide">
        <pre><code>159515 bootstrap.min.css
 22783 index.html
 23699 bootstrap.min.css.gz
  6524 index.html.gz
------------
 <mark>30223</mark> total gzipped


182145 index-css-inline.html
 <mark>30380</mark> index-css-inline.html.gz</code></pre>
    </section>


    <section class="slide">
        <h2 class="shout">Оптимизация</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Убрать неиспользуемое ✂️</h2>
    </section>


    <section class="slide">
        <img src="./images/chrome-coverage-tool.jpg" alt="" class="cover">
        <a href="https://developers.google.com/web/tools/chrome-devtools/coverage" class="copyright">Find Unused
            JavaScript And CSS Code With The Coverage Tab In Chrome DevTools</a>
    </section>

    <section class="slide black">
        <img src="./images/how-to-remove-unused-css-csstricks.jpg" alt="" class="cover">
        <a href="https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/" class="copyright white">How Do You
            Remove Unused CSS From a Site?</a>
    </section>

    <section class="slide">
        <img src="./images/css-code-coverage-rit.jpg" alt="" class="cover">
        <a href="https://www.youtube.com/watch?v=xc_dinZ4Gfc" class="copyright white">CSS code coverage: идентификация
            неиспользуемого CSS кода / Антон Холкин (Booking.com)</a>
    </section>

    <section class="slide">
        <img src="./images/puppeteer-logo.png" alt="" class="cover">
    </section>

    <section class="slide">
        <img src="./images/github-gist-unused-css-selectors.jpg" alt="" class="cover place top">
        <a href="https://gist.github.com/victor-homyakov/aefd2ed05a050b1068c667d829a17419"
            class="copyright">victor-homyakov/detect-unused-css-selectors.js</a>
    </section>


    <section class="slide">
        <img src="./images/firefox-unused-code.jpg" alt="" class="cover">
    </section>


    <section class="slide">
        <h2 class="shout">Вам нужен весь<br>Bootstrap?</h2>
    </section>

    <section class="slide">
        <h2 class="shout">Не отдавать неиспользуемое ⚙️</h2>
    </section>

    <section class="slide">
        <img src="./images/bem-logo.png" alt="" class="place" style="height: 50%">
        <a href="https://ru.bem.info/" class="copyright">БЭМ</a>
    </section>

    <section class="slide">
        <img src="./images/use-bem-from-google.jpg" alt="" class="cover">
        <div class="spotlight" style="
            --spotlight-radius: 0;
            --spotlight-opacity: 0.2;
            --spotlight-width: 30%;
            --spotlight-height: 56px;
            --spotlight-top: -200px;
            --spotlight-left: -8%;
        "></div>
        <a href="https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations"
            class="copyright">Reduce the Scope and Complexity of Style Calculations</a>
    </section>

    <section class="slide">
        <h2 class="shout">CSS-in-JS</h2>
    </section>

    <section class="slide">
        <h2>Секрет успеха</h2>
        <ul>
            <li>Самостоятельные компоненты 💪</li>
            <li>Аккуратная сборка 🧩</li>
        </ul>
    </section>


    <section class="slide">
        <pre><code>&lt;div class=&quot;block&quot;&gt;&lt;/div&gt;

&lt;style&gt;
    .block {
        display: block;
    }
&lt;/style&gt;</code></pre>
    </section>


    <section class="slide">
        <h2>Убрать значения по умолчанию</h2>
        <ul>
            <li>меньше стилей 👍</li>
        </ul>
        <ul class="next">
            <li>CSS знает про HTML 👎</li>
            <li>тяжело поддерживать 👎</li>
        </ul>
    </section>


    <section class="slide">
        <h2 class="shout">currentColor</h2>
    </section>


    <section class="slide">
        <pre><code>.wrapper {
    color: #0077FF;
    border-color: #0077FF;
}

.wrapper:hover {
    color: #11EE66;
    border-color: #11EE66;
}</code></pre>
    </section>


    <section class="slide">
        <pre><code>.wrapper {
    color: #0077FF;
    border-color: <mark>currentColor</mark>;
}

.wrapper:hover {
    color: #11EE66;
}</code></pre>
    </section>

    <section class="slide">
        <h2 class="shout">base64 ⚠️</h2>
    </section>


    <section class="slide">
        <h2>Использование base64</h2>
        <ul>
            <li>парсинг стилей на 🖥 — в 10 раз медленней</li>
            <li>парсинг стилей на 📱 — в 32 раза медленней</li>
            <li>первая отрисовка на 🖥 — в 2,25 раза позже</li>
            <li>первая отрисовка на 📱 — в 10,27 раз позже</li>
        </ul>
        <a href="https://csswizardry.com/2017/02/base64-encoding-and-performance/" class="copyright">Base64 Encoding &
            Performance, Part 1: What’s Up with Base64?</a>
    </section>


    <section class="slide">
        <h2 class="shout">SVG <span style="color: var(--yandex-red)">+</span> base64 <span
                style="color: var(--yandex-red)">=</span> ❌</h2>
    </section>


    <section class="slide">
        <h2 class="shout">SVG <span style="color: var(--yandex-yellow)">+</span> URL-encoder <span
                style="color: var(--yandex-yellow)">=</span> 💛</h2>
    </section>

    <section class="slide">
        <img src="./images/svg-url-encoder.jpg" alt="" class="cover">
        <a href="https://yoksel.github.io/url-encoder/ru/" class="copyright">URL-encoder для SVG</a>
    </section>

    <section class="slide">
        <h2 class="shout">CSS Grid</h2>
    </section>


    <section class="slide">
        <pre><code>.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}</code></pre>

        <p class="next">Слабо повторить в 5 строчек на float? 🙃</p>
        <a href="https://css-tricks.com/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs/"
            class="copyright">4 CSS Grid Properties (and One Value) for Most of Your Layout Needs</a>
    </section>

    <section class="slide">
        <h2 class="shout">Atomic CSS 🤭</h2>
    </section>


    <section class="slide">
        <pre>
            <code>&lt;div class=&quot;Row Bgc(#0280ae) C(#fff)&quot;&gt;
    &lt;div class=&quot;Fl(start) W(300px) Ta(c) P(10px)&quot;&gt;
        Box-1
    &lt;/div&gt;
    &lt;div class=&quot;Fl(end) W(300px) Ta(c) P(10px)&quot;&gt;
        Box-2
    &lt;/div&gt;
&lt;/div&gt;</code>
        </pre>
        <a href="https://acss.io/" class="copyright">Atomic CSS</a>
    </section>


    <section class="slide">
        <h2 class="shout">Tailwind CSS</h2>
        <a href="https://tailwindcss.com/" class="copyright">tailwindcss.com</a>
    </section>


    <section class="slide">
        <pre><code>&lt;div class=&quot;md:flex bg-white rounded-lg p-6&quot;&gt;
    &lt;img class=&quot;h-16 w-16 rounded-full&quot; src=&quot;avatar.jpg&quot;&gt;
    &lt;div class=&quot;text-center md:text-left&quot;&gt;
    &lt;h2 class=&quot;text-lg&quot;&gt;Erin Lindford&lt;/h2&gt;
    &lt;div class=&quot;text-purple-500&quot;&gt;Customer Support&lt;/div&gt;
    &lt;div class=&quot;text-gray-600&quot;&gt;erinlindford@example.com&lt;/div&gt;
    &lt;div class=&quot;text-gray-600&quot;&gt;(555) 765-4321&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
        <a href="https://tailwindcss.com/" class="copyright">tailwindcss.com</a>
    </section>


    <section class="slide">
        <div class="place" style="font-size: 1.5em;">
            <pre><code>.block { }
.name { }</code></pre>
            <p style="color: var(--yandex-yellow); text-align: center;">⬇</p>
            <pre><code>.a { }
.b { }</code></pre>
        </div>
        <a href="https://dev.to/denisx/reduce-bundle-size-via-one-letter-css-classname-hash-strategy-10g6"
            class="copyright">Reduce bundle size via one-letter css classname hash strategy</a>
    </section>


    <section class="slide">
        <h2 class="shout">Замеряйте! 📐</h2>
    </section>


    <section class="slide title">
        <h2 class="shout">Скачали! 🥳</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Что всё это время видел пользователь?</h2>
    </section>


    <section class="slide clear">
    </section>


    <section class="slide">
        <svg class="render-block cover">
            <use xlink:href="#nd-render-picture">
        </svg>
    </section>


    <section class="slide clear">
        <img src="./images/dicaprio-lived.jpg" alt="" class="cover">
    </section>


    <section class="slide">
        <svg class="render-block cover" style="--nd-render-parse-color: var(--color-active);">
            <use xlink:href="#nd-render-picture">
        </svg>
    </section>


    <section class="slide">
        <pre><code>@import "blocks/header.css";</code></pre>
    </section>


    <section class="slide clear">
        <img src="./images/dicaprio-wat.jpg" alt="" class="cover height">
    </section>


    <section class="slide clear">
        <img src="./images/loading_icon.gif" alt="" class="place">
    </section>


    <section class="slide">
        <h2 class="shout">Preload Scanner</h2>
        <a href="https://csswizardry.com/2018/11/css-and-network-performance/" class="copyright">CSS and Network
            Performance</a>
    </section>


    <section class="slide">
        <img src="./images/preload-scanner-import-after.png" alt="" class="cover">
    </section>


    <section class="slide">
        <img src="./images/preload-scanner-import-before.png" alt="" class="cover">
    </section>


    <section class="slide">
        <h2 class="shout">@import ❌</h2>
    </section>


    <section class="slide">
        <svg class="render-block cover"
            style="--nd-render-parse-color: var(--color-checked);--nd-render-dom-color: var(--color-active);--nd-render-cascade-color: var(--color-active);">
            <use xlink:href="#nd-render-picture">
        </svg>
    </section>


    <section class="slide">
        <img src="./images/cssom-tree.png" alt="" class="cover">
        <a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model"
            class="copyright">Constructing the Object Model</a>
    </section>


    <section class="slide">
        <pre class="place"><code>body > div.card > p.text > span.icon ~ * + * {
    color: red !important;
}</code></pre>
    </section>


    <section class="slide">
        <pre class="place"><code>.card_type_warning {
    color: red;
}</code></pre>
    </section>


    <section class="slide">
        <pre class="place"><code>* + * + * + * {
    /* WHY??? */
}</code></pre>
        <a href="https://csswizardry.com/2011/09/writing-efficient-css-selectors/" class="copyright">Writing efficient
            CSS selectors</a>
    </section>


    <section class="slide clear">
        <img src="./images/tiny-meme.jpeg" alt="" class="cover">
    </section>


    <section class="slide">
        <pre><code>background: url(img.jpg) 20px 20px / 20px 20px no-repeat;
</code></pre>
        <p style="color: var(--yandex-yellow); text-align: center;">⬇</p>
        <pre class="next"><code>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;</code></pre>
        <a href="https://alistapart.com/article/braces-to-pixels/" class="copyright">Braces to Pixels</a>
    </section>


    <section class="slide">
        <h2 class="shout">Размер ⚖️ Скорость</h2>
    </section>


    <section class="slide">
        <h2 class="shout">JS заблокирован</h2>
        <a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript"
            class="copyright">Adding Interactivity with JavaScript</a>
    </section>


    <section class="slide">
        <svg class="render-block cover" style="
            --nd-render-parse-color: var(--color-checked);
            --nd-render-dom-color: var(--color-checked);
            --nd-render-cascade-color: var(--color-checked);
            --nd-render-layout-color: var(--color-active);
            --nd-render-paint-color: var(--color-inactive);
            --nd-render-composite-color: var(--color-inactive);
        ">
            <use xlink:href="#nd-render-picture">
        </svg>
    </section>


    <section class="slide clear">
        <img src="./images/top-differs-from-bottom.jpg" alt="" class="cover width place top">
    </section>


    <section class="slide clear black">
        <img src="./images/top-differs-from-bottom.jpg" alt="" class="cover">
    </section>


    <section class="slide">
        <h2 class="shout">Critical CSS ⚡️</h2>
        <a href="https://web.dev/extract-critical-css/" class="copyright">Extract critical CSS</a>
    </section>


    <section class="slide">
        <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;
    .critical {
        /* ... */
    }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    ...
    &lt;link rel=&quot;stylesheet&quot; href=&quot;after.css&quot;&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="spotlight next" style="
            --spotlight-radius: 0;
            --spotlight-opacity: 0.2;
            --spotlight-width: 35%;
            --spotlight-height: 222px;
            --spotlight-top: -41px;
            --spotlight-left: -25%;
        "></div>
    </section>


    <section class="slide">
        <h2>Инструменты</h2>
        <ul>
            <li><a href="https://github.com/addyosmani/critical">addyosmani / critical</a></li>
            <li><a href="https://github.com/pocketjoso/penthouse">pocketjoso / penthouse</a></li>
            <li><a href="https://github.com/anthonygore/html-critical-webpack-plugin">anthonygore / html-critical-webpack-plugin</a></li>
            <li><a href="https://github.com/GoogleChromeLabs/critters">GoogleChromeLabs / critters</a></li>
        </ul>
    </section>


    <section class="slide">
        <h2>filamentgroup / loadCSS</h2>
        <pre><code>&lt;link <mark>rel=&quot;preload&quot;</mark>
    href=&quot;path/to/mystylesheet.css&quot;
    as=&quot;style&quot;
    <mark>onload</mark>=&quot;this.onload=null;this.rel=&#39;stylesheet&#39;&quot;&gt;
&lt;noscript&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;path/to/mystylesheet.css&quot;&gt;
&lt;/noscript&gt;</code></pre>
        <a href="https://github.com/filamentgroup/loadCSS" class="copyright">filamentgroup / loadCSS</a>
    </section>

    <section class="slide">
        <pre class="place"><code>&lt;link rel=&quot;stylesheet&quot;
      href=&quot;style.css&quot;
      media=&quot;(min-width: 1000px)&quot;&gt;</code></pre>
    </section>

    <section class="slide">
        <pre><code>&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- HTTP/2 push this resource, or inline it --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/site-header.css&quot;&gt;
    &lt;header&gt;…&lt;/header&gt;

    &lt;link rel=&quot;stylesheet&quot; href=&quot;/article.css&quot;&gt;
    &lt;main&gt;…&lt;/main&gt;

    &lt;link rel=&quot;stylesheet&quot; href=&quot;/comment.css&quot;&gt;
    &lt;section class=&quot;comments&quot;&gt;…&lt;/section&gt;
&lt;/body&gt;</code></pre>
        <div class="spotlight next" style="
            --spotlight-radius: 0;
            --spotlight-opacity: 0.2;
            --spotlight-width: 65%;
            --spotlight-height: 92px;
            --spotlight-top: 34px;
            --spotlight-left: -5%;
        "></div>
        <a href="https://jakearchibald.com/2016/link-in-body/" class="copyright">The future of loading CSS</a>
    </section>


    <section class="slide">
        <h2 class="shout">Ленивая загрузка 😴</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Intersection Observer</h2>
    </section>


    <section class="slide">
        <svg class="render-block cover" style="
            --nd-render-parse-color: var(--color-checked);
            --nd-render-dom-color: var(--color-checked);
            --nd-render-cascade-color: var(--color-checked);
            --nd-render-layout-color: var(--color-checked);
            --nd-render-paint-color: var(--color-active);
            --nd-render-composite-color: var(--color-active);
        ">
            <use xlink:href="#nd-render-picture">
        </svg>
    </section>


    <section class="slide">
        <pre style="font-size: 0.7em"><code>#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)                                                 \
...</code></pre>
        <a href="https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/platform/graphics/compositing_reasons.h;l=18?q=CompositingReason&ss=chromium&originalUrl=https:%2F%2Fcs.chromium.org%2Fchromium%2Fsrc%2Fthird_party%2Fblink%2Frenderer%2Fplatform%2Fgraphics%2Fcompositing_reasons.h" class="copyright">compositing_reasons.h</a>
    </section>


    <section class="slide">
        <h2 class="shout">Меньше слоёв</h2>
    </section>


    <section class="slide clear">
        <img src="./images/dicaprio-success.jpg" alt="" class="cover">
    </section>


    <section class="slide title">
        <h2 class="shout">А если вернусь? 👋🏻</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Мгновенно 🤔</h2>
    </section>


    <section class="slide">
        <pre class="place" style="font-size: 1.5em"><code>Cache-Control: public, max-age=31536000</code></pre>
        <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching" class="copyright">HTTP Caching</a>
    </section>


    <section class="slide">
        <h2 class="shout">Инвалидация кэша 😅</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Служебные работяги!</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Service Workers</h2>
    </section>


    <section class="slide">
        <img src="./images/service-workers-kirill.jpg" alt="" class="cover">
        <a href="https://www.youtube.com/watch?v=E5x9v3LFO5Q" class="copyright">Про сервис-воркеры. Снова! Кирилл Чугаинов</a>
    </section>


    <section class="slide">
        <h2 class="shout">⚠️ Браузер ничего не обещает ⚠️</h2>
    </section>

    <section class="slide">
        <h2 class="shout">Local Storage?</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Медленный 🐌</h2>
    </section>


    <section class="slide">
        <h2 class="shout">IndexedDB?</h2>
    </section>

    <section class="slide">
        <h2 class="shout">Замеряйте! 📐</h2>
    </section>


    <section class="slide">
        <h2 class="shout">Спросить заранее!</h2>
    </section>


    <section class="slide">
        <pre><code>&lt;link rel=&quot;prefetch&quot; href=&quot;/style.css&quot; as=&quot;style&quot; /&gt;
&lt;link rel=&quot;preload&quot; href=&quot;/style.css&quot; as=&quot;style&quot; /&gt;

&lt;link rel=&quot;preconnect&quot; href=&quot;https://example.com&quot; /&gt;
&lt;link rel=&quot;dns-prefetch&quot; href=&quot;https://example.com&quot; /&gt;

&lt;link rel=&quot;prerender&quot; href=&quot;https://example.com/about.html&quot; /&gt;</code></pre>
        <a href="https://habr.com/ru/post/445264/" class="copyright">Preload, prefetch и другие теги</a>
    </section>


    <section class="slide">
        <img src="./images/caniuse_prerender.jpg" alt="" class="cover">
    </section>


    <section class="slide black">
        <video src="./images/yandex-android-prerender.mp4" loop autoplay muted playsinline class="cover height"></video>
        <a href="https://habr.com/ru/company/yandex/blog/455427/" class="copyright">Как мы научились предсказывать запрос пользователя и ускорили загрузку поисковой выдачи</a>
    </section>


    <section class="slide title">
        <h2 class="shout">Что дальше?</h2>
    </section>

    <section class="slide">
        <img src="./images/web-performance-101.png" alt="" class="cover">
        <a href="https://3perf.com/talks/web-perf-101/" class="copyright">Web Performance 101</a>
    </section>

    <section class="slide">
        <h2 class="shout">Прибирайтесь 🧽</h2>
    </section>


    <section class="slide clear" id="final">
        <h2>Спасибо за внимание!</h2>
        <a href="https://mefody.dev/talks/css-cost/">mefody.dev/talks/css-cost/</a>
        <br>
        <a href="https://twitter.com/dark_mefody">@dark_mefody</a>
        <br>
        <a href="mailto:mefody@yandex-team.ru">mefody@yandex-team.ru</a>
        <img src="./images/dicaprio-walking.png" alt="" class="place bottom right"
            style="width: 150px; bottom: 20px; right: 300px">
        <img src="./images/qr-code.gif" alt="" class="place bottom right" width="300">
    </section>


    <footer class="badge">
        <a href="https://github.com/shower/shower">Сделано в Shower</a>
    </footer>

    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol id="nd-render-picture" viewbox="0 0 800 100">
            <style>
                .nd-render-block {
                    fill-opacity: null;
                    stroke-opacity: null;
                    stroke: #000;
                }

                .nd-render-text {
                    stroke-width: 0;
                }

                .nd-render-path {
                    fill: #fff;
                    stroke-width: 2;
                }
            </style>
            <g class="nd-render-block">
                <path style="fill: var(--nd-render-parse-color)"
                    d="M47.8 13.9h107.2l35.8 35.8-35.8 35.8H47.8L83.6 49.8 47.8 13.9z" class="nd-render-path" />
                <text class="nd-render-text" x="100.1" y="55.6" font-size="17">Parser</text>
            </g>
            <g class="nd-render-block">
                <path style="fill: var(--nd-render-dom-color)"
                    d="M161.8 13.9h107.3l35.8 35.8-35.7 35.8H161.8l35.8-35.8-35.7-35.8z" class="nd-render-path" />
                <text class="nd-render-text" x="213" y="45.6" font-size="17">DOM &#x2F;</text>
                <text class="nd-render-text" x="204.1" y="66.6" font-size="17">CSSOM</text>
            </g>
            <g class="nd-render-block">
                <path style="fill: var(--nd-render-cascade-color)"
                    d="M274.9 13.9h107.2l35.8 35.8-35.8 35.8H274.9l35.8-35.8-35.7-35.8z" class="nd-render-path" />
                <text class="nd-render-text" x="319.3" y="55.6" font-size="17">Cascade</text>
            </g>
            <g class="nd-render-block">
                <path style="fill: var(--nd-render-layout-color)"
                    d="M387.9 13.9h107.2l35.8 35.8-35.8 35.8H387.9l35.8-35.8-35.7-35.8z" class="nd-render-path" />
                <text class="nd-render-text" x="440.3" y="55.6" font-size="17">Layout</text>
            </g>
            <g class="nd-render-block">
                <path style="fill: var(--nd-render-paint-color)"
                    d="M501 13.9H608.2l35.8 35.8-35.8 35.8H501l35.8-35.8-35.7-35.8z" class="nd-render-path" />
                <text class="nd-render-text" x="556.4" y="55.6" font-size="17">Paint</text>
            </g>
            <g class="nd-render-block">
                <path style="fill: var(--nd-render-composite-color)"
                    d="M614 13.9h107.2l35.8 35.8-35.8 35.8H614l35.8-35.8-35.7-35.8z" class="nd-render-path" />
                <text class="nd-render-text" x="656.4" y="55.6" font-size="17">Composite</text>
            </g>
        </symbol>
    </svg>


    <div class="progress"></div>

    <script src="../src/shower/shower.min.js"></script>
    <script src="../src/highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</body>

</html>