Удалите из верхней части страницы код JavaScript и CSS!

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


Тесты, я напомню, я произвожу этим сервисом: developers.google.com, где в отношении JavaScript и CSS мне был дан конкретный совет:

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

Как видите, у меня это самая большая проблема, 8 скриптов подгружается сразу и из-за этого первый экран загружается не так быстро, как хотелось бы. Так же есть 10 css файлов, которые тоже не оптимизированы. Ну что же, будем решать проблему!

Как удалить из верхней части страницы код  JavaScript?

По этому вопросу претензии примерно такие:

Как удалить из верхней части страницы код JavaScript?

Удалите код 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
Оптимизируйте работу 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 одновременно. После установки плагина нужно лишь зайти в его настройки и поставить галочки в нужном месте:

как оптимизировать script и cssПосле этого Google Page Speed выдает такое:

сокращение css и scriptНи одного скрипта не грузится, только два файла css, которые включают в себя все стили, а все скрипты перемещаются в область подвала. Если теперь посмотреть на исходный код страницы, то там оптимизированная КАША, в которой без бутылки не разобраться.

каша из кодаСначала я подумал, что этот плагин не решит моих проблем полностью, но как оказалось, это было из за того, что я его не до конца настроил! После выставления галочек в нужном месте я получил ОТЛИЧНЫЙ результат! ВСЕ ПРОБЛЕМЫ ИСЧЕЗЛИ!
оптимизация cssЧтобы так получилось нужно нажать кнопку вверху Show advanced settings и тогда появятся дополнительные настройки. Нужно, чтобы стояли галочки в пунктах:

Оптимизировать код HTML?

Оптимизировать код JavaScript?

Look for scripts only in <head>? (deprecated)

Оптимизировать код CSS?

Inline all CSS?

Save aggregated script/css as static files

После этого правда у меня перестал работать плагин, который фиксирует виджет, но это совсем не проблема, скорость загрузки сайта намного важнее. А еще важнее угодить дяде Гуглу…

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

Еще один подобный плагин — это WP Minify Fix, делает он тоже самое, но он мне меньше понравился, а может я просто в нем не до конца не разобрался.

Я понимаю, что идеально все это делать без плагинов, вручную, но это очень долго и муторно и оно того на самом деле не стоит, ведь даже добившись оценки 100, вы не выведете сайт в топ — скорость загрузки сайта лишь ОДИН из сотни факторов ранжирования, путь и достаточно важный. Но сделать все что можно — нужно!

Удаление кода JavaScript и CSS Google PageSpeed



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

66 комментариев
  1. Вот что посоветовали мне в соц сетях:

    javascript перенесите в подвал, в район перед закрывающим тегом /body, css оптимизируйте(сожмите) с помощью любого специализированного онлайн-сервиса, читаемые копии css сохраните пригодятся )))

    а к теме (в голове) подключите сжатые, особо видимого прироста скорости не получите, но гуглю в какой то мере успокоите))) jquery-migrate если у вас ничего не завязано на старые версии jquery(т.е всё работает при переходе на новые) можете смело отключить(проверьте)

    Не заметил что вы особо пользуете плагин Lightbox у себя, рассмотрите вариант его отключения.
    стили в подвал — это извращения, имхо))

    а вот google-analytics и прочие счетчики отлично себя чувствуют там же в подвале))) и т.д….

  2. Решил отключить эти две ссылки из header.php

    _link rel=»stylesheet» href=»< ?php bloginfo('template_url'); ?>/css/jquery.lightbox-0.5.css» media=»screen» />
    _link rel=»stylesheet» href=»< ?php bloginfo('template_directory'); ?>/css/superfish.css» media=»screen» />

    lightbox — это отвечает за вывод картинок, которые увеличиваются при клике на них. Я такое не использую и пока использовать не буду.

    superfish — Добавляет JQuery SUPERFISH эффекты для большинства меню WordPress. У меня никаких эффектов нет и они мне не нужны, я стремлюсь к простоте и чистоте в дизайне.

  3. Приветствую. У меня такая же петрушка с одним из сайтов! Даже перенос всех js в подвал не помог ( ну хоть бы для приличия один процент приплюсовал..ан-нет, как было 87% так и стоит) Все вернул обратно.
    Двиг: Instantcms 1 10 4

    + в карман социалки автору за статью )) не я значит один такой )

    • Тут по моему важно сделать то, что можно, идеала не достичь. А если зацикливаться, то можно потерять в пустую массу времени. Рад, что смог хоть чем то помочь:)

  4. Я пробовал так перенести все в подвал, то некоторые скрипты некорректно работают. Может подскажете как лучше сделать?

    • Не все можно переносить в подвал, некоторые скрипты должны загружаться сразу, особенно те, которые связаны с прорисовкой шаблона. А всякие незначительные, типа счётчики, можно и в подвал. А вообще не стоит тут быть максималистом, так как идеально все равно не сделать. Лучше всего почистить шаблон от всего ненужного (на тестовом сайте конечно), это поможет ускорить сайт. Ведь в любой теме много функций, которыми мы не пользуемся совсем.

    • Не стоит сильно переживать, тут идеала не добиться. Самое простое, что можно, это включить gzip сжатие, а остальное трудно решаемо, если вы не программист. Плагины чаще всего не сильно грузят сайт, за исключением некоторых. Есть плагины, которыми это можно проверить.

  5. Интересный сервис этот гуловский..Грит включить сжатие А вот http://www.gidnetwork.com/tools/gzip-test.php что все пучком сжатие работает..Кому верить теперь..

    • Они скорее всего по разному оценивают, гугл очень строг, ему трудно угодить, так что не стоит сильно ломать голову, все равно без программиста мелочи не исправить.

  6. Поставьте плагин JS & CSS Script Optimizer https://wordpress.org/plugins/js-css-script-optimizer/Он всё сделает

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

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

  7. помимо скриптов, которые указываются явно (типа ) есть те, которые подключаются функцией движка вп — подсасывая все скрипты которые использует как тема движка, так сам вп и все активные плагины. если все скрипты сдвинуты в футер, то никто не мешает поместить в тот же футер перед описанием этих самых скриптов.

  8. нды, весь код порезался при отправке. в общем wp_head(); в футер пихайте перед своими скриптами

Написать комментарий