Посоветуйте php скрипт безблокировочной загрузки CSS и JS

http://code.google.com/p/minify/

По-поводу блокировки - это вопрос не к PHP.

doctorpc, спасибо, вроде бы пробовал этот скрипт, сейчас еще раз прогоню и отпишусь.

C php у себя решил проблему блокировки, но мне мое решение не нравиться.(((

что Вы понимаете под "блокировкой"?

Если javascript блокирует рендеринг страницы, то нужно смотреть сам js код, переписывать/переносить его вызов вниз страницы.

Php заканчивает свою работу задолго до начала работы js.

doctorpc, спасибо.

под блокировкой имел ввиду выдачу Гугловским PageSpeed Insights (и не только) типа такого сообщения (не обязательно относительно js):

Consider Fixing
Количество блокирующих ресурсов CSS на странице: 1. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.
Оптимизируйте работу CSS на следующих ресурсах:
http://mydomen.ua/css/styles.css

выкинуть js и css на поддомен и тем самым обойти лимит кол-ва одновременных содинений к домену

Тоже вариант. Это спасает от блокирующего действия css?

Как и обещал, выкладываю результаты проверки скрипта минимизации файлов от Гуглу Minify https://code.google.com/p/minify/

Для этого сделал простенькую страничку, кинул туда слайдер и эффекты на jQuery, разбил css на несколько файлов... в общем обычный не оптимизированный "г.сайт": http://mytest.96.lt/test/

По результатам ГуглИнсайтс имеем оптимизацию 68% для мобильных и 83% для компьютеров: http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmytest.96.lt%2Ftest%2F

Теперь немного оптимизируем страничку - подключим кэширование в .htaccess, делаем асинхронную загрузку скриптов и оптимизируем изображение: http://mytest.96.lt/test1/

В итоге ГуглИнсайтс показывает 84% для мобильных и 94% для компьютеров: http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmytest.96.lt%2Ftest1, что является не таким уж плохим показателем, будь это нормального размера сайт.

Идем далее и подключаем Minify в режиме объединения js и css файлов с их оптимизацией. Дополнительно выносим объединенный css за </hyml>, чтобы предотвратить блокирующее действие. http://mytest.96.lt/test2/

И получаем желанные 100% для всех устройств по ГуглИнсайтс.

http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmytest.96.lt%2Ftest2

Вывод:

+ Minify вполне справляется со своей работой, правда на больших сайтах могут появиться другие проблемы;

- лично мне не нравиться выносить строчку с css в конец файла, т.к. это приводит к ошибкам валидации.

Нахрена туда выводить? В крайнем случае это перед закрывающим боди, а некоторые скрипты вообще требуют подключения перед рендерингом DOM. Так что лучше всего это делать в хеад.

"Блокирующее действие" понятие относительное. Ксс и жс как правило кешируются браузером.

с точностью до наоборот - никогда так не делайте.

любой ява скпипт в теле страницы выше css может намертво заморозить отрисовку страницы.

css - в самый верх head

js - или в конец head или в последнее время я ставлю перед закрывающим body

отложенную загрузку больших js можно делать LABjs. если скрипты большие, то LABjs может асинхронно грузить их в несколько потоков.

Да Вы правы, с вынесение в самый конец немного ночью "протупил" 🤪 Бывает...:)

Переделываем. Из последнего примера, где удалось получить 100% по ГуглИнсайт, ставим объединенный css перед </body> http://mytest.96.lt/test3/

Проверяем в ГуглИнсайтс: http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmytest.96.lt%2Ftest3%2F. Показатели не изменились - 100%, хотя валидатору все равно не нравиться...

Пробуем это предложения: css - в самый верх head, js в конец head http://mytest.96.lt/test4/

ГуглИнсайтс снова ругается на блокирующий ресурс, показатели ухудшились 92% и 98%: http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmytest.96.lt%2Ftest4

Но валидатору такое решение нравится.

Такая перестановку блокировку не убирает, но "раздражает" :) валидатор

Да, так и есть. Но в данном "эксперименте" мы это обходим.

В нашем случае они тоже кешируются, но суть в том, что Гуглу все равно это не нравиться и это влияет, в том числе, и на позицию сайта в выдаче Гугла (хотя интересно было бы проверить насколько влияет, может быть - овчинка выделки не стоит).

Спасибо, учту 🍻

Спасибо за подсказки, варианты решения в принципе есть, но мне действительно хотелось бы найти такое решение, где и css и js будут в хэдере и ГуглИнсайтс будет выдавать 100%.

На своих сайтах с css работаю через LESS, а js всегда объединяю и минимизирую php скриптом плюс асинхронная загрузка, поэтому проблем не возникает.

При доработке чужих сайтах css "пропускаю" тоже через php скрипт и проблема вроде бы решается, но... не нравиться мне этот вариант, поэтому и ищу другой.