- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта
Применяем отклонение ссылок
Сервис Rookee
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Собственно вопрос в следующем.
Как и все php разработчики пользуюсь определенными методами для оптимизации загрузки CSS и JS при создании своих сайтов. Но иногда приходится доводить до ума чужие сайты, где необходимо объединять в один файл все 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 на поддомен и тем самым обойти лимит кол-ва одновременных содинений к домену
выкинуть 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 за </html>, чтобы предотвратить блокирующее действие.
с точностью до наоборот - никогда так не делайте.
любой ява скпипт в теле страницы выше 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 может намертво заморозить отрисовку страницы.
css - в самый верх head
js - или в конец head или в последнее время я ставлю перед закрывающим body
Так что лучше всего это делать в хеад.
Пробуем это предложения: 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
Но валидатору такое решение нравится.
js - в последнее время я ставлю перед закрывающим body
Такая перестановку блокировку не убирает, но "раздражает" :) валидатор
...а некоторые скрипты вообще требуют подключения перед рендерингом DOM.
Да, так и есть. Но в данном "эксперименте" мы это обходим.
"Блокирующее действие" понятие относительное. Ксс и жс как правило кешируются браузером.
В нашем случае они тоже кешируются, но суть в том, что Гуглу все равно это не нравиться и это влияет, в том числе, и на позицию сайта в выдаче Гугла (хотя интересно было бы проверить насколько влияет, может быть - овчинка выделки не стоит).
любой ява скпипт в теле страницы выше css может намертво заморозить отрисовку страницы.
Спасибо, учту 🍻
Спасибо за подсказки, варианты решения в принципе есть, но мне действительно хотелось бы найти такое решение, где и css и js будут в хэдере и ГуглИнсайтс будет выдавать 100%.
На своих сайтах с css работаю через LESS, а js всегда объединяю и минимизирую php скриптом плюс асинхронная загрузка, поэтому проблем не возникает.
При доработке чужих сайтах css "пропускаю" тоже через php скрипт и проблема вроде бы решается, но... не нравиться мне этот вариант, поэтому и ищу другой.