: Автор: Vyacheslav; Опубликовано: 25 октября 2023; 25 октября 2023; 21 февраля 2026

Как повысить скорость загрузки сайта

Увеличение скорости загрузки сайта — это один из способов улучшить поведенческие факторы, юзабилити сайта, и в итоге конверсию. По данным Google (исследование SOASTA) — скорость загрузки сайта влияет на конверсию. Оптимальное время загрузки страницы должно составлять менее 2,2 секунды.

Согласно данному источнику, загрузка страницы менее 100 миллисекунд дает пользователю ощущение моментальной загрузки. Исследования показывают, что около 40% посетителей отказываются от сайта, если он загружается более 3 секунд. При превышении времени загрузки контента на 2 секунды показатель отказов увеличивается на 30%.

Первым делом необходимо измерить скорость загрузки, для этих целей подойдут такие инструменты, как: Google PageSpeed insights, Pingdom Tools и GTmetrix.

Пример интерфейса сервиса GTmetrix

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

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

Кэширование

Кэширование — это способ оптимизации при котором медленные SQL-запросы заменяются статическим HTML-кодом. Код сохраняется на определенный период времени (час, день, неделя или другой), после чего он очищается и начинается генерация нового файла.

Используем кэш браузера

Для современных веб-сайтов, использующих большое количество JavaScript и CSS, кеширование становится очень важным. Когда посетитель впервые заходит на ваш сайт, браузер загружает все файлы JavaScript и CSS, а также графические файлы и шрифты. Однако, правильная настройка HTTP-заголовка Expires позволяет закешировать эти файлы. В результате, при повторном посещении сайта или переходе на другую страницу, эти файлы уже будут находиться в кэше браузера, и их загрузка не потребуется.

Таким образом, выигрывается в скорости загрузки сайта. Поэтому, рекомендуется выставлять HTTP-заголовок Expires везде, где это актуально. Для настройки веб сервера Apache, необходимо добавить в файл .htaccess, следующие строки:

<IfModule mod_expires.c>
Header append Cache-Control "public"
FileETag MTime Size
ExpiresActive On
ExpiresDefault "access plus 0 minutes"
ExpiresByType image/ico "access plus 1 years"
ExpiresByType text/css "access plus 1 years"
ExpiresByType text/javascript "access plus 1 years"
ExpiresByType image/gif "access plus 1 years"
ExpiresByType image/jpg "access plus 1 years"
ExpiresByType image/jpeg "access plus 1 years"
ExpiresByType image/bmp "access plus 1 years"
ExpiresByType image/png "access plus 1 years"
</IfModule>

Данный код проверяет наличие модуля mod_expires и, если модуль доступен, включает отдачу HTTP-заголовков Expires. Эти заголовки устанавливают срок хранения объектов, перечисленных выше, в кэше браузеров и прокси-серверов на протяжении одного года с момента первой загрузки. Установка такого срока кэша браузера может создать проблему с обновлением файлов. Поэтому, если вы внесли изменения в файл CSS или JavaScript и хотите, чтобы эти изменения отобразились в кэше браузера, вам необходимо изменить имя самого файла, например: styles.v1.css.

Кэширование внешних JS

Как правило у большинства на сайтах стоят коды Яндекс.Метрика и Google Analytics, метод также подходит для Google Tag Manager, чатов типа JivoSite и так далее. Для ускорения загрузки внешние js файлы нужно как-то закешировать. Так как кеширование возможно только на стороне хостинга, пишем скрипт, который будет копировать файлы на хостинг в фоновом режиме используя планировщик заданий Cron.

Создаем на хостинге в корневой директории папку с названием js и устанавливаем атрибуты 755. В корневой директории создаем файл copyexjs.php в кодировке utf-8 и пишем скрипт. Внизу скрипта указываем URL адреса внешних js файлов, затем папку куда копировать, в нашем случае это папка js, и имя файла с расширением. В адресе Google Tag Manager меняем UA-XXXXXXXX-X на персональный идентификатор.

<?php
function downloadJs($file_url, $save_to)
{
$arrContextOptions=array(
"ssl"=>array(
"verify_peer"=>false,
"verify_peer_name"=>false,
),
); 
$content = file_get_contents($file_url, false, stream_context_create($arrContextOptions));
file_put_contents($save_to, $content);
}
 
downloadJs('https://mc.yandex.ru/metrika/watch.js', realpath("./js") . '/watch.js');
downloadJs('https://www.google-analytics.com/analytics.js', realpath("./js") . '/analytics.js');
downloadJs('https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X', realpath("./js") . '/gtag.js');
?>

Попробуйте запустить этот файл с адресной строки, по адресу ваш_сайт/js/copyexjs.php. При удачном копировании файлов, осталось только автоматизировать процесс. Для этого заходим на хостинг, ищем в панели планировщик заданий Cron и создаем задачу.

/usr/bin/wget --output-document=/dev/null ваш_сайт/js/copyexjs.php >/dev/null 2>&1

