- 1. Хостинг (ресурсы сервера)
Это причина замедления номер один для небольших сайтов. Для текущей загрузки сайта просто не хватает хостинговых ресурсов (обычно это процессор и дисковая система). Если вы можете быстро увеличить эти ресурсы, стоит попробовать. В некоторых случаях проблема будет решена. Если стоимость дополнительных ресурсов становится выше стоимости работы по оптимизации, вам необходимо перейти к следующим методам.
- 2. СУБД (сервер базы данных)
Здесь мы уже обращаемся к источнику проблемы: низкой скорости программного кода. Часто большая часть времени веб-приложения тратится на запросы к базе данных. Это логично, поскольку задачей веб-приложения является сбор данных и их преобразование в соответствии с определенным шаблоном.
Решение проблемы медленных ответов из базы данных обычно делится на два этапа: настройка СУБД и оптимизация запросов и схемы данных. Настройка СУБД (например, MySQL) может увеличить ускорение в несколько раз, если настройка ранее не выполнялась. Тонкая настройка может обеспечить лучший эффект в течение десятка процентов.
Оптимизация запросов и схем данных - это радикальный способ ускорения. С помощью этого вида оптимизации можно получить ускорение на несколько порядков. Если изменение структуры базы данных может произойти без вторжения в программный код сайта, то такое вмешательство потребует оптимизации запросов.
Чтобы выявлять медленные запросы, вам нужно собирать статистику по нагрузке на базу данных за достаточно длительный период времени. Затем анализируется журнал и определяются кандидаты на оптимизацию.
- 3. Влияние CMS и программного кода
Широко распространено мнение, что скорость веб-сайта зависит только от CMS (« система управления контентом »). Владельцы сайтов часто пытаются разделить CMS на быстрые и медленные. На самом деле это не правильный подход.
Конечно, нагрузка на сервер зависит от кода, который включен в CMS. Тем не менее, большинство популярных систем пытаются оптимизировать для максимальной скорости и не должно быть фатальных проблем со скоростью сайта.
Однако, помимо основного кода CMS, сайт также может содержать дополнительные модули (плагины), расширения и модификации от разработчиков сайта. И этот код может оказать негативное влияние на производительность сайта.
Кроме того, проблемы со скоростью возникают при неправильном использовании системы. Например, система для блогов используется для создания магазина. Или система для небольших сайтов используется для разработки портала.
- 4. Кеширование
Традиционно самым мощным и универсальным средством увеличения скорости сервера является кэширование. Здесь речь идет о кэшировании на стороне сервера, а не о заголовках кэширования. Если для вычисления результата (сборки страницы, блока) требуются значительные ресурсы, поместите результат в кеш и периодически обновляйте его. Идея проста и сложна одновременно: системы кэширования встроены в языки программирования, системы управления сайтами и веб-серверы.
Как правило, кэширование веб-сайта позволяет сократить время рендеринга страницы до десятков миллисекунд. Естественно, в этом случае сервер легко испытывает пики посещаемости. Здесь есть две проблемы: не все может быть кэшировано, и кэш должен быть правильно отключен (удален). Если проблемы решены, кэширование можно рекомендовать в качестве эффективного средства ускорения работы сервера.
- 5. Оптимизация TCP, TLS, HTTP / 2
В этой части мы объединили тонкую оптимизацию сети, которая обеспечивает ускорение сервера. Эффект здесь не такой большой, как в других методах, но он достигается исключительно настройками, то есть бесплатными.
Сегодня настройка TCP необходима для крупных проектов и серверов с подключением от 10G, главное помнить: сетевая подсистема регулярно обновляется с выходом новых ядер Linux, поэтому ее стоит обновить. Правильная настройка TLS (HTTPS) позволяет получить высокий уровень безопасности и минимизировать время на установление безопасного соединения. Хорошие рекомендации выпущены Mozilla .
Новая версия протокола HTTP - HTTP / 2 предназначена для ускорения работы сайтов. Этот протокол появился недавно и сейчас активно используется (около 20% доли среди веб-сайтов). В целом, в HTTP / 2 механизмы ускорения фактически заложены, основным из которых является уменьшение влияния сетевых задержек на время загрузки страницы (мультиплексирование запросов). Но ускорение благодаря HTTP / 2 не всегда успешно, поэтому не полагайтесь на этот протокол. Кроме того, чтобы не потерять благосклонность Google, вам нужно знать разницу между https и http, которая будет полезна для нужд SEO.
Оптимизация клиента
В отличие от оптимизации сервера, клиент нацелен на все, что происходит в браузере пользователя. Из-за этого управление сложно (разные устройства и браузеры) и возникает много разных направлений оптимизации. Мы рассмотрим наиболее эффективные и универсальные методы, которые можно использовать практически в любом проекте.
- 6. Оптимизация критического пути CSS и JS
Критический путь рендеринга (критический путь рендеринга) - набор ресурсов для запуска рендеринга страницы в браузере. Как правило, этот список включает в себя сам HTML-документ, CSS-стили, веб-шрифты и JS-код.
Наша задача как оптимизаторов скорости - сократить этот путь как во времени (с учетом сетевых задержек), так и в трафике (с учетом медленных соединений).
Самый простой способ определить критический путь - запустить аудит в Chrome (на панели разработчика), а плагин Lighthouse определяет его состав и время загрузки с учетом медленного соединения.
Основная техника снижения критического пути: мы удаляем все, что не нужно или может быть отложено. Например, большая часть кода JS может быть отложена до загрузки страницы. Для этого поместите вызов ресурса JS в конец документа HTML или используйте атрибут async.
Для отложенной загрузки CSS можно использовать динамическое соединение стилей через JS (ожидание события domContentLoaded).
- 7. Оптимизация веб-шрифтов
Подключение веб-шрифтов сегодня стало практически стандартом дизайна. К сожалению, они негативно влияют на скорость рендеринга страницы. Ситуация ухудшается, потому что часто указатели на файлы шрифтов скрываются в файле CSS, который также не появляется мгновенно. Многие разработчики любят использовать общедоступные веб-службы шрифтов (например, Google Fonts), что вызывает еще большие задержки (дополнительные подключения, файл CSS).
Правила оптимизации скорости веб-сайта состоят в том, чтобы уменьшить объем трафика веб-шрифтов и получать их как можно быстрее.
Чтобы уменьшить трафик, нужно использовать современные форматы: WOFF2 для современных браузеров, WOFF для совместимости. Кроме того, вам нужно включить только те наборы символов, которые используются на сайте (например, латиница и кириллица).
Чтобы повлиять на быстрое отображение веб-шрифтов, вы можете использовать новую спецификацию ссылки rel = ”preload” и свойство font-display CSS. Предварительная загрузка позволит вам как можно скорее сообщить браузеру о необходимости загрузки файла шрифта, а font-display предоставляет гибкий способ управления поведением браузера в случае задержки файла (подождите, нарисуйте запасной, выполните не ждать шрифта больше трех секунд)
- 8. Оптимизация изображений увеличит скорость страницы
Изображения составляют большую часть веса современного сайта. Как правило, вам не нужно выходить за пределы среднего размера страницы. Конечно, картинки не всегда так важны для страницы, как CSS и JS-код. Но для многих сайтов изображения являются важной частью контента: вспомните любую карточку товара в интернет-магазине.
Основным приемом оптимизации изображений является уменьшение их размера. Для этого используйте правильный формат и инструменты сжатия:
- PNG для изображений с прозрачностью и текстом;
- JPEG для фотографий и сложных изображений;
- SVG для векторной графики.
В дополнение к этим форматам разрабатываются новые: например, WebP от Google. Этот формат может охватывать область использования PNG и JPEG - поддерживает сжатие с потерями и без потерь, прозрачность и даже анимацию. Чтобы использовать его, достаточно создать копию изображений в WebP и передать их браузерам, которые их поддерживают.
Для PNG существует множество утилит оптимизации, которые можно использовать для уменьшения размера: OptiPNG, PNGout, EWWW Image Optimizer и другие. Также внутренняя оптимизация сжатия данных может быть выполнена с использованием zopfliPNG. Основная идея такого программного обеспечения заключается в выборе оптимальных параметров сжатия, удалив ненужные данные из файла. Здесь нужно быть осторожным: в некоторых утилитах есть режим с потерей качества, который может вас не устраивать (если вы ожидаете, что будет выводиться одно и то же изображение).
Оптимизация JPEG также делится на два типа: с потерями и без потерь. В общем, мы можем порекомендовать пакет Mozilla JPEG, который специально разработан для лучшего сжатия в этом формате. Для оптимизации без потерь вы можете использовать jpegtran, с потерями - cjpeg.
- 9. Кэширование заголовков
Это самый простой метод оптимизации клиента. Его целью является кэширование в браузере редких ресурсов: изображений, CSS и JS-файлов, шрифтов, иногда даже самого HTML-документа. В результате каждый ресурс запрашивается с сервера только один раз.
Если вы используете Nginx, просто добавьте директиву:
add_header Cache-Control "max-age=31536000, immutable";
Отныне браузер имеет право кэшировать ресурсы на срок до года (что почти навсегда). Новый параметр «неизменный» указывает, что ресурс не будет изменен.
Конечно, возникает вопрос: что если нам нужно изменить кэшированный ресурс? Ответ прост: измените его URL-адрес. Например, вы можете добавить версию к имени файла. Для документов HTML этот метод также применим, но, как правило, используется более короткий период кэширования (например, одна минута или один час).
- 10. Сжатие данных
Обязательной практикой является сжатие любых текстовых данных при передаче с сервера в браузер. Большинство веб-серверов имеют реализацию ответов с использованием сжатия gzip . Однако простой активации сжатия недостаточно.
Во-первых, степень сжатия регулируется и должна быть близка к максимальной. Во-вторых, вы можете использовать статическое сжатие, то есть предварительно сжать файлы и поместить их на диск. Затем веб-сервер будет искать сжатую версию и сразу же выдаст ее. В-третьих, вы можете использовать более эффективные алгоритмы сжатия: zopfli (совместимый с gzip) и brotli (новый алгоритм сжатия). Brotli будет работать только с HTTPS.
Чтобы максимизировать влияние сжатия на файлы, предварительно применяется процесс минимизации: удаление ненужных переводов строк, пробелов и других ненужных символов. Этот процесс специфичен для каждого формата. Также вам следует позаботиться о сжатии других текстовых данных на сайте.
Использование CDN
Применение CDN (сети доставки контента) для ускорения веб-сайта - это очень рекламируемая мера, имеющая много маркетинговых оболочек вокруг сути технологии.
- 11. Как это было изобретено
Первоначально CDN были предназначены для разгрузки интернет-каналов вещательных медиа-сайтов. Например, при просмотре живого видео несколько тысяч зрителей создают очень большую нагрузку на пропускную способность сервера. Кроме того, обеспечить бесперебойное качество связи с большими клиентами и удалением сервера крайне сложно (из-за задержек и нестабильности сети).
Решением этой проблемы было создание CDN, то есть распределенной сети, к которой были подключены клиенты (например, зрители), а узлы этой сети уже находятся на сервере (источник). В то же время количество подключений к серверу было сокращено до одного (нескольких), а количество подключений к CDN может достигать миллионов из-за кэширования содержимого сетью.
Сегодня большинство CDN позиционируют себя как средство ускорения веб-сайтов, прежде всего за счет уменьшения расстояния от контента до клиента (посетителя сайта).
- 12. Возможные эффекты
Как я могу ускорить сайт, используя CDN? Да, действительно, пользователь, как правило, подключается к ближайшему (по времени доступа) сетевому серверу и, следовательно, быстрее обрабатывает установление соединения TCP и TLS. Кроме того, если контент находится на сервере CDN, пользователь может быстро получить его. Таким образом, нагрузка на наш собственный сервер снижается.
Во-вторых, CDN может не только распространять контент без изменений, но и оптимизировать его на своей стороне и придавать ему более компактную форму: сжимать изображения, применять сжатие к тесту и т. Д. Благодаря такой оптимизации вы можете сократить время загрузки.
- 13. Недостатки использования CDN
Недостатки, как обычно, продолжают преимущества: объект может отсутствовать в кеше узла CDN. Например, он еще не был запрошен или не может быть кэширован (документ HTML). В этом случае мы получаем дополнительные задержки между узлом CDN и нашим сервером.
Несмотря на то, что CDN предназначены для ускорения доступа к сайту, бывают ситуации, когда сетевой маршрут будет менее оптимальным, чем без CDN.
Наконец, сети доставки контента представляют собой очень сложные системы, где сбои, нестабильность и другие проблемы также возможны везде. Используя CDN, мы добавляем еще один уровень сложности.
Мы зафиксировали результат
Допустим, вам удалось добиться хорошей скорости сайта. Пользователи и владельцы ресурса довольны. Значит ли это, что вы можете забыть о проблеме скорости? Конечно, нет. Чтобы добиться постоянного качества сайта, вы должны постоянно поддерживать сайт и следить за ним.
- 14. Продолжайте работать над производительностью сайта
Любой живой веб-проект регулярно обновляется, изменения происходят как в общих шаблонах (темы оформления, интерфейсы), так и в контенте. Также программный код (как клиентский, так и серверный) активно меняется.
Каждое изменение может повлиять на производительность сайта. Чтобы отслеживать это влияние, вам необходимо внедрить систему синтетического мониторинга скорости сайта на этапе разработки. Таким образом, проблемы со скоростью могут быть перехвачены, прежде чем пользователи заметят их.
Для оптимизации входящего контента требуется интеграция процедур оптимизации в систему управления контентом. Прежде всего, это касается обработки изображений.
Ускорение сайтов - очень динамичная область: появляются новые стандарты, меняется их поддержка браузерами. Поэтому важно регулярно проверять технологию проекта, процессы и используемое программное обеспечение.
- 15. Контролировать скорость сайта для реальных пользователей
Синтетическое тестирование в идеальных лабораторных условиях очень полезно для оценки изменений в системном коде, но этого недостаточно. В конце мы хотим, чтобы сайт работал быстро для реальных пользователей. Для сбора таких данных существует мониторинг скорости на стороне пользователя (RUM - мониторинг реального пользователя).
Для организации RUM достаточно подключить одну из систем веб-аналитики (Яндекс.Метрика, Google Analytics) и посмотреть отчеты о времени загрузки сайта. Для получения более подробных и точных данных вы можете воспользоваться специализированными службами контроля скорости. Чтобы начать с инструментов анализатора веб-сайта, вы должны составить список наиболее важных параметров, которые вы должны отслеживать мгновенно.
