Как Вы оптимизируете вёрстку на MODX?

Всем привет!

Сайты на MODX последние года 2 делаю со следующей оптимизацией:
Вёрстка со сборкой через gulp
— сборка js в 1 файл с минимизацией и подключением в footer;
— стили в SASS: стили 1ых экранов страниц минимизированы и записаны в style в head, остальное в main.css в футер;
— изображения через picture с разными srcset через pthumb и b-lazy.
Когда проект начинает развиваться, и в некоторых случаях обрастает разными скриптами и плагинами, приходит понимание, что решение далеко не идеальное — пользователи грузят хоть и минифицированные, но зачастую не нужные для конкретной страницы библиотеки. А обслуживание проекта затрудняется.

Хочу поинтересоваться у вас какие вы используете методы? Заморачиваетесь ли вообще на этот счет?

Не 1ый раз смотрю в сторону модуля MinifyX, но смущает дисклеймер об отсутствии развития (внизу в описании) и, возможная, нагрузка от сборки скриптов и стилей при генерации страницы (если я правильно понимаю в какой момент это срабатывает).
steve.kon
22 декабря 2021, 21:57
modx.pro
1
227
0

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

Алексей Смирнов
23 декабря 2021, 11:05
+1
Мининификация minifyX срабатывает лишь при первом запросе, потом все из Кеша берется.
И соответственно все ок.
Компонент бесплатный, поэтому можно протестить и принять решение.
    steve.kon
    23 декабря 2021, 11:37
    0
    Вы через него скрипты и стили собираете?
    Хотелось бы понять кто и как делает — может я отстал уже сильно и всё через какие-то костыли делаю…
    Александр Мельник
    23 декабря 2021, 13:40
    0
    А что за сайт, на котором пользователи могут
    пользователи грузят хоть и минифицированные, но зачастую не нужные для конкретной страницы библиотеки.
      Наумов Алексей
      23 декабря 2021, 14:26
      -1
      Кроме MinifyX есть еще ModxMinify, решает туже задачу: склеивание и минификация скриптов.

      css первых экранов записывать в inline пока не пробовал)

      webp да, хорошая штука, но нужно постоянно об этом думать…

      Обычно все это делается уже на этапе развития сайта, его рекламы и продвижения. На этапе разработки, как правило, это никому не нужно и никто за это не платит.
        Shedko
        28 декабря 2021, 01:23
        0
        Забейте на логику, понимаю что JS должен быть общим для сайта + включения.

        Давно стали включать CSS + JS в код страницы. PageSpeed доволен, показывает хорошие результаты в поле, а не в Lighthouse в мобилке:


        + Автозамена JGP/PNG на wepb
        + минификация html
        + preload
        + lazy loading (по гуглу, а не плагин)

        из изначальных 50 запросов осталось около 10 ( www.webpagetest.org/ ) и то 2 на статистику (отложенную по клику, скроллингу и т.д.)
          Shedko
          28 декабря 2021, 01:38
          0


          Еще один сайт как пример
            Александр Мельник
            28 декабря 2021, 08:37
            0
            А скажите пожалуйста.
            стали включать CSS + JS в код страницы
            Вы что имеете ввиду? Использование инлайн стилей? Или просто вместо подключения файла со стилями помещаете их в тег style на страницу? В начало страницы или в конец? Или разделяете стили на важные (помещаете в начало страницы) и не важные (в конец)?
            Что такое — preload?
              Shedko
              28 декабря 2021, 19:08
              +1
              Да в head
              <style>
              тут css
              </style>
              Пробывали и критичный css и весь вставлять. По итогу — на одном сайте в теле только критичный, на другом весь. Почему так — PageSpeed показал что одному лучше так, а другому не так )

              Preload
              <link rel="preload" href="/css/minifyx-cache/styles_9898e3980c.min.css" as="style" type="text/css" >
              <link rel="preload" as="image" href="/webp/img/top-bg.jpg.webp" />
              <link rel="preload" as="image" href="/webp/img/action-novo2.jpg.webp" />
              На сайте грузится не критичный css и две картинки, которые будут на первом экране, чтобы первая отрисовка по PageSpeed была лучше. Да и «waterfall» загрузки получается более равномерным, т.е. эти 3 ресурса начинают грузиться в процессе загрузки html-страницы, а не после ее полного разбора, а это у нас давало ускорение на 300 мс.

              preload
              говорит браузеру как можно скорее загрузить и кэшировать ресурс (например, скрипт или таблицу стилей). Это полезно, когда ресурс понадобится через несколько секунд после загрузки страницы — и вы хотите ускорить процесс.
              Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.
            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
            8