Update readme

Author: spajic

Readme.md

@@ -1,9 +1,11 @@
 # Задание №5
 
 ## Цели задания
+
 В этом задании немного попрактикуемся с `HTTP/2` в `Rails`.
 
 Польза:
+
 - научиться настраивать `HTTPS` для локального `Rails`-приложения
 - научиться настраивать `HTTP/2` `reverse proxy` с поддержкой `server-push`
 - научиться делать `server-push`, сравнить его с `inlining`
@@ -13,15 +15,18 @@
 Работать будем на примере проекта `dev.to` из задания №3.
 
 Ресурсы:
+
 - http://railscasts.com/episodes/357-adding-ssl?view=asciicast - старый, но очень понятный `RailsCast`
 - https://github.com/FiloSottile/mkcert - инструмент для настройки локальных сертификатов одной командой
 - https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/ - настройка `http2-server-push` в `NGinx`.
 - https://github.com/surma/http2-push-detect - утилита для проверки `server-push`
 
 ### Шаг 1. Настроить сертификат для локального HTTPS
+
 Можно сделать с использованием `mkcert`
 
 ### Шаг 2. Настраиваем NGinx как reverse-proxy
+
 Установить или обновить `NGinx`.
 
 Конфигурируем `NGinx` так, чтобы он принимал `https`-запросы `https://localhost` и ходил в `upstream` на `http://localhost:3000`.
@@ -51,6 +56,7 @@ server {
 На этом шаге браузер должен успешно открывать `https://localhost`
 
 ### Шаг 3. Настроить HTTP/2 и server-push
+
 Дополняем конфиг `NGinx` поддержкой `HTTP/2` и `server-push`
 
 ```
@@ -66,7 +72,9 @@ server {
 ```
 
 ### Шаг 4. Поэксперементировать с HTTP/2 server-push
+
 На главном экране в мобильном виде `dev.to` есть ряд картинок:
+
 - `connect.svg`
 - `bell.svg`
 - `menu.svg`
@@ -120,33 +128,66 @@ Receiving pushed resource: /assets/lightning.svg
 
 Теперь поэксперементируйте, попробуйте включать и выключать `server-push` для тех или иных картинок и оцените, как это сказывается на их рендеринге.
 
-### Шаг 5. Измерение эффективности сделанных изменений
+### Шаг 5. Измерение эффекта сделанных изменений
+
+Сравним вариант с `server-push` и с обычными картинками без инлайнинга и без пуша.
+
+Для этого воспользуемся `sitespeed.io` (подробнее расскажу об этом мощном инструменте в лекции №6)
+
+#### 5.1 Анализ без `server-push`
 
+Выполните анализ версии без `server-push` и без `inline`:
+
+```
+docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:9.8.1 --mobile -n 5 --preUrl https://host.docker.internal/ https://host.docker.internal/
+
+# --mobile - мобильный вид
+# -n 5 - 5 повторов
+# --preUrl https://host.docker.internal/ - урл, первого захода
+# https://host.docker.internal/ - урл повтороного захода, который и анализируем
+```
+
+Откройте сгенерированный отчёт, зайдите на вкладку `Pages`, там провалитесь в отчёт по единственной странице, и внизу воспользуйтесь кнопкой `DOWNLOAD HAR` - и сохраните `HAR`-файла, закомиттьте его.
+
+#### 5.2. Анализ с `server-push`
+
+Сделайте то же, что в пункте `5.1`, но с версией, где устанавливаются заголовки `server-push`. Сохраните `HAR`-файл, закомиттьте его.
+
+#### 5.3 Сравнение результатов
+
+Сравните два полученных `HAR`-файла с помощью https://compare.sitespeed.io/
+
+**Обязательно добавьте ссылку на сравнение в описание `PR`**
+
+Вы должны увидеть на `Waterfall`, что `server-push` картинки отправляются в самую первую очередь.
+
+На `filmstrip` и `video` также можно увидеть, что `server-push` картинки действительно появляются заметно раньше.
 
 ## Bonus 1. Аудит dev.to
+
 Теперь, когда у вас сформировалась интуиция по работе с `HTTP/2` и `server-push`, постройте и проанализируйте отчёт `WebPageTest` для сайте `dev.to`.
 
 Видите ли вы какие-то возможности использовать возможности `HTTP/2` для оптимизации `dev.to`, исходя из отчётов `WPT`?
 
 ## Bonus 2. Falcon HTTP/2
+
 Сервер `Falcon` https://github.com/socketry/falcon утверждает, что может сервить `Rails`-приложения и из коробки поддерживает `HTTP/2`.
 
 Попробуйте настроить работу `dev.to` с `server-push` для `Falcon`.
 
 Сделайте сравнительный бенчмарк `puma` и `falcon` на примере главной страницы `dev.to`.
 
 ## Как сдать задание
+
 Нужно сделать `PR` в этот репозиторий с вашими изменениями кода `dev.to` для использования `server-push`, конфигом `NGinx` и описанием.
 
 ### Чеклист для сдачи задания
 
-- [x] Скриншот `DevTools` с работающим `server-push`
-- [x] Файлы кода `dev.to`, которые вы изменили, чтобы сделать `server-push` картинок (комитьте итоговые версии файлов, затронутых изменениями)
+- [x] Реализация `server-push` для указанных в задании картинок
 - [x] Конфиг `NGinx`
-- [x] Описание со сравнением *восприятия* работы сайта с `inline`-картинками, обычными картинками и `server-pushed` картинками (попробовать разные варианты локально)
-- [x] Гипотезы о возможных оптимизациях `dev.to` по результатам анализа отчёта `WebPageTest` на их проде; подумайте в контексте интуиции работы с `server-push`, которую вы получили
-- [ ] Бонус про `Falcon`
-
+- [x] Ссылка на сравнение `HAR`-файлов с `server-push` и без
+- [ ] Бонус 1 про `dev.to`
+- [ ] Бонус 2 про `Falcon`
 
 <div align="center">
   <br>