Удалите из верхней части страницы код javascript и CSS
Здравствуйте, уважаемые коллеги веб-мастера! Мало кто из нас не проверял свой сайт на скорость загрузки всем известным сервисом 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, вы конечно захотите посмотреть результаты своего труда в вышеупомянутом сервисе. Сохраняйте изменения нажатием кнопки «Сохранить изменения и очистить кэш» чтобы проверять только свежие страницы.
Надеюсь, вы справитесь, скорость вашего сайта возрастет и это обязательно отметят поисковые машины.
Удаляем из верха страницы JavaScript и CSS по рекомендации PageSpeed Insights.
Доброго времени суток с вами я Лифанов Валентин и блог wpsovet.ru. Я продолжаю цикл статей посвященных требованиям сервиса PageSpeed Insights, сегодня разберем грубейшее нарушение по мнению этого ресурса, оно звучит так “Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение”, далее вы поймете почему оно одно из важных. Я продолжаю анализировать блог ruletov.net, и вот скриншот, который подтверждает ошибки.
Для начала немного теории.
Для оптимизации очень важна такая штука, как скорость загрузки, не буду хвалиться, но она у меня 100%. А самый важное из этого требования, отклик сайта при заходе на него и начальное формирование, а точнее то время за которое все это происходит, и чем оно меньше тем лучше. А теперь смотрите, нам важен быстрый отклик сайта, а как он быстро отзовется если в самом начале грузятся всякие js скрипты, стили всяких плагинов и тому подобное. Я зашел в код страницы и сразу увидел, глядите снимок (я только две строчки снял под ними, еще больше всего).
В результате чего у нас в начале выводится не сам сайт, а его периферические дополнения. Проще говоря сайт не показывается потому, что вместо него вылезают различные другие элементы, а потом уже он сам. Конечно же, не надо их удалять ни в коем случае, просто надо их переместить в другое место.
Данное правило срабатывает если, у вас в разделе <header>и<body> идут загрузки скриптов js. С этим надо бороться, но руками я ничего хорошего не добился, вроде все делал грамотно, перемещал все загрузки в раздел<footer>, перечитал множество статей и мануалов, одно делаешь, другое перестает работать. Пришел к выводу, либо я дурак, либо лыжи не едут.
Решение проблемы.
А разгадку я нашел, как ни прискорбно, в плагине Autoptimize, очень долго я сопротивлялся, но делать не чего. Ставиться он стандартно, я лично через поиск в самой административной панели. Я выяснил, что многие его ставят, чтобы не запариваться, да и нагрузка от него почти никакая. Поставив его я очень удивился, все стало работать как надо, и PageSpeed не ругается. Теперь собственно переходим к разбору плагина, потому как могут произойти проблемы в настройках. Заходим в настройки плагина и начинаем разбор.
Перед началом, сразу же включите расширенный режим, нажатием кнопки “Show Advansed Settings”.
Параметры HTML, обязательно включаем, при этом всё будет перестроено, в самой теме вы ничего не обнаружите, но зайдя в исходный код, увидите там “месиво”, просто плагин по максимуму сжимает содержимое, убирая лишние пробелов и переносы. Насчет “Сохранять комментарии”, тут на ваше усмотрение, просто у вас в исходнике останутся все пометки в коде, я оставил пусть будет.
- Оптимизировать код JavaScript? Здесь ставим галочку. Маленько поясню, оптимизация сводиться к тому, что плагин, компонует js файлы меж собой и отправляет их прямиком в подвал сайта.
- Force JavaScript in <head>? Спорный, если у вас очень много jquerry, то при их перемещении в футер, они могут перестать работать.Но тогда я не совсем понимаю, для этого и ставиться Autoptimize, чтобы все переместить вниз, а тут вот такое, но в любом случае я не включаю, нет смысла, тем более jquery элементов, у меня только один.
- Look for scripts only in <head>?(deprecated). Переводиться как искать скрипты только в разделе head, и в скобочках, почему-то, не рекомендуется. Опять не понимаю, почему нельзя, именно этого нам и надо, чтобы всё из головы уходило в подвал, в любом случае отмечаем.
- Exclude scripts from Autoptimize. Этот пункт мне очень нравится, если у вас что-то перестало работать в результате работы этого плагина, то сюда просто прописываете название скрипта, и он затронут не будет, клевое решение.
- Add try-catch wrapping? Я не ставил здесь, она добавит к нерабочим скриптам свой тег, что предотвратит их использование, и помех для других. Во-первых, у меня нет нерабочих, во-вторых, мне не нужны какие-то теги в теле сайта, поисковики могут не так понять. Лучше сами проверьте работоспособность всего на блоге.
- Оптимизировать код CSS? Включаем чек бокс однозначно. Плагин все сделает сам, удалит лишние строчки в коде стилей, и поместит их на нужное место.
- Generate data: URIs for images?, Look for styles only in <head>?(deprecated), Inline and Defer CSS?. Все эти вещи не включаем, они будут делать только хуже, описывать не буду.
- Inline all CSS? На скриншоте показано что галочка стоит, но пока ее выключил. Смысл в том что, когда он активен, почти весь файл стилей переносится в страницу. С одной стороны не идет загрузка стилей, а с другой код становится громадным, что тоже дает нагрузку. Решайте сами, я пока окончательного вердикта вынести не могу.
- Exclude CSS from Autoptimize. То же самое что и в прошлом случае, список исключаемых, только уже css, которые плагин трогать не будет.
В самом конце включаем чек бокс и сохраняем все настройки, и на этом все сделано. Мы одним выстрелом, убили трех зайцев, сжали и оптимизировали html составляющую, js теперь загружаются правильно, а css максимально сбавило свой вес и нашло свое место.
P.S. А вам статья понравилась? Если честно не думал что получиться так все длинно, но зато все подробно.
ИсточникУдалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Сообщение удалите код JavaScript и CSS, блокирующий отображение верхней части страницы – это рекомендации Google по ускорению вашего сайта. Такое пожелание к оптимизации ресурса можно встретить, если вы проверите свой сайт на скорость загрузки в PageSpeed Tools.
Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Что это означает
На своем ресурсе Гугл анализирует сайты и выдает основные рекомендации – что должен сделать веб-мастер, чтобы сократить время загрузки страницы, а значит, результатом этого станет повышение позиций сайта в поисковой выдаче.
Если остальные рекомендации, типа: оптимизируйте изображения, оптимизируйте загрузку видимого контента и тому подобные, выполнить не составит проблем, то «удалите код JavaScript и CSS, блокирующий отображение верхней части страницы», которое является одним из важнейших действий, заставляет владельцев сайтов поломать голову – как это можно исправить.
Скажу сразу – я не силен в программировании и на своем WordPress блоге предпочитаю скрипты ручному изменению кода системных файлов. Задался решением, как выполнить данную рекомендацию и я нашел выход.
Плагин Autoptimize устраняет эту проблему
1) Установите плагин Autoptimize.
2) Настройте в точности, как я описал в этой статье.
3) Если PageSpeed Tools до сих пор показывает ошибку, посмотрите на какие скрипты он реагирует и удалите их из строчки в настройках плагина Autoptimize (опции JavaScript — Exclude scripts from Autoptimize). Это означает, что они будут оптимизированы.
4) Радуйтесь! PageSpeed Tools больше не ругается.
Я рассказал вам, как устранить рекомендацию удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Теперь видимая часть страниц стала загружаться намного быстрее, сайт занимает более высокие позиции в поиске, посетителей стало больше.
Кстати, вот сравнение оценки моего сайта до того, как я занялся оптимизацией (тогда еще по глупости пользовался конструктором WIX) и после того, как я перешел на WordPress (здесь получил широкий спектр инструментов для улучшения своего блога). Сегодня моя оценка 96%. А у вас?
Добавлено 17.05.2017:
Удалил Вебвизор от Яндекса (так как он сильно тормозит скорость загрузки) и сменил код Метрики на сайте. Теперь у меня 98%.
Проблемы с сайтом, блокирующий код
Модератор Yui(@fierevere)
ゆい
игнорировать.
не надо воспринимать все их рекомендации как абсолютный посыл к действию
на что надо обращать внимание:
общий размер страницы, количество запросов
кеширование на уровне браузера основных ресурсов сайта ( и то pagespeed будет ругаться на внешние ресурсы, втч и расположенные в google, что иронично )
сжатие css,js,шрифтов
размеры картинок, если сжатие их позволяет уменьшить размер более чем на 10%
Вот что мне еще гугл пишет:
Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Сократите время ответа сервера
Используйте кеш браузера
Включите сжатие
мне нужно хотя бы еще +5 добавить в гуглспид. Может что то посоветуете?
Модератор Yui(@fierevere)
ゆい
Используйте кеш браузера
добавляете в .htaccess (в начало или конец, но вне блока #Begin WordPress и #End WordPress)
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 1 year"
</IfModule>Включите сжатие
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl|woff|woff2|ttf|eot)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>аналогично предыдущему коду.
С остальным «бороться» будет сложнее
Сжатее у меня включено и кэширование
он требует КЭШ браузера для гугл аналитикс
Сжать он просит только Плагин форма 7…как это сделать?
Модератор Yui(@fierevere)
ゆい
@bordon1978
Ух ты
хотели что-то добавить по существу вопроса?
DS(@dosolnce)
Ох, воюю с гуглом на ту же тему. Есть идеальное решение, увы, оно не спасает, если некоторые скрипты хоть тресни нужны перед head. Например, гугл в восторге, но перестает работать плагин vk-photos, либо код, отвечающий за спойлеры, либо вообще ппц при открытии любой страницы. Тут все зависит от начинки вашего сайта. На всякий случай вот статья — https://habrahabr.ru/post/264033/
CSS и JavaScript, блокирующие загрузку страницы в WordPress
В этом посту будет подразумеваться, что вы знакомы с инструментом Google по оптимизации скорости загрузки страниц сайта — PageSpeed Insights. Слушайте, да прямо сейчас вбейте туда свой сайт нажмите кнопку «Analize».
Окей, а теперь — о чём этот пост?
Вполне возможно, что в результатах проверки вашего сайта есть пункт «Eliminate render-blocking JavaScript and CSS in above-the-fold content».
Я заметил, что этот пункт один из самых трудноразрешимых (трудоёмких) и практически на всех сайтах, даже на очень быстрых, он присутствует.
Как его исправить в теории:
- Объединяем все JavaScript файлы и размещаем то, что получилось перед закрывающим тегом
</body>сайта. - Объединяем все CSS, суём прямо перед JavaScript, которые мы уже переместили, затем выбираем из них те стили, которые необходимы для корректного отображения страницы, а в особенности её верхней части (первого экрана) и помещаем их в тег
<style>в<head>сайта.
Как же обстоит дело на практике, и в данном конкретном случае — для сайтов на WordPress?
1. Воспользуемся зависимостью других скриптов от jQuery
В корректно состряпанной теме WordPress все CSS и JS файлы подключаются через wp_head() и wp_footer() — то есть в <head> и в конце </body> соответственно.
Также у файлов есть зависимости, то есть например плагин fancybox.js должен подключаться после jquery.js, а это значит, что если библиотека jQuery находится в wp_footer(), то FancyBox ну никак не может попасть в wp_head().
Перемещаем jQuery в футер сайта
Делается это очень просто — при помощи функций wp_deregister_script(), wp_register_script(), wp_enqueue_script() и хука init в связке с is_admin()). Всё, что требуется от вас, это вставить код следующего содержания в файл functions.php вашего сайта.
add_action('wp_enqueue_scripts', 'true_peremeshhaem_jquery_v_futer');
function true_peremeshhaem_jquery_v_futer() {
// снимаем стандартную регистрацию jQuery
wp_deregister_script('jquery');
// регистрируем для подключения в футере, описание параметров - в документации функции (ссылка чуть выше)
wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);
// подключаем
wp_enqueue_script('jquery');
}Хочу обратить ваше внимание на то, что это автоматизированное решение, и хотя оно работает практически в 100% случаев, бывает такое, что некоторые скрипты не хотят переноситься в футер сайта. Тогда уже потребуется более внимательный к каждому вашему файлу JavaScript.
На этом наша работа с JS заканчивается, конечно прирост в скорости даст ещё и объединение скриптов (то есть снимаете их все с регистрации и потом просто подключаете свою объединенную версию) — но Google сейчас это уже не требует.
2. Объединение CSS в WordPress
Если объединение всех JavaScript в один файл — не всегда хорошая идея, то CSS-ки я бы рекомендовал объединять по возможности всегда.
Помните скриншот в самом начале статьи (10 blocking CSS resources)? Откуда берется такое количество файлов стилей, ведь разработчик темы наверное понимал, что делает?
Ответ — из плагинов.
Например плагин «Contact Form 7» подключает свою собственную таблицу стилей, и хотя сама по себе она невелика, то лучше всё же избежать лишних HTTP-запросов.
Давайте пошагово разберем как.
- Копируете содержимое таблицы стилей плагина и вставляете его в конец основного файла стилей —
style.css - Проверяете, проставлены ли в данных стилях относительные ссылки на изображения, например
url('images/load.gif'). Если да, то либо заменяете их на абсолютные, либо переносите изображения из плагина в папку с темой. - Заходите в настройки плагина и смотрите, есть ли возможность где-нибудь снять галочку и не подключать CSS плагина. В «Contact Form 7» такой возможности нет, а значит мы переходим к следующему пункту.
- Отрубаем файлы через
functions.php. Для стилей «Contact Form 7» код будет следующий:add_action( 'wp_print_styles', 'true_otkljuchaem_stili_contact_form', 100 ); // по идее вы можете использовать и хук wp_enqueue_scripts, хотя конкретно его я не тестировал function true_otkljuchaem_stili_contact_form() { wp_deregister_style( 'contact-form-7' ); // в параметрах - ID подключаемого файла }
Также иногда при помощи условных тегов файлы плагинов (как CSS, так и JS) отключают только с тех страниц, на которых они не используется.
Ок, с «Contact Form 7» разобрались, а как узнать ID файлов CSS других плагинов?
Да легко, открываем исходный код страницы и видим там подобную картину:
Также есть плагин, который позволит выполнить объединение CSS и JavaScript автоматически — JS & CSS Script Optimizer.
Если у вас остались вопросы, либо я забыл упомянуть о чем-либо в этой статье, пожалуйста, оставьте свой комментарий.
Миша
В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.
Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.