5 простых способов ускорить загрузку страниц вашего сайта

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

На HubSpot опубликовали статью о 5 простых способах ускорить сайт в эпоху требовательных пользователей. Ничего сверхсекретного, но советы полезные и действительно простые. Ниже – краткое содержание статьи.

Итак, как ускорить страницы:

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

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

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

Второй способ оптимизации – сжать изображения.

Для этого можно использовать специальные бесплатные сервисы типа tinypng.com, которые сжимают их без потери качества. Так вы сможете уменьшить размер изображений на 25-80%.

2. Включите кэширование браузера

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

Как долго будут храниться данные, зависит от настроек браузера пользователя и вашего сервера.

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

3. Включите сжатие

Сжать свой сайт – практически то же самое, что заархивировать его. Сжав его, вы сможете сэкономить время на загрузке 50-70% HTML и CSS файлов, а это тонны данных.

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

4. Оптимизация CSS

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

Что делать?

Во-первых, спросите себя: Использую ли я все CSS-файлы? Если нет, избавьтесь от лишнего кода в файлах.

Во-вторых, сведите размер CSS до минимума – для этого используйте возможности своей CMS либо, если такая возможность не предусмотрена (а в WordPress и Joomla она не предусмотрена), используйте бесплатный сервис типа csscompressor.com.

Просто скопируйте свой CSS и нажмите “Compress” (Сжать).

5. Размещайте JavaScript-файлы внизу страницы

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

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

Еще один метод – использовать атрибуты defer и async, размещая файлы JavaScript на сайте.

Важный момент – прежде чем использовать их, убедитесь, что понимаете разницу между ними:

  • Атрибут async подгружает скрипты раньше остального контента страницы, это значит, что скрипты могут быть загружены вне положенной очереди. Более лёгкие файлы подгружаются первыми. Это может быть хорошо для одних скриптов, но губительно для других.
  • Атрибут defer загружает ваши скрипты после того как подгрузится контент, также в определенном порядке. Убедитесь, что при такой очередности ваш сайт загружается корректно.

 

Например, вы можете взять стандартный скрипт:

<script type=”text/javascript” src=”/path/filename.js”></script>

И добавить немного кода, чтобы он подгружался тогда, когда вы хотите:

<script type=”text/javascript” src=”/path/filename.js” defer></script>
<script type=”text/javascript” src=”/path/filename.js” async></script>

 

Важность ваших скриптов будет определяться атрибутами, которые вы им присвоите, так, более важные скрипты получат атрибут async, менее важные – defer.

Всегда тестируйте все внесенные изменения, чтобы не сломать свой сайт.

Напоминание: Проверить скорость загрузки страниц можно с помощью сервиса Google PageSpeed Insights либо GTMetrics.

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



  • Vadym

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

  • Спасибо, Вадим! Рада, что информация пригодилась)

  • Геннадий

    спасибо за полезную информацию…

  • D.iK.iJ

    Спасибо за статью. Я еще бы добавил в список лишние пробелы (и табуляцию). На некоторых сайтах их сотни и тысячи как в коде, так и в CSS / скриптах. Да, думаю, предложенные сервисы компрессии это тоже умеют, но обратить внимание будет не лишним.

  • Андрей Даценко

    Хочу немного дополнить. Для оптимизации изображений многие файлы (элементы шаблона) можно сделать в формате SVG и подключать их как html. Так вы вообще откажетесь от большой части файлов.
    Сервисы типа pageSpeed не стоит воспринимать буквально. Некоторые рекомендации могут навредить сайту и выполнить все рекомендации для современного сайта не возможно.
    В статье не описан вопрос скорости html (время ответа сервера). Очень важный показатель, который влияет на позиции в поисковой выдаче.