Ответом на этот вопрос послужит универсальный список рекомендаций, благодаря которым скорость загрузки страниц сайта не только для компьютеров, но и для мобильных увеличится. Для лучшего понимания, пункты расположены в порядке возрастания трудозатратности и эффективности. Вот несколько способов увеличения производительности сайта, на которые мы рекомендуем обратить внимание.
1. Оптимизация изображений
Чтобы увеличить скорость загрузки элементов страницы за счёт оптимизации изображений, рекомендуем:
- использовать на сайте изображения в формате png (в настоящее время наиболее эффективный формат webp поддерживается не всеми браузерами);
- использовать для изображений сжатие качества;
- использовать такой размер загружаемого изображения, который соответствует размеру, отображаемому на странице, т.е. браузер не должен сжимать или увеличивать размер изображения;
- изначально загружать только те изображения, которые видны пользователю при открытии страницы, а для остальных изображений рекомендуется использование отложенной загрузки (Lazy Load) по мере прокрутки страницы.
- Уменьшение количества скачиваемых данных.
- Небольшие трудозатраты.
- Соответствие рекомендациям поисковых систем.
- Не всегда даёт заметный результат.
2. Оптимизация файлов JavaScript и CSS
Перед тем, как отобразить страницу, браузер загружает и считывает все JavaScript и CSS файлы. Из-за этого увеличивается время отображения контента страниц. Вместе с тем при загрузке каждого нового JS и CSS файла браузер заново перестраивает страницу, что замедляет её загрузку. Чтобы избежать задержек следует придерживаться следующих техник:
- Загружать только те скрипты и стили, которые используются на странице. Браузеру не следует загружать лишние скрипты или отдельные файлы таблиц стилей, если они не используются на рассматриваемой странице.
- Не загружать отдельные небольшие JS и CSS файлы, во избежание формирования лишних серверных соединений, замедляющих работу сайта. Рекомендуем встраивать такие файлы в HTML код страниц с помощью тегов и соответственно.
- Отложить загрузку дополнительных скриптов и стилей, используя атрибуты defer или async. Это позволит браузеру отображать контент страницы без задержек на загрузку стилей оформления и скриптов.
- Применить для всех JS и CSS файлов минификацию (minify), что позволит удалить лишние символы и пустые строки / пробелы. В результате сократится объём каждого файла.
- Не встраивать стили оформления в теги документа, а использовать файлы или теги в связке с атрибутами class.
- Ускорение визуализации страницы.
- Небольшие трудозатраты.
- Соответствие рекомендациям поисковых систем.
- Не всегда даёт заметный результат.
3. GZIP сжатие
Gzip – это метод сжатия файлов в архив, сокращающий их объем и время доставки. Среди преимуществ gzip:
- быстрая скорость сжатия и распаковки файлов;
- сжатие без потери качества (при распаковке файлы полностью восстанавливаются);
- поддержка современными браузерами.
Gzip сжатие применяется для html файлов, стилей, скриптов, текстовых документов. Это позволяет уменьшить их вес в несколько раз. Плохо или практически не поддаются сжатию медиа материалы, такие как картинки, видео материалы и документы docx, xlsx.
Реализация технологии Gzip идет на стороне сервера. Для ее включения необходимо, в зависимости от сервера, добавить несколько инструкций.
- Apache: используйте mod_deflate
- Nginx: используйте ngx_http_gzip_module
- IIS: настройка сжатия HTTP
- Уменьшение объёма отправляемых данных.
- Самый распространенный метод сжатия данных.
- Поддержка современными браузерами и серверами.
- Легкая реализация.
- Эффективность.
- Дополнительная нагрузка на сервер
4. Служебные поддомены
При большом количестве скриптов и изображений на сайте, рекомендуем их вынос на отдельный служебный поддомен. Это сделает сайт «легче» и увеличит его производительность.
Не рекомендуем переносить на поддомен графику, использующуюся для визуализации страниц сайта. А вот фотографии товаров, услуг и подобные изображения лучше перенести на служебный поддомен и загружать с отдельного сервера.
Использование поддоменов позволит браузеру загружать одновременно большее количество файлов с разных серверов, что ускорит их работу и положительно скажется на времени загрузки страницы.
- Эффективность.
- Снижение нагрузки на основной сервер.
- Высокая стоимость и трудозатраты.
- Сложности в реализации.
- Трудности с синхронизацией файлов.
5. CDN
Удалённость пользователя от сервера – один из факторов, влияющих на скорость загрузки веб-страницы. Если вы владелец крупного сайта, рекомендуем использовать технологию CDN.
CDN (content delivery network) или сеть доставки данных - цепочка серверов, расположенных в разных точках мира и отвечающих за быструю доставку контента пользователю.
То есть, скорость загрузки сокращается за счёт получения пользователем информации из ближайшего к нему сервера. В то же время нагрузка на ваш собственный сервер снижается. При подключении CDN необходимо тщательно проверять провайдеров на наличие серверов в тех регионах, на которые ориентирован ваш сайт.
Нужно отметить, что CDN работает только со статичным контентом (изображения, стили, видео и т.д.), который редко меняется, но имеет большой вес. Для передачи динамического содержимого происходит обращение к исходному серверу.
Использование сети доставки данных не всегда целесообразно. Рекомендуется использовать технологию сайтам с географически распределенной аудиторией и информационным ресурсам с большим количеством «тяжелого контента» (видео, большие файлы и т.д.) и высокой посещаемостью.
В CDN, как и в любой другой системе, возможны сбои и нестабильная работа, что также нужно учитывать. Также, использовать CDN в России рискованно, поскольку IP-адреса CDN могут подвергнуться блокировке, что приведет к некорректной работе расположенных на ней сайтов (например, со стороны Роскомнадзора происходит частая блокировка IP-адресов американской компании Cloudflare).
Еще один минус технологии – после внесения изменений в файл CDN нужно время, чтобы его перекэшировать (отобразить изменения). Данная проблема решается добавлением версии к имени файла, тем самым изменяя его адрес.
- Кэширование на пограничных серверах.
- Снижение нагрузки на основной сервер.
- Быстрая передача данных.
- Высокая стоимость и трудозатраты.
- Риск блокировки по IP-адресу.
- Возможность сбоев и других проблем.
6. CSS-спрайты
Сократить количество запросов к серверу и увеличить скорость загрузки страниц, можно с помощью CSS-спрайтов. Технология заключается в объединении нескольких изображений в один графический элемент. То есть вместо нескольких HTTP-запросов для загрузки каждого отдельного изображения, загружается одна общая картинка через однократное обращение к серверу.
Минус CSS-спрайтов заключается в том, что при необходимости замены картинки, нужно скачивать спрайт, вставлять в него новое изображение и заново загружать на сайт, что требует больше времени, чем обычная загрузка одного изображения.
- Уменьшение количества запросов к серверу.
- Грамотная организация элементов интерфейса.
- Уменьшение веса графики.
- Сложность с обновлением изображений.
- Требует определенных профессиональных навыков.
7. Inline картинки
Еще один способ сократить количество серверных обращений – использовать встраиваемые или inline картинки. Возможно встраивание небольшой картинки в саму страницу, например, в таблицу стилей с помощью схемы data:URI. Это позволит сократить количество запросов к серверу и сохранить размер HTML документа.
Сначала необходимо кодировать изображение в base64. Полученный код вставляем в CSS файл таким образом: url ("data:image/тип изображения;base64,полученный код").
Минусом применения инлайн изображений является трудности с их обновлением. Чтобы обновить встроенное изображение сначала нужно его перекодировать (base64), а затем отредактировать CSS файл, что занимает больше времени, чем простая загрузка изображения.
- Уменьшение количества запросов к серверу
- Сложность с обновлением изображений.
- Подходит для небольших изображений.
- Требует определенных профессиональных навыков.
Напомним, что скорость загрузки страницы является одним из множества факторов, влияющих на ранжирование. Однако внедрение на сайте описанных выше методов позволит увеличить скорость его загрузки, что может положительно сказаться на ранжировании в десктопном, а теперь и в мобильном поиске Google.
