Скорость загрузки сайта: удобство пользователей и ваша прибыль

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

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

Насколько важна высокая скорость загрузки страниц сайта

На данный параметр влияет целый ряд факторов, которые в свою очередь подразделяются на две части — серверную и клиентскую. К серверной относятся свойства хостинга (имеется в виду кэширование на стороне сервера, параметры сжатия, серверы Apache и Nginx), а также базы данных (а именно — использованные сетевые настройки, редиректы, число http-запросов).

Клиентская часть обуславливается следующими показателями:

• размером запрашиваемой страницы;

• возможностью асинхронной загрузки;

• изменением масштабов изображений;

• кэшированием данных на стороне браузера;

• применяемыми веб-шрифтами;

• сжатием графических структур и расширением имен файлов;

• используемыми плагинами и скриптами;

• CSS и JavaScript.

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

Что касается зависимости конверсии от скорости загрузки, тут понятно, что никому не интересно сидеть и дожидаться, пока прорисуется страница. Пользователи, которые выходят в Интернет через мобильные устройства (а их в Google, к примеру, больше половины), особенно не любят тратить на это время.

Скоростные показатели оптоволокна и широкополосных каналов намного выше 2G/3G/4G, поэтому если страница не вывалилась на экран за три секунды, ее закроют. А 88 % посетителей не повторяют попыток, оказавшихся неудачными.

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

Согласно исследованиям (так излагает «Яндекс»), для большинства пользователей даже 2 секунды ожидания — это много.

В «Гугле» такая информация: 53 % посетителей не согласны ждать дольше трех секунд, они просто уходят.

Согласно статистике Skilled.со 79 % пользователей не повторяют попыток, если в первый раз страницы появлялись очень медленно.

Готовы ожидать прогрузки в течение 4 секунд (но не дольше) — 64 % людей.

Во что выливается секундная задержка? В семипроцентное снижение показателя конверсии. И эта же секунда лишает вас 11 % потенциально возможных переходов внутри сайта.

На что влияет скорость загрузки сайта

Есть три важных показателя, на которые в той или иной мере влияет скорость загрузки. Это индексация, ранжирование и конверсия.

1. Индексация

   Любой разработчик понимает, насколько важно максимально быстрое и полнообъемное попадание страниц в индекс.

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

   Вывод простой: увеличивайте скорость загрузки, если не хотите терять клиентов еще на этапе индексации.

2. Ранжирование

   На ранжирование веб-проектов в результатах поисковых выдач влияет около 200 метрик, среди которых и быстродействие. Оно же является важным показателем удобства в использовании сайта (юзабилити).

   Роль поведенческих факторов сейчас очень высока: закрытую из-за долгого ожидания страницу роботы зафиксируют как отказ. Что дальше? Много отказов — значит, ваш сайт спускается все ниже и ниже в выдачах поисковиков.

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

   Важно! Американская компания MOZ провела исследования в этой области. Оказалось, что время полной загрузки страниц не влияет прямо на ранжирование в «Гугле». Но есть стопроцентная зависимость от быстроты получения первого байта (Time To First Byte). А если сервер откликнулся быстрее, сайт поднимается в результате выдачи.

3. Конверсия

   Если ваша веб-площадка притормаживает, люди будут уходить — это давно проверенный факт. И тут пользователя не удержать ни крутой рекламой, ни уникальным контентом. Никто не хочет сидеть перед полупустым экраном и ждать, пока на нем что-то появится.

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

Лояльность существенно падает, если человеку приходится долго ждать. Поэтому высокая скорость загрузки — это в ваших интересах.

Какие показатели считать хорошими, а какие — не очень? Ориентиры примерно такие:

• 1 секунда — суперрезультат, однако, можно прямо сказать, почти нереальный;

• 2-3 секунды — стандартный показатель большей части продвинутых ресурсов;

• 3–5 секунд — терпимое время для некоторых порталов, однако в общем это уже низкое значение;

• 6–10 секунд — это очень долгое ожидание, с таким результатом продвигаться будет затруднительно;

• от 11 секунд — очень плохо. Принимайте немедленные меры для увеличения скорости сайта.

Есть ниши, где 5-6 секунд считаются нормой для открытия страниц. Возьмите для примера знаменитую компанию OZON. По-правде говоря, интернет-магазин там работает довольно медленно, однако ресурс от этого не теряет своей популярности, конверсия там отличная.

