Неочевидные возможности ускорения работы сайта
1 like105 views
Документ представляет собой план доклада Алексея Данилина, аналитика в агентстве интернет-маркетинга Netpeak, о методах ускорения работы сайта. Он рассматривает настройки сервера, оптимизацию изображений и использование протокола HTTP/2, акцентируя внимание на их ключевых преимуществах для повышения производительности. Документ также включает ссылки на ресурсы и инструменты для проверки и реализации предложенных оптимизаций.
Неочевидные возможности ускорения работы сайта
- 1. Алексей Данилин Неочевидные возможности ускорения работы сайта
- 2. О себе Analytics Strategist в агентстве интернет-маркетинга Netpeak и сервисе Serpstat. Принцип оказания услуг Netpeak — интернет-маркетинг для бизнеса, а цель — рост продаж у клиентов. C нами вы инвестируете в будущее вашей компании, добиваетесь окупаемости бизнеса, увеличиваете ROI (возврат вложенных средств) и оборот. [email protected]
- 3. План доклада 1. Настройки сервера для ускорения работы сайта. 2. Протокол HTTP/2. 3. Использование тега link. 4. Оптимизация изображений.
- 4. Консоль браузера вместо 100500 плагинов
- 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
- 9. Настройки сервера. Кеширование Схема соответствия заголовков: ● Cache-Control (директивы, которые должны выполняться всеми кеширующими механизмами в цепочке запрос-ответ) ● Expires (указание даты, после который ответ считается устаревшим - имеет более низкий приоритет, чем max-age в Cache-Control) ● If-Modified-Since - Last-Modified (изменился ли файл с определенной даты) ● If-None-Match - ETag (аналог проверки контрольной суммы - имеет приоритет над If-Modified-Since)
- 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/
- 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/
- 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. Узнайте больше об интернет-маркетинге