Скорость сайта – это один из самых важных факторов, который помогает привлечь и удержать посетителей. Всё остальные факторы имеют равное значение, но быстрый сайт имеет больше шансов заполучить много пользователей. Это происходит из-за того, что поисковые системы берут данный фактор во внимание при вычислении результатов рейтинга в поиске. Поэтому, если вы хотите оставить своих конкурентов у разбитого 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, блокирующий отображение”, далее вы поймете почему оно одно из важных. Я продолжаю анализировать блог ruletov.net, и вот скриншот, который подтверждает ошибки.
Для начала немного теории.
Для оптимизации очень важна такая штука, как скорость загрузки, не буду хвалиться, но она у меня 100%. А самый важное из этого требования, отклик сайта при заходе на него и начальное формирование, а точнее то время за которое все это происходит, и чем оно меньше тем лучше. А теперь смотрите, нам важен быстрый отклик сайта, а как он быстро отзовется если в самом начале грузятся всякие js скрипты, стили всяких плагинов и тому подобное. Я зашел в код страницы и сразу увидел, глядите снимок (я только две строчки снял под ними, еще больше всего).
В результате чего у нас в начале выводится не сам сайт, а его периферические дополнения. Проще говоря сайт не показывается потому, что вместо него вылезают различные другие элементы, а потом уже он сам. Конечно же, не надо их удалять ни в коем случае, просто надо их переместить в другое место.
Данное правило срабатывает если, у вас в разделе
Решение проблемы.
А разгадку я нашел, как ни прискорбно, в плагине Autoptimize, очень долго я сопротивлялся, но делать не чего. Ставиться он стандартно, я лично через поиск в самой административной панели. Я выяснил, что многие его ставят, чтобы не запариваться, да и нагрузка от него почти никакая. Поставив его я очень удивился, все стало работать как надо, и PageSpeed не ругается. Теперь собственно переходим к разбору плагина, потому как могут произойти проблемы в настройках. Заходим в настройки плагина и начинаем разбор.
Перед началом, сразу же включите расширенный режим, нажатием кнопки “Show Advansed Settings”.
Параметры HTML, обязательно включаем, при этом всё будет перестроено, в самой теме вы ничего не обнаружите, но зайдя в исходный код, увидите там “месиво”, просто плагин по максимуму сжимает содержимое, убирая лишние пробелов и переносы. Насчет “Сохранять комментарии”, тут на ваше усмотрение, просто у вас в исходнике останутся все пометки в коде, я оставил пусть будет.
- Оптимизировать код JavaScript? Здесь ставим галочку. Маленько поясню, оптимизация сводиться к тому, что плагин, компонует js файлы меж собой и отправляет их прямиком в подвал сайта.
- Force JavaScript in ? Спорный, если у вас очень много jquerry, то при их перемещении в футер, они могут перестать работать.Но тогда я не совсем понимаю, для этого и ставиться Autoptimize, чтобы все переместить вниз, а тут вот такое, но в любом случае я не включаю, нет смысла, тем более jquery элементов, у меня только один.
- Look for scripts only in ? (deprecated) . Переводиться как искать скрипты только в разделе head, и в скобочках, почему-то, не рекомендуется. Опять не понимаю, почему нельзя, именно этого нам и надо, чтобы всё из головы уходило в подвал, в любом случае отмечаем.
- Exclude scripts from Autoptimize . Этот пункт мне очень нравится, если у вас что-то перестало работать в результате работы этого плагина, то сюда просто прописываете название скрипта, и он затронут не будет, клевое решение.
- Add try-catch wrapping? Я не ставил здесь, она добавит к нерабочим скриптам свой тег, что предотвратит их использование, и помех для других. Во-первых, у меня нет нерабочих, во-вторых, мне не нужны какие-то теги в теле сайта, поисковики могут не так понять. Лучше сами проверьте работоспособность всего на блоге.
- Оптимизировать код CSS? Включаем чек бокс однозначно. Плагин все сделает сам, удалит лишние строчки в коде стилей, и поместит их на нужное место.
- Generate data: URIs for images?, Look for styles only in ? (deprecated), Inline and Defer CSS? . Все эти вещи не включаем, они будут делать только хуже, описывать не буду.
- Inline all CSS? На скриншоте показано что галочка стоит, но пока ее выключил. Смысл в том что, когда он активен, почти весь файл стилей переносится в страницу. С одной стороны не идет загрузка стилей, а с другой код становится громадным, что тоже дает нагрузку. Решайте сами, я пока окончательного вердикта вынести не могу.
- Exclude CSS from Autoptimize . То же самое что и в прошлом случае, список исключаемых, только уже css, которые плагин трогать не будет.
Сообщение – это рекомендации 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%.
Продолжаю , теперь передо мной ещё один пункт, который мне подсказал 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
Не нашли ответ? Воспользуйтесь поиском по сайту
