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

Проверьте скорость загрузки страниц при помощи сервиса GTmetrix, анализ покажет какие моменты требуют оптимизации. По итогу удалось добиться скорости загрузки 0.5 сек.

Проверка скорости загрузки сайта по GTmetrix

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

На загрузку изображений как правило уходит много времени. Чтобы оптимизировать изображения для сайта без потери качества используйте TinyPNG. Онлайн сервис оптимизирует форматы: JPG и PNG. Для векторных изображений лучше использовать SVG формат, при этом изображения загружается, не создавая дополнительные запросы.

Используйте оригинальный размер изображений, миниатюры делайте отдельными файлами. Не маштабируйте изображения (serve scaled images) при помощи 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 на персональный идентификатор.

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 в фоновом режиме.

Оптимизируйте JS и CSS

В сокращенных файлах удаляются комментарии и незначащие пробелы, переносы строк и символы табуляции. Воспользуйтесь онлайн сервисом типа CSS Compressor, для JS используйте JSCompress.

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

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

Настройка кеша и Gzip

Для хостинга на Linux используют связку Nginx и Apache. На стороне сервера включите использование заголовков: mod_expires и mod_headers. Для этого обратитесь в службу поддержки хостинга или внесите изменения на сервере самостоятельно.

Откройте файл конфигурации /etc/nginx/nginx.conf и добавьте в блок «server» для сайта строки:

  gzip_static on;
  gzip on;
  gzip_comp_level 5;
  gzip_types application/x-javascript application/javascript text/css image/jpeg image/png;

В gzip_types через пробел укажите mime-типы файлов, которые будут сжиматься перед отдачей пользователю.

В файле .htaccess добавьте строки:

 <IfModule mod_expires.c>
  ExpiresActive  On
  ExpiresDefault  "access 7 days"
  ExpiresByType  application/javascript "access plus 1 year"
  ExpiresByType  text/javascript "access plus 1 year"
  ExpiresByType  text/css "access plus 1 year"
  ExpiresByType  text/html "access plus 7 day"
  ExpiresByType  text/x-javascript "access 1 year"
  ExpiresByType  image/gif "access plus 1 year"
  ExpiresByType  image/jpeg "access plus 1 year"
  ExpiresByType  image/png "access plus 1 year"
  ExpiresByType  image/jpg "access plus 1 year"
  ExpiresByType  image/x-icon "access 1 year"
  ExpiresByType  application/x-shockwave-flash "access 1 year"
  </IfModule>
  
<ifModule  mod_headers.c>
  <filesMatch  "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
  Header set  Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch  "\.(css|js)$">
  Header set  Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch  "\.(xml|txt)$">
  Header set  Cache-Control "max-age=172800, public, must-revalidate"
  </filesMatch>
  <filesMatch  "\.(html|htm|php)$">
  Header set  Cache-Control "max-age=172800, private, must-revalidate"
  </filesMatch>
  </ifModule>
  
<IfModule  mod_deflate.c>
       # html, xml, css, and js:
       AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
  application/x-javascript text/javascript application/javascript  application/json 
     # webfonts and svg:
       <FilesMatch "\.(ttf|otf|eot|svg)$" >
           SetOutputFilter DEFLATE
      </FilesMatch>
  </IfModule>

В административной панели Joomla 3 выставите настройки, как указано на изображении.

Нажмите на изображение для его увеличения

Плавная загрузка изображений Lazy Load

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

Полезная информация