Здравствуйте, уважаемые коллеги веб-мастера! Мало кто из нас не проверял свой сайт на скорость загрузки всем известным сервисом PageSpeed Insight от Google и не сталкивался при этом с рекомендацией — «Удалите из верхней части страницы код javascript и CSS, блокирующий отображение«.
Скажите, вас эта рекомендация тоже ставила в тупик, как и меня? Если так, читайте дальше, я помогу вам решить эту задачку.
Тут даже дело не в сложности выполнения, а в грустной перспективе выполнять операцию каждый раз после очередного обновления плагинов. Все JavaScript и CSS установленных расширений, перемещенные вручную из верхней части страницы, вернутся обратно сразу после обновления этих самых расширений.
Так зачем же все эти сложности, когда вопрос можно решить установкой плагина, который выполнит требуемую работу за вас раз и навсегда. Игра стоит свеч, ведь выигрыш в скорости многократно превысит проигрыш от нагрузки расширения.
Итак, для выполнения рекомендаций Гугла по удалению кода javascript и CSS из верхней части страницы я подрядил плагин Autoptimize, который объединяет скрипты и стили в один файл и переносит его из верхней части страницы, чего мы собственно и добиваемся. Кроме того, плагин сокращает HTML, JS и CSS (еще один плюсик нам от PageSpeed Insight).
Таким образом, мы убьем сразу много зайцев :-).
Плагин можно найти по названию через поиск в панели администратора сайта или скачать с депозитария WordPress по адресу — https://ru.wordpress.org/plugins/autoptimize/
Настройки плагина для WordPress Autoptimize
- После установки и активации Autoptimize, перейдите к его настройкам.
Расставьте галочки.
- Далее перейдите к расширенным настройкам плагина, для чего в правом верхнем углу кликните по кнопочке «Show advanced settings«
Для успешного завершения миссии на wordpress-book.ru мне хватило поставить галочку в шестом пункте у Inline all CSS в опциях CSS, как на скриншоте ниже, и все на этом.
В вашем случае все может сложиться немного сложнее. Например, некоторые плагины, использующие в работе библиотеку jQuery, просто перестают работать и приходится ковыряться в настройках более плотно. Как известно, случаи бывают разные, поэтому рассмотрим все настройки плагина Autoptimize.
Параметры HTML
1 Активируйте опцию «Оптимизировать код HTML» если этого просит PageSpeed Insight.
2 Комментарии HTML я сохранять не стал за ненадобностью.
Опции JavaScript
Если после активации плагина под рекомендацией «Удалите из верхней части ….» исчезли из списка JS и сайт продолжает работать по-прежнему, без перекосов, без конфликтов плагинов и т.д., оставьте тут настройки как есть. Иначе поэкспериментируйте со следующими опциями:
1 Force JavaScript in <head>
Некоторые скрипты требуют загрузки только с верхней части страницы (от чего мы как раз избавляемся), иначе они будут работать некорректно или вообще объявят забастовку. Опция обеспечивает им это условие к недовольству PageSpeed Insight. Включите в самом крайнем случае, только если не помогут функции ниже.
2 Also aggregate inline JS
Речь идет об интеграции JS в HTML. После включения, как уверяет разработчик, должна значительно вырасти скорость сайта. Параметр активен по умолчанию.
3 Exclude scripts from Autoptimize
Впишите в поле через запятую имена файлов тех скриптов, которые не должны интегрироваться в HTML, это на случай конфликтов работы JS после интеграции.
4 Add try-catch wrapping
Если какой-либо скрипт работает некорректно, он не даст жизни остальным. Опция позволяет обойти сломанный JS и продолжить работу.
Многие веб-мастера размещают в сайдбаре различные блоки, работающие на JS. Это могут быть блоки подписки, перенаправления трафика партнерских программ и тому подобные. Чтобы скрипт блока не блокировал загрузку (плагин отказался решать эту задачу), отложите ее. Для этого просто вставьте атрибут «async» в код скрипта как на скриншоте.
Опции CSS
1 Оптимизировать код CSS
Как уже было обговорено, опция сокращает все CSS и объединяет их в один файл. Для удаления CSS из верхней части страницы этого недостаточно.
2 Generate data: URLs for images
Если в каком-либо файле CSS прописаны пути к маленьким изображениям (меньше 4кб), то этот запрос будет прописан в основном файле CSS.
3 Remove Google Fonts
Замена шрифтов Гугла (которые почему-то не любит PageSpeed Insight если таковые наличествуют) на стандартные.
4 Also aggregate inline CSS
Как и в случае с JS, опция интегрирует ту часть CSS в HTML, которую посчитает нужной, что также должно положительно сказаться на скорости загрузки.
5 Inline and Defer CSS
Позволяет интегрировать в HTML только CSS видимой отрисовки сайта с отложенной загрузкой остального кода CSS.
Если задействовать, откроется поле, в которое требуется вставить этот самый кусок CSS видимой отрисовки. Полезно мегапорталам с множеством файлов CSS, чтобы не увеличивать до запредельных размеров их HTML.
Для определения CSS видимой отрисовки существует несколько сервисов, о которых упоминается в разделе «fag» на странице плагина. Эту функцию я не активировал ни разу и пока описывать не буду, если только вы не попросите в комментариях.
6 Inline all CSS
В отличие от предыдущего пункта, опция интегрирует вообще все стили в HTML. После активации, как правило, PageSpeed Insight перестает ругаться на блокирующие CSS в верхней части страницы.
7 Exclude CSS from Autoptimize
Оптимизация CSS, как и JS, может повлечь за собой их неправильную работу. Добавьте сюда эти файлы, чтобы исключить их из оптимизации.
CDN Options
CDN Base URL
Если сайт использует CDN сервера для сокращения времени загрузки при передаче данных на большие расстояния, впишите сюда их URL.
Информация о кэше
Save aggregated script/css as static files
Опция выключит статическое сжатие скриптов и стилей. Активируйте, если на сайте используется Gzip сжатие.
После завершения или в процессе работы с настройками Autoptimize, вы конечно захотите посмотреть результаты своего труда в вышеупомянутом сервисе. Сохраняйте изменения нажатием кнопки «Сохранить изменения и очистить кэш» чтобы проверять только свежие страницы.
Надеюсь, вы справитесь, скорость вашего сайта возрастет и это обязательно отметят поисковые машины.
19 комментариев: Удалите из верхней части страницы код javascript и CSS при помощи WordPress плагина Autoptimize
Добавить комментарий
Огромное спасибо за такие статьи! Очень помогли при первом ознакомлении с движком WP и как его настраивать под ПС!
У меня на сайте и плагин стоит и статья про этот плагин есть. Но ваша лучше в несколько крат. Все отрегулировала прямо по вашей статье, скорость повысилась до 94. Вверху так и остались Js и CSS, не поняла куда вставить скрипт, и у вас это скриншот его скопировать нельзя
Спасибо за такую хорошую статью. У меня на сайте и плагин стоит и статья про этот плагин есть. Но ваша лучше в несколько крат. Все отрегулировала прямо по вашей статье, скорость повысилась до 94. Вверху так и остались Js и CSS, не поняла куда вставить скрипт, и у вас это скриншот его скопировать нельзя
такая же ситуация , без плгтна лучше все работает , нежели чем с ним ,
Мдааа… После всех этих манипуляций показатели PageSpeed Insight стали хуже!!!
описание работы плагина помогло, спасибо
Здравствуйте!Установлен данный плагин, а проблему не решает.Тест скорости 61/100. Как увеличить непонятно.Может плагины тормозят.
После установки плагина гугл то показывает лучшие показатели, а реально сайт еле-еле грузится. Видимо какая-то настройка косячит. Пробовал разные, но все равно.
Пришлось отключить его.
Доброго времени суток! Установил плагин, настройки по Вашим рекомендациям. Скорость загрузки для компьютеров улучшилась. А вот для мобильных устройств стало хуже. Где можно еще копнуть?
Ахтыж правду-матку рубишь))
Рома,конечно,читала.Но так как в Seo я, дуб,и попав,чисто случайно на эту аналитику, я решила все таки спросить еще раз у тебя.Комментарий то я оставила там, где надо.Пойду исправлять.Но проверяла я не этим сервисом, на который ты указываешь.Может какие-то нюансы будут при исправлении?
Рома,привет! Можешь сказать,что с этим делать?
В верхней части страницы найден блокирующий CSS: 4.
В верхней части страницы найден блокирующий JS: 18.
Таня, а ты статью читала?
Очень подробно и интересно, не знал про такой плагин!
Весь сайт ломает 🙁
Ничего не изменилось от слова «совсем». Все так же ругается на скрипты и css. Причем css не мой, а с cdn сайта. По другому шрифты avesome не подгружаются.
А почему (по какой именно причине или причинам) Google рекомендует убрать эти коды из верхней части страницы?
Леонид, они тормозят загрузку информативной части сайта ставя себя на загрузку в первую очередь. Мы эту очередность ломаем по рекомендации Гугла.
Рома,спасибо за подробное изложение выполнения рекомендаций Гугла.У меня иногда грузятся долго страницы.Может быть связано с низкой скоростью?Давно не проверяла свой блог на скорость загрузки.Хорошо объяснил что и как делать надо. Как для новичков.Воспользуюсь твоей рекомендацией, если Гугл свою рекомендацию нарисует.