Планировщик каждый час будет запускать скрипт, который скопирует или обновит внешние файлы скриптов в папку js в фоновом режиме.

Использование сжатия Gzip

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

Для включения Gzip-сжатия на сайте необходимо в файл .htaccess добавить следующие строки кода:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
</IfModule>

Если вышеуказанный метод не сработал, есть такой вариант кода:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain 
text/xml application/xml application/xhtml+xml 
text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
<ifmodule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$ 
</ifmodule>
</IfModule>

Проверить страницу на наличие Gzip сжатия можно здесь.

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

Оптимизация кода, JS и CSS

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

Старайтесь избегать написания в HTML прямого инлайн CSS и JS кода. Тогда браузеры смогут кэшировать эти файлы, что сократит время загрузки. Рекомендуем минифицировать JS и CSS файлы, с использованием библиотек, таких как: JSMIN, YUI Compressor и Packer.

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

При загрузке и отображении страницы сайта, происходит несколько групп запросов к серверу. Браузер одновременно может загружать разные типы HTML документа, изображения, CSS и JS файлы. Чем больше используется таких запросов, тем выше объем передаваемых данных, и информации в заголовках запросов. Нижеприведенные методы помогут минимизировать обращения к серверу, что приведет к увеличению скорости загрузки страницы.

Элементы интерфейса добавляем, как inline-изображения в CSS таблицы.
Объединение SVG изображений в один файл.
Объединение всех CSS и JS в отдельные файлы.

Сжатие изображений

Существует несколько инструментов для сжатия изображений, таких как TinyPNG, Kraken и JPEGmini. Также рекомендуется конвертировать изображения в формат WebP. По данным Google, такие изображения на 26% легче PNG-файлов и на 25-34% меньше JPEG-картинок.

Проверить какие браузеры поддерживают формат WebP, можно здесь.

Для активации конвертации необходимо добавить следующий код в файл .htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

Ленивая загрузка изображений

Ленивая загрузка (LazyLoad) — это отсроченная загрузка изображений. Благодаря этой технологии изображения загружаются только тогда, когда они нужны пользователям. Атрибут loading предоставляет возможность браузеру отложить загрузку содержимого элементов <img> и <iframe>, которые находятся за пределами видимой области страницы, до тех пор, пока пользователь не приблизится достаточно близко к этим элементам при прокрутке страницы. Этот атрибут имеет три значения:

lazy — добавление этого атрибута, указывает что будет использоваться ленивая загрузка.
eager — указывает что материалы в элементе должны быть загружены немедленно.
auto — браузер сам принимает решение о том, следует ли использовать ленивую загрузку, или нет.

<img src="photo.jpg" loading="lazy">

Если явно не указать значение атрибута loading, по умолчанию будет auto.

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

Для того чтобы избежать обычной загрузки изображений в браузерах, которые не поддерживают данный атрибут, в разметке нужно использовать конструкцию (а не src, srcset или ). Чтобы изменять такие атрибуты на соответствующие при поддержке атрибута loading, или загружать библиотеку LazySizes, если этот атрибут не поддерживается, можно воспользоваться JavaScript.

<!--Изображения в видимой части загружаем как обычно -->
<img src="logo.jpg" alt=".."/>

<!--К остальным изображениям применяем ленивую загрузку -->
<img data-src="photo-mouse.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src=" photo-cat.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src=" photo-dog.jpg" loading="lazy" alt=".." class="lazyload"/>

<script>
(async () => {
    if ('loading' in HTMLImageElement.prototype) {
        const images = document.querySelectorAll("img.lazyload");
        images.forEach(img => {
            img.src = img.dataset.src;
        });
    } else {
        // Динамически импортируем библиотеку LazySizes
        const lazySizesLib = await import('/lazysizes.min.js');
        // Инициализируем LazySizes (читаем data-src & class=lazyload)
        lazySizes.init(); // lazySizes применяется при обработке изображений, находящихся на странице.
    }
})();
</script>

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

Для изображений, которые не должны быть видны пользователям сразу после загрузки страницы, используется атрибут data-src. Это предотвращает их обычную загрузку в браузерах, которые не поддерживают атрибут loading. Если браузер поддерживает этот атрибут, изменяем data-src на src.

При условии, что браузер не поддерживает loading, загружаем и инициализируем библиотеку LazySizes. Тут мы будем использовать class=lazyload, чтобы указать библиотеке LazySizes, с какими изображениям применить методику ленивой загрузки.

Поддомены для параллельной загрузки

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

Использование CDN

Еще один способ снижения задержек - использование сетей доставки контента (CDN). Эти сети состоят из серверов в разных точках мира. При подключении сайта к сети, сервера создают копии файлов веб-ресурса, а затем предоставляют данные пользователю с ближайшего сервера, что увеличивает скорость загрузки. Из популярных решений есть Cloudflare, на сервисе присутствует бесплатный тариф. Также есть ряд коммерческих решений, которые без труда вы можете найти в интернете.

Используем связку Nginx + Apache

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

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

Назад в блог статей