Fi1osof 22 ноября 2015 2 29
В последнее время все чаще стали обращаться клиенты с вопросами по оптимизации сайта по Google PageSpeed Insights. То есть они заходят на этот сервис, вбивают адрес своего сайта и получают примерно такой результат:



Подробней об этом сервисе читайте на официальной странице гугла.

На что влияет этот показатель и кому это вообще нужно? Официальная позиция гугла примерно такова: “ваши сайты должны работать быстро, и тогда мы их будем ранжировать чуть выше, возможно”. В общем, так или иначе, а сайты должны работать побыстрее. Если даже гугл и не будет ранжировать сайт выше, поведенческие факторы вашего сайта наверняка улучшатся, если сайт будет рузиться быстрее.

Сегодня я решил оптимизировать загрузку нашего сайта и добился вот такого результата:



Можно было бы конечно еще заморочиться с оптимизацией картинок и еще выиграть пару процентов, но не думаю что это того стоит, тем более что сам гугл говорит “Если страница набрала более 85 баллов, значит она загружается быстро”, то есть 95/100 — это более чем достаточно, тем более что у нас маленькая социальная сеть, а не небольшой корпоративный сайт.

Далее я хочу рассказать с какими основными моментами столкнулся и как их решал.

Для начала давайте приведу полный лог ошибок, на которые гугл очень жаловался.



То есть больше всего ему не нравились различные скрипты в шапке ( теге ).
Если коротко, то все их я перенес в подвал, но есть тут очень интересный момент: есть оснойно файл стилей styles.css, его я перекидывал даже в самый низ страницы, и все равно получал вот предупреждение.



Это меня особо умиляло, ведь он просил вынести именно из верхней части страницы. Вопрос: куда ниже?)))

В итоге, я сделал проще: в шаблоне в head прописал

{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;


Вот, собственно, и все, что мне пришлось поправить. Буду надеяться гугл оценит мои труды)))
29 комментариев
R
Roylhash 22 ноября 2015г в 02:47 #
Результат офигенный!
Fi1osof1
Fi1osof 22 ноября 2015г в 02:56 #
Спасибо :)
Fi1osof1
Fi1osof 22 ноября 2015г в 11:35 #
Он будет просто следить за скоростью, или все-таки как-то что-то оптимизировать?
vbatushev1
vbatushev 22 ноября 2015г в 11:40 #
Будет всякое оптимизировать: пережимать картинки на лету, конвертить jpeg в webp (если браузер поддерживает webp), склеивать CSS и JS, преобразовывать маленькие изображения в inline (data:) и куча всякого.
Подробнее: developers.google.com/speed/pagespeed/module/config_filters
Fi1osof1
Fi1osof 22 ноября 2015г в 15:34 #
ОК. Спасибо за наводку! При случае попробую.
gsnx1
gsnx 22 ноября 2015г в 21:01 #
Спасибо за хороший урок оптимизации! ))
Fi1osof1
Fi1osof 22 ноября 2015г в 21:38 #
Как всегда пожалуйста!
В
Василий Краковецкий 23 ноября 2015г в 01:08 #
В погоне за циферками как обычно страдают пользователи… Вот скажите пожалуйста — когда включали css в код страницы не возникало мыслей, что в отдельный файл его засовывают вот уже много лет не просто так?
Fi1osof1
Fi1osof 23 ноября 2015г в 07:50 #
Василий, вы хотите меня обвинить в том, что я не понимаю для чего CSS в отдельный файл пихают? Основам веб-разработки хотите научить меня? Идите гуглу объясняйте, может они вас выслушают и перепишут свои алгоритмы и не будут раздавать глупые советы. Но они вам скорее всего ответят что-то в духе «да, с отдельным файлом есть куча плюсов, включая возможность его компрессировать и т.п. Но понимаете, у нас сейчас подход используется 'Сначала контент, потом оформление'. Отдельный файл — это отдельное соединение на сервер, там проверка прав на чтение его, компрессия, отдача и т.п. Да, это должно быть мельчайшие доли-секунды, но что если не так? Что, если у вас веб-сервер затупил и задерживает с отдачей CSS-файла? И из-за него человек не может прочитать текст страницы, потому что браузер упорно пытается получить этот CSS-файл. Юзер будет в печали, и мы вместе с ним. А так, когда CSS встроен в страницу, мы точно знаем, что получая код страницы, пользователь и стили сразу получит. Все-таки скачать один большой файл это как правило не больше, чем несколько отдельных. Не зря же придумали минификаторы всякие и т.п.».

Я в свою очередь добавлю, что я не пишу стили изначально в странице, а подгружаю в него готовый файл. А этот файл, в свою очередь, собран галпом из кучи лесс-файлов, включая бутстрап и остальное, и в нем все пути к картинкам прописаны корректно. Выполнив простую замену относительных путей на абсолютные, я точно знаю, что все картинки будут найдены.

