Embed Size (px)
Citation preview
Алексей Данилин
Неочевидные возможности ускорения работы сайта
О себе
Analytics Strategist в агентстве интернет-маркетинга Netpeak и сервисе Serpstat.
Принцип оказания услуг Netpeak — интернет-маркетинг для бизнеса, а цель — рост продаж у клиентов.
C нами вы инвестируете в будущее вашей компании, добиваетесь окупаемости бизнеса, увеличиваете ROI (возврат вложенных средств) и оборот.
План доклада
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
Узнайте больше об интернет-маркетинге
