Google PageSpeed Insights 100/100

Недавно решил оптимизировать один из своих сайтов под Google PageSpeed Insights. Конечно, хочется максимального результата 100/100, но не все так просто. Далее расскажу как добиться такого результата.

Для начала нужно настроить сжатие данных на сервере. Мне известно 2 типа gzip и deflate. На сервере по-умолчанию доступно только сжатие gzip, его я и применил — в панели управления сервером ISPmanager 5 Lite включил для домена кэширование. Если у вас используется Apache, пишите в файле .htaccess следующий код:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component

<FilesMatch "\.(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Если  у вас используется FastCGI (Apache), пишите в файле настроек ngnix следующий код:

Server {
        gzip on;
        gzip_comp_level 9;
        gzip_types text/plain text/css application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp;
        gzip_vary on;
}

 

Далее настроим кэширование браузера. Если у вас используется Apache или FastCGI (Apache), пишите в файле .htaccess следующий код:

FileETag MTime Size
<ifmodule mod_expires.c>
    <filesmatch ".(jpg|jpeg|gif|png|ico|css|js|woff|svg|ttf|eot|woff2)$">
        ExpiresActive on
        ExpiresDefault "access plus 1 year"
    </filesmatch>
</ifmodule>

<IfModule mod_setenvif.c>
    BrowserMatch "MSIE" force-no-vary
    BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
    BrowserMatch "Mozilla/5.[0-9]{2}" force-no-vary
</IfModule>

Есть интересный момент с подключением Яндекс Метрики и Google Analytics. Их javascript подгружается с сервера Яндекса и Google соответственно. И поэтому кэш браузера на этот код, настроенный на нашем сервере не распространяется. Эту проблему я решил следующим способом: код, подгружаемый с удаленного сервера сохранил в файл на своем сервере и с помощью Cron обновляю его раз в сутки (если будут изменения, статистика посещаемости не сломается).

Весь javascript — код нужно перенести в нижнюю часть страницы, чтобы не было сообщение «блокирующий javascript». Css и javascript обязательно минифицируем. Изображений на том сайте нет, поэтому их оптимизация мне не потребовалась.

Google рекомендует переносить подключение css — файлов в низ страницы.  Я же вставил css сразу после тега body в тег <style></style>

При использовании всех вышеперечисленных методов и переносе css-стилей в body я получил 100/100 баллов.

 

Снимок экрана 2016-02-24 в 9.39.54
image-201

Снимок экрана 2016-02-24 в 9.40.02
image-202

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code