Зачем нужна оптимизация загрузки сайта

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

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

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

Какая должна быть скорость загрузки?

Медленные сайты – одни убытки. Поэтому с этим нужно как-то бороться. Но как? И, главное, какие существуют стандарты скорости? Что считать оптимальным, а что должно насторожить?

Есть одно простое правило: чем быстрее, тем лучше. Но оптимально – на загрузку страницы должно уходить не более трех секунд:

• 1 секунда – отличный результат;
• 2-3 секунды – хорошо;
• 4-7 секунд – допустимо, хотя может быть и лучше;
• 8-10 секунд – нужно что-то делать, плохо;
• 11 секунд и более – сигнал для тревоги, ужасно, вы теряете огромные финансы ежедневно

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

Вполне логичен вопрос: зачем что-то менять, если даже топовые порталы так долго загружаются. Ответом являются статистические данные:

• Страницу, которая загружается более трех секунд, покинут, как минимум, 57% посетителей;
  75% процентов покупателей уходят на сайты конкурентов лишь по причине медленной работы ресурса из-за повышенного уровня трафика;
• Даже наиболее терпеливый посетитель не будет ждать более двух секунд на то, чтобы появилась информация на экране;
• Сравним два сайта с загрузкой 2 и 3 секунды. Более быстрый, как показывает практика, имеет на 22% больше просмотров и аналогично больше конверсии. При этом отказы составят менее 50%. И это, учитывая отличие, всего в одну секунду! Что говорить о тех порталах, которые загружаются 5 секунд и более? Здесь показатели совсем не радуют: отказов вдвое больше, конверсия меньше на 38%, а просмотров – на 35%.
• 8% пользователей основной причиной ухода с сайта называют медленную загрузку его страниц.

Скорость загрузки сайта VS хорошая конверсия

Как это происходит на практике? Рассмотрим простой пример. На медленный сайт заходит робот. Он долго ждет, пока загрузится страница и затем уходит, получив никакого результата. Робот делает вывод, что на странице отсутствует контент. Итогом является понижения ресурса в выдаче.

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

О многом говорит статистика:

• Исследования компании Aberdeen показали, что количество просмотров страниц сайтов уменьшается на 11% при задержке загрузки на 1 секунду. Одновременно увеличивается объем неудовлетворенности аудитории (16%) и коэффициент конверсии – 7%.
• Компании Shopzilla удалось повысить конверсию на 12%, увеличив скорость работы своего веб-ресурса всего на 5 секунд.
• Еще одна компания Mozilla смогла увеличить на 15,4% количество загрузок, уменьшив время, требуемое для загрузки посадочных страниц. В итоге удалось получить 60млн дополнительных загрузок.

Что примечательно, фирмой Sharpe Digital был разработан калькулятор, функционал которого рассчитывает показатели, сколько компания смогла бы заработать при более быстрой скорости работы сайта.

От каких факторов зависит скорость загрузки сайта

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

• Сервер может быть медленным по причине нехватки ядер в процессоре или же оперативной памяти – все, как и у обычного ПК;
• CSM сайта (движок) медленный, так как написан без учета быстродействия неопытным программистом;
• Сервер расположен на большом расстоянии от пользователя (пример: сервер расположен в Москве, пользователь заходит из Владивостока).
• Страницы содержат слишком много файлов (стилей, шрифтов, изображений, стилей) – все это необходимо загрузить браузеру для отображения страницы;
• Очень много тяжелых файлов

Сервисы, где можно проверить скорость загрузки страниц сайта

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

Google PageSpeed Insights

Ресурс доступен по ссылке.

Анализатор очень простой и удобный. Для того чтобы мгновенно оценить клиентскую оптимизацию, достаточно адресной строчке ввести URL интересующего ресурса и кликнуть на «Анализировать».

Что примечательно: ресурс не только идентифицирует скорость, но и то, настолько портал оптимизирован для мобильных устройств ПК. При этом быстродействие определяется посредством функционала двух метрик: DCL и FCP (низкий уровень – сигнал о проблемах с соединением или размером используемых ресурсов).

Анализатор позволяет посмотреть скорость сайта, проанализировать качество оптимизации, а также определить наличие проблемных зон. Ресурс не только констатирует проблемы, но и дает полезные советы, как улучшить ситуацию. Более подробно про данный инструмент я писал в статье — оптимизация PageSpeed Insights до 100 очков.

Gtmetrix.com

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

В пользовании Gtmetrix простой. При переходе на страницу ресурса необходимо ввести в адресную строку URL интересующего сайта и кликнуть на «Analyze».

Pingdom.com

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

Поскольку сервис сохраняет информацию о проверках, можно посмотреть за историей производительности.

Webpagetest.org

Webpagetest – фундаментальный сервис, функционал которого позволяет проанализировать и оценить загрузку страницы на разных этапах. Кроме типичных оценок анализатор позволяет посмотреть, как на разных скоростях происходит загрузка страницы на видео.

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

Реальные шаги, как ускорить сайт

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

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

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

Оптимизируя изображения, обращаем внимание на:

• Размер (ширина 5000 пикселей не требуется, достаточно – не более 1600. Исключение составят интернет-магазины, где предусмотрено рассмотрение товаров с помощью «лупы»);
• Вес в килобайтах (сжимайте перед выкладкой на сайт фото, используя для таких целей Фотошоп, онлайн-сервисы, к примеру, Optimizilla или TinyPNG, любой другой редактор изображений, в котором нравится работать);
• Превью (добавьте на сайт уменьшенные фото, превью, в таком случае каталог будет загружаться быстрее)

Смотрите, при подготовки этой статьи делал скринсшоты, исходная картинка — 428KБ и оптимизированная — 35КБ. Разница очевидна.

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

А так же прочитайте статью про оптимизацию изображений.

Gzip

Gzip – специальная программа, аналог zip-архивов на ПК, для сжатия на сервере файлов. Принцип работы следующий: перед тем, как отправлять код страницы, скрипты и другую текстовую информацию браузеру, эти файлы архивируются. Браузер получает архив, который распаковывает на компьютере пользователя. Информация в таком виде передается быстрее.

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

Включить Gzip можно такими способами:

• Добавив в файл htaccess строку

  

• Если такого доступа нет, обратитесь к хостеру.

Если у вас Nginx, а не Apache, то потребуется файл конфигурации nginx.conf. В секцию http {...} дописываем код, затем сервер перезапускаем

Так же прочитайте мою статью «Как включить gzip сжатие на сервере и сайте».

Кэширование

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

Как указать браузеру, какие именно файлы с сайта нужно сохранять в кэш? Для этих целей можно использовать разные способы:

• На 10 дней кэшируем статические файлы через файл Htaccess;
  Для Nginx в конфигурацию добавляем:
  
• Если нет доступа к настройкам сервера, обращаемся к хостеру с просьбой настроить кэширование статистических файлов.

Важно: настроить кэширование можно только для своих собственных ресурсов. Для скриптов Яндекс.Метрики, к примеру, поменять настройки кэша уже не получится.

Минимизация файлов js и сss

Минимизацию осуществляют за счет сокращения объема файлов. Вариантов в данном случае может быть несколько:

• Удаление пустых строк, пробелов и комментариев;
• Использование более коротких имен переменных

Обратите внимание: браузеру не важно с каким лучше работать файлом – минимизированным или обычным, хотя первый и весит меньше.

Пример обычного и минимизированного кода:

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

Но в минимизации есть и свои минусы. Главным является то, что читабельность файлов теряется.

Порядок загрузки файлов js и сss

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

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

Ненужные счетчики и плагины

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

CDN – сеть доставки контента

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

• Сторонних скриптов;
• Изображений и скриптов из собственных CDN

Подробнее читайте в статье что такое CDN

Уменьшение числа http-запросов

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

Вручную объединять файлы неудобно. Лучше настроить автоматическое слияния. Для этого используют специальные плагины. К примеру, для WordPress – Autoptimize.

Оптимизация шрифтов

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

Сокращение HTML-кода

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

Оптимизация сервера

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

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

Во время загрузки сайта сервер генерирует итоговый HTML-код, который затем передает браузеру. Если движок неграмотно написан, он будет «собирать» достаточно долго страницу, делая при этом ненужные запросы к базе данных и файлам.

Как это исправить? При выборе платформы для сайта используйте популярных движки (WordPress, MODx, Битрикс). Они зарекомендовали себя как надежные и быстрые. Но не забывайте периодически обновлять такие CMS, учитывая нововведения разработчиков.

Выводы

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

Какой именно способ (или сразу несколько) выберет вы – зависит от разных факторов. Но без таких изменений достичь финансовой прибыльностью ресурса не получится.