Удалите из верхней части страницы код 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. Уберите нафиг эту игру пере комментариями! Почитал статью и залип на полтора часа! Время только потерял зря!

    • Так для того и поставлена 😉 Спасибо за коммент, теперь точно ее не уберу, значит не я один залипаю!

  2. Хорошие советы. Надо реализовать все это на своем сайте, а то пока тест скорости неудовлетворительный.

  3. Почему на этом сайте не установили плагин Autoptimize ? И как от повлиял на позиции вашего сайта ?

    • Я пока отключил его, так как заменил шаблон и теперь работаю с кодом, а плагин немного мешает. Когда сайт будет налажен, то будет опять включен скорее всего.

      На позиции он не влияет никак, так как он хоть и оптимизирует сайт, но не так сильно ускоряет, он скорее шлифует уже сделанное, настоящее ускорение плагином не сделаешь, не считая плагина кэширования.

  4. В mod_pagespeed для apache фильтр defer_javascript делает примерно то же самое — он запускает загрузку js после отображения страницы. Странно, конечно, что я только сейчас его включил и попробовал, но ощутил видимое увеличение скорости! Я им не пользовался, так как давно, ещё со времён PageSpeedService мне показалось, что он мешает нормальной работе сайта.

    • Хорошо что вы мне напомнили про mod_pagespeed, я на старый сервер ставил, а на этом хостинге кажется не стоит, нужно установить будет сегодня!

  5. Так же есть очень интересный плагин Async Javascript, который подставляет во все скрипты атрибут async. После его установки у меня остался всего один скрипт, который загружается «плохо», но это уже мелочи, рейтинг сайта все равно сразу подрос в google speed на несколько пунктов.

  6. Добрый день! Спасибо за Ваши советы, ничего более внятного пока не нашла в инете. Плагины, конечно, это лучший вариант оптимизации, но у меня есть вопросы. Подскажите, пожалста, как поступить.
    Я поставила плагин Autoptimise и после того, как нажала все галочки по кнопке Show advanced settings, сайт слетает и выдает ошибку сервера. Сайт восстановили на хостинге, т.к. резервные копии я сделала, но вопрос остается — нужно ли оставлять этот плагин на сайте (пока он стоит), если дополнительные условия не установлены? При повторном анализе выдает такое же количество ошибок.
    После установки плагина Asynchronous Javascript все нормализовалось, только у меня теперь показывает при анализе сайта не один скрипт, а два + vk.com :
    Удалите код JavaScript, препятствующий отображению:
    _http://kulinaria-prazdniki-budni.ru/…nchronous-javascript/js/head.load.min.js
    _http://vk.com/js/api/openapi.js?113
    C этим нужно что-то сделать? Или можно оставить в таком виде? Спасибо!

    • То что скриптов остается немного, то это не проблема, как показывает практика добиться 100% результат практически невозможно, для этого нужно самому писать движок для сайта и изначально все это продумывать. В отношении скриптов могу посоветовать такую вещь: копируете себе на хостинг js файлы и в коде указываете к ним путь. В этом случае они будет загружаться с вашего хостинга, а не со стороннего ресурса.

      Сам я от Autoptimise пока отказался в пользу похожего плагина Better WordPress Minify, он как то лучше у меня пошел и вот в нем как раз можно вручную указать, какие конкретно скрипты нужно запихнуть в подвал. В большинстве случаев это хорошо сработало.

  7. Спасибо большое за оперативный ответ!
    Плагин Better WordPress Minify поставила, по поводу настроек Вы писали «в нем как раз можно вручную указать, какие конкретно скрипты нужно запихнуть в подвал», в настройках стоят галочки:
    Минимизировать JS-файлы скриптов автоматически?
    Минимизировать CSS-файлы стилей автоматически?
    Enable bubble CSS import?
    Enable cache file locking?
    Нужно где-то еще их поставить?
    По поводу «копируете себе на хостинг js файлы и в коде указываете к ним путь.» — к сожалению, такие вещи могу делать только по пошаговой инструкции. Знать бы как этому научиться. Ой, как все непросто! А сайт очень надо оптимизировать 🙁

    • Вот тут смотрите //zmoe.ru/wp-content/uploads/optimizirovat-skripty-.jpg находите в левой колонке скрипт, на который ругается google page speed и выбираете его и в появившемся меню нажимаете «move to footer» и так с каждым проблемным.

      По поводу файлов ничего сложного, берете адрес файла, к примеру _https://apis.google.com/js/platform.js вставляете его в браузер. Откроется страница с каракулями. Нажмите Ctrl + S и сохраните файл на компьютер. Затем закачайте файл на хостинг через FileZilla. Там потом укажите на файл и выберите пункт «копировать адрес в буфер обмена». Далее эту ссылку нужно изменить до состояния точного адреса его на сайте, так так будет типа _sftp://root@18.58.207.192/var/www/a/data/www/aliprofi.ru/wp-content/themes/aliprofi/js/html5shiv.js а нужно будет сделать _http://aliprofi.ru/wp-content/themes/aliprofi/js/html5shiv.js или еще проще /wp-content/themes/aliprofi/js/html5shiv.js и вставить это вместо _https://apis.google.com/js/platform.js в скрипт. Палочку _ я ставлю перед адресом чтобы в комментарии не было ссылок 😉

  8. С плагином Autoptimize анализатор скорости сайта PageSpeed Insights показывает результаты хуже, чем без него.

  9. У меня вообще ничего не изменилось с загрузкой после установки плагина Autoptimize.

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

    • У меня на всех сайтах так стоит и везде нормально (aliprofi.ru, prostolinux.ru, teonote.ru) можете глянуть и это то же. Может у вас с правами доступа не то что-то на хостинге? Плагин создает папку с кэшем ей нужно дать права 777.

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