Как Вы оптимизируете вёрстку на MODX?
Всем привет!
Сайты на MODX последние года 2 делаю со следующей оптимизацией:
Вёрстка со сборкой через gulp
— сборка js в 1 файл с минимизацией и подключением в footer;
— стили в SASS: стили 1ых экранов страниц минимизированы и записаны в style в head, остальное в main.css в футер;
— изображения через picture с разными srcset через pthumb и b-lazy.
Когда проект начинает развиваться, и в некоторых случаях обрастает разными скриптами и плагинами, приходит понимание, что решение далеко не идеальное — пользователи грузят хоть и минифицированные, но зачастую не нужные для конкретной страницы библиотеки. А обслуживание проекта затрудняется.
Хочу поинтересоваться у вас какие вы используете методы? Заморачиваетесь ли вообще на этот счет?
Не 1ый раз смотрю в сторону модуля MinifyX, но смущает дисклеймер об отсутствии развития (внизу в описании) и, возможная, нагрузка от сборки скриптов и стилей при генерации страницы (если я правильно понимаю в какой момент это срабатывает).
Сайты на MODX последние года 2 делаю со следующей оптимизацией:
Вёрстка со сборкой через gulp
— сборка js в 1 файл с минимизацией и подключением в footer;
— стили в SASS: стили 1ых экранов страниц минимизированы и записаны в style в head, остальное в main.css в футер;
— изображения через picture с разными srcset через pthumb и b-lazy.
Когда проект начинает развиваться, и в некоторых случаях обрастает разными скриптами и плагинами, приходит понимание, что решение далеко не идеальное — пользователи грузят хоть и минифицированные, но зачастую не нужные для конкретной страницы библиотеки. А обслуживание проекта затрудняется.
Хочу поинтересоваться у вас какие вы используете методы? Заморачиваетесь ли вообще на этот счет?
Не 1ый раз смотрю в сторону модуля MinifyX, но смущает дисклеймер об отсутствии развития (внизу в описании) и, возможная, нагрузка от сборки скриптов и стилей при генерации страницы (если я правильно понимаю в какой момент это срабатывает).
Комментарии: 8
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
И соответственно все ок.
Компонент бесплатный, поэтому можно протестить и принять решение.
Хотелось бы понять кто и как делает — может я отстал уже сильно и всё через какие-то костыли делаю…
css первых экранов записывать в inline пока не пробовал)
webp да, хорошая штука, но нужно постоянно об этом думать…
Обычно все это делается уже на этапе развития сайта, его рекламы и продвижения. На этапе разработки, как правило, это никому не нужно и никто за это не платит.
Давно стали включать CSS + JS в код страницы. PageSpeed доволен, показывает хорошие результаты в поле, а не в Lighthouse в мобилке:
+ Автозамена JGP/PNG на wepb
+ минификация html
+ preload
+ lazy loading (по гуглу, а не плагин)
из изначальных 50 запросов осталось около 10 ( www.webpagetest.org/ ) и то 2 на статистику (отложенную по клику, скроллингу и т.д.)
Еще один сайт как пример
Вы что имеете ввиду? Использование инлайн стилей? Или просто вместо подключения файла со стилями помещаете их в тег style на страницу? В начало страницы или в конец? Или разделяете стили на важные (помещаете в начало страницы) и не важные (в конец)?
Что такое — preload?
Пробывали и критичный css и весь вставлять. По итогу — на одном сайте в теле только критичный, на другом весь. Почему так — PageSpeed показал что одному лучше так, а другому не так )
Preload
На сайте грузится не критичный css и две картинки, которые будут на первом экране, чтобы первая отрисовка по PageSpeed была лучше. Да и «waterfall» загрузки получается более равномерным, т.е. эти 3 ресурса начинают грузиться в процессе загрузки html-страницы, а не после ее полного разбора, а это у нас давало ускорение на 300 мс.