Google PageSpeed Insights оптимизация сайта
В последнее время все чаще стали обращаться клиенты с вопросами по оптимизации сайта по 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; Вот, собственно, и все, что мне пришлось поправить. Буду надеяться гугл оценит мои труды)))
Спасибо :)
А есть еще developers.google.com/speed/pagespeed/module/build_ngx_pagespeed_from_source
Он будет просто следить за скоростью, или все-таки как-то что-то оптимизировать?
Будет всякое оптимизировать: пережимать картинки на лету, конвертить jpeg в webp (если браузер поддерживает webp), склеивать CSS и JS, преобразовывать маленькие изображения в inline (data:) и куча всякого. Подробнее: developers.google.com/speed/pagespeed/module/config_filters
ОК. Спасибо за наводку! При случае попробую.
Спасибо за хороший урок оптимизации! ))
Как всегда пожалуйста!
В погоне за циферками как обычно страдают пользователи… Вот скажите пожалуйста — когда включали css в код страницы не возникало мыслей, что в отдельный файл его засовывают вот уже много лет не просто так?
Василий, вы хотите меня обвинить в том, что я не понимаю для чего CSS в отдельный файл пихают? Основам веб-разработки хотите научить меня? Идите гуглу объясняйте, может они вас выслушают и перепишут свои алгоритмы и не будут раздавать глупые советы. Но они вам скорее всего ответят что-то в духе «да, с отдельным файлом есть куча плюсов, включая возможность его компрессировать и т.п. Но понимаете, у нас сейчас подход используется 'Сначала контент, потом оформление'. Отдельный файл — это отдельное соединение на сервер, там проверка прав на чтение его, компрессия, отдача и т.п. Да, это должно быть мельчайшие доли-секунды, но что если не так? Что, если у вас веб-сервер затупил и задерживает с отдачей CSS-файла? И из-за него человек не может прочитать текст страницы, потому что браузер упорно пытается получить этот CSS-файл. Юзер будет в печали, и мы вместе с ним. А так, когда CSS встроен в страницу, мы точно знаем, что получая код страницы, пользователь и стили сразу получит. Все-таки скачать один большой файл это как правило не больше, чем несколько отдельных. Не зря же придумали минификаторы всякие и т.п.». Я в свою очередь добавлю, что я не пишу стили изначально в странице, а подгружаю в него готовый файл. А этот файл, в свою очередь, собран галпом из кучи лесс-файлов, включая бутстрап и остальное, и в нем все пути к картинкам прописаны корректно. Выполнив простую замену относительных путей на абсолютные, я точно знаю, что все картинки будут найдены. P.S. Подскажите, в чем вы конкретно пострадали? Сомневаюсь, что хоть кто-то из рядовых пользователей будет заглядывать в код моих страниц и потом весь день ходить в печали от увиденного.
У меня про modxclub.ru показывает 75 и 80 баллов: dl.dropboxusercontent.com/u/41241876/modxclub.png А с сыы вопрос не в том, что гугл хочет видеть стили в коде страницы, вопрос в том, что хочет видеть не все. Достаточно в код страницы поместить стили, которые нужны для шапки сайта и эта часть теста пройдена. Ну и поделюсь своим опытом (97 и 98 баллов): dl.dropboxusercontent.com/u/41241876/97-98.png По остальным пунктам: — типа блокирующие 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 Смени домен на: tinypng.com/ Спасибо, отличная утилита. Помогает! картинки пользователей сжимаются при загрузке плагином, который вызывает утилиту 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().