t. +7 (495) 620-58-99
+7 (495) 620-58-99
Начнем знакомство?
Начнем знакомство?
/
/
Рекомендации по увеличению скорости загрузки сайта
Блог
5617
24.10.2018

Рекомендации по увеличению скорости загрузки сайта

Как вам уже известно из нашей предыдущей статьи в блоге, Google запустил новый алгоритм ранжирования для мобильного поиска. Скорость загрузки страниц на мобильных устройствах теперь влияет на позицию сайта в мобильном поиске Google. Но что же делать, если скорость загрузки сайта маленькая?

Ответом на этот вопрос послужит универсальный список рекомендаций, благодаря которым скорость загрузки страниц сайта не только для компьютеров, но и для мобильных увеличится. Для лучшего понимания, пункты расположены в порядке возрастания трудозатратности и эффективности. Вот несколько способов увеличения производительности сайта, на которые мы рекомендуем обратить внимание.

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

Чтобы увеличить скорость загрузки элементов страницы за счёт оптимизации изображений, рекомендуем:

  • использовать на сайте изображения в формате png (в настоящее время наиболее эффективный формат webp поддерживается не всеми браузерами);
  • использовать для изображений сжатие качества;
  • использовать такой размер загружаемого изображения, который соответствует размеру, отображаемому на странице, т.е. браузер не должен сжимать или увеличивать размер изображения;
  • изначально загружать только те изображения, которые видны пользователю при открытии страницы, а для остальных изображений рекомендуется использование отложенной загрузки (Lazy Load) по мере прокрутки страницы.
Больше информации об оптимизации изображений можно найти здесь: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=ru.
Плюсы
  • Уменьшение количества скачиваемых данных.
  • Небольшие трудозатраты.
  • Соответствие рекомендациям поисковых систем.
Минусы
  • Не всегда даёт заметный результат.

2. Оптимизация файлов JavaScript и CSS

Перед тем, как отобразить страницу, браузер загружает и считывает все JavaScript и CSS файлы. Из-за этого увеличивается время отображения контента страниц. Вместе с тем при загрузке каждого нового JS и CSS файла браузер заново перестраивает страницу, что замедляет её загрузку. Чтобы избежать задержек следует придерживаться следующих техник:

  • Загружать только те скрипты и стили, которые используются на странице. Браузеру не следует загружать лишние скрипты или отдельные файлы таблиц стилей, если они не используются на рассматриваемой странице.
  • Не загружать отдельные небольшие JS и CSS файлы, во избежание формирования лишних серверных соединений, замедляющих работу сайта. Рекомендуем встраивать такие файлы в HTML код страниц с помощью тегов и соответственно.
  • Отложить загрузку дополнительных скриптов и стилей, используя атрибуты defer или async. Это позволит браузеру отображать контент страницы без задержек на загрузку стилей оформления и скриптов.
  • Применить для всех JS и CSS файлов минификацию (minify), что позволит удалить лишние символы и пустые строки / пробелы. В результате сократится объём каждого файла.
  • Не встраивать стили оформления в теги документа, а использовать файлы или теги в связке с атрибутами class.
Для скриптов Google рекомендует использовать технологии UglifyJS и Closure Compiler, для стилей - CSSNano или ccso. (ссылка на рекомендации Google https://developers.google.com/speed/docs/insights/MinifyResources)
Плюсы
  • Ускорение визуализации страницы.
  • Небольшие трудозатраты.
  • Соответствие рекомендациям поисковых систем.
Минусы
  • Не всегда даёт заметный результат.

3. GZIP сжатие

Gzip – это метод сжатия файлов в архив, сокращающий их объем и время доставки. Среди преимуществ gzip:

  • быстрая скорость сжатия и распаковки файлов;
  • сжатие без потери качества (при распаковке файлы полностью восстанавливаются);
  • поддержка современными браузерами.

Gzip сжатие применяется для html файлов, стилей, скриптов, текстовых документов. Это позволяет уменьшить их вес в несколько раз. Плохо или практически не поддаются сжатию медиа материалы, такие как картинки, видео материалы и документы docx, xlsx.

Основной минус технологии Gzip – требуется время на сжатие файлов. То есть если сервер недостаточно мощный могут быть потеряны миллисекунды. Поэтому, как правило, используется самый быстрый уровень сжатия gzip – 9. Также нецелесообразным является сжатие файлов весом меньше килобайта, так как для заголовков gzip нужно инициализированное место. Существует множество онлайн сервисов, с помощью которых можно проверить включение gzip сжатия на вашем сайте, например, https://checkgzipcompression.com.

Реализация технологии Gzip идет на стороне сервера. Для ее включения необходимо, в зависимости от сервера, добавить несколько инструкций.

Плюсы
  • Уменьшение объёма отправляемых данных.
  • Самый распространенный метод сжатия данных.
  • Поддержка современными браузерами и серверами.
  • Легкая реализация.
  • Эффективность.
Минусы
  • Дополнительная нагрузка на сервер

4. Служебные поддомены

При большом количестве скриптов и изображений на сайте, рекомендуем их вынос на отдельный служебный поддомен. Это сделает сайт «легче» и увеличит его производительность.

Не рекомендуем переносить на поддомен графику, использующуюся для визуализации страниц сайта. А вот фотографии товаров, услуг и подобные изображения лучше перенести на служебный поддомен и загружать с отдельного сервера.

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

Плюсы
  • Эффективность.
  • Снижение нагрузки на основной сервер.
Минусы
  • Высокая стоимость и трудозатраты.
  • Сложности в реализации.
  • Трудности с синхронизацией файлов.

5. CDN

Удалённость пользователя от сервера – один из факторов, влияющих на скорость загрузки веб-страницы. Если вы владелец крупного сайта, рекомендуем использовать технологию CDN.

CDN (content delivery network) или сеть доставки данных - цепочка серверов, расположенных в разных точках мира и отвечающих за быструю доставку контента пользователю.

То есть, скорость загрузки сокращается за счёт получения пользователем информации из ближайшего к нему сервера. В то же время нагрузка на ваш собственный сервер снижается. При подключении CDN необходимо тщательно проверять провайдеров на наличие серверов в тех регионах, на которые ориентирован ваш сайт.

схема content delivery network

Нужно отметить, что 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.