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

Поделитесь опытом, кто как оптимизирует сайт? Кто набирает 85 баллов на продуктовой странице или на странице категории товаров, то есть на тех, где minishop2 свои ресурсы подключает?
Konstantin
31 августа 2017, 16:56
modx.pro
12
3 826
+3

Комментарии: 32

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

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

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

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



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

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

    Konstantin
    01 сентября 2017, 10:37
    0
    Бомба. Для мобильных с 69 до 83, десктоп с 84 до 90.
      Володя
      01 сентября 2017, 10:47
      +1
      Для мобильных с 69 до 83, десктоп с 84 до 90.
      это конечно хорошо, но в любом случае надо понимать что и как работает.
      Рекомендации google явно говорят о том чего не хватает и просто поставить пакет в любом случае мало…
        Konstantin
        01 сентября 2017, 10:54
        +2
        Сократите время ответа сервера
        – сервер modhost, раньше грузил за 0.1s, потом в какой-то момент стало 0.3s-0.5s. Что с этим делать непонятно.
        Оптимизируйте загрузку видимого контента
        – на bootstrape все, заинлайнить стили видимой части в head не хочется.
        И мое любимое:
        Используйте кеш браузера

        https://api.pinterest.com/…avtodoka-msk.ru%2F&callback=random_fun_3 (15 минут)
        https://call.chatra.io/chatra.js (30 минут)
        https://mc.yandex.ru/metrika/tag.js (60 минут)
        https://www.google-analytics.com/analytics.js (2 часа)
        То есть в остальном все ок.
          Володя
          01 сентября 2017, 10:58
          +2
          Сократите время ответа сервера – сервер modhost, раньше грузил за 0.1s, потом в какой-то момент стало 0.3s-0.5s. Что с этим делать непонятно.
          найти нагруженные вызовы и оптимизировать/кешировать их

          Оптимизируйте загрузку видимого контента – на bootstrape все, заинлайнить стили видимой части в head не хочется.
          не нужно инлайнить если не хочется. Но достаточно будет переместить критикал css в вверх станицы.

            Владимир
            01 сентября 2017, 11:10
            0
            Это тоже понравилось Google PageSpeed, но не принимайте за шаблон, ибо тут не все хорошо
            location ~* ^.+\.(jpg|jpeg|gif|css|png|js|ico|bmp|svg)$ {
            	try_files			$uri $uri/ @rewrite;
                gzip on;
                gzip_vary on;
                gzip_min_length 1000;
                gzip_proxied    expired no-cache no-store private auth;
                gzip_buffers 16 8k;
                gzip_comp_level 3;
                gzip_types text/plain application/xml application/x-javascript application/javascript text/css image/jpeg image/png image/svg+xml svg svgz;
                access_log			off;
            	expires				10d;
            	break;
                
            }
            
            location ~ \.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$ {
            add_header Access-Control-Allow-Origin "*";
            }
            я , конечно, перемудрил с кешированием, например gif так намертво кешируется, что анимация больших гифок не работает (но мне и не надо).
              Волков Николай
              19 октября 2017, 16:25
              0
              Оптимизируйте загрузку видимого контента – на bootstrape все, заинлайнить стили видимой части в head не хочется.
              не нужно инлайнить если не хочется. Но достаточно будет переместить критикал css в вверх станицы.
              перемещение Critical Rendering CSS вверх особо не исправит эту проблему. Да, рендеринг CSS
              переместится в потоки head'а и тем самым возможен прирост скорости, но… Как минимум это не решит проблему перерисовки с 0 в результату работы JS или т.п
              И да, инлайнить тем более не нужно :-)
              Владимир
              01 сентября 2017, 11:06
              0
              что бы нравится Google настройте заголовки для того типа содержимого который у вас соответтвует вашему документу
              Cache-Control: max-age=3600, must-revalidate
              Vary: Accept-Encoding
                Andrei
                19 октября 2017, 16:13
                +1
                Выглядит неплохо! А какие заголовки вы передаете (и передаете ли вообще) для js?
          Алексей Шумаев
          01 сентября 2017, 14:24
          -1
          Владимир, у меня при запуске твоего решения вылезла:
          Fatal error: Uncaught Error: Class 'Phar' not found in ...
          В чём может быть проблема?
            Володя
            01 сентября 2017, 15:15
            0
            наверно не стоит PHAR расширение
              Алексей Шумаев
              01 сентября 2017, 15:23
              +1
              Вот же'шь ) Привык, что всё нужное есть на Modhost. Поставил на тестовом, забыв, что он на nic'е и там ничего не включено) Спасибо.
            Igor Ivanov
            01 сентября 2017, 15:32
            0
            А есть документация к нему?
            Konstantin
            03 сентября 2017, 14:59
            0
            Могу поделиться своим решением на основе html-compressor.
            Отличный конечно компонент, но пришлось деинсталлировать, так как ломает msDeliveryOnMap :-(
              Володя
              04 сентября 2017, 10:50
              0
              так как ломает msDeliveryOnMap
              Такая ситуация возможно и требует осмысления исходного кода, методик подключения библиотек, модификаций и тд…
              недостаточно просто установить пакет.
              Илья Александрович
              26 июня 2019, 10:04
              0
              Подскажите, а как сжимать файлы? Приписал в head:
              {'compress'|snippet:[
              'cssFile' => [
                '/assets/css/css1.css',
                '/assets/css/css2.css'
              ],
              'jsFile' => [
                '/assets/js/js1.js',
                '/assets/js/js2.js'
              ]
              ]}
              Но и в итоге ничего, нет файла сжатого. Версия Сompressor 1.0.14-beta
              Василий Наумкин
              01 сентября 2017, 10:11
              1
              +1
              1. Быстрый ответ от PHP
              2. Настроенный веб сервер (gzip, кэширование статики)
              4. Оптимизированные картинки (не только сжатие, но и соответствие размеров в css реальному размеру картинки)
              5. Оптимизированные скрипты и стили

              Лично я не заморачиваюсь с подключением скриптов и стилей inline ради циферок от Google, просто размещаю ссылки на css в шапке, а javascript в подвале — как обычно.
                Konstantin
                01 сентября 2017, 10:27
                0
                ну, у modhost и modstore отличные результаты, а у minishop2 не очень.

                Мне не то чтобы 100 из 100 хочется, но хотя бы 85… а не получается из-за:

                и
                  Василий Наумкин
                  01 сентября 2017, 10:30
                  +1
                  Сайт ms2 я даже ни разу не проверял в этом тесте =) Он с момента создания висит в статусе «надо бы переделать».

                  а не получается из-за
                  Ну так собери для начала все эти js в один и сожми хотя бы через MinifyX.
                    Konstantin
                    01 сентября 2017, 10:36
                    +1
                    я не разработчик. Допер что надо это сделать, пока удалось найти action.php код который регистрирует css (у cityselect и msdom), удалил его и скормил MinifyX-у, с js-ом попробовал, но посыпались ошибки, что ожидаемо.
                    Установил только что решение Володи и для мобильных с 69 до 83 вырос бал. Хорошее начало дня.
                  Волков Николай
                  19 октября 2017, 16:28
                  0
                  просто размещаю ссылки на css в шапке, а javascript в подвале — как обычно.
                  WebFontLoader гугловский + счетчики в head. Также добавил бы lazy load абсолютно всех картинок + для особенно крутых(платежеспособных) service worker кэширование.
                  Андрей
                  01 сентября 2017, 15:17
                  +1
                  Последний проект оптимизировал, сейчас набирает 98 баллов, 2 бала за яндекс аналитику снимает.

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

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

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

                  Так же на некоторых хостингах приходится в htaccess настраивать кеширование и сжатие.
                    Владимир
                    01 сентября 2017, 15:32
                    1
                    0
                    можно заменять на те, что предлагает гугл
                    — это в каком случае? сайт статичен?
                    Не знаю, может кому-то покажутся превьюшки с 8-ми битным цветом не лучшего качества, но Google PageSpeed одобряет вот такие:
                    {$_modx->runSnippet('!pthumb', [
                          'input' => $_pls['tv.title_image'],
                          'options' => 'w=500&h=260q=70&zc=C&fltr[]=rcd|8|0',
                          'toPlaceholder' => 'thumb'
                          ])}
                      Андрей
                      01 сентября 2017, 15:39
                      0
                      На сайте там изображения — баннеры всякие и элементы дизайна. Превьюхи там не обновляются практически.

                      Пробовал с помощью phpthumbon, так и не подобрал настройки, гуглу ничего не понравилось. Попробую ваш вариант.
                        Владимир
                        01 сентября 2017, 15:48
                        +1
                        Превьшки с таим фильтром он одобряет. А далее у меня все портят как раз сами Google — баннеры, вот беда, хоть удаляй. (так же еще блок «похожие ресурсы» который по сути те же Google — баннеры, где при возрастающем трафике некоторые позиции заменяются на рекламу, вот так тоже неомтимизированые изображения которые Google делает из моих же но оптимизированных, заколдованный круг)
                          Евгений Борисов
                          18 августа 2019, 12:11
                          1
                          0
                          github.com/maksatweb/compressor.io-php по крону натравите на папку. Ну или разработайте более умный алгоритм с сохранением списка уже оптимизированных картинок. У меня еще ни разу не возникало ситуации, когда CompressorIO сделал картинку битой, увеличил размер или потерял в качестве.

                          Если кому интересно, то вот реализация для artisan под laravel gist.github.com/AgelxNash/0b6faaa7978e3456f3cbd3ef06b365da
                          Владимир
                          01 сентября 2017, 19:39
                          0
                          PS Нюанс, pthumb я использую т.к. с ним идет еще один пакет — resizer (он позволяет менять библиотеку ( 2: Auto / Imagick, 1: Gmagick, 0: GD) На разных серверах актуально. resizer нужно включить в настройках, phpthumbof.use_resizer Да, resizer.graphics_library 1
                          Володя
                          01 сентября 2017, 15:49
                          0
                          lazyload на картинки и все нормально…
                      wfoojjaec
                      18 августа 2019, 00:26
                      +2
                      Набрать свыше 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.
                        Владимир
                        19 августа 2019, 06:39
                        0
                        Вдруг кто прокомментирует github.com/uncss/uncss
                        Есть что-то более новое, может, для целей удаления неиспользуемых стилей (для сокращения css)?
                        (Для оптимизации старых сайтов)
                          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                          32