Оптимизация скорости загрузки сайта от А до Я

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

Вступление

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

Как пишут специалисты Яндекса – пользователи не готовы ждать больше 2 секунд загрузки сайта в мобильных приложениях. Поэтому очень важно оценивать скорость загрузки не только с персональных компьютеров, а в первую очередь с мобильных устройств.

ИТОГО: скорость загрузки напрямую влияет на поведенческие факторы (показатели отказов, совершение конверсии и т.д), которые в свою очередь являются важнейшими факторами ранжирования сайта в поисковых системах. Также важно понимать, что улучшив этот показатель, увеличится не только трафик и конверсии из поисковых систем, но также и общие показатели конверсии сайта с других источников привлечения трафика (рекламы, внешних ссылок и т.д.).

 

Оценка скорости загрузки сайта - инструменты

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

К внутренним относятся сервисы, доступ к которым можно получить, имея доступ к сайту по ftp, хостингу либо к административной панели CMS. 

Внешними инструментами являются веб-сервисы, которые позволяют измерять показатели скорости загрузки любого сайта с разных точек планеты.

Внутренние инструменты

  • Яднекс Метрика. В интерфейсе Яндекс метрики через библиотеку виджетов можно вывести виджет по мониторингу скорости загрузки сайта, которую определяет яндекс метрика. Выглядит он вот так:

 

pastedGraphic.png

Виджет мониторинга скорости загрузки сайта

 

  • Яндекс Вебмастер. Если сайт добавлен в панель вебмастера, по ссылке “Сводка” можно посмотреть индекс скорости загрузки сайта

pastedGraphic_1.png

Оценка скорости загрузки сайта через панель Вебмастера Яндекс

  • Google Analytics. Счетчик Google analytics также позволяет проанализировать скорость загрузки сайта. Зайти в данный отчет можно через левое меню: Поведение->Скорость загрузки сайта->Время загрузки страниц:

 

pastedGraphic_2.png

Определение скорости загрузки сайта в Google Analitis

 

Здесь же в Google Analitics можно оценить время загрузки отдельных страниц (Поведение->Скорость загрузки сайта->Ускорение загрузки):

 

pastedGraphic_3.png

 

Оценка скорости загрузки отдельных страниц через Google Analitis

 

  • Google Вебмастер. Как и в случае с вебмастером Яндекс, в Google Webmaster выводится виджет по оценке скорости загрузки сайта. Загружается данный отчет через ссылку в левом меню – “Статистика сканирования”:

pastedGraphic_4.png

Отчет загрузки страницы в Google Webmaster

 

  • Модули и плагины CMS. Для популярных CMS существует множество плагинов и модулей, которые позволяют измерять и выводить в различных видах показатели скорости загрузки сайта. Некоторые подобные модули встроены в CMS по умолчанию.

pastedGraphic_5.png

Оценка производительности в административной панели CMS Битрикс

 

Внешние инструменты

Внешних инструментов и веб-сервисов для оценки скорости загрузки существует великое множество, как российских, так и зарубежных разработчиков. Мы используем в своей работе https://tools.pingdom.com/ и https://developers.google.com/speed/pagespeed/insights/

 

Подробно останавливаться на них не буду, отмечу лишь, что pingdom позволяет проверять скорость загрузки из нескольких стран, а pagespeed является разработкой Google, данные которой используются для оценки скорости в Google Analytics. Также стоит отметить, что данные инструменты детально показывают, что мешает более быстрой загрузке сайта, и, что очень важно, отдельно оценивают скорость загрузки для ПК и для мобильных устройств.

 

pastedGraphic_6.png

Детальная оценка скорости загрузки отдельных элементов страницы в pagespeed

Оптимизация скорости загрузки

Основными факторами, влияющими на скорость загрузки страницы, являются:

  • Настройка и производительность сервера
  • Оптимизация изображений
  • Оптимизация кода и базы данных
  • Оптимизация загрузки внешних скриптов
  • Оптимизация контента
  • Оптимизация нагрузки на сайт, кэширование
  • Использование внешних решений – CDN, турбо страниц, страниц AMP

Более подробно о каждом из факторов и способах их оптимизации – ниже.

Настройка и производительность сервера

Скорость обработки и передачи информации от сервера пользователю во многом зависит от производительности сервера, и от его настроек. В своей работе мы перепробовали множество решений, и в зависимости от целей, CMS сайта, посещаемости, наличия поддоменов и т.д. подходят разные решения – уникального нет. В своей работе мы чаще всего используем виртуальные серверы от компаний rusonyx.ru и beget.com. Но и они имеют свои недостатки, поэтому прежде чем выбирать хостинг для своего сайта – следует изучить технические возможности сайта, а также проконсультироваться у соответствующих специалистов.

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

Наиболее распространенный фактор, замедляющий работу – это недостаточная оптимизация изображений на страницах сайта (например – в карточках товара). Основными способами оптимизации изображений является оптимизация размеров, оптимизация сжатия и формат изображений.

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

