Указанным в верхней части страницы. Удаление кода JavaScript и CSS Google PageSpeed

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

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

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

Данное предупреждение срабатывает, когда в коде документа между тегами … обнаружены ссылки на внешние файлы 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 – хороший инструмент для выявления проблемных мест вашего сайта. Но при анализе он не учитывает его индивидуальных особенностей. Поэтому самый главный совет: подходите обдуманно к выполнению его рекомендаций!

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 все больше внимания уделяет качественным сайтам, то для продвижения вашего сайта будет только плюсом.

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

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

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

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

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

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

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

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

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

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

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

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

Продолжаю , теперь передо мной ещё один пункт, который мне подсказал Google: Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение . Сейчас попробую разобраться, что там лишнего и как удалить лишний JavaScript и CSS?

Тесты, я напомню, я произвожу этим сервисом: , где в отношении JavaScript и CSS мне был дан конкретный совет:

Как видите, у меня это самая большая проблема, 8 скриптов подгружается сразу и из-за этого первый экран загружается не так быстро, как хотелось бы. Так же есть 10 css файлов, которые тоже не оптимизированы. Ну что же, будем решать проблему!

По этому вопросу претензии примерно такие:

Удалите код JavaScript, препятствующий отображению:

https://prostolinux.ru/…-includes/js/jquery/jquery.js?ver=1.10.2
https://prostolinux.ru/…s/jquery/jquery-migrate.min.js?ver=1.2.1
https://prostolinux.ru/…query-ui-1.8.10.custom.min.js?ver=1.8.10
https://prostolinux.ru/…ial-textboxes/js/wstb.js.php?ver=3.10.60
https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver=1.6.1

Недавно нашел интересное решение: в function.php нужно вставить код, который будет давать команду нужным нам скриптам загружаться не сразу:

function jquery_in_footer() { wp_register_script(‘tie-tipsy’, get_template_directory_uri() . ‘/js/jquery.tipsy.js’, array(‘jquery’)); wp_register_script(‘tie-easing’, get_template_directory_uri() . ‘/js/jquery.easing.1.3.js’, array(‘jquery’)) ; }

В примере добавлено два скрипта, но мы добавляем сколько угодно, и именно те, которые тормозят загрузку страницы. Попробовал применить это решение - у меня оно не сработало, может что-то не так делал?

Сам google советует в скрипт вставить атрибут async , который делал бы его загрузку асинхронной. Но это решение подходит только для внешних скриптов, например, этот атрибут async можно вставить в script рекламы Яндекс Директ, если у вас его реклама выводится в первом экране. У Яндекса есть и асинхронный код, но он у меня вызывал проблемы - если один блок с асинхронной загрузкой, а второй нет, то показываться будет только один из них. Но сейчас не об этом...

Оптимизировать плагины таким образом трудно, нужно лезть в код каждого плагина и прописывать в него этот атрибут, или его альтернативу. Я не программист и так поступать не буду. К тому же если вы постоянно обновляете плагины, то все ваши труды пропадут после обновления.

На удивление себе я нашел другое, очень простое решение этого вопроса - установил плагин Asynchronous Javascript . После его установки получил результат:

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

Вот так просто решается первый пункт, но как видно - этого еще мало, нужно оптимизировать css, как это сделать?

Как оптимизировать работу CSS?

Напомню список претензий:

Оптимизируйте работу CSS на следующих ресурсах:

https://prostolinux.ru/…wp-special-textboxes.css.php?ver=3.10.60
https://prostolinux.ru/…plugins/wp-ds-blog-map/wp-ds-blogmap.css
https://prostolinux.ru/…t/themes/rockwell_new/rockwell/style.css

В идеале нужно сделать так: взять все данные из этих css файлов и переместить в основной stile.css, а в самих плагинах отключить запрос к ним. Но как понимаете - это дело долгое и нудное, таящее под собой много подводных камней. Может быть в будущем я так и сделаю, но пока у меня нет столько времени и опыта.

Решить же вопрос можно установкой плагина, который сам объединит все стили в один файл. Плагина, который бы выполнял только эту функцию не нашел, поэтому расскажу о плагине, который делает все сразу, и удаляет скрипты, и оптимизирует css.

Как оптимизировать все сразу?

Я решил себе установить плагин Autoptimize , который оптимизирует и скрипты, и css одновременно. После установки плагина нужно лишь зайти в его настройки и поставить галочки в нужном месте:

После этого Google Page Speed выдает такое:

Ни одного скрипта не грузится, только два файла css, которые включают в себя все стили, а все скрипты перемещаются в область подвала. Если теперь посмотреть на исходный код страницы, то там оптимизированная КАША, в которой без бутылки не разобраться.

Сначала я подумал, что этот плагин не решит моих проблем полностью, но как оказалось, это было из за того, что я его не до конца настроил! После выставления галочек в нужном месте я получил ОТЛИЧНЫЙ результат! ВСЕ ПРОБЛЕМЫ ИСЧЕЗЛИ!

Чтобы так получилось нужно нажать кнопку вверху Show advanced settings и тогда появятся дополнительные настройки. Нужно, чтобы стояли галочки в пунктах:

Оптимизировать код HTML?

Оптимизировать код JavaScript?

Look for scripts only in ? (deprecated)

Оптимизировать код CSS?

Inline all CSS?

Save aggregated script/css as static files

После этого правда у меня перестал работать плагин, который фиксирует виджет, но это совсем не проблема, скорость загрузки сайта намного важнее. А еще важнее угодить дяде Гуглу...

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

Еще один подобный плагин - это WP Minify Fix , делает он тоже самое, но он мне меньше понравился, а может я просто в нем не до конца не разобрался.

Я понимаю, что идеально все это делать без плагинов, вручную, но это очень долго и муторно и оно того на самом деле не стоит, ведь даже добившись оценки 100 , вы не выведете сайт в топ - скорость загрузки сайта лишь ОДИН из сотни факторов ранжирования, путь и достаточно важный. Но сделать все что можно - нужно!

Удаление кода JavaScript и CSS Google PageSpeed

СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

1. Payoneer - Самая популярная в мире платежная система для фрилансеров. Выдает карты, находится в США.

2. EpayService - Американская платежная система, очень популярна во многих странах, бесплатно дает карту MasterCard в EVRO для жителей СНГ и Европы.

3. Skrill - Единственная платежная система которая работает с криптовалютами и при этом выпускает бесплатные банковские карты MasterCard.

4. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

5. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.

Домен RU - 99 руб
Домен РФ - 99 руб

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

Возможно вас заинтересует