Определить оптимальную скорость загрузки сайта конкретно для своего случая можно с помощью Google Page Speed Insights.

Чтобы эта цифра равнялась 2–4 секундам, необходимо набрать 70–80 баллов. Первостепенное значение тут имеют следующие параметры:

• скорость получения первого байта от сервера — time to first byte;

• быстрота проявления на странице основных элементов — load time;

• полный вес страницы (то есть ее размер) — page size;

• число вопросов, которые пользователь должен задать базе данных, чтобы страница сформировалась, — requests.

Техника работы с Google Page Speed Insights будет описана ниже. Сейчас речь пойдет о формировании основных показателей, которые влияют на эффективность работы сайтов.

6 основных критериев, по которым выполняется проверка скорости загрузки сайта

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

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

Однако в действительности процесс представляет собой целый ряд действий:

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

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

1. Время загрузки первого байта (TTFB)

Итак, Time To First Byte — это временной промежуток между тем, как сервер получил запрос, и моментом отправки первого байта информации браузеру пользователя.

Данный показатель разделяется на три части:

• время, ушедшее на пересылку запроса с браузера посетителя к серверу;

• время, необходимое на обработку запроса и формирование ответа;

• время на обратный путь ответа от сервера к пользователю.

По сути, TTFB — это секунды, в течение которых человек ждет загрузки страницы и видит перед собой белый экран.

2. Первая отрисовка контента (FCP)

First Contentful Paint — временной промежуток между тем, как посетитель отправил запрос серверу, и тем моментом, когда на экране его устройства появится первый пиксель информации.

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

3. Время загрузки достаточной части контента (FMP)

First Meaningful Paint переводится как «первая значимая отрисовка». Это отрезок времени между тем, как человек отправил запрос серверу, и появлением на странице содержания, достаточного для первых действий.

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

4. Время окончания работы ЦП (First CPU Idle)

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

• пользователь может начать взаимодействие с отразившимися на странице элементами (ссылками, кнопками, картинками и т. д.);

• большая часть страницы становится доступна для ручного ввода.

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

5. Первая задержка ввода (FID)

First Input Delay, то есть первая задержка ввода. Это промежуток времени между первым действием человека на странице (обращением к JavaScript-элементу, кликом по кнопке или ссылке) и моментом, когда на него появляется реакция со стороны браузера.

Высокий показатель FID говорит о низкой скорости загрузки сайта. Это означает, что человек долго ждет, пока появится искомая информация (нажал, к примеру, на «гамбургер», а меню разворачивается, мягко говоря, не сразу).

6. Время загрузки для взаимодействия (TTI)

Time to Interaction означает время загрузки для взаимодействия. Время от запроса страницы до того момента, когда она полностью прогрузилась.

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

Как проверить скорость загрузки сайта через Google Page Speed

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

Как это работает? Заходите на страницу Page Speed Insights (PSI), видите поле для ввода (оно одно), вносите туда домен, который вас интересует, запускаете процесс и ждете не больше минуты. Результат — обширнейшая сводка и важные рекомендации по оптимизации.

Скорость загрузки мобильной версии сайта будет отличаться от показателей для компьютера. Система учтет все проблемы и задержки в работе и выдаст показатель, максимальное значение которого может равняться 100. Если у вас результат 90, это круто, если 80 — тоже хорошо.

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

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

Собрав данные о вашем сайте, система тут же проводит сравнительный анализ с уже имеющейся в базе информацией. Если вы превзойдете по показателям 98 % других ресурсов, то ваша характеристика будет равна 100. И достигнет всего лишь 50, если вы переплюнете 75 % соперников. Тут все довольно относительно, зависит от количества быстро работающих веб-площадок в самой системе. Если их много, то ваш сайт необходимо непрерывно оптимизировать, чтобы иметь высокие характеристики.

Смысл в том, что показатели PSI очень важны и должны служить ориентиром. Они отражают параметры, по которым вас воспринимают и поисковик, и пользователь. И не переживайте особо, если получили оценку ниже 100: помните, что она носит сравнительный характер.

