Add slides

Author: MeFoDy

css-cost/index.html

@@ -50,7 +50,160 @@ <h2>Кто я?</h2>
 
 
     <section class="slide">
-        <h2></h2>
+        <h2>зачем про это говорить?</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>статистика запросов в поисковиках</h2>
+    </section>
+
+
+    <section class="slide">
+        <img src="./images/load-js-fast-yandex.jpg" alt="" class="cover">
+    </section>
+
+
+    <section class="slide">
+        <img src="./images/load-css-fast-yandex.jpg" alt="" class="cover">
+    </section>
+
+
+    <section class="slide">
+        <img src="./images/load-js-fast-google.jpg" alt="" class="cover">
+    </section>
+
+
+    <section class="slide">
+        <img src="./images/load-css-fast-google.jpg" alt="" class="cover">
+    </section>
+
+
+    <section class="slide">
+        <h2>топ-доклады про оптимизацию JS</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>может, проблема не острая?</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>пользователь видит HTML, CSS. JS он не видит</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>с плохим CSS пользователь JS даже не потрогает</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>первое впечателение важно — статистика</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>все сидят дома</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>netflix</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>youtube</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>мировая статистика — выросло на 30% потребление трафика</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>в Яндексе есть метрика по сэкономленному времени пользователя</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>главное правило: замеряйте!</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>у нас https://habr.com/ru/company/jugru/blog/426571/ </h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>lighthouse</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>https://www.webpagetest.org/</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>flash rerendering в браузере</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>вкладка Performance</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>замеры на плохих условиях — точнее</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>RUM (Real User Metrics)</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>боритесь не за роботов, а за людей</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>основаная метрика — первая отрисовка</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>разберёмся, как браузер загружает CSS</h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>Critical Rendering Path</h2>
+        https://developers.google.com/web/fundamentals/performance/critical-rendering-path
+    </section>
+
+
+    <section class="slide">
+        <h2>курс на udacity https://www.udacity.com/course/website-performance-optimization--ud884 </h2>
+    </section>
+
+
+    <section class="slide">
+        <h2>Поток</h2>
+        <ol>
+            <li>скачиваем HTML</li>
+            <li>натыкаемся а link</li>
+            <li>качаем стили и всё блокируем</li>
+            <li>отпускаем блокировку</li>
+            <li>натыкаемся на style и блокируем JS, парсинг и всё</li>
+        </ol>
     </section>