или закажите обратный звонок
  1. Главная
  2. База знаний
  3. Рекомендации по увеличению скорости загрузки сайта
SEO

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

Советы по оптимизации веб-страниц помогут вам увеличить их производительность.

24 Октября 2018 | 362 | 0

Как вам уже известно из нашей предыдущей статьи в блоге, 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 код страниц с помощью тегов <script> и <style> соответственно.
  • Отложить загрузку дополнительных скриптов и стилей, используя атрибуты defer или async. Это позволит браузеру отображать контент страницы без задержек на загрузку стилей оформления и скриптов.
  • Применить для всех JS и CSS файлов минификацию (minify), что позволит удалить лишние символы и пустые строки / пробелы. В результате сократится объём каждого файла.

Для скриптов Google рекомендует использовать технологии UglifyJS и Closure Compiler, для стилей - CSSNano или ccso. (ссылка на рекомендации Google https://developers.google.com/speed/docs/insights/MinifyResources)

  • Не встраивать стили оформления в теги документа, а использовать файлы или теги <style> в связке с атрибутами class.

+


Ускорение визуализации страницы Не всегда даёт заметный результат
Небольшие трудозатраты
Соответствие рекомендациям поисковых систем

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 необходимо тщательно проверять провайдеров на наличие серверов в тех регионах, на которые ориентирован ваш сайт.

Рекомендации по увеличению скорости загрузки сайта - читайте в разделе Материалы на www.artox-media.ru - Изображение №1

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


ТОП статей и материалов по digital-маркетингу и не только

(0)

Комментарии

Написать сообщение …Загрузить файлы?

Делимся десятилетним опытом продвижения и web-исследованиями по отраслям в рассылке

Всего 2 раза в месяц

Наш и клиентский опыт в digital за 10 лет по отраслям

Подробности в первом письме

Больше статей
Рекомендации по увеличению скорости загрузки сайта - читайте в разделе Материалы на www.artox-media.ru- Изображение №1

12 Ноября 2018

Стратегия продвижения в Digital интернет-магазинов по продаже пластиковых окон

Что влияет на продажи пластиковых окон? Анализ рынка и ЦА внесут ясность.

Читать далее...
Рекомендации по увеличению скорости загрузки сайта - читайте в разделе Материалы на www.artox-media.ru- Изображение №2

8 Ноября 2018

Почему нельзя пропустить секцию «Marketing Technology: Machine VS Human» на НРФ18

13 ноября в рамках НРФ18 команда ARTOX media проведет секцию «Marketing Technology: Machine VS Human».

Читать далее...
Рекомендации по увеличению скорости загрузки сайта - читайте в разделе Материалы на www.artox-media.ru- Изображение №3

8 Ноября 2018

Мы переехали в новый офис!

Наше агентство продолжает активно развиваться, а вместе с тем растут и наши потребности.

Читать далее...
Рекомендации по увеличению скорости загрузки сайта - читайте в разделе Материалы на www.artox-media.ru- Изображение №4

1 Ноября 2018

Статья "Репутация бренда в интернете – зачем и с чего начать" на VC.RU

Почему важно оперативно реагировать на комментарии пользователей в сети.

Читать далее...

ОСТАВЬТЕ ЗАЯВКУ И МЫ ОБЯЗАТЕЛЬНО СВЯЖЕМСЯ С ВАМИ

ОСТАВЬТЕ ЗАЯВКУ И МЫ ОБЯЗАТЕЛЬНО СВЯЖЕМСЯ С ВАМИ