Большая ценность в работе сервиса Page Speed — это последующая выдача рекомендаций (их может быть очень много, и понятны они чаще лишь опытному веб-разработчику) для оптимизации скорости загрузки сайта. Вы получаете советы, короткую расшифровку действий и предполагаемую экономию временных затрат (в миллисекундах).

Какие-то из советов будут ясны даже новичку, к примеру изменить формат определенных элементов, удалить лишние виджеты или переадресации, сжать изображения (это может быть TinyPNG) и проч.

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

Именно на Google Page Speed так или иначе ориентируется подавляющее большинство веб-специалистов. Ведь это своеобразный эталон для тестирования скорости загрузки сайта, разработанный главным мировым поисковиком.

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

Опенсорсный программный комплекс Lighthouse имитирует загрузку страницы в PSI. Платить за тестирование не нужно.

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

10 быстрых сервисов проверки скорости загрузки сайта

1. GTmetrix

   Разработан в 2010 году в Канаде. Удобен в использовании, хорошо оформлен, интерфейс работает быстро. В отличие от Page Speed выполняет тестирование на максимальной скорости (как используемого устройства, так и канала сети). По запросам с территории России не работает, но снабжен полезным мощным функционалом, например посекундным отображением загрузки контента и WaterFall. Это дает возможность детально рассмотреть всю картину и принять меры для повышения скорости загрузки сайта.

2. WebPageTest

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

3. Pingdom Tools

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

   Но, как правило, еще в течение примерно 15 секунд продолжают грузиться различные динамические JS-события. В это время не получается плавно скроллить, работать с меню или ссылками на странице.

4. Loading.express

   Разработан в 2018 году отечественными специалистами IW.MEDIA. Большинство подобных инструментов делают замеры из США либо стран Европы, а Loading.express — отличный сервис для проверки скорости загрузки страниц сайтов для запросов именно из России.

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

5. Dotcom-Monitor

   Создан в 2014 году и работает из 25 стран мира. Не включает в результаты замеров кэш, при этом тестирует прокэшированную страницу. Выводит Page Speed.

6. Sitespeed.me

   Запущен в 2014, работает из семи стран, тестирует только быстродействие веб-платформы.

7. Dareboost

   Работает с 2014 г., родом из Франции. Хороший функционал, проверки из 14 стран. Дает оценку многим показателям, влияющим на скорость загрузки сайта. Работает с видеозагрузками. Используется модель WaterFall. После регистрации становится доступна функция сравнительного анализа нескольких сайтов и другие полезные инструменты, хотя большинство из них платные.

8. GiftOfSpeed

   Сделан в Нидерландах в 2015 году, позволяет узнать скорость загрузки сайта из 8 стран, в числе которых России нет. Включает в себя 16 сервисов, которые тестируют параметры, влияющие на быстродействие ресурса. Увеличивает этот показатель по вашей заявке.

9. Uptrends

   Также разработан в 2014 году в Нидерландах. Доступна бесплатная проверка с мобильных устройств и с десктопа. История — платная, перепроверка — автоматическая.

10. Site24×7

    Разработчик — индийская компания ZOHO, 2007 год. Включены точки замера в Москве и Санкт-Петербурге. Тестирует скорость первого отклика сервера, загрузки первого и последнего байта.

Как увеличить скорость загрузки сайта: 12 приемов оптимизации

Загрузка сайта одинаково предполагает участие в процессе и пользователя, и сервера, где непосредственно размещены файлы сайта.

Проблемы бывают следующими:

• из-за нехватки оперативной памяти или ядер в процессоре медленно работает сервер;

• у сайта медленный движок (CMS). Такое бывает, если программист в силу своей неопытности писал код, не принимая в расчет быстродействие;

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

• большой вес файлов.

Ниже описаны шаги, помогающие обойти перечисленные проблемы.

Шаг 1. Оптимизация картинок

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

Обратить внимание следует на следующие моменты:

• Высоту и ширину картинки. К примеру, ваше фото товара получилось по ширине равным 5000 пикселей. Это много, обычно хватает 1600, поэтому смело уменьшайте его. Больший размер необходим лишь для сайтов (как правило, это интернет-магазины), где есть функция лупы. Причем и там увеличенное изображение грузится лишь в тот момент, когда пользователь кликает на лупу.

• Вес картинок в килобайтах. Если вы использовали фотоаппарат, то всегда сжимайте изображение, прежде чем размещать его на сайте. Используйте тот же Фотошоп или что-то подобное. Либо онлайн-инструменты вроде Optimizilla или TinyPNG.

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

