В последнее время все чаще стали обращаться клиенты с вопросами по оптимизации сайта по 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;

Вот, собственно, и все, что мне пришлось поправить. Буду надеяться гугл оценит мои труды)))

Не за что

Благодарю.
 Вот я невнимательный…

Добрый день.
 
Не за что!
 
На самой странице редактирования статьи нет управления картинкой. Картинка редактируется в управлении статьями, двойным кликом по первой колонке. joxi.ru/xAeGldOh0OWOmy
 Там есть ряд тонкостей, почему сделано именно так (потому как редакторы открывают несколько вкладок и редактируют в разных местах, перетирая данные статьи).

Доброго дня.
 Во-первых, Спасибо огромное за Вашу разработку NewsModxBox! 
 У меня возникли некие трудности, залил вашу готовую сборку. В статьях не могу добавить превью-картинку, думаю это потому, что в редакторе статьи отсутствует пункт «дополнительные поля»
 
Еще в самом низу редактора находится такая строчка:
 /home/domains/mysite/core/components/migx/elements/tv/input/
 
Скажите пожалуйста в чём может быть проблема? 
 

А каких подробностей вы хотите? =)