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

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

Лучшая тема для Wordpress: видео обзор...

Тесты, я напомню, я произвожу этим сервисом: , где в отношении 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

Не нашли ответ? Воспользуйтесь поиском по сайту

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

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

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

Есть у меня статья про плагин 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. И в заключении супер видео (для опытных).

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

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

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

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

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

Данное правило срабатывает если, у вас в разделе

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