Делимся приемами оптимизации под Google PageSpeed

Тема очень обширна и возможны разные варианты. Можно использовать различные сборщики, например тут Василий описал детально сборку с помощью gulp. Кто то использует minifyx.

Могу поделиться своим решением на основе html-compressor.

Принцип работы прост, стили и скрипты в специальной разметке собираются в один файл и могут быть подключены, либо помещены прямо в тело страницы.

Способ не идеален, так как требует обработки страницы на стадии рендера и это конечно минус, но задержки не так велики. Пакет находится в стадии тестирования, но результаты примерно такие



я ни кого не призываю использовать этот пакет, просто делюсь способом оптимизации.

ps. кстати данный пакет подключен и тут s6200.h3.modhost.pro/6/12010.html
но там нет оптимизации картинок потому результат не 100…

1. Быстрый ответ от PHP
2. Настроенный веб сервер (gzip, кэширование статики)
4. Оптимизированные картинки (не только сжатие, но и соответствие размеров в css реальному размеру картинки)
5. Оптимизированные скрипты и стили

Лично я не заморачиваюсь с подключением скриптов и стилей inline ради циферок от Google, просто размещаю ссылки на css в шапке, а javascript в подвале — как обычно.

Последний проект оптимизировал, сейчас набирает 98 баллов, 2 бала за яндекс аналитику снимает.

Делал так:
1. Оптимизировал изображения, можно заменять на те, что предлагает гугл
2. Сжать html
3. Все css и js в один файл

Гугл предлагает еще стили размещать перед закрывающим тегом body, но тогда при загрузке страницы все грузится без стилей сначала, что выглядит убого.

Решил просто — написал сниппет, который берет css сжатый minifyx и вставляет содержимое в head. Это дало самый большой прирост баллов.

Так же на некоторых хостингах приходится в htaccess настраивать кеширование и сжатие.

Набрать свыше 90 крайне сложно. Вроде бы даже главная Google с этим не справляется, как бы иронично это не звучало.

Ранее тестировали PageSpeed для Nginx. Из проблем — это не промышленное решение. Он либо есть у хостера либо его нет. Если сервер свой, то надо ставить руками. И обычным apt-get install к сожалению обойтись не выйдет, нужно угробить часы админского времени. Из-за этого пришлось от него отказаться.

Следующим шагом был выбор провайдера. Именно он влияет на рейтинг «первого байта». И к сожалению скорость для РФ не значит скорость для Google. Оптимальным показался именно выбор провайдера на территории Европы с использованием CDN. Выбор очень широкий и качество достойное.

Ленивая загрузка изображений делалась через bLazy (есть и другие, превосходные аналоги).

Сжатие спева делалось через MinifyX. Он офигенно справляется, если все ресурсы уже скачаны и разложены по папочкам.
Позже накопился ворох плагинов на JavaScript, которые приходилось менять или обновлять. Аналогично было и с версиями Bootstrap. Пришлось переехать на NodeJS (webpack, gulp, тысячи их). Всё офигенно, но зачем тогда MODX?..
Отдельных мучений стоила минификация HTML. В некоторых случаях CDN давал не самые подходящие результаты, и Google не пропускал, предлагая сжать HTML ещё лучше, а минификаторы из официальных репозиториев могли похвастаться одной и той же \s+ регуляркой, которая съедала всё на своём пути.

Google тем временем требовал ещё и грамотно поставить теги preconnect и использовать async/defer.

Плюнули. Написали свою шарманку для склеивания скриптов и стилей в кучу. Завернули туда же минификатор. Назвали PageSpeed.

Следующим шагом был webp. Первой попыткой была конвертация картинок «на лету». Стало понятно, что этот идиотизм проживёт до первой тысячи картинок или посетителей, и память превратится в склероз.
Второй — попытка делать отконвертированные копии при загрузке или по cron-у. Ждать час или каждую минуту сканировать кучу каталогов.
Третьей — очередной модуль для Nginx.
В итоге — конвертация с сохранением во временный кэш, лежащий рядом с движком. Расход места возрастает примерно на половину веса картинок, но зато конвертация идёт «по требованию». Если какую-то картинку вдруг вздумалось поменять — кэш улетает по кнопке и конвертация сама пройдёт заново.
Огромный минус этой фичи — зачем людям сохранять картинку с котиком на свой телефон в формате webp? А ведь получив ссылку на такую картинку выбора у человека уже нет — его браузер сказал, что он поддерживает webp.

Вдруг кто прокомментирует github.com/uncss/uncss
Есть что-то более новое, может, для целей удаления неиспользуемых стилей (для сокращения css)?
(Для оптимизации старых сайтов)

Оптимизированный код jivosite (Дает +30 к мобильной версии и немного к пк версии)

{ignore} 
<!-- BEGIN JIVOSITE CODE {literal} -->
<script type='text/javascript'>
(function(){ document.jivositeloaded=0;var widget_id = 'ВАШ_ID';var d=document;var w=window;function l(){var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}//эта строка обычная для кода JivoSite
function zy(){
    //удаляем EventListeners
    if(w.detachEvent){//поддержка IE8
        w.detachEvent('onscroll',zy);
        w.detachEvent('onmousemove',zy);
        w.detachEvent('ontouchmove',zy);
        w.detachEvent('onresize',zy);
    }else {
        w.removeEventListener("scroll", zy, false);
        w.removeEventListener("mousemove", zy, false);
        w.removeEventListener("touchmove", zy, false);
        w.removeEventListener("resize", zy, false);
    }
    //запускаем функцию загрузки JivoSite
    if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}
    //Устанавливаем куку по которой отличаем первый и второй хит
    var cookie_date = new Date ( );
    cookie_date.setTime ( cookie_date.getTime()+60*60*28*1000); //24 часа для Москвы
    d.cookie = "JivoSiteLoaded=1;path=/;expires=" + cookie_date.toGMTString();
}
if (d.cookie.search ( 'JivoSiteLoaded' )<0){//проверяем, первый ли это визит на наш сайт, если да, то назначаем EventListeners на события прокрутки, изменения размера окна браузера и скроллинга на ПК и мобильных устройствах, для отложенной загрузке JivoSite.
    if(w.attachEvent){// поддержка IE8
        w.attachEvent('onscroll',zy);
        w.attachEvent('onmousemove',zy);
        w.attachEvent('ontouchmove',zy);
        w.attachEvent('onresize',zy);
    }else {
        w.addEventListener("scroll", zy, {capture: false, passive: true});
        w.addEventListener("mousemove", zy, {capture: false, passive: true});
        w.addEventListener("touchmove", zy, {capture: false, passive: true});
        w.addEventListener("resize", zy, {capture: false, passive: true});
    }
}else {zy();}
})();</script>
<!-- {/literal} END JIVOSITE CODE -->


{/ignore}