+7(982) 597-7179

Как оптимизировать статичный сайт в Google PageSpeed до 100%

1 мин. на прочтение

Как оптимизировать статичный сайт в Google PageSpeed до 100%

Мы всегда стремились максимальной производительности наших сайтов пробуя различные технологии. Сегодня мы расскажем, как добились максимальной производительности сайта 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');

 

Используя только эти советы, Вы добьётесь максимальной производительности на вашем сайте.

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


Читайте также:

Приглашаем поучавствовать в обсуждении статьи:

Комментариев 0

Войти через: