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

Мы живем в эпоху высоких скоростей. Это справедливо по отношению ко всему и потреблению информации, в том числе. Скорость загрузки любого сайта или web-сервиса имеет очень важное значение.

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

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

Давайте рассмотрим их подробнее.

1. Оптимизируйте загрузку скриптов и CSS-стилей

JavaScript/jQuery используются практически на любом современном сайте, так как с их помощью удобно реализовать интерактивные элементы и динамический контент. Но когда браузер загружает страницу для отображения в ответ на запрос пользователя, он должен полностью загрузить все такие скрипты, что может замедлять работу, если их слишком много или они неправильно реализованы (render-blocking Java Script).

Есть несколько вариантов решения:

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

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

2. Используйте сеть CDN

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

Одним из наиболее известных поставщиков такой услуги является Cloudflare. Тарифы стартуют от 5 долларов, в зависимости от поставщика.

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

3. Включите кэширование сайта

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

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

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

4. Оптимизируйте размер изображений

Большой объем неоптимизированных изображений как правило является основной причиной медленной загрузки страниц сайта. Одна и та же картинка может весить как 300 килобайт, так и 130, причем визуально пользователь не заметит разницы. А теперь представьте себе, что таких картинок на сайте десятки, сотни и даже тысячи.

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

Также можно обрабатывать изображения при помощи графических редакторов или специальных онлайн-сервисов для оптимизации, таких как Iloveimg.com или TinyPNG.com.

5. Проведите ревизию плагинов и компонентов

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

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

Вариантов решения проблемы несколько:

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

Второй вариант может потребовать определенных разовых затрат, но в будущем все равно окупиться.

6. Оптимизируйте базу данных и код

Загрузка скриптов, файлов стилей и других элементов происходит через запросы к серверу или базе данных. Чем больше таких запросов и перенаправлений, тем больше времени потребуется для полной загрузки страницы. GTmetrix.com отображает это значение по результатам проверки:

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

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

7. Проанализируйте дизайн и компоновку страниц

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

Несколько примеров из практики:

• лендинги на 5-6 экранов, перегруженные графикой и прочими элементами;
• завешанная графическими баннерами страница СМИ;
• результаты поиска или сортировки фильтрами без ограничения по количеству элементов;
• посадочные страницы услуг, на которых попытались внедрить все 100500 советов по оптимизации конверсии и т. д.

Толку с такой красоты и «информативности» будет мало, если посетитель просто не дождется ее загрузки.

8. Проверьте производительность сервера и движка

Иногда проблема не в самом сайте, а в месте его размещения. Первое, что происходит, когда пользователь вводит url в браузере – отправка запроса на сервер, чтобы получить информацию и данные. Если производительность сервера низкая, независимо от качества оптимизации остальных вещей, ответ всегда будет медленным. Google PageSpeed Insights показывает время ответа сервера во время проверки.

Аналогичная ситуация и с географическим расположением серверного оборудования. Если сервер находится в России, а пользователь запрашивает данные из США, обмен данными потребует времени.

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

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

Рекомендации мы перечислили, но как узнать скорость загрузки страниц своего сайта, и понять в норме она или требуется дополнительная оптимизация?

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

• Google PageSpeed Insights
• GTmetrix
• Pingdom Tools.

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

Выводы

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

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

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

Если есть вопросы – пишите в комментариях!