Основные методы увеличения скорости загрузки
Сайт может «тормозить» на реальном хостинге, даже если он относительно простой — например, выполняет функцию сайта-визитки.
Хостинг-провайдер предоставляет доступ и выделяет ресурсы под конкретного заказчика, исходя из тарифного плана, который ограничивает потребляемые ресурсы. При демонстрации созданного сайта проблемы с загрузкой обычно незаметны. Он отображается в локальной песочнице на ноутбуке, когда один сайт использует все ресурсы компьютера, или на демохостинге веб-студии, где нет такой интенсивности запросов и разделения ресурсов, как на обычных хостингах.
Чтобы увеличить скорость загрузки сайта, можно применить ряд эффективных методов. Вот основные рекомендации:
- Уменьшение количества HTTP-запросов.
Сократите количество элементов на странице, таких как изображения, скрипты и стили. Объединяйте CSS- и JavaScript-файлы, чтобы уменьшить количество запросов к серверу.
- Минификация файлов CSS и JS.
Удалите лишние пробелы, комментарии и ненужный код из файлов CSS и JavaScript. Это уменьшит их размер и ускорит загрузку. Для локальной демонстрации пара килобайт — это ничто, но для массовых запросов это и дисковая скорость, и сетевые накладные расходы, поэтому это тоже важно.
Например, популярное частное файловое облако Nextcloud автоматически объединяет и минифицирует большинство своих CSS- и JavaScript-файлов. Для проверки убедитесь, что включена минификация CSS и JS в конфигурации Nextcloud (config.php):
'asset-pipeline.enabled' => true,
'assetdirectory' => 'assets',
Это уменьшит размер файлов и сократит количество запросов.
- Использование кеширования.
Настройте кеширование для статических ресурсов (CSS, JS, изображения). Это позволит браузеру сохранять копии файлов, что ускорит повторные загрузки страниц.
Пример настройки кеширования статического контента, например изображений, CSS, JS, на веб-сервере, чтобы браузер не запрашивал эти файлы при каждом посещении:
Apache. В файле .htaccess или конфигурации добавьте:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
</IfModule>
Nginx. В конфигурации добавьте:
location ~* .(jpg|jpeg|png|gif|css|js)$ {
expires 1w;
}
Кеширование через OPCache и APCu позволяет хранить скомпилированные PHP-код и данные в памяти, сокращая запросы к диску и базе данных.
OPCache. Добавьте в php.ini:
opcache.enable=1
opcache.memory_consumption=128
opcache.interned_strings_buffer=8
opcache.max_accelerated_files=10000
Для работы APCu нужно установить модуль (если не установлен) для используемой версии PHP.
- Оптимизация изображений.
Сжимайте изображения без потери качества и используйте более легкие форматы (например, WebP). Это значительно уменьшит вес страниц. Это делается различными инструментами, такими как графические редакторы, конвертеры. Данные операции можно автоматизировать на этапе создания контента на рабочем месте разработчика сайта, контент-менеджера.
Помните про скорость дисков и пропускную способность сети: чем меньше файлы, тем быстрее они будут доставлены с сервера клиенту.
- Сжатие страниц.
Используйте Gzip-сжатие для уменьшения объема передаваемых данных. Это можно настроить на стороне сервера.
Ниже примеры для наиболее популярных веб-серверов.
Настройка Gzip на Apache
Убедитесь, что модуль mod_deflate включен:
sudo a2enmod deflate
Добавьте следующие строки в конфигурацию Apache (например, в /etc/apache2/apache2.conf или в файл вашего сайта, например /etc/apache2/sites-available/your-site.conf):
<IfModule mod_deflate.c>
# Включить сжатие для текстовых файлов
AddOutputFilterByType DEFLATE text/html text/plain text/xml
AddOutputFilterByType DEFLATE text/css text/javascript application/javascript
AddOutputFilterByType DEFLATE application/json application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml
AddOutputFilterByType DEFLATE application/font-woff application/font-woff2
# Отключить сжатие для старых браузеров
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
</IfModule>
Перезапустите Apache для применения изменений:
sudo systemctl restart apache2
Настройка Gzip на Nginx
Откройте конфигурационный файл Nginx (например, /etc/nginx/nginx.conf или файл конфигурации вашего сайта).
Добавьте или измените настройки Gzip, чтобы включить сжатие:
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss
text/javascript application/font-woff application/font-woff2;
gzip_comp_level 5; # Уровень сжатия (0–9)
gzip_min_length 256; # Минимальный размер файла для сжатия
gzip_proxied any; # Сжимать данные для всех запросов через прокси
gzip_vary on; # Добавить заголовок "Vary: Accept-Encoding"
Перезапустите Nginx:
sudo systemctl restart nginx
Проверка работы Gzip-сжатия
Чтобы проверить, что сервер передает сжатые данные, используйте curl:
curl -I -H "Accept-Encoding: gzip, deflate" https://example.com
В ответе должно быть что-то вроде Content-Encoding: gzip, что означает, что сжатие включено. Также можно проверить сжатие с помощью онлайн-инструментов, таких как GIDNetwork или Check Gzip Compression.
- Отложенная загрузка изображений.
Реализуйте «ленивую» загрузку (lazy loading) для изображений, чтобы они загружались только по мере необходимости, когда пользователь прокручивает страницу. Используйте это аккуратно, не всегда такой сценарий оправдан. Исходите из статистики пользовательского опыта на вашем сайте.
Например, Nextcloud уже использует эту технологию для просмотра видео непосредственно с сервера.
- Упрощение кода.
Оптимизируйте HTML-код, убирая лишние теги и атрибуты. Размещайте CSS в верхней части страницы, а JavaScript — внизу, чтобы сначала загружалось содержимое.
- Улучшение хостинга.
Если все вышеперечисленные методы не помогают, возможно, стоит рассмотреть смену хостинга на более производительный или переход на SSD-диски (лучше на NVME) для улучшения скорости.
- Версии программ.
Проверьте, чтобы были использованы необходимые версии программ, библиотек и плагинов на хостинге. Неправильный выбор версий и даже настроек программ может замедлить или даже сделать невозможным запуск вашего кода.
- Использование HTTP/2 или HTTP/3.
HTTP/2 и HTTP/3 позволяют передавать несколько файлов через одно соединение, что снижает количество отдельных запросов и ускоряет загрузку страниц. Настройка HTTP/2 или HTTP/3 зависит от используемого веб-сервера и конфигурации вашей системы.
Общие требования:
- SSL/TLS: HTTP/2 и HTTP/3 требуют SSL-сертификата, так как они работают только через HTTPS. Бесплатного letsecrypt вполне достаточно, поэтому это не так страшно.
- Совместимость: убедитесь, что ваш веб-сервер поддерживает HTTP/2 или HTTP/3. Последние версии Apache, Nginx поддерживают эти протоколы, но старые — не факт.
Ниже приведу пример настройки HTTP/2.
Apache
Убедитесь, что у вас установлена версия Apache 2.4.17 или выше, поддерживающая HTTP/2. Включите модуль HTTP/2:
sudo a2enmod http2
Откройте конфигурационный файл для вашего сайта (например, /etc/apache2/sites-available/your-site.conf) и добавьте Protocols h2 http/1.1 в секцию <VirtualHost>:
<VirtualHost *:443>
ServerName example.com
DocumentRoot /var/www/html
Protocols h2 http/1.1
SSLEngine On
SSLCertificateFile /path/to/cert.pem
SSLCertificateKeyFile /path/to/key.pem
</VirtualHost>
Перезапустите Apache:
sudo systemctl restart apache2
Nginx
Убедитесь, что у вас установлена версия Nginx 1.9.5 или выше.
В конфигурационном файле вашего сайта (например, /etc/nginx/sites-available/your-site) в директиве listen добавьте параметр http2:
server {
listen 443 ssl http2;
server_name example.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
root /var/www/html;
}
Перезапустите Nginx:
sudo systemctl restart nginx
Применение этих методов поможет значительно увеличить скорость загрузки вашего сайта, что положительно скажется на пользовательском опыте и SEO-рейтингах.
Дополнительные способы оптимизации
Кроме пунктов dsit, могут быть и другие подводные камни, замедляющие работу, особенно если это не просто сайт-визитка, а активно работающий сайт.
- Оптимизация серверного кода.
Убедитесь, что серверный код оптимизирован и не содержит избыточных запросов к базе данных или другим ресурсам. Также, если переходить к следующему пункту, убедитесь, что ваш код поддерживает распараллеливание задач. Код, который создан без возможности распараллеливания, может поставить крест на горизонтальном росте производительности.
То есть добавление зеркал никак не улучшит ситуацию при множественных параллельных запросов к сайту. Именно поэтому, если планируется рост, этот момент нельзя упускать из виду. При разработке сайта обязательно укажите подрядчику возможность параллельных вычислений, а при демонстрации обязательно создайте синтетическую нагрузку на нескольких узлах.
- Использование CDN.
Сетевые службы доставки контента (CDN) помогают ускорить загрузку за счет географического распределения серверов, что сокращает расстояние до пользователя. Но имейте в виду, что без оптимизации и поддержки параллельных вычислений использование зеркал не поможет побороть проблему, а даже может ее усугубить.
Например, если ваш одиночный сайт выполняет монопольный «длинный» запрос один — это только издержки скорости одного сайта, а использование зеркала добавит в очередь «медленные запросы», что визуально даже остановит ваш сервер. Это связано с тем, что база данных на одиночном сервере работает со скоростью дисковой подсистемы (а это может быть быстрый NVME) и всегда сильно быстрее, если база данных распределенная и работает по сети. То есть распределение нагрузки помогает, если логика работы его поддерживает.
- Распараллеливание.
Если логика работы движка не поддерживает распараллеливание в настоящий момент или алгоритм принципиально не поддерживает его (бывает и такое), то только вертикальный рост мощности может помочь решить задачу: более мощный процессор, много памяти, быстрые NVME на хостинге. Я умышленно не пишу цифры, так как в разных проектах они совершенно разные. Про параллельные зеркала на этом этапе лучше забыть — они в лучшем случае не дадут прироста, а в некоторых сценариях даже замедлят работу.
Проверьте, поддерживает ли ваш алгоритм работу с использованием видеокарт. При положительном ответе обязательно применяйте возможность использования GPU для своего кода на хостинге — это многократно ускорит те части кода, которые под него написаны. На этапе разработки сайта уточните это у подрядчика.
- Использование облачных баз данных.
Если интенсивность запросов небольшая, но одновременно с этим объем базы данных значительный, имеет смысл рассмотреть решения облачных баз данных. Например, CloudSQL от Google или Amazon. При выборе этих решений всю рутину, например, обслуживание, берет на себя облачный провайдер, а пользователь сервиса занимается только работой со своим приложением. Но не нужно думать, что это решит все вопросы с БД! Если ваше приложение использует очень интенсивный обмен с БД, то только локальное решение с использованием самых быстрых компонентов, таких как NVME и многоядерные процессоры последних поколений на выделенных серверах, может показать максимальную производительность для данного рода задач.
Это обусловлено неизбежными задержками на всех этапах — от движка программы до БД. Для сетевой БД это дополнительная задержка для каждого запроса, связанная с работой сети. Для редких запросов это не критично, но если приложение генерирует массу запросов, то задержка может быть существенна. Это надо учитывать при разработке ПО, чтобы по возможности перенести часть логики в БД и переложить вычисления на мощную инфраструктуру облачного провайдера.
Вышеописанные советы помогают понять направление действий, но конкретная проблема, как правило, уникальна и требует комплексной работы как со своим кодом, так и с инфраструктурой сайта.
