В последнее время все чаще стали обращаться клиенты с вопросами по оптимизации сайта по Google PageSpeed Insights. То есть они заходят на этот сервис, вбивают адрес своего сайта и получают примерно такой результат:
?
На что влияет этот показатель и кому это вообще нужно? Официальная позиция гугла примерно такова: “ваши сайты должны работать быстро, и тогда мы их будем ранжировать чуть выше, возможно”. В общем, так или иначе, а сайты должны работать побыстрее. Если даже гугл и не будет ранжировать сайт выше, поведенческие факторы вашего сайта наверняка улучшатся, если сайт будет рузиться быстрее.
Сегодня я решил оптимизировать загрузку нашего сайта и добился вот такого результата:
?
Можно было бы конечно еще заморочиться с оптимизацией картинок и еще выиграть пару процентов, но не думаю что это того стоит, тем более что сам гугл говорит “Если страница набрала более 85 баллов, значит она загружается быстро”, то есть 95/100 — это более чем достаточно, тем более что у нас маленькая социальная сеть, а не небольшой корпоративный сайт.
Далее я хочу рассказать с какими основными моментами столкнулся и как их решал.
Для начала давайте приведу полный лог ошибок, на которые гугл очень жаловался.
?
То есть больше всего ему не нравились различные скрипты в шапке ( теге ).
Если коротко, то все их я перенес в подвал, но есть тут очень интересный момент: есть оснойно файл стилей styles.css, его я перекидывал даже в самый низ страницы, и все равно получал вот предупреждение.
?
Это меня особо умиляло, ведь он просил вынести именно из верхней части страницы. Вопрос: куда ниже?)))
В итоге, я сделал проще: в шаблоне в head прописал
<style> {fetch file="{$modx->config.base_path}{$template_url}bundle/styles/styles.css" assign=css} {$css|regex_replace:'/url\(([\'"]?)\.\.\/\.\.\//':"url($1{$template_url}"} </style>
То есть я сделал инклюд этого CSS-файла, загнал его в переменную, выполнил ему замену относительных УРЛов на абсолютные и как есть вывел в саму страницу. Вот такой вариант уже устроил гугл. При чем на конечном уже варианте разница между таким подходом и просто ссылкой на CSS довольно серьезная (-7%, если через ссылку):
?
Второе, на что он очень жаловался — отсутствие серверных заголовков expired (конец срока действия файла).
?
Без указания срока действия файла браузер каждый раз обращается к веб-серверу за этим файлом.
В nginx это лечится так:
В директиву server{ прописываем
location ~* \.(woff|css|js|png|jpg|jpeg|gif|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|tar|wav|bmp|rtf)$ {
access_log off;
expires 30d;
}
Вот пример серверных заголовков при отсутствии этой информации в FireBug
?
А вот это когда информация есть:
?
Здесь тоже был интересный казус: гугл ругается на свой же скрипт:
?
Вот как я смогу изменить время жизни этого файла на самом сервере гугла? :)
Кстати, примерно тоже самое он показывал и для скрипта яндекс-метрики, но его я смог просто проинклюдить в документ вместо функции создания js-ноды:
{file_get_contents('https://mc.yandex.ru/metrika/watch.js')|regex_replace:'/\[\[/':'[ ['}
Реплейсы здесь понадобились так как встречались в коде конструкции с двойными квадратными скобками, которые MODX вырезал и код бился.
Такой фокус с кодом гугла не проканал, так как гугл хочет быть именно в шапке head (во всяком случае сколько я его не пытался подключать, работать он хочет только там), и проинклюдив его код в шапку, я получил сообщение от гугла, что там кода слишком много уже, и понизил мне результат до 88%.
Следующая проблема — размер JS-файлов.
?
Это просто прогоняется через минификаторы и тогда гугл становится счастлив как ребенок :)
Еще гугл может жаловаться на отсутствие компрессии JS и CSS файлов. В nginx это решается так:
в директиву http{ прописывается:
## # Gzip Settings ## gzip on; gzip_disable "msie6"; # gzip_vary on; # gzip_proxied any; gzip_comp_level 6; # gzip_buffers 16 8k; # gzip_http_version 1.1; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
Вот, собственно, и все, что мне пришлось поправить. Буду надеяться гугл оценит мои труды)))
Результат офигенный!
Спасибо :)
Он будет просто следить за скоростью, или все-таки как-то что-то оптимизировать?
Будет всякое оптимизировать: пережимать картинки на лету, конвертить jpeg в webp (если браузер поддерживает webp), склеивать CSS и JS, преобразовывать маленькие изображения в inline (data:) и куча всякого.
Подробнее: developers.google.com/speed/pagespeed/module/config_filters
ОК. Спасибо за наводку! При случае попробую.
Спасибо за хороший урок оптимизации! ))
Как всегда пожалуйста!
В погоне за циферками как обычно страдают пользователи… Вот скажите пожалуйста — когда включали css в код страницы не возникало мыслей, что в отдельный файл его засовывают вот уже много лет не просто так?
Василий, вы хотите меня обвинить в том, что я не понимаю для чего CSS в отдельный файл пихают? Основам веб-разработки хотите научить меня? Идите гуглу объясняйте, может они вас выслушают и перепишут свои алгоритмы и не будут раздавать глупые советы. Но они вам скорее всего ответят что-то в духе «да, с отдельным файлом есть куча плюсов, включая возможность его компрессировать и т.п. Но понимаете, у нас сейчас подход используется 'Сначала контент, потом оформление'. Отдельный файл — это отдельное соединение на сервер, там проверка прав на чтение его, компрессия, отдача и т.п. Да, это должно быть мельчайшие доли-секунды, но что если не так? Что, если у вас веб-сервер затупил и задерживает с отдачей CSS-файла? И из-за него человек не может прочитать текст страницы, потому что браузер упорно пытается получить этот CSS-файл. Юзер будет в печали, и мы вместе с ним. А так, когда CSS встроен в страницу, мы точно знаем, что получая код страницы, пользователь и стили сразу получит. Все-таки скачать один большой файл это как правило не больше, чем несколько отдельных. Не зря же придумали минификаторы всякие и т.п.».
Я в свою очередь добавлю, что я не пишу стили изначально в странице, а подгружаю в него готовый файл. А этот файл, в свою очередь, собран галпом из кучи лесс-файлов, включая бутстрап и остальное, и в нем все пути к картинкам прописаны корректно. Выполнив простую замену относительных путей на абсолютные, я точно знаю, что все картинки будут найдены.
P.S. Подскажите, в чем вы конкретно пострадали? Сомневаюсь, что хоть кто-то из рядовых пользователей будет заглядывать в код моих страниц и потом весь день ходить в печали от увиденного.
А с сыы вопрос не в том, что гугл хочет видеть стили в коде страницы, вопрос в том, что хочет видеть не все. Достаточно в код страницы поместить стили, которые нужны для шапки сайта и эта часть теста пройдена.
По остальным пунктам:
— типа блокирующие js и css вынес за body; стили шапки — в код страниц. При этом обнаружилось, что на медленных соединениях видна страница без стилей, вроде мелочь, но некрасиво. Поэтому добавил в код стиль для body:before, который изображает белый фон с анимированным гифом для иллюстрации загрузки, а в css-файле стиль этот стиль убрал;
— кэширование и сжатие настроил как у тебя, только этот сайт на apache, но принцип тот же;
— картинки шаблона сжимал на сервисе tinyjpg.org, картинки пользователей сжимаются при загрузке плагином, который вызывает утилиту jpegtran.
Осталось замечание про кэш браузера для яндекс-метрики, но исправлять его переносом скрипта на сервер смысла не вижу. Мало ли в этом скрипте что-нибудь поменяется, и метрика будет работать некорректно — а это важнее, чем 3 сферических балла в вакууме. К тому же метрика-метрикой, а ведь еще могут быть яндекс-карты (там будет дополнительно ругаться на несжатые картинки), виджеты типа твоего живосайта и т.п.
Кстати, яндекс тоже сделал похожий сервис, в бета-версии веб-мастера. Но там пока без заморочек.
У меня про modxclub.ru показывает 75 и 80 баллов: dl.dropboxusercontent.com/u/41241876/modxclub.png
Для http и https разные настройки используются. Тест на https проводился. Поправил кеширование и для http joxi.ru/8AnXDv9ubbxZmO
Баллы упали до 91 из-за большой не оптимизированной картинке на главной.
Достаточно в код страницы поместить стили, которые нужны для шапки сайта и эта часть теста пройдена.
У нас все стили собираются галпом в единый файл. Заморачиваться с разбивкой это на два отдельных файла для шапки и не для него ради пары процентов — не интересно. К тому же не факт, что поможет, ибо как я показывал выше, гугл на него ругается даже в самом подвале.
— картинки шаблона сжимал на сервисе tinyjpg.org, картинки пользователей сжимаются при загрузке плагином, который вызывает утилиту jpegtran.
С сервисами и утилитами заморачиваться не перспективно лично для меня. Будем поиграться с озвученным выше developers.google.com/speed/pagespeed/module/build_ngx_pagespeed_from_source и если все ОК, включим его в нашу сборку сервера. Тогда этот момент будет автоматически закрыт.
Мало ли в этом скрипте что-нибудь поменяется, и метрика будет работать некорректно — а это важнее, чем 3 сферических балла в вакууме.
Файл подгружается с Яши, просто на уровне сервера и кешируется. Вряд ли вероятность нарваться на неактуальный неработающий вариант скрипты метрики в промежутки между сбросом кеша.
К тому же не факт, что поможет, ибо как я показывал выше, гугл на него ругается даже в самом подвале.
Уверен, поможет. Да и стилей там нужно от силы десяток, чтобы шапку нарисовать. А если вставить стили из файла в код полностью, то будет ругаться «Сократите html».
картинки шаблона сжимал на сервисе tinyjpg.org
картинки пользователей сжимаются при загрузке плагином, который вызывает утилиту jpegtran
Может есть готовый пример реализации в MODx?
Еще раз: смотрите эту картинку. Он просит из верхней части убрать ссылку на стили, которая находится в самом подвале страницы. Конечно здесь усматривается цепочка зависимостей, что если перехать как следует этот файл и он будет меньше, и тогда ругани на него будет меньше, но в текущий момент с ним есть проблема. Так что все пока так как есть.
Опять же если модулю PageSpeed указать:
pagespeed EnableFilters ...move_css_above_scripts,combine_css,combine_javascript,rewrite_css,rewrite_javascript,...;
Соберет все js в один-два (видимо, зависит от объема), поместит эти собранные js перед , соберет все CSS в один, поместит его над собранными JS (не в head, если нужно в head, уберите move_css_above_scripts).
pagespeed EnableFilters insert_ga,make_google_analytics_async;
Добавит асинхронный вызов GoogleAnalitics.
Подстановка ID:
pagespeed AnalyticsID ;
Вот это все круто. Спасибо! Будем экспериментировать.
Да не за что, я сам это почти случайно нарыл ~ в августе, поставил в своей «песочнице», полет вот уже больше 3 месяцев нормальный.
Все же tinyjpg.com — автор тот же, там и png и jpg сжимаются.
Плагин выглядит так:
<?php $e = &$modx->event; if (!function_exists('optimizeJPG')) { function optimizeJPG($file) { $ext = strtolower(end(explode('.', $file))); if ($ext == 'jpeg' || $ext == 'jpg') { $cmd = '/usr/bin/jpegtran -optimize -progressive -copy none -outfile '.escapeshellarg($file.'_').' '.escapeshellarg($file); exec($cmd, $result, $return_var); if (file_exists ($file.'_') && filesize($file) > filesize($file.'_')) { rename($file.'_',$file); } else { unlink($file.'_'); } } } } if ($e->name == "OnFileManagerUpload") { $msProperties = $source->get('properties'); $path = realpath(MODX_BASE_PATH.$msProperties['basePath']['value'].$directory); optimizeJPG($path.'/'.$files['file']['name']); }
Благодарю.
На днях буду прикручивать…
Там в пояснениях написано, что 14% верхней части страницы могут быть отображены без загрузки стилей — я об этом говорю. Тогда перестанет ругаться и не будет просить убрать ссылку из подвала.
Ладно, мы вероятно о разных вещах говорим и друг друга не понимаем. Проехали.
Спасибо! Полезно, нужно оптимизировать.
Не за что
Приветствую!
Классный результат!
Я тут тоже заморочился с пейджСпидом — все ок, но не знаю как бороться с «Удалите из верхней части Css ...»
У вас в примере
<style> {include "{$modx->config.base_path}{$template_url}bundle/styles/styles.css" assign=css} {$css|regex_replace:'/url\(([\'"]?)\.\.\/\.\.\//':"url($1{$template_url}"} </style>
Но у меня все на феном, а в примере, я так понял, что на смарти.
Не подскажете как сделать тоже самое, но только на феном?
Про синтаксис на феноме лучше на модх.про спросить, может Василий ответит.
В целом на счет инклюда стилей: все-таки скорее всего правильней заморочиться с тем, чтобы разделить стили на те, что в шапке будут подгружаться (минимальный набор и самое важное) и те, что в подвале. Суть просто в том, что когда стили в документ вшиты, они будут каждый раз с документом загружаться. При 100кбайт не особо проблема, но вот сейчас мы фронт вебпаком собираем, а он картинки кодирует и прям в стили вшивает, в итоге получается полметра и больше. Так вот, каждый раз лишние полметра тянуть — не круто. В когда стили по ссылке подгружаются и сервер правильно настроен, то они будут браузером из кеша браться. Вот смотрите как статика может отдаваться при правильной настройке сервера: joxi.ru/Y2LjLVESn8Mqjr
Парни, а у кого получилось вот этот пункт сделать
{file_get_contents('https://mc.yandex.ru/metrika/watch.js')|regex_replace:'/\[\[/':'[ ['}
У меня с десяток js скриптов со сторонних серверов, но когда вставляю вместо mc.yandex.ru/metrika/watch.js свои, например:
{file_get_contents('http://s7.addthis.com/js/300/addthis_widget.js')|regex_replace:'/\[\[/':'[ ['}
в чанки, то вместо кнопок от addthis в подвале у меня отображается просто
текст {file_get_contents('http://s7.addthis.com/js/300/addthis_widget.js')|regex_replace:'/\[\[/':'[ ['}
В чанках этот код не работает. Он работает в Smarty (смотрите инфу по odxSmarty). Или в сниппет загоняйте preg_replace().