![Page 1: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/1.jpg)
Алексей Данилин
Неочевидные возможности ускорения работы сайта
![Page 2: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/2.jpg)
О себе
Analytics Strategist в агентстве интернет-маркетинга Netpeak и сервисе Serpstat.
Принцип оказания услуг Netpeak — интернет-маркетинг для бизнеса, а цель — рост продаж у клиентов.
C нами вы инвестируете в будущее вашей компании, добиваетесь окупаемости бизнеса, увеличиваете ROI (возврат вложенных средств) и оборот.
![Page 3: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/3.jpg)
План доклада
1. Настройки сервера для ускорения работы сайта.2. Протокол HTTP/2.3. Использование тега link.4. Оптимизация изображений.
![Page 4: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/4.jpg)
Консоль браузера вместо 100500 плагинов
![Page 5: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/5.jpg)
Настройки сервера. Сжатие
![Page 6: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/6.jpg)
Настройки сервера. Сжатие
Что это дает:● передаваемые по сети файлы становятся меньшего размера.
Где почитать:https://developers.google.com/speed/docs/insights/EnableCompression
Чем проверить:https://developers.google.com/speed/pagespeed/insights/https://checkgzipcompression.com/https://varvy.com/tools/gzip/
![Page 7: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/7.jpg)
Настройки сервера. Кеширование
А еще есть Expires
![Page 8: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/8.jpg)
Настройки сервера. Кеширование
![Page 9: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/9.jpg)
Настройки сервера. Кеширование
Схема соответствия заголовков:● Cache-Control (директивы, которые должны выполняться всеми
кеширующими механизмами в цепочке запрос-ответ)● Expires (указание даты, после который ответ считается
устаревшим - имеет более низкий приоритет, чем max-age в Cache-Control)
● If-Modified-Since - Last-Modified (изменился ли файл с определенной даты)
● If-None-Match - ETag (аналог проверки контрольной суммы - имеет приоритет над If-Modified-Since)
![Page 10: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/10.jpg)
Настройки сервера. Кеширование
![Page 11: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/11.jpg)
Настройки сервера. Кеширование
Что дает:● клиент не загружает данные с сервера, а берет их из локального
хранилища;● не расходуется краулинговый бюджет.
Где почитать: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/
![Page 12: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/12.jpg)
Кеширующий прокси
Источник изображения
![Page 13: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/13.jpg)
Кеширующий прокси
Примеры:● CDN;● Squid;● Varnish.
![Page 14: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/14.jpg)
Протокол HTTP/2
![Page 15: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/15.jpg)
Протокол HTTP/2
Что дает:● одно подключение (открыто, пока открыт сайт);● множественные запросы по одному соединению (в HTTP/1.1
приходится ждать, пока другие запросы выполнятся);● server push (нужные данные клиент может отправить серверу без
запроса);● приоритеты запросов (более приоритетные выполняются в первую
очередь);● пепередача данных в двоичном формате (не расходуется врея на
преобразование данных);● сжатие заголовков (HPACK для решения проблемы объема
заголовков).
![Page 16: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/16.jpg)
Протокол HTTP/2
Где почитать:https://http2.github.io/faq/
Как проверить:https://tools.keycdn.com/http2-test https://http2.akamai.com/demohttp://www.http2demo.io/
![Page 17: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/17.jpg)
Тег link
Источник изображения
![Page 18: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/18.jpg)
Тег link
<link rel=’prerender’> Создается невидимая вкладка в браузере
Выполняется загрузка страницы и отработка JS
Скрытая вкладка закрывается
Скрытая вкладка становится видимой
Таймаут
Переход по ссылке
![Page 19: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/19.jpg)
Тег link
![Page 20: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/20.jpg)
Тег link
Что дает:● получение информации еще до момента её запроса клиентом;● мгновенная загрузка страниц в браузере.
Где почитать:https://w3c.github.io/resource-hints/ https://css-tricks.com/prefetching-preloading-prebrowsing/
Как проверить:CTRL+F в консоли браузера
![Page 21: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/21.jpg)
Оптимизация изображений
Одна из любимых рекомендаций Page Speed
![Page 22: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/22.jpg)
Оптимизация изображений. Сжатие без потерь
Источник изображения
![Page 23: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/23.jpg)
Оптимизация изображений. Progressive JPEG
Источник изображения
![Page 24: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/24.jpg)
Оптимизация изображений. Базовые рекомендации
● использование изображения в векторных форматах;● минификация и сжатие SVG; ● выбор наиболее подходящих растровых форматов;● настройка качества для растровых форматов;● удаление ненужных метаданных;● масштабирование изображений; ● автоматизация.
![Page 25: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/25.jpg)
Оптимизация изображений
Что дает:● изображения меньше весят.
Где почитать:https://developers.google.com/speed/docs/insights/OptimizeImages https://developers.google.com/web/fundamentals/performance/optimizing-content-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
![Page 26: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/26.jpg)
Узнайте больше об интернет-маркетинге
![Page 27: Неочевидные возможности ускорения работы сайта](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58e902a71a28abc7598b4f5d/html5/thumbnails/27.jpg)