Как увеличить скорость загрузки WordPress. Сервис Google PageSpeed Insights
Сообщение – это рекомендации 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%.
Из большинства онлайн-инструментов, которые направлены на анализ сайта для обнаружения проблем и технических данных, сервис PageSpeed Insights от Google оказался самым популярным. Несмотря на значимость его рекомендаций, многие стараются добиться заветных баллов оценки скорости своего ресурса. Но на самом деле важность некоторых пунктов очень сильно преувеличена.
В этой статье мы рассмотрим особенности и решения самых распространенных проблем, выявленных сервисом PageSpeed Insights. И в конечном результате получим оценку не менее 85-95 баллов, что в сущности должно улучшить скорость загрузки WordPress.
Оптимизируем WordPress по сервису PageSpeed Insights
Все действия по решению проблем постараемся ограничить лишь использованием отдельных фрагментов кода, насколько это возможно. Начнем с того, что пробежимся по сервисам, чтобы измерить и оценить на данный момент скорость сайта и его оптимизацию.
Записываем или сохраняем наши результаты и начинаем работу над сайтом.
Включите gzip сжатие
Первое с чего начнем, так это с включения gzip сжатия, чтобы уменьшить объем данный в передачи между отправителем и получателям. Такая функция, по идее, активирована по умолчанию на многих хостингах. Если она у вас не активирована, тогда вставляем следующий код в конфигурационный файл .htaccess .
Код для сервера 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
Код для сервера 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 баллов. По всем вопросам смело обращайтесь в комментариях, обязательно отвечу.
Продолжаю , теперь передо мной ещё один пункт, который мне подсказал 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
Не нашли ответ? Воспользуйтесь поиском по сайту
В статье разберемся с таким понятием и пунктом в pagespeed insights как “удалите код javascript и css блокирующий отображение верхней части страницы”. Как с ним бороться и изменить этот пункт напишу ниже (способ только для wordpress ).
Установка плагина JS & CSS Script Optimizer
Есть у меня статья про плагин autoptimize, знаменитый и неповторимый, но стал он позиции сдавать, много файлов и запросов начал делать, при том еще оказалось что он дает брешь в защите.
Искал замену, нашел классный, устанавливается он стандартным поиском в админпанели.
- Вкладка.
- Добавить новый.
- Вводим запрос JS & CSS Script Optimizer.
- Устанавливаем и активируем.
Устраняем проблему удалите код javascript и css блокирующий отображение верхней части страницы
Плагин не слабо создает файлов, но динамика положительная. В общем заходим в настройки и смотрим скриншот, как и что делать.
Первый раздел: включение плагина wordpress и скрытие скриптов
В этом разделе включим плагин полностью и настроим минификацию и скрытие скриптов в подвал.
- Включаем модуль.
- Директории на хостинге где будут располагаться кешировнные файлы стилей и javascript.
- Включение модуля сжатия и оптимизации javascript.
- Эти два пункта я тестировал, но особых различий не нашел, все остается на своих местах, выбирайте любой, либо тестируйте.
- Игнорировать внешние скрипты, галочку не ставим, иначе они не будут оптимизированы.
- Первый чекбокс это объединить все скрипты в два файла и разделить их, первые пойдут в header другие в подвал, не рекомендую ставить, так как не понятно по какому принципу определяется расположение. Второй объединить одним файлом и переместить в подвал, ставим галочку.
- Исключить, если один из скриптов перестал работать, то прописывайте его название здесь.
Второй раздел: как исправить стили
Плагин так же отвечает на вопрос как исправить и сжать файлы внешнего вида, посмотрим на настройки.
- Включаем модуль оптимизации.
- При включении галочки внешние не будут оптимизированы.
- Объединить, включаем.
- По умолчанию активна.
- Сюда прописываем стили которые начали спорить. На одно клиентском сайте, пришлось прописать.
- Сохраняем изменения.
На этом настройка закончена, подождите десять минут, чтобы плагин сделал работу и радуйтесь результатам.
Вывод
JS & CSS Script Optimizer имеет перед autoptimize много преимуществ.
- Меньше споров.
- Простота использования.
- Удаляет из верхней области не только файлы вордпресса и темы, но и сторонних ресурсов.
- Безопасность.
Есть один минус, не умеет минифицировать HTML код, что очень плохо, ищу решение проблемы, о решении напишу в статье. Теперь вы знаете как избавиться от пункта в pagespeed insights: удалите код javascript и css блокирующий отображение верхней части страницы, успехов.
P.S. И в заключении супер видео (для опытных).