P.S. Подскажите, в чем вы конкретно пострадали? Сомневаюсь, что хоть кто-то из рядовых пользователей будет заглядывать в код моих страниц и потом весь день ходить в печали от увиденного.
Pathologic1
Pathologic 23 ноября 2015г в 11:48 #
У меня про 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 сферических балла в вакууме. К тому же метрика-метрикой, а ведь еще могут быть яндекс-карты (там будет дополнительно ругаться на несжатые картинки), виджеты типа твоего живосайта и т.п.
Fi1osof1
Fi1osof 23 ноября 2015г в 12:05 #
У меня про 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 сферических балла в вакууме.
Файл подгружается с Яши, просто на уровне сервера и кешируется. Вряд ли вероятность нарваться на неактуальный неработающий вариант скрипты метрики в промежутки между сбросом кеша.
Pathologic1
Pathologic 23 ноября 2015г в 12:54 #
К тому же не факт, что поможет, ибо как я показывал выше, гугл на него ругается даже в самом подвале.

Уверен, поможет. Да и стилей там нужно от силы десяток, чтобы шапку нарисовать. А если вставить стили из файла в код полностью, то будет ругаться «Сократите html».
Fi1osof1
Fi1osof 23 ноября 2015г в 13:19 #
Еще раз: смотрите эту картинку. Он просит из верхней части убрать ссылку на стили, которая находится в самом подвале страницы. Конечно здесь усматривается цепочка зависимостей, что если перехать как следует этот файл и он будет меньше, и тогда ругани на него будет меньше, но в текущий момент с ним есть проблема. Так что все пока так как есть.
vbatushev1
vbatushev 23 ноября 2015г в 14:16 #
Опять же если модулю 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 ;
Fi1osof1
Fi1osof 23 ноября 2015г в 14:23 #
Вот это все круто. Спасибо! Будем экспериментировать.
vbatushev1
vbatushev 23 ноября 2015г в 14:27 #
Да не за что, я сам это почти случайно нарыл ~ в августе, поставил в своей «песочнице», полет вот уже больше 3 месяцев нормальный.
Pathologic1
Pathologic 23 ноября 2015г в 15:08 #
Там в пояснениях написано, что 14% верхней части страницы могут быть отображены без загрузки стилей — я об этом говорю. Тогда перестанет ругаться и не будет просить убрать ссылку из подвала.
Fi1osof1
Fi1osof 23 ноября 2015г в 15:10 #
Ладно, мы вероятно о разных вещах говорим и друг друга не понимаем. Проехали.
R
Roylhash 23 ноября 2015г в 13:08 #
картинки шаблона сжимал на сервисе tinyjpg.org

Смени домен на: tinypng.com/
Спасибо, отличная утилита. Помогает!

картинки пользователей сжимаются при загрузке плагином, который вызывает утилиту jpegtran

Может есть готовый пример реализации в MODx?
Pathologic1
Pathologic 23 ноября 2015г в 14:59 #
Все же 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']);
}
R
Roylhash 23 ноября 2015г в 15:00 #
Благодарю.
На днях буду прикручивать…
Pathologic1
Pathologic 23 ноября 2015г в 11:58 #
Кстати, яндекс тоже сделал похожий сервис, в бета-версии веб-мастера. Но там пока без заморочек.
S
Spirit_Ninja 09 декабря 2015г в 17:22 #
Спасибо! Полезно, нужно оптимизировать.
Fi1osof1
Fi1osof 09 декабря 2015г в 21:47 #
Не за что
Ж
Женёк К. 26 февраля 2016г в 21:57 #
Приветствую!

Классный результат!

Я тут тоже заморочился с пейджСпидом — все ок, но не знаю как бороться с «Удалите из верхней части Css ...»

У вас в примере
<style>
{include "{$modx->config.base_path}{$template_url}bundle/styles/styles.css" assign=css}
{$css|regex_replace:'/url\(([\'"]?)\.\.\/\.\.\//':"url($1{$template_url}"}
</style>


Но у меня все на феном, а в примере, я так понял, что на смарти.

Не подскажете как сделать тоже самое, но только на феном?
Fi1osof1
Fi1osof 27 февраля 2016г в 10:29 #
Про синтаксис на феноме лучше на модх.про спросить, может Василий ответит.

В целом на счет инклюда стилей: все-таки скорее всего правильней заморочиться с тем, чтобы разделить стили на те, что в шапке будут подгружаться (минимальный набор и самое важное) и те, что в подвале. Суть просто в том, что когда стили в документ вшиты, они будут каждый раз с документом загружаться. При 100кбайт не особо проблема, но вот сейчас мы фронт вебпаком собираем, а он картинки кодирует и прям в стили вшивает, в итоге получается полметра и больше. Так вот, каждый раз лишние полметра тянуть — не круто. В когда стили по ссылке подгружаются и сервер правильно настроен, то они будут браузером из кеша браться. Вот смотрите как статика может отдаваться при правильной настройке сервера: joxi.ru/Y2LjLVESn8Mqjr
d
dvakarandasha 20 мая 2016г в 07:55 #
Парни, а у кого получилось вот этот пункт сделать
{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:'/\[\[/':'[ ['}
Fi1osof1
Fi1osof 20 мая 2016г в 09:45 #
В чанках этот код не работает. Он работает в Smarty (смотрите инфу по odxSmarty). Или в сниппет загоняйте preg_replace().
Авторизуйтесь или зарегистрируйтесь (можно через соцсети ), чтобы оставлять комментарии.