В связи с большим количеством вопросов поступающих к нам на почту, а так же на форуме проекта, решил уделить время вопросу ускорения сайта и инструменту тестирования скорости PageSpeed Insights от Google.
Как же победить PageSpeed Insights и ускорить загрузку сайта?
- Сжать код в JavaScripts, для этого существуют специальные программы или сервисы типа: http://closure-compiler.appspot.com
2. Сжать код CSS файлов, так же есть онляйн сервисы: [url=http://csscompressor.com]http://csscompressor.com[/url]
[i]Варианты 1 и 2 можно реализовать вручную при помощи обычного редактора, удалив двойные пробелы и табуляторы, прописав весь код в одну строку.[/i]
3. Сократить размер графических файлов, можно воспользоваться программой для редактирования графики, в том же Photoshop такая возможность есть, при сохранении графики для Web выберите процент оптимизации/сокращения. Рекомендую сжатие не ниже 50%, как правило, этого достаточно для jpg, png форматов, в противном случае будет видимо ухудшение качества.
4. Наверное, самые важные параметры, которые от вас не зависят, это использование модов для сервера. Проконсультируйтесь у хостера, установлены ли у него модули Apache mod_deflate и mod_expires, есть альтернативы для Nginx.
Как вариант, можно проверить непосредственно в PHP, функция [color=teal]phpinfo();[/color]
Если установлены оба модуля, то в файл [color=green].htaccess[/color], находящийся в корне вашего сайта, нужно вставить в самом конце, следующий код:
# Deflate compression and expires by mime type
<IfModule mod_deflate.c>
<FilesMatch "\.(js|jpg|jpeg|gif|png|css)$">
ExpiresActive On
ExpiresDefault "access plus 1 month"
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>[i]Что они делают?[/i]
• mod_deflate - В данном случае, сжатию подвергаются все текстовые файлы, типа: js, jpg, jpeg, gif, png, css.
• mod_expires - Устанавливает время актуальности кэшированных данных (сроком на один месяц), в нашем случае на файлы типа: js, jpg, jpeg, gif, png, css.
Указанный выше метод является универсальным. Есть несколько других модов, позволяющих производить вышеуказанные манипуляции, это: mod_gzip, mod_pagespeed, mod_headers. В данной инструкции обсуждаться не будут в виду их не высокой популярности.
5. Можно перенести JavaScripts в низ сайта, оптимизация не значительная, но прибавит PageSpeed Insights один пункт. В SLAED CMS 6 Pro это возможность существует, настройка в конфигурациях системы.
6. Как рекомендует PageSpeed Insights, вынести содержание CSS и JavaScript файлов непосредственно в код страницы, вариант весьма спорный, так как, на мой взгляд, не соответствует современным стандартам. Но почему бы и нет, можно попробовать, даже если только в качестве эксперимента.
В качестве теста, на нашем проекте воспользовались только четвёртой рекомендацией, получили [color=green]«Зелёный 88/100»[/color] результат для варианта Desktop от [url=https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.slaed.net%2Findex.php%3Fname%3Dforum%26op%3Dview%26id%3D14662&tab=desktop]PageSpeed Insights[/url].
При соблюдении как минимум первых четырёх рекомендаций, подымите процент соответствия PageSpeed Insights как минимум до 90%. Которых достаточно для попадания в [color=green]«зелёную зону»[/color].
[i]Немного позже подготовлю более подробную статью по оптимизации сайтов под PageSpeed Insights от Google. Инструкция будет размещена в [url=http://www.slaed.net/index.php?name=pages]отделе документации системы[/url].[/i]
О сколько нам открытий чудных,
Готовит просвещенья дух,
И опыт, сын ошибок трудных,
И гений, парадоксов друг...
