Мы всегда стремились максимальной производительности наших сайтов пробуя различные технологии. Сегодня мы расскажем, как добились максимальной производительности сайта computy.ru на примере google-speed
Данная статья не большая, но следуя нашим советам будет достаточно, чтобы достичь максимальной 100 процентной эффективности. Один из принципов Компьюти — открытость. Поэтому мы с радостью делимся с вами полученными знаниями.
1. И так первое, что вы должны сделать – оптимизировать все изображения. Для сжатия изображений мы используем сайт https://tinypng.com/. Он сжимает как jpg так и png файлы.
2. Переместить файлы js и css в подвал сайта, но появится проблема – стили будут загружать в конце и первое время пользователям будет показываться поехавшая верстка.
Для этого вам нужно:
Выделить из своего большого файла CSS все правила, которые влияют на отображение первой 1000px страницы используя сервис — https://jonassebastianohlsson.com/criticalpathcssgenerator/ и разместить этот CSS в HTML-файле, разделе head, между тегами style. Обязательно вставлять именно код стилей, а не файл.
3. Прописать в файл .htaccess код для сжатия:
# сжатие text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
# кеш браузера
ExpiresActive On
#по умолчанию кеш в 5 секунд
ExpiresDefault "access plus 1 days"
# Включаем кэширование изображений и флэш на месяц
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/jpeg "access plus 4 weeks"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/gif "access plus 43829 minutes"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
# Включаем кэширование css, javascript и текстовых файлоф на одну неделю
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
# Включаем кэширование html и htm файлов на один день
ExpiresByType text/html "access plus 43200 seconds"
# Включаем кэширование xml файлов на десять минут
ExpiresByType application/xhtml+xml "access plus 600 seconds"
# Нестандартные шрифты сайта
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
4. По возможности сжать html страницы. Сжать css и js файлы используя средство типа https://ru.piliapp.com/minify/yui-compressor/
5. Прописать кэширование в шапке сайта:
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + mt_rand(2000, 432000)) . ' GMT');
Используя только эти советы, Вы добьётесь максимальной производительности на вашем сайте.
6. Установите максимальную версию PHP 7.x или 8
Обращаем внимание, что данные средства будут максимально полезны для статичных сайтов, для сайтов с CMS есть свои особенности. Спасибо за внимание.