Удалите код javascript и css блокирующий отображение верхней части страницы: удаляем ошибку

 В статье разберемся с таким понятием и пунктом в pagespeed insights как “удалите код javascript и css блокирующий отображение верхней части страницы”. Как с ним бороться и изменить этот пункт напишу ниже (способ только для wordpress).

Установка плагина JS & CSS Script Optimizer

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

Советую прочитать, как использовать autoptimize и как проанализировать блог на вирусы.

Искал замену, нашел классный, устанавливается он стандартным поиском в админпанели.

1. Вкладка.
2. Добавить новый.
3. Вводим запрос JS & CSS Script Optimizer.
4. Устанавливаем и активируем.

Устраняем проблему удалите код javascript и css блокирующий отображение верхней части страницы

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

Первый раздел: включение плагина wordpress и скрытие скриптов

В этом разделе включим плагин полностью и настроим минификацию и скрытие скриптов в подвал.

1. Включаем модуль.
2. Директории на хостинге где будут располагаться кешировнные файлы стилей и javascript.
3. Включение модуля сжатия и оптимизации javascript.
4. Эти два пункта я тестировал, но особых различий не нашел, все остается на своих местах, выбирайте любой, либо тестируйте.
5. Игнорировать внешние скрипты, галочку не ставим, иначе они не будут оптимизированы.
6. Первый чекбокс это объединить все скрипты в два файла и разделить их, первые пойдут в header другие в подвал, не рекомендую ставить, так как не понятно по какому принципу определяется расположение. Второй объединить одним файлом и переместить в подвал, ставим галочку.
7. Исключить, если один из скриптов перестал работать, то прописывайте его название здесь.

Второй раздел: как исправить стили

Плагин так же отвечает на вопрос как исправить и сжать файлы внешнего вида, посмотрим на настройки.

1. Включаем модуль оптимизации.
2. При включении галочки внешние не будут оптимизированы.
3. Объединить, включаем.
4. По умолчанию активна.
5. Сюда прописываем стили которые начали спорить. На одно клиентском сайте, пришлось прописать.
6. Сохраняем изменения.

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

Вывод

JS & CSS Script Optimizer имеет перед autoptimize много преимуществ.

• Меньше споров.
• Простота использования.
• Удаляет из верхней области не только файлы вордпресса и темы, но и сторонних ресурсов.
• Безопасность.

Есть один минус, не умеет минифицировать HTML код, что очень плохо, ищу решение проблемы, о решении напишу в статье. Теперь вы знаете как избавиться от пункта в pagespeed insights: удалите код javascript и css блокирующий отображение верхней части страницы, успехов.

P.S. И в заключении супер видео (для опытных).