В связи с большим количеством вопросов поступающих к нам на почту, а так же на форуме проекта, решил уделить время вопросу ускорения сайта и инструменту тестирования скорости PageSpeed Insights от Google.
Как же победить PageSpeed Insights и ускорить загрузку сайта?
1. Сжать код в JavaScripts, для этого существуют специальные программы или сервисы типа: http://closure-compiler.appspot.com
2. Сжать код CSS файлов, так же есть онляйн сервисы: http://csscompressor.com
Варианты 1 и 2 можно реализовать вручную при помощи обычного редактора, удалив двойные пробелы и табуляторы, прописав весь код в одну строку.
3. Сократить размер графических файлов, можно воспользоваться программой для редактирования графики, в том же Photoshop такая возможность есть, при сохранении графики для Web выберите процент оптимизации/сокращения. Рекомендую сжатие не ниже 50%, как правило, этого достаточно для jpg, png форматов, в противном случае будет видимо ухудшение качества.
4. Наверное, самые важные параметры, которые от вас не зависят, это использование модов для сервера. Проконсультируйтесь у хостера, установлены ли у него модули Apache mod_deflate и mod_expires, есть альтернативы для Nginx.
Как вариант, можно проверить непосредственно в PHP, функция phpinfo();
Если установлены оба модуля, то в файл .htaccess, находящийся в корне вашего сайта, нужно вставить в самом конце, следующий код:
Что они делают?
• 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 файлов непосредственно в код страницы, вариант весьма спорный, так как, на мой взгляд, не соответствует современным стандартам. Но почему бы и нет, можно попробовать, даже если только в качестве эксперимента.
В качестве теста, на нашем проекте воспользовались только четвёртой рекомендацией, получили «Зелёный 88/100» результат для варианта Desktop от PageSpeed Insights.
При соблюдении как минимум первых четырёх рекомендаций, подымите процент соответствия PageSpeed Insights как минимум до 90%. Которых достаточно для попадания в «зелёную зону».
Немного позже подготовлю более подробную статью по оптимизации сайтов под PageSpeed Insights от Google. Инструкция будет размещена в отделе документации системы.
Как же победить PageSpeed Insights и ускорить загрузку сайта?
1. Сжать код в JavaScripts, для этого существуют специальные программы или сервисы типа: http://closure-compiler.appspot.com
2. Сжать код CSS файлов, так же есть онляйн сервисы: http://csscompressor.com
Варианты 1 и 2 можно реализовать вручную при помощи обычного редактора, удалив двойные пробелы и табуляторы, прописав весь код в одну строку.
3. Сократить размер графических файлов, можно воспользоваться программой для редактирования графики, в том же Photoshop такая возможность есть, при сохранении графики для Web выберите процент оптимизации/сокращения. Рекомендую сжатие не ниже 50%, как правило, этого достаточно для jpg, png форматов, в противном случае будет видимо ухудшение качества.
4. Наверное, самые важные параметры, которые от вас не зависят, это использование модов для сервера. Проконсультируйтесь у хостера, установлены ли у него модули Apache mod_deflate и mod_expires, есть альтернативы для Nginx.
Как вариант, можно проверить непосредственно в PHP, функция phpinfo();
Если установлены оба модуля, то в файл .htaccess, находящийся в корне вашего сайта, нужно вставить в самом конце, следующий код:
# 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>
Что они делают?
• 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 файлов непосредственно в код страницы, вариант весьма спорный, так как, на мой взгляд, не соответствует современным стандартам. Но почему бы и нет, можно попробовать, даже если только в качестве эксперимента.
В качестве теста, на нашем проекте воспользовались только четвёртой рекомендацией, получили «Зелёный 88/100» результат для варианта Desktop от PageSpeed Insights.
При соблюдении как минимум первых четырёх рекомендаций, подымите процент соответствия PageSpeed Insights как минимум до 90%. Которых достаточно для попадания в «зелёную зону».
Немного позже подготовлю более подробную статью по оптимизации сайтов под PageSpeed Insights от Google. Инструкция будет размещена в отделе документации системы.
О сколько нам открытий чудных,
Готовит просвещенья дух,
И опыт, сын ошибок трудных,
И гений, парадоксов друг...
