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

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

Скажите, вас эта рекомендация тоже ставила в тупик, как и меня? Если так, читайте дальше, я помогу вам решить эту задачку.

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

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

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

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

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

Настройки плагина для WordPress Autoptimize

  1. После установки и активации Autoptimize, перейдите к его настройкам.

Настройки плагина для WordPress Autoptimize

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

  1. Далее перейдите к расширенным настройкам плагина, для чего в правом верхнем углу кликните по кнопочке "Show advanced settings"

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

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

Параметры HTML

Параметры HTML

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

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

Опции JavaScript

Опции 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" в код скрипта как на скриншоте.

атрибут "async"

Опции CSS

Опции 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 Options

CDN Base URL

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

Информация о кэше

Информация о кэше

Save aggregated script/css as static files

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

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

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

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

С уважением, Роман Ваховский.

Хороший человек всегда нажмет на кнопку!
Комментарий > Благодарность > Ссылка на секретную страницу блога

15 комментариев: Удалите из верхней части страницы код javascript и CSS при помощи WordPress плагина Autoptimize

Страница 1 из 11
  • Татьяна говорит:

    Рома,спасибо за подробное изложение выполнения рекомендаций Гугла.У меня иногда грузятся долго страницы.Может быть связано с низкой скоростью?Давно не проверяла свой блог на скорость загрузки.Хорошо объяснил что и как делать надо. Как для новичков.Воспользуюсь твоей рекомендацией, если Гугл свою рекомендацию нарисует.

  • Леонид говорит:

    А почему (по какой именно причине или причинам) Google рекомендует убрать эти коды из верхней части страницы?

    • Роман Ваховский говорит:

      Леонид, они тормозят загрузку информативной части сайта ставя себя на загрузку в первую очередь. Мы эту очередность ломаем по рекомендации Гугла.

  • Денис говорит:

    Ничего не изменилось от слова "совсем". Все так же ругается на скрипты и css. Причем css не мой, а с cdn сайта. По другому шрифты avesome не подгружаются.

  • Татьяна говорит:

    Рома,привет! Можешь сказать,что с этим делать?

    В верхней части страницы найден блокирующий CSS: 4.

    В верхней части страницы найден блокирующий JS: 18.

  • Татьяна говорит:

    Рома,конечно,читала.Но так как в Seo я, дуб,и попав,чисто случайно на эту аналитику, я решила все таки спросить еще раз у тебя.Комментарий то я оставила там, где надо.Пойду исправлять.Но проверяла я не этим сервисом, на который ты указываешь.Может какие-то нюансы будут при исправлении?

  • Игорь говорит:

    Доброго времени суток! Установил плагин, настройки по Вашим рекомендациям. Скорость загрузки для компьютеров улучшилась. А вот для мобильных устройств стало хуже. Где можно еще копнуть?

  • Владимир говорит:

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

  • Александр говорит:

    Здравствуйте!Установлен данный плагин, а проблему не решает.Тест скорости 61/100. Как увеличить непонятно.Может плагины тормозят.

  • Кирилл говорит:

    Мдааа... После всех этих манипуляций показатели PageSpeed Insight стали хуже!!!

Страница 1 из 11

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Поиск по блогу
Подписка тут
подписка

Все права защищены © 2011-2017. WordPress-book.ru

Копирование материалов разрешено только с размещением открытой обратной ссылки на источник.