На сайте «Спортмастера», к примеру, есть изображения, выполненные в трех разных размерах:

• в списке товаров картинки имеют вес 7 Кб;

• в карточке товара — 18 Кб;

• для просмотра с помощью функции «лупа» — 942 Кб.

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

Тестирование через Google Page Speed сразу выдает перечень картинок, размер которых требует корректировки:

Шаг 2. Gzip-сжатие

Сервис Gzip работает по аналогии с zip-архивами в компьютере, то есть сжимает файлы. Как это влияет на скорость загрузки сайта? Если функция Gzip активирована, сервер перед отправкой заархивирует файлы со скриптами, стилями, прочими текстами. А распаковка произойдет уже на компьютере пользователя. В сжатом виде информация быстрее доходит от сервера к браузеру.

Запускать Gzip-сжатие можно по-разному.

При наличии доступа к htaccess в конце файла добавляете следующие строки:

Возможно, у вас Nginx, а не Apache (тут, конечно, нужно понимать, о чем речь) — тогда необходимо будет использовать файл конфигурации nginx.conf. Код вписывается в конце http {...}, и затем выполняется перезапуск:

Если нет возможности для самостоятельного подключения Gzip-сжатия (то есть нет доступа к htaccess или конфигурации сервера), то это сделает служба техподдержки хостинга, стоит лишь обратиться.

Сжатие подключено, если при запуске теста на скорость загрузки сайта (Page Speed) в блоке «Внедренные приемы оптимизации» появится такая запись:

Шаг 3. Кэширование на стороне браузера

При загрузке сайта какую-то часть информации, к примеру стили, скрипты, картинки, браузер сохраняет в своей собственной памяти (cache, кэш). Это дает возможность не запрашивать заново с сервера уже сохраненные сведения при повторном заходе на данную страницу или при отображении иных страниц этого же сайта. Ведь тогда будет снижаться скорость загрузки сайта. Инструменты для очистки памяти браузера — кнопка «Очистить кэш» (в настройках) либо совместное нажатие Ctrl + F5, которое обновляет страницу с очисткой кэша.

Предварительно необходимо задать браузеру перечень файлов для сохранения в кэше.

Если у вас htaccess, то кэширование статических файлов на 10 дней выполняется так:

Если Nginx, то к конфигурации приписываются следующие:

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

Так же, как и в случае с картинками, Google Page Speed выдаст перечень ресурсов, для которых хорошо было бы настроить сохранение кэша (если это еще не сделано):

Шаг 4. Минимизация css- и js-файлов

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

Вот, например, файл в обычной кодировке:

И вот минимизированная версия этого же файла:

.speedometer-wrapper{position:relative}.speedometer-wrapper .list{margin-top:80px;margin-left:-20px;padding-bottom:85px}

Скрипты и стили в наиболее часто используемых плагинах и библиотеках (типа jQuery, Bootstrap) представлены в уже сокращенных вариантах. Вот их сразу и берите на вооружение. К примеру, сжатый вариант скрипта jQuery весит 85 Кб вместо полных 265 Кб. Разница ощутимая.

Минимизация нарушает читабельность файла — это ее минус. Файл представляется в виде одной сплошной строки, и в него сложно при необходимости вносить корректировки. Проблему решают дополнительные к CMS плагины, которые уже перед самой загрузкой на сайт выполняют сжатие css- и js-файлов. А веб-специалисту остаются доступны для любых действий файлы в своих полных версиях.

Тут тоже Page Speed выдает перечень файлов, которые хорошо было бы минимизировать, увеличив тем самым скорость загрузки сайта:

Шаг 5. Порядок загрузки css- и js-файлов

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

Чтобы браузер использовал оптимальный порядок загрузки файлов, лучше всего в начале кода страницы (тег <head>) подключать файлы шрифтов и стилей (css), а в конце (перед тегом </body>) добавлять файлы скриптов (js).

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

Шаг 6. Лишние плагины или счетчики

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

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

Шаг 7. Использование CDN

CDN расшифровывается как «сеть доставки контента» (Content Delivery Network).

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

