Презентация с вебинара образовательного центра Топ Экспертс. Докладчик: Алексей Данилин — Analytics Strategist, Netpeak

1. Алексей Данилин
Неочевидные возможности
ускорения работы сайта

2. О себе
Analytics Strategist в агентстве
интернет-маркетинга Netpeak и
сервисе Serpstat.
Принцип оказания услуг Netpeak
— интернет-маркетинг для
бизнеса, а цель — рост продаж у
клиентов.
C нами вы инвестируете в
будущее вашей компании,
добиваетесь окупаемости
бизнеса, увеличиваете ROI
(возврат вложенных средств) и
оборот.
a.danilin@netpeak.net

3. План доклада
1. Настройки сервера для ускорения работы сайта.
2. Протокол HTTP/2.
3. Использование тега link.
4. Оптимизация изображений.

4. Консоль браузера вместо 100500 плагинов

5. Настройки сервера. Сжатие

6. Настройки сервера. Сжатие
Что это дает:
● передаваемые по сети файлы становятся меньшего размера.
Где почитать:
https://developers.google.com/speed/docs/insights/EnableCompression
Чем проверить:
https://developers.google.com/speed/pagespeed/insights/
https://checkgzipcompression.com/
https://varvy.com/tools/gzip/

7. Настройки сервера. Кеширование
А еще есть Expires

8. Настройки сервера. Кеширование

9. Настройки сервера. Кеширование
Схема соответствия заголовков:
● Cache-Control (директивы, которые должны выполняться всеми
кеширующими механизмами в цепочке запрос-ответ)
● Expires (указание даты, после который ответ считается
устаревшим - имеет более низкий приоритет, чем max-age в
Cache-Control)
● If-Modified-Since - Last-Modified (изменился ли файл с
определенной даты)
● If-None-Match - ETag (аналог проверки контрольной суммы - имеет
приоритет над If-Modified-Since)

10. Настройки сервера. Кеширование

11. Настройки сервера. Кеширование
Что дает:
● клиент не загружает данные с сервера, а берет их из локального
хранилища;
● не расходуется краулинговый бюджет.
Где почитать:
https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
Как проверить:
http://www.visiospark.com/last-modified-time-checker/
https://www.hscripts.com/tools/if-modified-since/

12. Кеширующий прокси
Источник изображения

13. Кеширующий прокси
Примеры:
● CDN;
● Squid;
● Varnish.

14. Протокол HTTP/2

15. Протокол HTTP/2
Что дает:
● одно подключение (открыто, пока открыт сайт);
● множественные запросы по одному соединению (в HTTP/1.1
приходится ждать, пока другие запросы выполнятся);
● server push (нужные данные клиент может отправить серверу без
запроса);
● приоритеты запросов (более приоритетные выполняются в первую
очередь);
● пепередача данных в двоичном формате (не расходуется врея на
преобразование данных);
● сжатие заголовков (HPACK для решения проблемы объема
заголовков).

16. Протокол HTTP/2
Где почитать:
https://http2.github.io/faq/
Как проверить:
https://tools.keycdn.com/http2-test
https://http2.akamai.com/demo
http://www.http2demo.io/

17. Тег link
Источник изображения

18. Тег link
<link rel=’prerender’>
Создается невидимая
вкладка в браузере
Выполняется загрузка
страницы и отработка JS
Скрытая вкладка
закрывается
Скрытая вкладка
становится видимой
Таймаут
Переход
по ссылке

19. Тег link

20. Тег link
Что дает:
● получение информации еще до момента её запроса клиентом;
● мгновенная загрузка страниц в браузере.
Где почитать:
https://w3c.github.io/resource-hints/
https://css-tricks.com/prefetching-preloading-prebrowsing/
Как проверить:
CTRL+F в консоли браузера

21. Оптимизация изображений
Одна из любимых рекомендаций Page Speed

22. Оптимизация изображений. Сжатие без потерь
Источник изображения

23. Оптимизация изображений. Progressive JPEG
Источник изображения

24. Оптимизация изображений. Базовые рекомендации
● использование изображения в векторных форматах;
● минификация и сжатие SVG;
● выбор наиболее подходящих растровых форматов;
● настройка качества для растровых форматов;
● удаление ненужных метаданных;
● масштабирование изображений;
● автоматизация.

25. Оптимизация изображений
Что дает:
● изображения меньше весят.
Где почитать:
https://developers.google.com/speed/docs/insights/OptimizeImages
https://developers.google.com/web/fundamentals/performance/optimizing-c
ontent-efficiency/image-optimization?hl=ru
Как проверить:
https://developers.google.com/speed/pagespeed/insights/
https://shortpixel.com/image-compression-test
http://highloadtools.com/progressivejpeg
http://techslides.com/demos/progressive-test.html

26. Узнайте больше об интернет-маркетинге