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

Алексей Данилин

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

О себе

Analytics Strategist в агентстве интернет-маркетинга Netpeak и сервисе Serpstat.

Принцип оказания услуг Netpeak — интернет-маркетинг для бизнеса, а цель — рост продаж у клиентов.

C нами вы инвестируете в будущее вашей компании, добиваетесь окупаемости бизнеса, увеличиваете ROI (возврат вложенных средств) и оборот.

[email protected]

План доклада

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

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

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

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

Что это дает:● передаваемые по сети файлы становятся меньшего размера.

Где почитать:https://developers.google.com/speed/docs/insights/EnableCompression

Чем проверить:https://developers.google.com/speed/pagespeed/insights/https://checkgzipcompression.com/https://varvy.com/tools/gzip/

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

А еще есть Expires

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

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

Схема соответствия заголовков:● Cache-Control (директивы, которые должны выполняться всеми

кеширующими механизмами в цепочке запрос-ответ)● Expires (указание даты, после который ответ считается

устаревшим - имеет более низкий приоритет, чем max-age в Cache-Control)

● If-Modified-Since - Last-Modified (изменился ли файл с определенной даты)

● If-None-Match - ETag (аналог проверки контрольной суммы - имеет приоритет над If-Modified-Since)

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

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

Что дает:● клиент не загружает данные с сервера, а берет их из локального

хранилища;● не расходуется краулинговый бюджет.

Где почитать: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/

Кеширующий прокси

Источник изображения

Кеширующий прокси

Примеры:● CDN;● Squid;● Varnish.

Протокол HTTP/2

Протокол HTTP/2

Что дает:● одно подключение (открыто, пока открыт сайт);● множественные запросы по одному соединению (в HTTP/1.1

приходится ждать, пока другие запросы выполнятся);● server push (нужные данные клиент может отправить серверу без

запроса);● приоритеты запросов (более приоритетные выполняются в первую

очередь);● пепередача данных в двоичном формате (не расходуется врея на

преобразование данных);● сжатие заголовков (HPACK для решения проблемы объема

заголовков).

Протокол HTTP/2

Где почитать:https://http2.github.io/faq/

Как проверить:https://tools.keycdn.com/http2-test https://http2.akamai.com/demohttp://www.http2demo.io/

Тег link

Источник изображения

Тег link

<link rel=’prerender’> Создается невидимая вкладка в браузере

Выполняется загрузка страницы и отработка JS

Скрытая вкладка закрывается

Скрытая вкладка становится видимой

Таймаут

Переход по ссылке

Тег link

Тег link

Что дает:● получение информации еще до момента её запроса клиентом;● мгновенная загрузка страниц в браузере.

Где почитать:https://w3c.github.io/resource-hints/ https://css-tricks.com/prefetching-preloading-prebrowsing/

Как проверить:CTRL+F в консоли браузера

Оптимизация изображений

Одна из любимых рекомендаций Page Speed

Оптимизация изображений. Сжатие без потерь

Источник изображения

Оптимизация изображений. Progressive JPEG

Источник изображения

Оптимизация изображений. Базовые рекомендации

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

Оптимизация изображений

Что дает:● изображения меньше весят.

Где почитать: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

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