0 Пользователей и 1 Гость просматривают эту тему.
  • 16 Ответов
  • 1309 Просмотров
*

Septdir

  • Живу я здесь
  • 3370
  • 168 / 4
Critical CSS
« : 23.06.2017, 20:48:09 »
Ну собственно вот хочется как автоматизировать генерацию "критичного css" - ака тот CSS который нужен для генерации страницы.
Руками то я его могу сделать, да даже делал пару раз, но это хлопотно, да и не по специальности.
JCH не предлагать ибо есть он у меня и в топку его да грузит он не мало.
Тоже относиться и к PageSpeed nginx, два часа муры с настройками, а делает только хуже.
Тема во фрейме ибо все это забавы ради и не хочеться ни себя ни какого либо, да и себя ограничивать.
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
CodersRank | Контакты | Мой GitHub | Workshop
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Re: Critical CSS
« Ответ #1 : 23.06.2017, 21:26:38 »
для генерации страниц CSS не нужен, он нужен для оформления )))
*

Septdir

  • Живу я здесь
  • 3370
  • 168 / 4
Re: Critical CSS
« Ответ #2 : 23.06.2017, 21:43:37 »
для генерации страниц CSS не нужен, он нужен для оформления )))
Ну ок, пусть будет для как-там было в определении, стиль необходимый для рендерринга первого экрана, так вроде. Кроче та хрень которую написать в <style> в <head> чтобы страница нормально грузилась, да и не "скакала" после укатывания остальных стилей в ад =)
Кстати а кат таки правильно в определители.
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
CodersRank | Контакты | Мой GitHub | Workshop
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Re: Critical CSS
« Ответ #3 : 23.06.2017, 22:27:01 »
надо выделять из фреймворка базу: сетка, основные блоки, типографика, + смотреть, что там на первом экране: шапка, первая-вторая полоса, остальное можно под кат прятать
проблемно выделять базу, часто она строится на куче мелочевки, которая занимает нехило, в результате большая чать - это либо переопределения потом, либо вообще все бесполезно
имхо я бы сгонял все стили в 1 файл и отдавал его макс. пожатым, с хорошим предварительным рефакторингом, а в низ опускал бы только скрипты
*

Septdir

  • Живу я здесь
  • 3370
  • 168 / 4
Re: Critical CSS
« Ответ #4 : 23.06.2017, 22:51:28 »
надо выделять из фреймворка базу: сетка, основные блоки, типографика, + смотреть, что там на первом экране: шапка, первая-вторая полоса, остальное можно под кат прятать
проблемно выделять базу, часто она строится на куче мелочевки, которая занимает нехило, в результате большая чать - это либо переопределения потом, либо вообще все бесполезно
имхо я бы сгонял все стили в 1 файл и отдавал его макс. пожатым, с хорошим предварительным рефакторингом, а в низ опускал бы только скрипты
Вопрос ни как сделать а как автоматизировать данный процесс. Все стили поджатыми, тот же uikit 3 фиг подожмешь в полном варианте + опять таки получается долгая кропотливая работа.
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
CodersRank | Контакты | Мой GitHub | Workshop
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Re: Critical CSS
« Ответ #5 : 23.06.2017, 22:57:18 »
да никак не автоматизируешь, разве если только писать супермегапарсер вывода главной, ковырять классы и собирать отдельный файл из этих классов, выковырянных из общих стилей... брр
ранее гугловский пейджинсайд предлагал подобный файл, сейчас уже не предлагает, ибо ресурсозатратно, да и в случае отдачи блоков аяксом еще и неполноценный файл получается
*

Septdir

  • Живу я здесь
  • 3370
  • 168 / 4
Re: Critical CSS
« Ответ #6 : 23.06.2017, 23:02:31 »
да никак не автоматизируешь, разве если только писать супермегапарсер вывода главной, ковырять классы и собирать отдельный файл из этих классов, выковырянных из общих стилей... брр
ранее гугловский пейджинсайд предлагал подобный файл, сейчас уже не предлагает, ибо ресурсозатратно, да и в случае отдачи блоков аяксом еще и неполноценный файл получается
Да раньше и плагин для FireBug был. А насчет файла, было не плохо. вообще так чисто редко есть с этим проблемы, а пейджинсайд один хрен ругаеться, хотя прицип его работы из-за раз остается неясным ибо то проблема, то завтра ее нет.
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
CodersRank | Контакты | Мой GitHub | Workshop
*

ProtectYourSite

  • Живу я здесь
  • 2356
  • 135 / 4
  • Безопасность вебсайтов
