Удаляем из верха страницы JavaScript и CSS по рекомендации PageSpeed Insights

Здравствуйте, уважаемые коллеги веб-мастера! Мало кто из нас не проверял свой сайт на скорость загрузки всем известным сервисом PageSpeed Insight от Google и не сталкивался при этом с рекомендацией - " ".

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

Так зачем же все эти сложности, когда вопрос можно решить установкой плагина, который выполнит требуемую работу за вас раз и навсегда. Игра стоит свеч, ведь выигрыш в скорости многократно превысит проигрыш от нагрузки расширения.

Итак, для выполнения рекомендаций Гугла по удалению кода javascript и CSS из верхней части страницы я подрядил плагин Autoptimize, который объединяет скрипты и стили в один файл и переносит его из верхней части страницы, чего мы собственно и добиваемся. Кроме того, плагин сокращает HTML, JS и CSS (еще один плюсик нам от PageSpeed Insight).

Таким образом, мы убьем сразу много зайцев:-).

Плагин можно найти по названию через поиск в панели администратора сайта или скачать с депозитария WordPress по адресу - https://ru.wordpress.org/plugins/autoptimize/

Расставьте галочки.

Для успешного завершения миссии на сайт мне хватило поставить галочку в шестом пункте у Inline all CSS в опциях CSS, как на скриншоте ниже, и все на этом.

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

1 Активируйте опцию "Оптимизировать код HTML " если этого просит PageSpeed Insight.

2 Комментарии HTML я сохранять не стал за ненадобностью.

Если после активации плагина под рекомендацией "Удалите из верхней части...." исчезли из списка JS и сайт продолжает работать по-прежнему, без перекосов, без конфликтов плагинов и т.д., оставьте тут настройки как есть. Иначе поэкспериментируйте со следующими опциями:

Некоторые скрипты требуют загрузки только с верхней части страницы (от чего мы как раз избавляемся), иначе они будут работать некорректно или вообще объявят забастовку. Опция обеспечивает им это условие к недовольству PageSpeed Insight. Включите в самом крайнем случае, только если не помогут функции ниже.

Речь идет об интеграции JS в HTML. После включения, как уверяет разработчик, должна значительно вырасти скорость сайта. Параметр активен по умолчанию.

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

Если какой-либо скрипт работает некорректно, он не даст жизни остальным. Опция позволяет обойти сломанный JS и продолжить работу.

Многие веб-мастера размещают в сайдбаре различные блоки, работающие на JS. Это могут быть блоки подписки, перенаправления трафика партнерских программ и тому подобные. Чтобы скрипт блока не блокировал загрузку (плагин отказался решать эту задачу), отложите ее. Для этого просто вставьте атрибут "async " в код скрипта как на скриншоте.

Как уже было обговорено, опция сокращает все CSS и объединяет их в один файл. Для удаления CSS из верхней части страницы этого недостаточно.

Если в каком-либо файле CSS прописаны пути к маленьким изображениям (меньше 4кб), то этот запрос будет прописан в основном файле CSS.

Замена шрифтов Гугла (которые почему-то не любит PageSpeed Insight если таковые наличествуют) на стандартные.

Как и в случае с JS, опция интегрирует ту часть CSS в HTML, которую посчитает нужной, что также должно положительно сказаться на скорости загрузки.

Позволяет интегрировать в HTML только CSS видимой отрисовки сайта с отложенной загрузкой остального кода CSS.

Если задействовать, откроется поле, в которое требуется вставить этот самый кусок CSS видимой отрисовки. Полезно мегапорталам с множеством файлов CSS, чтобы не увеличивать до запредельных размеров их HTML.

Для определения CSS видимой отрисовки существует несколько сервисов, о которых упоминается в разделе "fag" на странице плагина. Эту функцию я не активировал ни разу и пока описывать не буду, если только вы не попросите в комментариях.

В отличие от предыдущего пункта, опция интегрирует вообще все стили в HTML. После активации, как правило, PageSpeed Insight перестает ругаться на блокирующие CSS в верхней части страницы .

7 Exclude CSS from Autoptimize

Оптимизация CSS, как и JS, может повлечь за собой их неправильную работу. Добавьте сюда эти файлы, чтобы исключить их из оптимизации.

Если сайт использует CDN сервера для сокращения времени загрузки при передаче данных на большие расстояния, впишите сюда их URL.

Опция выключит статическое сжатие скриптов и стилей. Активируйте, если на сайте используется Gzip сжатие.

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

Надеюсь, вы справитесь, скорость вашего сайта возрастет и это обязательно отметят поисковые машины.

Удалите из верхней части страницы код javascript и CSS при помощи WordPress плагина Autoptimize обновлено: Апрель 29, 2017 автором: Роман Ваховский

Google с каждым годом обновляет свой поисковик для того, чтобы в сети были только качественные сайты. Для проверки качества сайта они предоставляют сервисы проверки, которые не надо игнорировать, ведь чем качественнее сайт, тем он лучше ранжируется поисковиками и, следовательно, тем выше сайт будет в результатах поиска.

Рассмотрим сервис от Google по проверки скорости загрузки сайта - PageSpeed Insights. У большинства сайтов возникает ошибка «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы». Это происходит потому, что до введения гуглом правил по улучшению скорости загрузки, все верстали сайты по-другому. Разберем этот пункт подробнее.

У большинства сайтов возникает ошибка «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы»

Как влияют блокирующие css?

Google в своих рекоммендациях пишет: «Браузеры запрашивают внешние файлы CSS перед отображением контента на экране. Это приводит к задержке и замедляет обработку страницы.» . Рекомендуется если css малых объемов, то можно вставить его в документ HTML, а при больших объемах страниц, нужно вставлять строки css, которые отвечают на видимую часть сайта при первой загрузке. Тем самым сайт будет загружаться быстрее используя только нужные стили для отображения сайта, и только потом догружать остальные элементы, которые не видит пользователь изначально.

Как влияют блокирующие js?

Google поясняет это: «Перед отображением страницы браузер должен выполнить ее синтаксический анализ. Если при этом он обнаруживает внешний скрипт, он должен его загрузить. Это лишний цикл операций, который замедляет показ страницы» . Рекомендуется оставлять код в документе HTML, только тот участок скрипта, который нужен для отображения верхней части сайта, который должен увидеть пользователь. Можно также просто отложить загрузку js в верхней части сайта с помощью атрибута async . К примеру

Изначально проверим сайт на скорость загрузки.

Мобильная версия - 90/100. Так на мобильной версии нет js подключений, у нас только задача с css. Уберем подключение блокирующего файла css вниз сайта и оставим только стили видимой части в . Смотрим результат:

Теперь проверяем декстопную версию сайта

96/100 и все та же задача с блокирующим css. Скрипты js для просмотра анимации тут расположены внизу по умолчанию, так как показ анимации слайдов тут нужен после прогрузки всей страницы. Проделываем тоже самое, что и с мобильной версией.

В css тут настроена адаптация с помощью @media screen, но в тело документа мы ставим стили по умолчанию, а @media screen оставили в css документе, которая подключается ниже.

Результаты отличные..ru.

По разработке и наполнении сайта проблем не выявлено. Что и следовало доказать.

Проверка на одном сайте еще не дает полной картины, и поэтому берем второй проект на проверку. Для более наглядных изменений проверим сайт на двух сервисах по выявлению скорости загрузки.

Смотрим результаты до проведения наших работ.

Проведем работы по мобильной версии. Подключение jquery перенесли вниз. css верхней части контента поставили. Интересно, что даже скрытые в верхней части блоки, тоже нужно описывать в теле html документа, если этого не делать то google ругается на это.

Переходим к декстопной версии. После тех же манипуляций с кодом css и js мы получили

И взглянем на результаты по сервису site-speed

Тут показатели не 100 процентные, так как в этой статье мы рассматриваем только ошибку блокирования css и js файлов.

Что можем сказать в итоге по этой ошибке?

Ошибка играет не последнюю роль в загрузке сайта. Судя по проекту ufa-da, сервис site-speed дает в 34% от всех факторов загрузки, а google дает 11-12%. Проект ufa-da привожу в итоге, как так он близок по структуре и верстке ко всем сайтам, ежели site-rb. Отсюда вывод, что стоит обратить внимание на эту ошибку. Если поисковик google все больше внимания уделяет качественным сайтам, то для продвижения вашего сайта будет только плюсом.

Отсюда вывод, что стоит обратить внимание на эту ошибку

Из большинства онлайн-инструментов, которые направлены на анализ сайта для обнаружения проблем и технических данных, сервис PageSpeed Insights от Google оказался самым популярным. Несмотря на значимость его рекомендаций, многие стараются добиться заветных баллов оценки скорости своего ресурса. Но на самом деле важность некоторых пунктов очень сильно преувеличена.

В этой статье мы рассмотрим особенности и решения самых распространенных проблем, выявленных сервисом PageSpeed Insights. И в конечном результате получим оценку не менее 85-95 баллов, что в сущности должно улучшить скорость загрузки WordPress.

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

Записываем или сохраняем наши результаты и начинаем работу над сайтом.

Первое с чего начнем, так это с включения gzip сжатия, чтобы уменьшить объем данный в передачи между отправителем и получателям. Такая функция, по идее, активирована по умолчанию на многих хостингах. Если она у вас не активирована, тогда вставляем следующий код в конфигурационный файл .htaccess .

# Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Удалить ошибки браузера (требуется только для очень старых браузеров) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0 no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent

Код для сервера Nginx:

Gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_disable "MSIE .(?!.*SV1)"; gzip_vary on;

Это один из пунктов, где встречается не совсем правильная рекомендация. Речь идет не обо всех файлах, подключаемых в теге head, а только о тех, которые отвечают за корректность отображения сайта. Если мы перенесем, допустим, основной файл стилей в самый низ, то сайт в первые секунды загрузки будет загружаться без стилей. Стало быть, пользователь увидит беспорядочную страницу с разброшенными веб-элементами и абсолютно без стилей (т.е. «голую»).

Поэтому не нужно менять подключение стилей сайта и переносить их в подвал или ставить в последнюю очередь. А вот насчет остальных есть смысл пересмотреть их расположение. У плагина Better WordPress Minify есть встроенный менеджер файлов css и js. С помощью его можно легко менять подключение скриптов, то есть переносить из head в footer.

Подключение скриптов

Что касается подключения своих скриптов к теме, то лучше всего объединять их в один файл, чтобы уменьшит количество запросов. А после подключить не через тег script , как обычно, а через файл functions.php в футер сайта, таким образом:

Function my_scripts_method() { wp_enqueue_script("id-script", get_template_directory_uri() . "/js/script.js", array(), null, true); } add_action("wp_enqueue_scripts", "my_scripts_method");

Подключение скрипта только на определенной странице.

Function my_scripts_method() { if(is_page("1984")) { wp_enqueue_script("id-script", get_template_directory_uri() . "/js/script.js", array(), null, true); } } add_action("wp_enqueue_scripts", "my_scripts_method");

Подключение скрипта во всех типах записей, только не на главной.

Function my_scripts_method() { if (is_singular()) { wp_enqueue_script("id-script", get_template_directory_uri() . "/js/script.js", array(), null, true); } } add_action("wp_enqueue_scripts", "my_scripts_method");

Подключение скрипта только внутри статьи.

Function my_scripts_method() { if (is_single()) { wp_enqueue_script("id-script", get_template_directory_uri() . "/js/script.js", array(), null, true); } } add_action("wp_enqueue_scripts", "my_scripts_method");

Все довольно просто: меняем только функцию условия. Для подключения из дочерней темы нужно изменить функцию пути на эту get_stylesheet_directory_uri() .

Подключение стилей

Стили в WordPress подключаются с помощью функции wp_enqueue_style в заголовок сайта. В принципе, это правильно, поэтому у функции нет параметров для изменения место подключения. Но если уж очень нужно, чтобы стили подключались в подвале сайта, то можно сделать так:

/* style footer */ function my_add_footer_styles() { wp_enqueue_style("id-style", get_template_directory_uri() . "/css/style.css", array(), "1.0"); }; add_action("get_footer", "my_add_footer_styles");

А с помощью условных функций, которые использовались чуть выше, устанавливаем определенные места подключения.

Подключение библиотеки jQuery

По умолчанию WordPress подключает библиотеку из своей директории и также в заголовок сайта. Если нам нужно изменить версию jQuery или зарегистрировать ее в подвале, тогда мы вначале удаляем старую при помощи функции wp_deregister_script и тут же регистрируем свою.

/* Регистрация jQuery */ function jquery_script_method() { wp_deregister_script("jquery"); wp_register_script("jquery", "https://code.jquery.com/jquery-2.0.0.min.js", false, null, false); wp_enqueue_script("jquery"); } add_action("wp_enqueue_scripts", "jquery_script_method");

Отключаем стили плагинов

Многие плагины подключают свои стили в шапке сайта, где могут идти даже первую очередь загрузки. Это не совсем правильно, тем более, если они не в приоритете. Можно поступить так: находим в файлах плагина подключение стилей.

Пример из WP-Pagenavi

Wp_enqueue_style("wp-pagenavi", $css_file, false, "2.70");

Копируем его уникальный идентификатор – это wp-pagenavi, а после в файле functions.php вашей темы вставляем такой код:

Add_action("wp_print_styles", "my_deregister_styles", 100); function my_deregister_styles() { wp_deregister_style("wp-pagenavi"); }

Вот и все их больше нет, только в таком случае нужно стили этого плагина перемещать в свои, конечно, если они нужны.

Переносим все скрипты в footer

Есть такой небольшой плагин , который написал автор Vladimir Prelovac. Он переносит все подключения, даже те, которые не нужно, в низ сайта. Используйте на свое усмотрение.

Function footer_enqueue_scripts(){ remove_action("wp_head","wp_print_scripts"); remove_action("wp_head","wp_print_head_scripts",9); remove_action("wp_head","wp_enqueue_scripts",1); add_action("wp_footer","wp_print_scripts",5); add_action("wp_footer","wp_enqueue_scripts",5); add_action("wp_footer","wp_print_head_scripts",5); } add_action("after_setup_theme","footer_enqueue_scripts");

В этом пункте нам сервис Google рекомендует использовать кэширование браузера, что позволит уменьшить нагрузку на сервер. Все это так, но только не все нужно кэшировать, в частности, статистику от Яндекс или самого Google. Точнее, они уже кэшируются, но только на короткое время. Такое предупреждение смело можно игнорировать по той простой причине, что это внешние скрипты, и у вас нет к ним доступа.

Разве что в виде исключений, если того требует желание добиться максимальной оценки. Имеется пару вариантов: отказаться от их использования, переместить скрипты на свой сайт. Для Google аналитика есть специальный плагин , который позволит загружать библиотеку локально.

Насчет Яндекса чуть сложнее, так как для него нет подобных плагинов. Можно провести лишь эксперимент: скачать скрипт метрики по адресу https://mc.yandex.ru/metrika/watch.js , сохранить его на сайте, а в подключении изменить путь скрипта. Насколько правильно он будет работать – не знаю. Это просто один из вариантов.

А пока включим кэширование браузера. Для этого поместите ниже представленный код в файл .htaccess

Header set Cache-Control "max-age=84600, public"

Код для сервера Nginx:

Location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ { expires 2d; add_header Cache-Control "public, no-transform"; }

Это не банальное замечание, как могло бы показаться на первый взгляд, а весьма значительная деталь, которая имеет прямое отношение к улучшению загрузки сайта. Чем больше будет вес картинки, тем дольше будет загружаться страница. Никто не говорит, что нужно полностью отказаться от медиафайлов. Просто необходимо их оптимизировать перед добавлением на сайт.

Они будут на лету сокращать файлы.

А лучше всего взять просто копию любого файла, переименовать его, к примеру, script.min.js , поместить туда сокращенный код и подключить вместо того, что был. Во всяком случае это можно проделать с теми файлами, которые вы практически никогда не редактируете или очень редко. По окончании проверки сервиса PageSpeed Insights дается ссылка на скачивания всех сокращенных файлов.

Итог. В конечном результате должен выйти весьма неплохо оптимизированный сайт с оценкой не ниже 80 баллов. По всем вопросам смело обращайтесь в комментариях, обязательно отвечу.

Я продолжаю цикл статей посвященных требованиям сервиса PageSpeed Insights, сегодня разберем грубейшее нарушение по мнению этого ресурса, оно звучит так “Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение”, далее вы поймете почему оно одно из важных. Я продолжаю анализировать блог ruletov.net, и вот скриншот, который подтверждает ошибки.

Для оптимизации очень важна такая штука, как скорость загрузки, не буду хвалиться, но она у меня 100%. А самый важное из этого требования, отклик сайта при заходе на него и начальное формирование, а точнее то время за которое все это происходит, и чем оно меньше тем лучше. А теперь смотрите, нам важен быстрый отклик сайта, а как он быстро отзовется если в самом начале грузятся всякие js скрипты, стили всяких плагинов и тому подобное. Я зашел в код страницы и сразу увидел, глядите снимок (я только две строчки снял под ними, еще больше всего).

В результате чего у нас в начале выводится не сам сайт, а его периферические дополнения. Проще говоря сайт не показывается потому, что вместо него вылезают различные другие элементы, а потом уже он сам. Конечно же, не надо их удалять ни в коем случае, просто надо их переместить в другое место.

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

А разгадку я нашел, как ни прискорбно, в плагине Autoptimize, очень долго я сопротивлялся, но делать не чего. Ставиться он стандартно, я лично через поиск в самой административной панели. Я выяснил, что многие его ставят, чтобы не запариваться, да и нагрузка от него почти никакая. Поставив его я очень удивился, все стало работать как надо, и PageSpeed не ругается. Теперь собственно переходим к разбору плагина, потому как могут произойти проблемы в настройках. Заходим в настройки плагина и начинаем разбор.

Перед началом, сразу же включите расширенный режим, нажатием кнопки “Show Advansed Settings”.

Параметры HTML, обязательно включаем, при этом всё будет перестроено, в самой теме вы ничего не обнаружите, но зайдя в исходный код, увидите там “месиво”, просто плагин по максимуму сжимает содержимое, убирая лишние пробелов и переносы. Насчет “Сохранять комментарии”, тут на ваше усмотрение, просто у вас в исходнике останутся все пометки в коде, я оставил пусть будет.

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

P.S. А вам статья понравилась? Если честно не думал что получиться так все длинно, но зато все подробно.

Скорость сайта – это один из самых важных факторов, который помогает привлечь и удержать посетителей. Всё остальные факторы имеют равное значение, но быстрый сайт имеет больше шансов заполучить много пользователей. Это происходит из-за того, что поисковые системы берут данный фактор во внимание при вычислении результатов рейтинга в поиске. Поэтому, если вы хотите оставить своих конкурентов у разбитого SEO корыта, сделайте скорость сайта своим приоритетом.

Конечно, оценить скорость вашего сайта может показаться немного сложным. Есть много факторов, которые могут повлиять на результат – скорость интернет соединения, географическое положение и т.д. Однако не стоит переживать, в этом нелегком деле вам может помочь Google’s PageSpeed Insights . Это бесплатный сервис от Google, который даёт оценку сайту на основе его скорости загрузки. В идеале, вы должны попытаться заполучить самую высокую оценку на PageSpeed. И если вы уже воспользовались данным онлайн инструментом, значит вы могли столкнуться с довольно известной рекомендацией по оптимизации скорости загрузки сайта .

Чтобы узнать немного больше об этой рекомендации, мы должны взглянуть на критерии по которым Google выдаёт баллы на PageSpeed Insights. Существует 10 правил для скорости определенных Google, и несоответствие одному из них выльется в уменьшение количества баллов.

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы одно из этих правил. Обычно загрузка JS и CSS скриптов заставляет браузер отложить загрузку HTML страницы. Конечно, это не является проблемой. Даже больше, это то чего вы хотите, никто не захочет смотреть на сайт без соответствующего оформления.

Однако Удалите код JavaScript и CSS, относится к тем скриптам, которые влияют на отклик страницы, но не используются в содержимом верхней части страницы (ATF). Содержимое ATF – это часть страницы, которая видна пользователю когда страница загружается; любая часть страницы для просмотра которой необходимо прокрутить сайт вниз не является ATF. Поэтому Google этой рекомендацией, говорит вам о том, что у вас на странице присутствуют JS и CSS скрипты, которые без надобности замедляют загрузку сайта , так как часть страницы на которую они влияют ещё не видна пользователю.