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

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

Для начала немного теории.

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

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

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

Решение проблемы.

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

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

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

Оптимизировать код JavaScript? Здесь ставим галочку. Маленько поясню, оптимизация сводиться к тому, что плагин, компонует js файлы меж собой и отправляет их прямиком в подвал сайта.

Force JavaScript in ? Спорный, если у вас очень много jquerry, то при их перемещении в футер, они могут перестать работать.Но тогда я не совсем понимаю, для этого и ставиться Autoptimize, чтобы все переместить вниз, а тут вот такое, но в любом случае я не включаю, нет смысла, тем более jquery элементов, у меня только один.

Look for scripts only in ? (deprecated) . Переводиться как искать скрипты только в разделе head, и в скобочках, почему-то, не рекомендуется. Опять не понимаю, почему нельзя, именно этого нам и надо, чтобы всё из головы уходило в подвал, в любом случае отмечаем.

Exclude scripts from Autoptimize . Этот пункт мне очень нравится, если у вас что-то перестало работать в результате работы этого плагина, то сюда просто прописываете название скрипта, и он затронут не будет, клевое решение.

Add try-catch wrapping? Я не ставил здесь, она добавит к нерабочим скриптам свой тег, что предотвратит их использование, и помех для других. Во-первых, у меня нет нерабочих, во-вторых, мне не нужны какие-то теги в теле сайта, поисковики могут не так понять. Лучше сами проверьте работоспособность всего на блоге.

Оптимизировать код CSS? Включаем чек бокс однозначно. Плагин все сделает сам, удалит лишние строчки в коде стилей, и поместит их на нужное место.

Generate data: URIs for images?, Look for styles only in ? (deprecated), Inline and Defer CSS? . Все эти вещи не включаем, они будут делать только хуже, описывать не буду.

Inline all CSS? На скриншоте показано что галочка стоит, но пока ее выключил. Смысл в том что, когда он активен, почти весь файл стилей переносится в страницу. С одной стороны не идет загрузка стилей, а с другой код становится громадным, что тоже дает нагрузку. Решайте сами, я пока окончательного вердикта вынести не могу.

Exclude CSS from Autoptimize . То же самое что и в прошлом случае, список исключаемых, только уже css, которые плагин трогать не будет.

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

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

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

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

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

Однако Удалите код JavaScript и CSS, относится к тем скриптам, которые влияют на отклик страницы, но не используются в содержимом верхней части страницы (ATF). Содержимое ATF – это часть страницы, которая видна пользователю когда страница загружается; любая часть страницы для просмотра которой необходимо прокрутить сайт вниз не является ATF. Поэтому Google этой рекомендацией, говорит вам о том, что у вас на странице присутствуют JS и 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%.

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

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

Суть проблемы

Данное предупреждение срабатывает, когда в коде документа между тегами … обнаружены ссылки на внешние файлы javascript и css. И пока они не будут загружены, дальнейший рендеринг страницы не будет выполняться. Таким образом они блокируют вывод контента на странице.

Как удалить JavaScript, препятствующий отображению верхней части страницы

•  Для начала мы должны убедиться, что JavaScript не участвует в процессе отображения страницы.
•  Скрипты небольшого размера размещаем в самом содержимом HTML страницы. Например:
•  
•  Проверяем скрипты на зависимости и очередность загрузки. Если ни того, ни другого не имеется, то добавляем к ним атрибут «async»:
•  
•  Благодаря этому атрибуту такие скрипты будут загружаться асинхронно.

Данную инструкцию нельзя применять к библиотеке JQuery, которая используется в подавляющем большинстве сайтов. Далее рассмотрим правильное решение для JQuery.

Если поместить jquery.js перед закрывающим тегом или попытаться загрузить его асинхронно, то зависимые скрипты попросту перестанут работать и многие функции сайта «отвалятся». Правильным решением в данном случае может послужить использование события onload:

function asyncjs() {
 … 
}

На популярных cms для решения таких задач используются плагины. Их принцип несколько отличается от описанного выше. Рассмотрим на примере Autoptimize для Wordpress:

•  Плагин объединяет все *.js и инлайновые скрипты в один файл. При этом очередность загрузки сохраняется.
•  Единый файл подключается в подвале страницы с атрибутом async .

Вы так же можете использовать данный метод для самописных cms или сайтов на чистом HTML:

Блокирующие css – варианты решения

На данный момент самым новым способом решить эту проблему является использование стандартизированной директивы preload . Она позволяет браузерам получать style.css не блокируя рендеринг.

Первооткрывателем этого способа был Scott Jehl , дизайнер и разработчик из The Filament Group.

Несомненно, будущее за этим решением. Но, к сожалению, в настоящее время еще не все браузеры поддерживают preload .

Поэтому мы не будем сейчас обсуждать этот метод более подробно, а рассмотрим консервативный способ.

Смысл этого метода заключается в том, чтобы поместить в секцию head самые важные фрагменты стилей (critical css), которые необходимы для первоначальной отрисовки страницы. В свою очередь, основные файлы css будут загружаться после загрузки контента. Большинство новичков допускают серьезную ошибку на этом этапе, и вставляют все имеющиеся стили в документ. Это не только не решает ситуацию, но и усугубляет ее.

Правильное решение:



/*Критический css*/
h1 {text-align: center; color: #ccc }



Контент страницы
...



$(document).ready(function() {
$("head").append("");
});

Еще одной распространенной ошибкой является создание большого количества правил для критического css. Это характерно для сайтов с большим количеством контента на странице – разнообразные слайдеры, виджеты и прочее. Если мы уменьшим количество правил, страница будет дергаться. Если увеличим – получим предупреждение «Оптимизируйте загрузку видимого контента». В этом случае я бы рекомендовал объединить все стили в один файл и подключить традиционным способом.

В заключение хочу добавить, что Google PageSpeed – хороший инструмент для выявления проблемных мест вашего сайта. Но при анализе он не учитывает его индивидуальных особенностей. Поэтому самый главный совет: подходите обдуманно к выполнению его рекомендаций!

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

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

Оптимизируем WordPress по сервису PageSpeed Insights

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

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

Включите gzip сжатие

Первое с чего начнем, так это с включения 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;

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

Это один из пунктов, где встречается не совсем правильная рекомендация. Речь идет не обо всех файлах, подключаемых в теге 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 баллов. По всем вопросам смело обращайтесь в комментариях, обязательно отвечу.