Одной из причин долгой загрузки страницы является то, что на сайт добавляются изображения, размеры которых не соответствуют размерам блоков, в которых эти изображения выводятся. Например, в слайдер на главной странице загружается изображение 6000x4000 пикселей. При стандартном разрешении экрана в 1280x700 пикселей и 1920x1080 в Full HD. 

 

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

 

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

Многие изображения можно сжать без потери качества. Для этого существует множество десктопных программ и онлайн сервисов. Мы в своей работе пользуемся сервисом https://www.iloveimg.com/ru/compress-image, который позволяет сжать изображение до 80%.

 

Использование современных форматов для изображений

Для более быстрой загрузки страниц сайта рекомендуется использовать современные форматы изображений. Google рекомендует использовать форматы JPEG 2000, JPEG XR и WebP (более подробно - https://web.dev/uses-webp-images/)

Оптимизация кода и базы данных

Значительно увеличить скорость загрузки сайта можно при оптимизации кода страниц сайта и таблиц баз данных. К основным методам оптимизации кода относится:

 

  • Версия php. На некоторых сайтах до сих пор можно наблюдать использование старой версии php  5. Обновление до 7-ой версии по некоторым оценкам увеличивает производительность кода в несколько раз. 

 

  • Скрипты js и стили css. Загрузка скриптов и стилей, которые не используются на страницах сайта, также может привести к потере скорости при загрузке сайта. Эта “болезнь” многих популярных CMS, где по умолчанию включен функционал и соответственно загружаются файлы, которые не используются сайтом. Проверить, какие скрипты не используется можно с помощью консоли браузера либо сторонних сервисов.

 

Также можно сократить объем используемых скриптов, и сжать используемые сайтом файлы стилей css. Для популярных CMS для оптимизации кода настройки сайта существует множество модулей и плагинов. Например, для CMS Wordpress данным плагином является Clearfy Pro

    pastedGraphic_7.png

Оптимизация кода с помощью плагина Clearfy Pro в CMS Wordpress

  • Базы данных. Оптимизация баз данных для сайтов также является одним из факторов, с помощью которого можно увеличить скорость загрузки сайта. Для каждой CMS настройки БД индивидуальны, и для многих существуют специальные плагины, установка которых позволяет оптимизировать базу данных без привлечения специалистов. Например, вышеупомянутый плагин Clearfy Pro для WordPress позволяет отключить ревизии*.

 

*Ревизии - при сохранении и обновлении любой записи или страницы создается её копия (ревизия), которую в будущем можно посмотреть или восстановить. Но со временем большое количество таких ревизий (а их может быть десятки для каждой страницы) забивают базу данных, расходуя место и замедляя работу. Обычно достаточно хранить до 3-5 последних ревизий.

 

pastedGraphic_8.png

Отключение ревизий в CMS Wordpress с помощью плагина Clearfy Pro

Оптимизация загрузки внешних скриптов

В значительной мере на скорость загрузки сайта может повлиять долгая загрузка скриптов js с внешних источников. Это касается, например, Яндекс метрики, Гугл аналитекс, онлайн-консультанта и других внешних сервисов. Проверить какие скрипты грузятся, и сколько времени занимает их загрузка можно через сервисы https://tools.pingdom.com/ и https://developers.google.com/speed/pagespeed/insights/

Решениями подобной проблемы являются:

  • Вынесение внешних скриптов в конец кода страницы (перед тегом </body>) – чтобы сначала прогружался основной контент сайта, а затем подключались внешние скрипты.
  • Использование внешнего скрипта локально. То есть внешний скрипт можно скопировать на сервер сайта, и в коде сайта обращаться к нему уже локально*.

 

*Примечание: подобный метод мы использовали при обращении к скрипту Яндекс Метрики – мы скопировали js-файл метрики на сервер сайта, и в коде страниц обращались к js-файлу локально. Для того, чтобы версия js-файла была всегда актуальной,  с помощью cron еженедельно js файл ежедневно обновлялся с внешнего сервера Яндекса. 

Оптимизация контента

К оптимизации контента относится:

  • Оптимизация листингов товаров (страниц категорий). Количество выводимых товаров на странице категории влияет на  скорость загрузки этой страницы. Здесь важно соблюсти золотую середину – загружать достаточное кол-во товаров для отображения хорошего ассортимента на одной странице категории. Но и не выводить слишком много позиций товаров, загрузка которых может значительно увеличить скорость загрузки. Какого-то общего решения и рекомендаций по этому пункту нет – все индивидуально и надо проверять, как увеличение кол-ва выводимых товаров для конкретного сайта влияет на скорость загрузки.

 

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

 

  • Удаление ненужных блоков и информации. Размер загружаемого контента можно оптимизировать за счет удаления ненужных блоков с информацией. Этими блоками могут быть – виджеты соцсетей, блоки новостей, блоки с рекомендуемыми товарами и т.д. Естественно, прежде чем удалять подобные блоки, необходимо удостовериться в бесполезности их присутствия на сайте. Это можно сделать с помощью настроенных целей в Яндекс Метрике, анализе карты кликов и т.д.

Оптимизация нагрузки на сайт, кэширование

Как известно, ваш сайт помимо живых посетителей посещают боты поисковых систем и различных сторонних сервисов по анализу или парсингу контента вашего сайта. Зачастую больше половины “посетителей” сайта относятся к вышеупомянутым категориям. Все эти обращения на сайт создают дополнительную нагрузку, которую можно минимизировать несколькими решениями.

  • Запрет по ip. Через файл .htaccess можно запретить обращения к вашему сайту с определенных ip – то есть тех ip, которые используют боты веб-сервисов для обращения на ваш сайт.  Более подробно об этом в моей статье о запрете ботам посещать ваш сайт. В конце статьи есть ссылка на инструмент собственной разработки по анализу лог-файла сервера и выявлению нежелательных ботов.

 

  • Скорость обхода сайта роботами Яндекса. С помощью вебмастера Яндекс можно задать параметры для частоты посещения вашего сайта роботами Яндекса. Более подробно об этой настройке можно почитать в Справке Яндекса

 

  • Оптимизация индексации. Роботы поисковых систем обходят все страницы сайта, ссылки которых им известны, и на которые нет запрета в файле robots.txt. Соответственно для того, чтобы боты не посещали страницы, которые не нуждаются в индексации (служебные, несуществующие и т.д.) – необходимо соответствующим образом настроить файлы robots.txt и sitemap.xml.  В файле robots.txt страницы, которые не нужны нам в индексе – запрещаем для индексации, а в карте сайта sitemap.xml размещаем урлы только тех страниц, которые нужны для нахождения в индексе поисковых систем.

 

  • Кэширование данных. Кэширование данных позволяет пользователю, повторно посещающему ваш сайт не загружать файлы стилей, изображений, скрипты с сервера сайта, а использовать файлы cookies браузера пользователя.

 

 

Для кэширования данных можно использовать файл .htaccess (более подробно об этом можно почитать в моей статье “Настройка сжатия файлов в .htaccess”), либо плагины и модули, разработанные для различных CMS. Например, для CMS Wordpress подобным модулем является модуль Breeze.

Использование внешних решений – CDN, турбо страниц, страниц AMP

Для увеличения скорости загрузки сайта можно использовать сторонние решения. К ним относятся CDN серверы, турбо страницы от Яндекса и AMP страницы от Google.

  • CDN (Content Delivery Network) — это географически распределённая сетевая инфраструктура, обеспечивающая быструю доставку контента пользователям веб-сервисов и сайтов. Входящие в состав CDN серверы географически располагаются таким образом, чтобы сделать время ответа для пользователей сайта/сервиса минимальным.

На CDN серверах можно располагать – скрипты js, файлы стилей css, изображения и другой контент, загрузка которого с вашего сервера может занимать гораздо больше времени, чем c CDN. Многие крупные компании используют свои CDN серверы для загрузки подобных файлов. Например, OZON, Amazon и другие. Также есть компании провайдеры, которые предоставляют свои CDN серверы для использования сторонним сайтам. Например, сайт стопкоронивирус.рф пользуется услугами сервиса - https://www.cdnvideo.ru/

 

  • Турбо-страницы. Это технология Яндекса, которая ускоряет загрузку контента. Она позволяет создавать Турбо-страницы — лёгкие версии веб-страниц, которые быстро открываются на мобильных устройствах, а также ускоряет загрузку сайтов в 

Яндекс.Браузере. Настраиваются турбо-страницы через панель Вебмастера Яндекс. 

 

  • AMP (Accelerated Mobile Pages) – это технология ускоренных мобильных страниц, которая разрабатывается независимыми разработчиками и активно продвигается компанией Google. Суть в том, что на сайте используются специальные теги, количество и функционал которых строго ограничены. Задача разработчика состоит в том, чтобы собрать солянку из доступных схем, которые решат проблему заказчика. Google находит эти специальные тэги и кэширует информацию в них. После этого, когда пользователь ищет что-то в Гугле, браузер на фоне подгружает информацию из CDN Гугла, в специальный iframe и при переходе по ссылке открывает уже загруженную страницу в специальном окне.

 

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

 

Выводы

Оптимизация скорости загрузки сайта является достаточно трудоемкой, но очень важной задачей по оптимизации сайта.  При выполнении этой задачи важно понимать, что не все решения универсальны и подойдут к любому сайту. Например, если у вас высокопроизводительный сервер – то нет смысла пользоваться услугами CDN сервера, если у вас коммерческая тематика сайта – то не стоит торопиться использовать турбо-страницы, если вы используете трафик из других стран, не следует запрещать по ip обращения из этих стран и т.д.

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

Оставить заявку

Оставьте заявку и наши менеджеры ответят на ваши вопросы.

                                                   
ad8888ba, 88 ad888888b, ad88888ba
8P' "Y8 ,d88 d8" "88 d8" "88
d8 888888 a8P 8P 88
88,dd888bb, 88 aad8" Y8, ,d88
88P' `8b 88 ""Y8, "PPPPPP"88
88 d8 88 "8b 8P
88a a8P 88 Y8, a88 8b, a8P
"Y88888P" 88 "Y888888P' `"Y8888P'

*Нажимая на кнопку «Оставить заявку», вы даете согласие на обработку своих персональных данных.