Re: Critical CSS
« Ответ #7 : 24.06.2017, 00:01:07 »
надо выделять из фреймворка базу: сетка, основные блоки, типографика, + смотреть, что там на первом экране: шапка, первая-вторая полоса, остальное можно под кат прятать
проблемно выделять базу, часто она строится на куче мелочевки, которая занимает нехило, в результате большая чать - это либо переопределения потом, либо вообще все бесполезно
имхо я бы сгонял все стили в 1 файл и отдавал его макс. пожатым, с хорошим предварительным рефакторингом, а в низ опускал бы только скрипты
По мне тоже бесполезно выделять критичный CSS - при хорошей верстки его не так и много будет. Некоторые делают прелудер, что проходит тест Google PageSpeed, но при этом скорость загрузки страницы не уменьшается на деле.
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Re: Critical CSS
« Ответ #8 : 24.06.2017, 00:09:57 »
Некоторые делают прелудер, что проходит тест Google PageSpeed, но при этом скорость загрузки страницы не уменьшается на деле.
именно, дем более что сайты Google все равно даже свой собственный инсайд не проходят
*

Septdir

  • Живу я здесь
  • 3370
  • 168 / 4
Re: Critical CSS
« Ответ #9 : 24.06.2017, 00:48:56 »
По мне тоже бесполезно выделять критичный CSS - при хорошей верстки его не так и много будет. Некоторые делают прелудер, что проходит тест Google PageSpeed, но при этом скорость загрузки страницы не уменьшается на деле.
Не прелоадер обманка это не торт.
именно, дем более что сайты Google все равно даже свой собственный инсайд не проходят
Тут же дело не в прохождении теста. Его то пройти можно без особого труда правильная вёрстка, жертвуем нормальной загрузкой и нагружаем сервак по полной. Итого сайт работает абы как гнузрться медленнее но тест пройдёт.
Дело в самом принципе. Так то проходят мс один фиг не заметно. Но хочеться же сделать скорее ради спортивного интереса.
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
CodersRank | Контакты | Мой GitHub | Workshop
*

Alldar

  • Завсегдатай
  • 1504
  • 195 / 1
Re: Critical CSS
« Ответ #10 : 24.06.2017, 12:37:26 »
Цитировать
да никак не автоматизируешь, разве если только писать супермегапарсер вывода главной, ковырять классы и собирать отдельный файл из этих классов, выковырянных из общих стилей... брр
Есть скрипт на node и для гранта плагин там то же есть
https://github.com/addyosmani/critical
*

Septdir

  • Живу я здесь
  • 3370
  • 168 / 4
Re: Critical CSS
« Ответ #11 : 24.06.2017, 17:23:55 »
Есть скрипт на node и для гранта плагин там то же есть
https://github.com/addyosmani/critical

пробовал, мало строк тянет, а мало строк= прыгающий сайт. Собственно я почти все с github попробовал =)
« Последнее редактирование: 24.06.2017, 18:23:33 от Septdir »
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
CodersRank | Контакты | Мой GitHub | Workshop
*

Alldar

  • Завсегдатай
  • 1504
  • 195 / 1
Re: Critical CSS
« Ответ #12 : 24.06.2017, 19:54:26 »
Так вы настройте высоту и ширину контента которую нужно обработать + медиазапросы плагин гибкий достаточно
*

Septdir

  • Живу я здесь
  • 3370
  • 168 / 4
Re: Critical CSS
« Ответ #13 : 24.06.2017, 19:56:23 »
Так вы настройте высоту и ширину контента которую нужно обработать + медиазапросы плагин гибкий достаточно
Ну попробую, но я боясь что получиться адская простыня.
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
CodersRank | Контакты | Мой GitHub | Workshop
*

flyingspook

  • Живу я здесь
  • 3590
  • 247 / 9
Re: Critical CSS
« Ответ #14 : 26.06.2017, 22:39:06 »
Тоже относиться и к PageSpeed nginx, два часа муры с настройками, а делает только хуже.
Попробуй разницу при настройках nginx положить рядом за архивированный файл со стилями что надо отдавать. Если заметишь разницу, то копать надо будет только в эту сторону.
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Re: Critical CSS
« Ответ #15 : 26.06.2017, 23:12:35 »
Для Гульпа пара решений.
*

Septdir

  • Живу я здесь
  • 3370
  • 168 / 4
Re: Critical CSS
« Ответ #16 : 27.06.2017, 01:41:36 »
Ну в общем пришел к выводу, что с использованием uikit 3 не прокатывает. итого сгенериный код получился в 5к строк (можно конечно в одну ужать, но так проще объем показать). А контент один фиг на некоторых страницах прыгает.
Попробуй разницу при настройках nginx положить рядом за архивированный файл со стилями что надо отдавать. Если заметишь разницу, то копать надо будет только в эту сторону.
Да там бяда еще до critial началась. Приколы были в гухе pagespeed тест ругался на имже оптимизированные картинки, кеш вообще работал через одно место. В итоге через 2 часа мучений я просто плюнул. Хотя вот с простейшей .php страницей без движка, и простейшими стилями и парой картинок у него нареканий не было.

Итого тут либо изначально закладывать это в сайт, либо забивать на это, особенно если сайт и так быстро грузиться или бюджет не позволяет. Свое праздное любопытство я удовлетворил, а большего мне и не нужно было. За предложения спасибо
« Последнее редактирование: 27.06.2017, 10:38:50 от Septdir »
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
CodersRank | Контакты | Мой GitHub | Workshop
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться