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

Скорость работы сайта – величина, характеризующая время ожидания пользователя от клика по ссылке и наступления момента, когда он увидит на экране полностью загруженную страницу. Процесс обычно длится несколько секунд, но за этот период выполняется множество задач – отправленный на сервис запрос обрабатывается, происходит загрузка содержания и рендеринг страницы. Скорость на компьютерах и мобильных устройствах должна быть оптимальной, в противном случае пользователь покинет сайт. Более половины юзеров, если верить исследованию Google, не готовы ждать даже 5 секунд. Как следствие, поведенческие факторы медленных страниц снижаются, а вместе с ними и падают и позиции сайта в поисковой системе. Еще несколько лет назад представители Google называли скорость сайта одним из факторов влияния на ранжирование. Это неудивительно, поскольку поисковики давно борются за качество сайта, в том числе, и в технических аспектах.

Какая скорость считается оптимальной и на что влияет

Нужно стремиться к максимально высоким показателям, но нормальная скорость загрузки сайта – это время в пределах 3 секунд. Загрузка от 3 до 5 секунд считается удовлетворительной, но требующей улучшений. Если сайт загружает контент 6 секунд или дольше – это нельзя считать нормой.

От чего зависит (сервер, клиент)

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

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

Как проверить

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

• Page Speed Insights. Этот инструмент показывает скорость загрузки мобильной версии сайта и полных страниц, предназначенных для отображения на обычных компьютерах. Результат демонстрируется в баллах от 0 до 100. Кроме результата в числовом выражении, сервис приводит список фатальных ошибок и дает рекомендации по их исправлению.
• Site Speed. Сервис на русском языке показывает время загрузки и предлагает рекомендации для улучшения текущих проблем. Подробные отчеты сервис высылает на адреса электронной почты своим подписчикам.
• GTmetrix занимается анализом скорости загрузки страниц и также дает ценные рекомендации, позволяющие улучшить ситуацию. Этот сервис хранит историю выполненных тестов, благодаря чему есть возможность сравнивать результаты.
• Dotcom-Monitor. Этот сервис условно бесплатный, поскольку за использование некоторой части функционала придется заплатить. Здесь доступно измерение скорости из 25 точек планеты.
• Load Impact. Этот сервис проверяет сайт на готовность к средним нагрузкам. Десятки посещений и сотни активных соединений эмулируются, то есть моделируется ситуация, когда конкретный сайт находится в часе пик. Тест продолжается несколько минут, а после его окончания можно оценить график изменений скорости загрузки.
• Инструменты разработчика в браузере. Например, в Chrome окно разработчика запускается активацией клавиши F12. Нужно перейти в раздел Network и обновить страницу активацией F5. Здесь отобразится список загружаемых файлов, информация о времени загрузки отдельно взятых элементов.

Системы аналитики Яндекс Метрика и Google Analytics

Яндекс.Метрика наряду с Google Analytics – два мощных инструмента, анализирующие сайты и мобильные приложения, собирающие данные трафика, оценивающие поведение пользователей и помогающие владельцам веб-ресурсов эффективно выстраивать коммуникацию с аудиторией. В широком наборе функций этих сервисов предусмотрена и оценка скорости загрузки сайтов.

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

В отчете Google Analytics также есть карта, отображающая разную информацию в зависимости от региона. Под ней располагается таблица статистических данных по множеству параметров. В разделе «ускорение загрузки» указывается среднее время по URL и даются рекомендации Page Speed insights. Отчет «пользовательское время» рассказывает об эффективности кнопок, изображений и других отдельных ресурсов.

Как увеличить (основные способы со стороны серверной и клиентской части)

Следующие способы повышения скорости сайта доказали свою эффективность и рекомендованы многими экспертами:

1. Оптимизация картинок. Начать всегда лучше с них, поскольку эта часть считается самой «тяжелой». Обратить внимание следует на ширину и высоту картинок. Лучше сократить ширину до полутора тысяч пикселей, если на сайте нет возможности рассматривать картинку «лупой». Если картинка имеет большой объем, его также следует сжать перед тем, как загрузить на сервер. Сделать это можно практически в любом настольном фоторедакторе или онлайн-сервисе, наподобие Optimizilla. При наличии страницы со списком товаров, работ или чего-то еще, можно сделать их небольшие копии – превью. Это ускорит процесс загрузки.
2. Gzip-сжатие. Эта программа – аналог zip-архивов, но работает с файлами на сервере. Когда Gzip активирован, сервер сначала архивирует файлы, а затем отправляет их браузеру. Когда браузер получает архив, файлы распаковываются уже на пользовательском компьютере.
3. Кэширование на стороне браузера. После загрузки сайта браузер сохраняет часть полученной информации в своей памяти. Нужно это для того, чтобы он не делал повторных запросов. Накопленный кэш можно удалить в настройках или запустить команду сочетанием клавиш CTRL+F5.
4. Минификация файлов CSS и JS. Для браузера нет принципиальной разницы, поскольку функциональность сайта в результате минификации кода не изменится. Быстро оптимизировать CSS можно с помощью инструмента CSSmin или Pretty Diff. С кодом JavaScript успешно справятся Google Closure Compiler или Uglify JS.
5. Оптимизация загрузки страницы. Современные браузеры располагают умными алгоритмами загрузки страниц. Они вычисляют, какие файлы проще и быстрее загрузить в первую очередь. Но иногда алгоритм срабатывает некорректно, и процесс замедляется. Чтобы оптимизировать загрузку, нужно файлы стилей подключить в начале кода страницы, а файлы скриптов – в ее конце. Если все сделать правильно, браузер быстрее загрузит стили, нужные для отрисовки, а скрипты будут загружаться параллельно.
6. Удаление «мусора» из кода страницы. Часто коды страниц содержат множество ссылок на модули или плагины, которые использовались временно и теперь не нужны. Их следует убрать из кода.
7. Использование CDN. В данном способе ускорения сайта речь идет об отдельной сети доставки контента. Смысл CDN в том, чтобы продублировать контент с основного сервера и передать его пользователю. География CDN широка, поэтому пользователь получает данные на несколько миллисекунд быстрее.
8. Сокращение числа обращений к серверу со стороны браузера. Это может получиться, если объем необходимых браузеру файлов также будет сокращен. К примеру, разработчики в этих целях объединяют несколько скриптов в один.
9. Использование одного и того же шрифта на всех страницах сайта. Таким образом, сократится объем загрузки файлов, служащих для отображения этих шрифтов. Некоторые шрифты загружаются с Google Fonts, что также избавит сервер от лишней работы. Если страницы сайта длинные, стоит подумать о минимизации HTML-кода.
10. Изменение формата изображений. Формат картинок WebP, созданный Google, существенно сокращает их размер без потери качества. Конкурентов у WebP множество, практически ничто не может сравниться с ним в уровне эффективности. Картинка сжимается примерно на 30 процентов, сохраняя место на диске и увеличивая производительность сервера.
11. Ленивая загрузка (Lazy Load). Плагины Lazy Load изменяют алгоритм загрузки картинок. Первый этап загрузки игнорируется до момента, когда наступит этап №2. Иными словами, изображение не будет отображаться, если пользователь в нем не нуждается.
12. Наращивание ресурсов хостинга. Поддержка хостера обычно предлагает подключить веб-сервер для ускорения передачи статических файлов, настроить файловый кэш, присоединить акселераторы PHP. Также стоит попробовать увеличить скорость дисковой системы и CPU и отказаться от использования сторонних ресурсов.
13. Серверное кэширование. Системы кэширования добавлены в языки программирования, веб-серверы и системы руководства сайтами. Если нужно задействовать значительные ресурсы для того, чтобы собрать страницу, результат иногда отправляется в кэш и обновляется. За счет кэширования сокращается время отдачи страницы. Этот способ снимает нагрузку с сервера в пиковые часы.

Наконец, сам движок играет не последнюю роль во влиянии на скорость сайта. CMS, написанные с ошибками, долго формируют страницу и генерируют итоговый HTML-код. Чтобы не столкнуться с этой проблемой, нужно выбирать CMS, хорошо зарекомендовавшие себя в сети. Разобраться с тем, как увеличить скорость загрузки сайта Wordpress, Modx, Битрикс и других известных систем гораздо проще, так как у разработчиков накопилось достаточно практического опыта.

Краткий вывод

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

• Первый – конкуренция. Владелец бизнеса гарантировано проиграет борьбу за посетителя, если не позаботится о том, как ускорить загрузку сайта и опередить конкурентов.
• Второй – высокие позиции в результатах поиска. И Google, и Яндекс неоднократно сообщали о том, что скорость тесно связана с позициями сайта в рейтинге.
• Третий – лояльность покупателей. Сколько бы денег не было вложено в рекламную кампанию, трафик посетителей сильно разочарует, если сайт грузится медленно. Даже заинтересованные в предложении люди не совершат активных действий, поскольку просто не захотят ждать.

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