Пример: пользователь находится в Красноярске и делает запрос на CDN. Основной сервер может находиться и в Петербурге, но ответ придет с того сервера, который географически ближе всего расположен к пользователю. Это, кстати, может быть и в самом Красноярске. Согласитесь, что пересылка данных по маршруту Красноярск — Красноярск пройдет хоть на миллисекунды, но быстрее, чем по пути Красноярск — Петербург. Это может существенно поднять скорость загрузки сайта, если принять в расчет число файлов и их размеры.

CDN чаще всего применяется, если:

• речь идет о загрузке сторонних типов (вроде jQuery, Bootstrap, шрифтов WebFonts). Тогда можно настроить браузер таким образом, чтобы он грузил их с любых серверов CDN, Bootstrap, «Гугла» и прочих;

• загрузка скриптов и изображений происходит с самостоятельно настроенных CDN. Так делают крупные сайты вроде OZON, Avito и другие. Они могут использовать и собственные серверы, но чаще обращаются к сетям CDN, таким как Google Cloud, Stack Path. Есть такие CMS, функционал которых уже изначально имеет опцию поддержки CDN. Среди них — Битрикс с его бесплатным модулем «Ускорение сайта (СDN)».

Шаг 8. Сокращение числа http-запросов

По сути, чем меньше браузер выполняет http-запросов (обращений) к серверу, тем выше будет скорость загрузки сайта. Поэтому логичным ходом будет уменьшить число файлов, необходимых браузеру для работы. Например, объединить в один файл скрипты (если у вас их имеется три отдельных) для слайдера, всплывающих подсказок и модальных окон. А затем еще и минифицировать, как описано в шаге 4.

Лучше всего сразу настроить автоматическое слияние файлов с помощью собственных плагинов. Большинство CMS их имеют: это, к примеру, Autoptimize для WordPress. Вручную выполнять данную процедуру неудобно: проблематично будет потом вносить изменения в скрипты, если понадобится.

К снижению числа http-запросов приводят шаги 3 и 6, то есть настройка кэширования и удаление лишних скриптов соответственно.

Шаг 9. Оптимизация шрифтов

Идеальный вариант — один шрифт на всем сайте. Во-первых, это хорошо смотрится. А во-вторых, для отображения всех шрифтов понадобится загружать меньше файлов.

Откажитесь от устаревших шрифтов. Это уменьшит число используемых файлов, а значит, скорость загрузки сайта станет выше. Раньше для корректного отображения шрифтов браузеру нужны были форматы eot, ttf, woff, svg, а теперь достаточно лишь woff и woff2.

Загружайте популярные шрифты из Google Fonts. Там файлы со шрифтами представлены сразу в оптимизированном виде, плюс это несколько разгрузит ваш собственный сервер.

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Шаг 10. Сокращение HTML-кода

Минимизация HTML-кода самой страницы также доступна для настроек, стоит лишь найти подходящий для вашей CMS плагин. К примеру, для Joomla — это Html Minifier. Возможность сокращения HTML-кода важна, в частности, для длинных текстовых страниц со списками товаров, статей в блогах и т. д.

Шаг 11. Оптимизация работы сервера

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

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

Шаг 12. Оптимизация скриптов и баз данных

Загрузка запрашиваемого пользователем сайта состоит из ряда этапов, на одном из которых сервер генерирует итоговый HTML-код, предоставляемый затем браузеру. Генерацию выполняет движок сайта, то есть CMS. И если он неграмотно составлен, формирование страницы происходит медленно, выполняется много лишних запросов к базам данных и файлам, применяются устаревшие (не быстрые) алгоритмы и проч. Все это значительно снижает скорость загрузки сайта.

Поэтому старайтесь выбирать популярные, быстродействующие, хорошо зарекомендовавшие себя движки вроде Битрикс, OpenCart, WordPress, MODx. Учитывайте тот момент, что подобные системы постоянно претерпевают всевозможные доработки (и касательно скорости — тоже). Это означает, что CMS на вашем сайте тоже необходимо регулярно обновлять.

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

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Статья опубликована: 26.12.2019

Последние статьи этого автора:

• Адаптивная верстка сайта: гайд для начинающих
• Анкор ссылки: виды, правила составления, влияние на продвижение
• Белая раскрутка сайта без перехода на темную сторону

Забрать гарантированный подарок

Полезные
материалы
для руководителей

Скачать 3,2 MB