Ускорение загрузки сайта

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

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



Почему сайт медленно загружается?

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

  • выбор CMS (системы управления сайтом),
  • множество лишних файлов (js, css и так далее), используемых в шаблоне сайта,
  • неправильные настройки сервера,
  • неоптимизированные изображения и шрифты.

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

Сайт медленно загружается

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

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

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

Самый быстрый сайт

Самый быстрый сайт - это один html файл, без CMS, внутри которого нет ничего, кроме текста. Но продаж вам такой сайт скорее всего не принесёт. Вывод: нужно найти компромиссный вариант, который позволит сайту без ущерба контенту и функциональности загружаться быстро.



Влияние CMS на скорость загрузки сайта

Две самые популярные в России CMS системы по умолчанию имеют определенные проблемы с оптимизацией скорости загрузки. Я говорю про Wordpress и 1С Битрикс. Разработки в первоначальный комплект поставки хотят внедрить побольше функциональности. Проблема в том, что в 99% случаев вы не будете её использовать.

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

Много лишних файлов 1С Битрикс

Всё лишнее нужно найти и обезвредить (отключить). Любой программист сможет это сделать, так как ничего сложного в этом нет.

К сожалению, если речь идёт об 1С Битрикс, то проблема не только в лишних файлах, но и в общей медлительности движка этой CMS. В целом, я не рекомендую использовать 1С Битрикс. Платная CMS, которая несёт с собой множество проблем, которых нет в бесплатных CMS - это нонсенс.

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



Оптимизация количества запросов к серверу

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

Очередь запросов при загрузке страницы

Поэтому ненужные файлы отключаем, а нужные объединяем. Например, достаточно просто объединить ccs файлы, которые отвечают за внешний вид вашего сайта, в один. Желательно не просто их объединить, но их сжать содержимое. Можно сделать это с помощью плагинов для CMS или онлайн-сервисов, например, CSS Compressor.

Сжатие CSS

С javascript файлам аналогичная ситуация. Но есть несколько особенностей. По возможности, переносим их загрузку в конец кода страницы. Используем асинхронную загрузку (дописываем async к строке подключения скрипта). Сжимать и объединять js файлы можно также, как и css файлы.

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

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

Оптимизированный сайт

Переход на протокол HTTP/2 сглаживает ситуацию с количество запросов, но далеко не все виртуальные хостинги его поддерживают. Также нужно будет приобрести SSL-сертификат, чтобы перейти от HTTP/1.1 к HTTP/2.



Оптимальные настройки сервера

Во-первых, нужно включить сжатие файлов Gzip. Обычно, это просто галочка в настройках хостинга. Картинка весила 50 кб, а станет весить 40 кб. Всё просто. Тем не менее, до сих пор я встречаю сайты, где не используется сжатие.

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

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

Уровень сложности настройки кэширования файлов аналогичен включению сжатия Gzip. Ниже пример настройки на хостинге Locum.ru.

Включение сжатия Gzip и кэширования файлов



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

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

Изображения должны быть загружены в том разрешении, в котором они отображаются на сайте. Иногда можно увидеть крошечный логотип, который оказывается PNG файлом 2000х500 пикселей, размером 1 мегабайт. 1 мегабайт - это размер всех файлов одной полноценной веб-страницы. Этот логотип должен весить в 50 раз меньше.

После разрешения картинок стоит задуматься об их сжатии. Тут простое решение: сжимать можно до тех пор, пока качество сжатой картинки вас устраивает. Не нужно переусердствовать - размытые картинки также плохо повлияют на конверсию, как медленная загрузка. Могу порекомендовать бесплатный сервис tinyjpg.com.

Сжатие картинок

Если вы хотите перейти на следующий этап эффективности сжатия изображения, то представляю вам современный формат от Гугл - Webp. По моим оценкам, он эффективнее JPEG'а примерно на 30-40%. Когда речь идёт о десятке картинок, но можно говорить о дополнительной экономии сотен килобайт.

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

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

<picture>

<source type="image/webp" srcset="assets/images/rocket.webp">

<source type="image/png" srcset="assets/images/rocket.png">

<img src="assets/images/rocket.webp" alt="Пример" width="60" height="60">

</picture>

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

После объединения иконок в спрайты нужно обновить код сайта. Теперь нужно будет указывать не ссылку к иконке, а координаты этой иконки внутри спрайта. На самом деле, переход к спрайтам достаточно простой. Есть множество сервисов, например, CSS Sprites Generator.

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

Объединение картинок в спрайт



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

Шрифты занимают меньше места, чем изображения. Да и количество загружаемых файлов трудно сравнить. Тем менее, можно сэкономить 5-10 запросов и пару сотен килобайт, если загрузить именно те шрифты и символы, которые вы используете.

Звучит достаточно логично, да. Неужели бывает по-другому? Конечно. Например, популярный сервис Google Fontsпо умолчанию даёт ссылку на подключение не только кириллического шрифта, но и вообще всех. То есть получается, что вы используете около 100 символов, а загружается 3000.

Подключение шрифтов с помощью Google Fonts

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

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

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

Кириллица Google Fonts

Чтобы выбирать конкретные символы нужны ссылки на конкретные файлы шрифтов. Google предоставляет шрифты в формате WOFF2. Ссылку на файлы можно получить, если просто вставить в адресную строку браузера тот код, который Google даёт для подключения шрифта.

Выбираем нужные файлы, выбираем нужные символы. Диапазоны конкретных символов можно подобрать с помощью сервиса unicode-table.com. Ниже пример подключения шрифтов на текущем сайте dergunov.com.

@font-face {font-family:'Roboto';font-style:normal;font-weight:400;font-display:auto;

src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');

unicode-range: U+0020-007F,U+0410-044F,U+0401,U+0451,U+2116}

@font-face {font-family:'Roboto';font-style normal;font-weight:700;font-display:auto;

src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');

unicode-range: U+0020-007F,U+0410-044F,U+0401,U+0451,U+2116}

@font-face {font-family:'Roboto';font-style:normal;font-weight:700;font-display:auto;

src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');

unicode-range: U+0020-007F}


Чем проверять скорость загрузки сайта?

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

Оптимизация скорости загрузки с помощью GT Metrix

Единственный параметр, на который не стоит обращать внимания в GT Metrix - это скорость загрузки в секундах. Дело в том, что GT Metrix проверяет эту скорость, загружая ваш сайт со своего сервера в Лондоне. Эта скорость очень теоретическая.

А реальную скорость загрузки страниц можно посмотреть в Яндекс.Метрике: Отчёты -> Мониторинг -> Время загрузки страниц. Снимаем все галочки внизу и ставим только одну "Итого и средние". А в самой таблице рекомендую 3 самых интересных отчёта: время до отрисовки (сколько ждут ваши посетители пока на экране начнёт появляться хоть какая-то информация), время до загрузки DOM (грубо говоря, полное время загрузки страницы) и ответ сервера (у хороших хостингов и сайтов оно в пределах 0,2 сек).

Покажу вам пример оптимизации скорости загрузки сайта perevozki33.ru. Я выполнил все вышеуказанные работы и среднее время загрузки снизилось с 6 до 3.5 секунд.

Заказать оптимизацию скорости загрузки сайта

Хотите, чтобы у вас был быстрый сайт? Пишите на a@dergunov.com, буду рад вам помочь.

Автор: Александр Дергунов. Опубликовано: 2019-04-08T00:00:00.000Z