Удалите из верхней части страницы код 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. PageSpeed штука хорошая, но не стоит злоупотреблять ею, так как добиваясь идеала ни чего от сайта не останется.))) А для успокоения души, могу сказать интересную вещь, сам сайт советчик developers.google.com оказался хуже моего в этом плане. Проверьте ещё пару гугловских сервисов, все они с косяками.
    Удачи друзья и не парьтесь.

  2. У меня на сайте, в голове, остался всего один скрипт, который отвечает за работу виджета группы вконтакте (такой сейчас есть наверно на каждом втором сайте), так вот я пробовал перемещать его в самый низ, как рекомендует PageSpeed, но тогда виджет не работает!!! Подскажите пожалуйста как быть? Очень хотелось бы решить этот вопрос, ведь в PageSpeed эта проблема помечена красным!

    • Как пишут умные люди на многих блогах, все требования выполнить просто не возможно, это скорее рекомендации. В отношении сторонних скриптов, типа виджета vk я делаю так: скачиваю файл скрипта (js) и кладу его в папку сайта (любую, но лучше закрытую от индексации) и потом ссылку в скрипте виджета меняю с внешней на внутреннюю, получается так: _script type=»text/javascript» src=»/wp-content/themes/genbu/js/vk.js»>

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

        • Будут конечно обновления, этот скрипт будет просто грузится не с их серверов, а с ваших. Так же можно проделать со всем внешними скриптами, того же adsense. Если у них сервер зависнет, что бывает, реклама все равно будет показываться. К тому же такой перенос скриптов в некоторых случаях застраховывает от блокировки их adblock.

          • НЕ РАБОТАЕТ! Сделал все как вы посоветовали. Скачал скрипт, подключил вместо того и переместил в самый низ сайта ко всем остальным И ВИДЖЕТ НА САЙТЕ НЕ ОТОБРАЖАЕТСЯ. А если разместить путь к (скачаному) скрипту по старинке в самом верху страницы, то все работает. Но я не хочу, чтобы он там был!!!! В чем может быть проблема?

        • А зачем вы вообще скрипт этот размещаете в шапке? Код, который дает вконтакте для виждета, нужно весь пульнуть в сайдбар. Сайдбар грузится после контента, перед подвалом, поэтому должно быть нормально. Или у вас плагин какой то стоит для этого?

          • А я разве где то написал, что размещаю его в шапке? Он размещен у меня в теге (голова) как того требуют здесь: https://vk.com/dev/widget_community Другая часть кода как и у всех (у вас в том числе) размещена в сайдбаре.

          • Не нужно ничего размещать в шапке (header это и есть шапка сайта), все разместите в сайдбаре, и используйте лучше эту страницу для настройки https://vk.com/dev/Community тут можно подобрать цвета виджета.

          • Все, спасибо огромное. Все получилось. Переместил код который вк требует вставлять в head, вставил прямо в div с виджетом и все работает, супер. Теперь у моего сайта все зеленое, и для мобильных и для компов.

  3. От этих кодов в функциях у меня сайт просто завис, пришлось удалить.

    • Тут все нужно настраивать индивидуально, у меня пока тоже не получилось все сделать идеально, не так это просто, если ты не программист.

  4. Переписал почти всю статью, так как нашел простое решение этого вопроса, кому интересно читаем и применяем!

  5. У меня как раз эта проблема! Ух, как Вы вовремя со статьей! Спасибо огромнейшее! Сам я тоже ни разу не программист, ни верстальщик, поэтому уже думал обращаться на фриланс. Да, плагин, конечно, это не совсем хорошо. Но куда деваться? Скорость загрузки важнее — Вы это точно подметили. Пойду пробовать на своем адаптиве, авось станет получше.

    • А я вот как раз отключил адаптив, мобильная версия лучше, гляньте через телефон на этот сайт. Грузится быстрее и тесты проходит лучше на скорость. К тому же не нужно ставить только адаптивные блоки adsense, как в случае с адаптивным дизайном.

      • В общем пока результат не утешающий. Попробовал оба плагина и индексы чуть-чуть даже ухудшились. Хотя скриптов не обнаружил Google Page Speed, некоторые css попрятал, а вот шрифты из API Гугла оставил. Странно я думал он покажет результат лучше, а на деле хуже. На данный момент удалил оба плагина, думаю все-таки обращаться к сторонним специалистам.

        • Может не все галочки поставили? Я когда тоже не все ставил, то у меня эффекта не было.

  6. Подскажите каким плагином Вы пользуетесь для увиличения картинок, а то Autoptimize не работает с Fancybox

    • Пользуюсь плагином Responsive Lightbox — очень простой и работает отлично. Вот ссылка на его страницу https://wordpress.org/plugins/responsive-lightbox-lite/

  7. Дружище! Мне твой совет весьма помог! Воспользовался плагином Autooptimize. Теперь гугл видит только один скрипт и доволен как питон. Но у меня есть еще один вопрос, как к специалисту. Как включить кэш браузера, который так просит гугл? Говорят подобное не работает на связке ngnix и apache

    • Если стоит такая связка (у меня тоже ngnix и apache), то в .htaccess вставлять код толку нет. Тут нужно в файл /etc/nginx/nginx.conf вставлять типа location ~* .(jpg|png|gif|jpeg|css|js)$ {
      expires 24h; }

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

  8. После установки плагина показатели немного поднялись, но сайт перестал работать. Т.е. он сначала подгружается секунды на 2-3, а потом все пропадает кроме шапки и подвала на белом фоне. Пришлось удалить(( Решил оставить эту проблему на потом, не думаю что низкие показатели скорости сильно влияют на позицию сайта. Сильно не судите, но это мнения новичка.

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

  9. Для реализации прогрессивного сокращения css можно воспользоваться сервисом
    _csscompressor.com.

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