Дима
имею ввиду это nginx на лету или при загрузке в отдельное место thumb webp складывается, или как phpthumb**
При загрузке было бы круто, но нужна "интеграция" с неизвестным количеством компонентов (например кто-то прикручивает загрузку с фронтенда, и системные события загрузки в медиаменеджер не срабатывают, если их специально там не вызывать), иначе какие-то картинки останутся без обработки, а #pagespeed этого не прощает)) Поэтому я решал задачу ускорения обработки именно при выводе, а не при загрузке.
Evgeniy
При загрузке было бы круто, но нужна "интеграция" с неизвестным количеством компонентов (например кто-то прикручивает загрузку с фронтенда, и системные события загрузки в медиаменеджер не срабатывают, если их специально там не вызывать), иначе какие-то картинки останутся без обработки, а #pagespeed этого не прощает)) Поэтому я решал задачу ускорения обработки именно при выводе, а не при загрузке.
я на одном с минишопом сделал так: загрузка в галерею минишопа, там обработка в источнике файлов на несколько thumb пот разные задачи и места на сайте (или email рассылке). там и jpg и webp и разное качество. также поставил модалку, чтобы fhd или полное разрешение изображения открывалось. Все лениво. при этом контент менеджерам запрещено ставить изображение минуя галерею минишопа. В галерее сделал пару пунктов по правой кнопке мыши чтобы сразу в буфер копировался путь к изображению с нужным thumbnail и контентщики сразу его и вставляли в tinymce в контент.
Evgeniy
еще не помешало бы некое решение по критическому css на готовый проект)
Дима
еще не помешало бы некое решение по критическому css на готовый проект)
Честно сказать? Мои неоднократные тесты показали, что если у вас не [трындец пыщ пыщ] какая жёсткая помойка в стилях, то выделение критического CSS несет больше вреда чем пользы. Особенно если в некоторых шаблонах где-то нужно переопределять базовые стили, там получается смотри: 1. Критикал + Базовые вместе 2. Оверрайд А с выделением критических они применяются в другой последовательности 1. Критикал 3. Оверрайд 2. Базовые (порядковые цифры я не перепутал, в этом и косяк подхода) И бороться с этим сложно уже технически, и потом следить за тем, что попадает в критикал надо на протяжении всего жизненного цикла проекта, а иначе есть шанс всё зафакапить и никакого профита не получить)) Короче, я считаю для #pagespeed лучше стили пушить (http/2 server push) чтобы они быстрее начинали парситься браузером и не тормозили.
Дима
я на одном с минишопом сделал так: загрузка в галерею минишопа, там обработка в источнике файлов на несколько thumb пот разные задачи и места на сайте (или email рассылке). там и jpg и webp и разное качество. также поставил модалку, чтобы fhd или полное разрешение изображения открывалось. Все лениво. при этом контент менеджерам запрещено ставить изображение минуя галерею минишопа. В галерее сделал пару пунктов по правой кнопке мыши чтобы сразу в буфер копировался путь к изображению с нужным thumbnail и контентщики сразу его и вставляли в tinymce в контент.
контент менеджерам запрещено — к сожалению, это не работает долго на практике, особенно если проект живой, настанет день когда понадобится "вчера" лендинг на борту сайта под новую товарную категорию и в [фигак-фигак и в продакшен] - методологии кто-то забудет про нужные конвертации на вводе, а вся автоматика с галереей минишопа пройдёт мимо (потому что картинки из контента или прямо в вёрстке). В общем-то, если есть техническая возможность сделать преобразование в webp без перенастроки источников файлов, без триклятого тега <picture> (который всё равно не даёт всех нужных плюшек) и перевёрстки всего сайта, то я выбираю этот путь, чтобы не застрелиться)) Глобальный подход конвертит в webp и avif даже картинки из вёрстки (без необходимости поднимать всякие webpack на легаси или лайт проектах которые собирались без них)
Дима
я на одном с минишопом сделал так: загрузка в галерею минишопа, там обработка в источнике файлов на несколько thumb пот разные задачи и места на сайте (или email рассылке). там и jpg и webp и разное качество. также поставил модалку, чтобы fhd или полное разрешение изображения открывалось. Все лениво. при этом контент менеджерам запрещено ставить изображение минуя галерею минишопа. В галерее сделал пару пунктов по правой кнопке мыши чтобы сразу в буфер копировался путь к изображению с нужным thumbnail и контентщики сразу его и вставляли в tinymce в контент.
Я к стати не утверждаю что сделано плохо, вполне норм и уверен всё работает (тег пикчур тоже работает, но прелоадер например с ним фиг сделаешь чтобы webp/avif с бэквард компатибилити aka грэйсфул деградэйшн). Но технически сложнее и есть вопросы при возникновении ситуации, подобной той что выше вспомнилась их практики...
Дима
я на одном с минишопом сделал так: загрузка в галерею минишопа, там обработка в источнике файлов на несколько thumb пот разные задачи и места на сайте (или email рассылке). там и jpg и webp и разное качество. также поставил модалку, чтобы fhd или полное разрешение изображения открывалось. Все лениво. при этом контент менеджерам запрещено ставить изображение минуя галерею минишопа. В галерее сделал пару пунктов по правой кнопке мыши чтобы сразу в буфер копировался путь к изображению с нужным thumbnail и контентщики сразу его и вставляли в tinymce в контент.
А ещё, не знаю как у вас, а на моих проектах обрезка и конвертация больших картинок (12мпикс и более например) занимала столько времени, что приходилось смастерить очередь обработки картинок, и сразу после загрузки отключать их, а по готовности превью автоматически включать. И там на каждую картинку чуть ли не по минуте уходило. То есть заливаешь 15 фоток с разных ракурсов и жди письма на почту о готовности. А пока очереди небыло, на фронт уже вываливались картинки, но битые, т.к. скрипт их ещё обрабатывал. (хостинг - 4с/8т VDS)
Evgeniy
Честно сказать? Мои неоднократные тесты показали, что если у вас не [трындец пыщ пыщ] какая жёсткая помойка в стилях, то выделение критического CSS несет больше вреда чем пользы. Особенно если в некоторых шаблонах где-то нужно переопределять базовые стили, там получается смотри: 1. Критикал + Базовые вместе 2. Оверрайд А с выделением критических они применяются в другой последовательности 1. Критикал 3. Оверрайд 2. Базовые (порядковые цифры я не перепутал, в этом и косяк подхода) И бороться с этим сложно уже технически, и потом следить за тем, что попадает в критикал надо на протяжении всего жизненного цикла проекта, а иначе есть шанс всё зафакапить и никакого профита не получить)) Короче, я считаю для #pagespeed лучше стили пушить (http/2 server push) чтобы они быстрее начинали парситься браузером и не тормозили.
ну мне ничего не остается кроме как согласится со всем сказанным) также рассматривал и ставил в приоритете вариант с отдачей webp nginx. Правда доступ к isp панели был крайне затруднителен. И выбрал такой вариант) А по css, что насчет вариантов, когда в head подключен бутстрап по cdn. webpack, или gulp там естественно нет. Переписывать? Uncss использовать и руками вырезать?) Пушить 160кб только ради сетки?)
Дима
Не только ради сетки, ещё ради хелпер-классов с отступами, вы же хотите CLS плохой (прыгающий контент). А на каких-то страницах слайдер в первом экране, и для него куча стилей нужна. А где-то карта или форма)) ИМХО - да! пушить! Йээээ!
И вот это всё в разных шаблонах разгребать руками - отстой. Ну варианты с Uncss конечно все хорошие, с ним не будет проблем, но для этого, давайте будем честными, нужен прям "по всем канонам собранный фронтенд". Этого же чаще нет, чем есть. А там где есть, вопросов с критикал думаю и не возникает! А вот то с чего мы начали эту тему - "критикал в готовый проект" - имхо это очень опасная история и того не стоит. В готовом проекте надо пушить! ✊
Дима
убедительно) gzip, да и brottli сожмут bootstrap css где-то до 50кб А браузер когда начнет загружать html, асинхронно, или будет ждать? А проблемой с кешированием можно пренебречь?
При пуше - асинхронно (и сомневаюсь что ваш html будет меньше чем 50кб сжатый поэтому залетят стили быстрее, а их парсинг в браузере тоже отдельно от html происходит) А проблему задачу кэширования нужно правильно решать, а не пренебрегать ею. А это вопрос прям хороший, мне понравился :)
Дима
убедительно) gzip, да и brottli сожмут bootstrap css где-то до 50кб А браузер когда начнет загружать html, асинхронно, или будет ждать? А проблемой с кешированием можно пренебречь?
Самая печаль при пуше в целях #pagespeed поэтому не стили, а шрифты. Если они не стандартные, и весят много, то сделать почти ничего нельзя технически(( Ведь font display swap хорош для FCP, но браузеры почему-то всё равно дожидаются шрифтов чтобы domcontentload выполнить...
Дима
не знаю насчет серверных решений. Читал только про куки. Пока это выход. Хотя я все больше замечаю людей, у кого куки вырезаны при посещении
Это не люди, а боты-роботы, не переживай за них. А если люди, то с отключенными куками у них все сайты работают «через жопу» (с) Арт. Лебедев. и ты им не поможешь, так забей на них. Конечно, если хостинг еле дышит, и нагрузка на лишние пуши в ботов тебя беспокоит... Ну отключай для ботов, они же в UA-заголовках подписываются (а те что маскируются - опять же их мало)
Evgeniy
если подытожить http/2 server push, brotli, webp avif nginx, критический css лучше не стоит)
Дима
Короче чувствую пора готовить к публикации ещё и компонент, в котором это всё реализовано))
Дима
если подытожить http/2 server push, brotli, webp avif nginx, критический css лучше не стоит)
Забыл ещё про webm/av1 конечно, и ещё немножко плюшек типа отказа от спрайтов и в некоторых случаях всёже внедрение инлайн-svg и др.
Дима
если подытожить http/2 server push, brotli, webp avif nginx, критический css лучше не стоит)
И ещё, сжатие HTML (типа в одну строку там) я считаю полная хрень, а где тогда brotli себя проявлять!?))
Evgeniy
И ещё, сжатие HTML (типа в одну строку там) я считаю полная хрень, а где тогда brotli себя проявлять!?))
а какой best practice для оптимизации скорости на мобильном? по части лишнего js, css, который можно было бы и не грузить.
Артур
Господа, кто-то пользовался процессором из minishop2 для создания товаров? Какие данные ему нужно скормить и в каком формате? Если есть пример поделитесь, плиз. Я чёт гуглю, но все примеры через родной процессор modx, а у меня опции товара, которые он не обработает.
Артур
а вот тут? https://modx.pro/help/9819?
А, там просто ключ класса надо поменять, спасибо👍
Дима
а какой best practice для оптимизации скорости на мобильном? по части лишнего js, css, который можно было бы и не грузить.
Ну по моему мнению #pagespeed по мобилу как-то так: • Идеально - собирать фронт на webpack / rollup итп и дальше всё равно делать следующие пункты: • Реально - откладывать всё что не нужно сразу, пушить всё что необходимо, например картинку первого экрана (и не забыть её правильнп отрезать сервером или ссылку подменить, а не ccs-ом на бэке отрезать 80%) • Дополнительно: добиться неодновременного исполнения подключаемых скриптов, чтобы избавиться от факторов, влияющих на TBT (если вы знаете красивый способ как это сделать, добро пожаловать в личку, потому что я знаю только костыльный, но даже им пока не готов делиться (стыдно:))
Nano.Karmabot.chat
Nice! dramspro got +1 from Sokol991. 8 karma in total.
Дима
и быстрый комп чтобы на нем скриншоты lighthouse делать)
Помогает ненадолго, CRUX report и отчеты метрики спалят обман)
Дима
думаю, если бы знал, не спрашивал бы подобные вопросы. Такие же костыли из просторов)
Я просто не гуру яваскрипта, и к сожалению не нашел пока времени подыскать гуру для консультации. Уверен что способы есть, скорее всего через async-await или промисы, но с зависимостью вопросы... А че там на просторах, нет ссылки под рукой? У меня прям совсем жуткий топор т.к. "было очень надо и терпение кончилось в край"
Алексей
О, опять #pagespeed ,ну привет)) Как и сказали выше, MODX не при чем (почти), т.к. движок рассчитан на работу в стандартных шаред хостингах, а те кто пользуются продвинутыми функциями, могут либо использовать плагины, либо прикрутить своё, для этого есть прекрасное API и система плагинов. Поэтому использует движки, популярные в PHP-среде: GD и Imagick и обертка над ними: phpthumb Когда ты говоришь "сторонние сервисы", ты конечно имеешь в виду что-то типа https://tinypng.com/ или https://pngquant.org/ или https://optipic.io/ru/ или сквош какой-нибудь, но на то они и сторонние, что можно научить сайт с ними работать, и тут всё получше чем кажется на первый взгляд: • Бесплатно (ограничение 10мб на размер файла, хватает в 97% случаев): https://modstore.pro/packages/photos-and-files/tinycompressor • Платно (в смысле за сам сервис нужно будет платить): https://modstore.pro/packages/photos-and-files/optipic Чтобы использовать на всю катушку оптимизированные форматы, смотри в сторону webp. Ты можешь указывать f=webp в любом обработчике картинок для MODX (будь то phpthumbof, phpthumbon, phpthumbsup, pThumb и вроде есть другие) Если тебе нужна скорость обработки изображений, то это к resizer, он ставится вместе pThumb. Есть ещё платное решение https://modstore.pro/packages/photos-and-files/webpgenerator И несколько бесплатных best practice ты можешь найти на modx.pro поиском по «webp» Вообще, коллеги, дайте плиз обратную связь, как считаете, найдется ли спрос на платный компонент для обработки картинок (наложения ватермарков, в т.ч. к картинкам из контента, создания мокапов, оптимизацию веса и быструю обрезку (очень быструю при поддержке современного софта на хостинга), поддержку большего числа параметров phpthumb) и работы с браузерным кэшем и простеньким плагином-лайтбоксом noJQery из коробки ? При небольшой цене и с хорошей документацией, примерами на феноме и без и может даже sandbox-ом для побора параметров)) будет ли интересно? (просьба отвечать через цитату, а то фиг найдешь потом в переписке, спасибо за понимание)
есть платные плагины и есть еще какой-то бесплатный, но топорный менеджер для MODX со всякими штуками. modmore Помоему делали
Дима
Сейчас современные js плагины для загрузки фоток решают проблему 12 МП на ура. - на сервак летит максимум 500к 1920х1080. (ну или как js настроить) в общем то И никаких бубнов.
Я-то в курсе, а что если тебе нужны оригинальные изображения на сайте (чтобы из них всегда резать превью нормального качества, а не "снимать копию с копии с копии с копии" и ещё иногда скачивать или показывать где-то на фронте их)
Алексей
для конечных пользователей некоторых и 200 на 200 нормальная фотка )))) что удручает
Алексей
хорошее качество нужно при печати, а остальное - это компромисы.
Дима
есть платные плагины и есть еще какой-то бесплатный, но топорный менеджер для MODX со всякими штуками. modmore Помоему делали
То про что ты (кажется) говоришь называется https://modx.com/extras/package/imagecropper и он довольно-таки нетопорный (хоть и пришлось дорабатывать его 😂)
Алексей
нее... не про него. вроде бы.
Алексей
Нашел - Media Manager
Sentinel
А на 8.1 работает 2.8.4?
Дима
для конечных пользователей некоторых и 200 на 200 нормальная фотка )))) что удручает
Мы уже кажется насчет этого "схлёстывались" раньше)) с тобой. Не, ну 1600x900 под fullhd экраны надо? (даже whatsapp так жмет) И @2x при этом под ретину надо? Ну если умножить, получится 4мпикс и это если тебе не нужен зум в лайтбоксе, а если нужен, добро пожаловать в клуб!
Дима
А на 8.1 работает 2.8.4?
Вроде в changelog были фиксы. А пользуясь случаем, зачем он? jit-компилятор для плавающих точек под сайты ни жарко не холодно, или я чего-то пропустил?
Алексей
Мы уже кажется насчет этого "схлёстывались" раньше)) с тобой. Не, ну 1600x900 под fullhd экраны надо? (даже whatsapp так жмет) И @2x при этом под ретину надо? Ну если умножить, получится 4мпикс и это если тебе не нужен зум в лайтбоксе, а если нужен, добро пожаловать в клуб!
х.з. пока экраны в основном 2к поэтому 4к для ретины это не массовое использование. иногда 800х600 если фотка есть и то хорошо, какая тут ретина.. !? и 4к это уникальные проекты, где важно качество фоток... реально даже для ретины ПК хватит на просмотр 2к за глаза а то и меньше...
Sentinel
Вроде в changelog были фиксы. А пользуясь случаем, зачем он? jit-компилятор для плавающих точек под сайты ни жарко не холодно, или я чего-то пропустил?
да я просто пытаюсь перенести modx на сервак, а там только консоль... и оно мне пишет PHP Fatal error: Failed opening required '/var/www/html/index.php' (include_path='.:/usr/share/php') in Unknown on line 0
Sentinel
на нем стоит только 8.1
Sentinel
хотя может права...
Sentinel
Как всегда, в своем вопросе нашелся ответ 😊
Алексей
О, опять #pagespeed ,ну привет)) Как и сказали выше, MODX не при чем (почти), т.к. движок рассчитан на работу в стандартных шаред хостингах, а те кто пользуются продвинутыми функциями, могут либо использовать плагины, либо прикрутить своё, для этого есть прекрасное API и система плагинов. Поэтому использует движки, популярные в PHP-среде: GD и Imagick и обертка над ними: phpthumb Когда ты говоришь "сторонние сервисы", ты конечно имеешь в виду что-то типа https://tinypng.com/ или https://pngquant.org/ или https://optipic.io/ru/ или сквош какой-нибудь, но на то они и сторонние, что можно научить сайт с ними работать, и тут всё получше чем кажется на первый взгляд: • Бесплатно (ограничение 10мб на размер файла, хватает в 97% случаев): https://modstore.pro/packages/photos-and-files/tinycompressor • Платно (в смысле за сам сервис нужно будет платить): https://modstore.pro/packages/photos-and-files/optipic Чтобы использовать на всю катушку оптимизированные форматы, смотри в сторону webp. Ты можешь указывать f=webp в любом обработчике картинок для MODX (будь то phpthumbof, phpthumbon, phpthumbsup, pThumb и вроде есть другие) Если тебе нужна скорость обработки изображений, то это к resizer, он ставится вместе pThumb. Есть ещё платное решение https://modstore.pro/packages/photos-and-files/webpgenerator И несколько бесплатных best practice ты можешь найти на modx.pro поиском по «webp» Вообще, коллеги, дайте плиз обратную связь, как считаете, найдется ли спрос на платный компонент для обработки картинок (наложения ватермарков, в т.ч. к картинкам из контента, создания мокапов, оптимизацию веса и быструю обрезку (очень быструю при поддержке современного софта на хостинга), поддержку большего числа параметров phpthumb) и работы с браузерным кэшем и простеньким плагином-лайтбоксом noJQery из коробки ? При небольшой цене и с хорошей документацией, примерами на феноме и без и может даже sandbox-ом для побора параметров)) будет ли интересно? (просьба отвечать через цитату, а то фиг найдешь потом в переписке, спасибо за понимание)
А вообще знаешь какая прикольная тема? Сделать все копии фоток на компе с которого загрузка. )))) сервак доволен и фотки загрузятся нужные )
Дима
х.з. пока экраны в основном 2к поэтому 4к для ретины это не массовое использование. иногда 800х600 если фотка есть и то хорошо, какая тут ретина.. !? и 4к это уникальные проекты, где важно качество фоток... реально даже для ретины ПК хватит на просмотр 2к за глаза а то и меньше...
Забегу вперёд, я ж не жалуюсь, а упомянул, что ресайзы через настройки источника файлов были такие долгие, что вынудили заниматься вопросом, и упёрся я в движок обработки картинок. НО т.к. теперь проблему долгой обработки полностью удалось решить, используя например pthumb+resizer (с чёртвозьми напильником в руках для частных случаев, но всё же), то просто делюсь инфой: ресайзы при загрузке без допиливания так себе решение
Дима
А вообще знаешь какая прикольная тема? Сделать все копии фоток на компе с которого загрузка. )))) сервак доволен и фотки загрузятся нужные )
Это да, но если "играть в долгую", то со временем оказывается что "сайт - единственный актуальный источник и хранилище инфы в нашей компании" ))) А там тхумбы, простигосподи))
Дима
кстати pthumb (а именно resizer как я понял) может знаешь статью годную? я его установил и слышал что он типа делает кеш фоток для админки, или я че-то путаю?
Кэш картинок для админки вроде бы добавили в modx3 или в последней 2.8.4 (сорян я запутался, столько обновок, радости полные штаны но в голову не помещается 🤪 так и остается видимо в штанах 😂)
Алексей
че-то в последнее время beget вечером - тормоз.
Алексей
говорил про Media Manager
а все. почему топрный - потому что в TVшку записывается ID фотки загруженной. те чтобы вывести еще запросы нужны а задумка интересна.
Дима
а все. почему топрный - потому что в TVшку записывается ID фотки загруженной. те чтобы вывести еще запросы нужны а задумка интересна.
А он нормально прям работает в целом то? Sterc MediaManager Меня просто ваааще не смущают эти страшилки про TV и запросы. Скоро и на эту тематику похожу хэштег заведу, а то тут кроме меня ими всё равно никто не пользуется ;-)
Дима
угу мысль про это
Я уже представляю как иду устанавливать условной "Маринке на рецепшн" nodejs и watcher настраиваю прям ваще на весь комп, и всё равно потом надо объяснять что "ты загрузи и png и webp вот сюда положи и не перепутай". Ты сделаешь, я сделаю, вот @Sokol991 тоже сделает, а Маринка хорошо если пошлёт тебя, а скорее всего умно покивает а потом всё перепутает и будешь за неё подгребать, и материться))
Алексей
хрень наверное.
Алексей
но я мастак на не популярные решения )))
Алексей
прям чую что не нужно делать ))))))
Дима
эм.. неее.. ты выбираешь 1 фотку, а система все делает только на ПК пользователя. короче я уже не туда ушел... типа как ms2Gallery, но создание превьюшек на стороне пользователя.
Я понял, да не, такие решения бывают, но сделаешь ты такой тип ввода TV, а в медиаменеджере этого не будет, в userfiles или другом компоненте загрузки с фронта - не будет, и про пропушишь ты эту тему всем разработчикам компонентов
Алексей
те так оказывается можно делать)))
Дима
Поэтому при всей абсурдности, единственным гарантированным решением является забить на то что неоптимизированные картинки загружаются на хостинг, и разбираться с этим уже после, при выводе, а вопросы тормозов, взять и решить, переехать их современными технологиями и собственным упорством (или упоротостью)) в хорошем смысле)
Алексей
ааа ну если компонент сторонный... да есть момент - х.з. че там есть API или нет
Алексей
ну, короче мыслей много. пока как делали так и делаем )))
Дима
Это как @nezabor решает вопрос валидации на фронте)) «да вводите вы че хотите, а потом уж я проверю и если что не так - ругнусь» — железобетонно. Лайк, подписка)
Evgeniy