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

Тесты, я напомню, я произвожу этим сервисом: , где в отношении 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 на следующих ресурсах:

• 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 , вы не выведете сайт в топ - скорость загрузки сайта лишь ОДИН из сотни факторов ранжирования, путь и достаточно важный. Но сделать все что можно - нужно!

СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

1. Payoneer - Самая популярная в мире платежная система для фрилансеров. Выдает карты, находится в США.

2. EpayService - Американская платежная система, очень популярна во многих странах, бесплатно дает карту MasterCard в EVRO для жителей СНГ и Европы.

3. Skrill - Единственная платежная система которая работает с криптовалютами и при этом выпускает бесплатные банковские карты MasterCard.

4. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

5. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.

Это одна из наиболее распространенных проблем, которую я встречаю, анализируя веб-сайты . Решение данной задачи - один из самых сложных моментов при оптимизации скорости загрузки страницы, поскольку требует глубоких технических знаний.

Хочу обратить внимание – каждый сайт индивидуален. И если для одного сайта некоторые решения будут полезны, то для другого могут оказать негативное влияние.

Данное предупреждение срабатывает, когда в коде документа между тегами … обнаружены ссылки на внешние файлы javascript и css. И пока они не будут загружены, дальнейший рендеринг страницы не будет выполняться. Таким образом они блокируют вывод контента на странице.

•  Для начала мы должны убедиться, что JavaScript не участвует в процессе отображения страницы.
•  Скрипты небольшого размера размещаем в самом содержимом HTML страницы. Например:
•  
•  Проверяем скрипты на зависимости и очередность загрузки. Если ни того, ни другого не имеется, то добавляем к ним атрибут «async»:
•  
•  Благодаря этому атрибуту такие скрипты будут загружаться асинхронно.

Данную инструкцию нельзя применять к библиотеке JQuery, которая используется в подавляющем большинстве сайтов. Далее рассмотрим правильное решение для JQuery.

Если поместить jquery.js перед закрывающим тегом или попытаться загрузить его асинхронно, то зависимые скрипты попросту перестанут работать и многие функции сайта «отвалятся». Правильным решением в данном случае может послужить использование события onload:

function asyncjs() {
 … 
}

На популярных cms для решения таких задач используются плагины. Их принцип несколько отличается от описанного выше. Рассмотрим на примере Autoptimize для Wordpress:

•  Плагин объединяет все *.js и инлайновые скрипты в один файл. При этом очередность загрузки сохраняется.
•  Единый файл подключается в подвале страницы с атрибутом async .

Вы так же можете использовать данный метод для самописных cms или сайтов на чистом HTML:

На данный момент самым новым способом решить эту проблему является использование стандартизированной директивы preload . Она позволяет браузерам получать style.css не блокируя рендеринг.

Первооткрывателем этого способа был Scott Jehl , дизайнер и разработчик из The Filament Group.

Несомненно, будущее за этим решением. Но, к сожалению, в настоящее время еще не все браузеры поддерживают preload .

Поэтому мы не будем сейчас обсуждать этот метод более подробно, а рассмотрим консервативный способ.

Смысл этого метода заключается в том, чтобы поместить в секцию head самые важные фрагменты стилей (critical css), которые необходимы для первоначальной отрисовки страницы. В свою очередь, основные файлы css будут загружаться после загрузки контента. Большинство новичков допускают серьезную ошибку на этом этапе, и вставляют все имеющиеся стили в документ. Это не только не решает ситуацию, но и усугубляет ее.

Правильное решение:



/*Критический css*/
h1 {text-align: center; color: #ccc }



Контент страницы
...



$(document).ready(function() {
$("head").append("");
});

Еще одной распространенной ошибкой является создание большого количества правил для критического css. Это характерно для сайтов с большим количеством контента на странице – разнообразные слайдеры, виджеты и прочее. Если мы уменьшим количество правил, страница будет дергаться. Если увеличим – получим предупреждение «Оптимизируйте загрузку видимого контента». В этом случае я бы рекомендовал объединить все стили в один файл и подключить традиционным способом.

В заключение хочу добавить, что Google PageSpeed – хороший инструмент для выявления проблемных мест вашего сайта. Но при анализе он не учитывает его индивидуальных особенностей. Поэтому самый главный совет: подходите обдуманно к выполнению его рекомендаций!

Здравствуйте, уважаемые коллеги веб-мастера! Мало кто из нас не проверял свой сайт на скорость загрузки всем известным сервисом PageSpeed Insight от Google и не сталкивался при этом с рекомендацией - " ".

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

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

Итак, для выполнения рекомендаций Гугла по удалению кода javascript и CSS из верхней части страницы я подрядил плагин Autoptimize, который объединяет скрипты и стили в один файл и переносит его из верхней части страницы, чего мы собственно и добиваемся. Кроме того, плагин сокращает HTML, JS и CSS (еще один плюсик нам от PageSpeed Insight).

Таким образом, мы убьем сразу много зайцев:-).

Плагин можно найти по названию через поиск в панели администратора сайта или скачать с депозитария WordPress по адресу - https://ru.wordpress.org/plugins/autoptimize/

Расставьте галочки.

Для успешного завершения миссии на сайт мне хватило поставить галочку в шестом пункте у Inline all CSS в опциях CSS, как на скриншоте ниже, и все на этом.

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

1 Активируйте опцию "Оптимизировать код HTML " если этого просит PageSpeed Insight.

2 Комментарии HTML я сохранять не стал за ненадобностью.

Если после активации плагина под рекомендацией "Удалите из верхней части...." исчезли из списка JS и сайт продолжает работать по-прежнему, без перекосов, без конфликтов плагинов и т.д., оставьте тут настройки как есть. Иначе поэкспериментируйте со следующими опциями:

Некоторые скрипты требуют загрузки только с верхней части страницы (от чего мы как раз избавляемся), иначе они будут работать некорректно или вообще объявят забастовку. Опция обеспечивает им это условие к недовольству PageSpeed Insight. Включите в самом крайнем случае, только если не помогут функции ниже.

Речь идет об интеграции JS в HTML. После включения, как уверяет разработчик, должна значительно вырасти скорость сайта. Параметр активен по умолчанию.

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

Если какой-либо скрипт работает некорректно, он не даст жизни остальным. Опция позволяет обойти сломанный JS и продолжить работу.

Многие веб-мастера размещают в сайдбаре различные блоки, работающие на JS. Это могут быть блоки подписки, перенаправления трафика партнерских программ и тому подобные. Чтобы скрипт блока не блокировал загрузку (плагин отказался решать эту задачу), отложите ее. Для этого просто вставьте атрибут "async " в код скрипта как на скриншоте.

Как уже было обговорено, опция сокращает все CSS и объединяет их в один файл. Для удаления CSS из верхней части страницы этого недостаточно.

Если в каком-либо файле CSS прописаны пути к маленьким изображениям (меньше 4кб), то этот запрос будет прописан в основном файле CSS.

Замена шрифтов Гугла (которые почему-то не любит PageSpeed Insight если таковые наличествуют) на стандартные.

Как и в случае с JS, опция интегрирует ту часть CSS в HTML, которую посчитает нужной, что также должно положительно сказаться на скорости загрузки.

Позволяет интегрировать в HTML только CSS видимой отрисовки сайта с отложенной загрузкой остального кода CSS.

Если задействовать, откроется поле, в которое требуется вставить этот самый кусок CSS видимой отрисовки. Полезно мегапорталам с множеством файлов CSS, чтобы не увеличивать до запредельных размеров их HTML.

Для определения CSS видимой отрисовки существует несколько сервисов, о которых упоминается в разделе "fag" на странице плагина. Эту функцию я не активировал ни разу и пока описывать не буду, если только вы не попросите в комментариях.

В отличие от предыдущего пункта, опция интегрирует вообще все стили в HTML. После активации, как правило, PageSpeed Insight перестает ругаться на блокирующие CSS в верхней части страницы .

7 Exclude CSS from Autoptimize

Оптимизация CSS, как и JS, может повлечь за собой их неправильную работу. Добавьте сюда эти файлы, чтобы исключить их из оптимизации.

Если сайт использует CDN сервера для сокращения времени загрузки при передаче данных на большие расстояния, впишите сюда их URL.

Опция выключит статическое сжатие скриптов и стилей. Активируйте, если на сайте используется Gzip сжатие.

После завершения или в процессе работы с настройками Autoptimize, вы конечно захотите посмотреть результаты своего труда в вышеупомянутом сервисе. Сохраняйте изменения нажатием кнопки "Сохранить изменения и очистить кэш " чтобы проверять только свежие страницы.

Надеюсь, вы справитесь, скорость вашего сайта возрастет и это обязательно отметят поисковые машины.

Удалите из верхней части страницы код javascript и CSS при помощи WordPress плагина Autoptimize обновлено: Апрель 29, 2017 автором: Роман Ваховский

Сообщение – это рекомендации Google по ускорению вашего сайта. Такое пожелание к оптимизации ресурса можно встретить, если вы проверите свой сайт на скорость загрузки в PageSpeed Tools .

На своем ресурсе Гугл анализирует сайты и выдает основные рекомендации – что должен сделать веб-мастер, чтобы сократить время загрузки страницы, а значит, результатом этого станет повышение позиций сайта в поисковой выдаче.

Если остальные рекомендации, типа: оптимизируйте изображения, оптимизируйте загрузку видимого контента и тому подобные, выполнить не составит проблем, то «удалите код JavaScript и CSS, блокирующий отображение верхней части страницы» , которое является одним из важнейших действий, заставляет владельцев сайтов поломать голову – как это можно исправить.

Скажу сразу – я не силен в программировании и на своем WordPress блоге предпочитаю скрипты ручному изменению кода системных файлов. Задался решением, как выполнить данную рекомендацию и я нашел выход .

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 PageSpeed обнаружил код JavaScript и CSS, блокирующий отображение верхней части страницы. Разберемся, в чем суть претензий Google к вашему сайту:

Когда пользователь открывает сайт, браузер отправляет запрос серверу, получает результат и предъявляет его. Так просто всё бывает с сайтами без слайдеров, динамических элементов и стилей. Один запрос — один ответ. Если на вашем сайте есть интерактивный контент, схема усложняется: к html-коду подгружаются дополнительные файлы (.css, .js и т.д.)

Скорость работы сайта зависит от количества обращений к внешним серверам (запросы JS, CSS, изображения) и объема информации , который нужно в итоге выдать. В частности, код JavaScript и CSS, блокирующий загрузку страницы тоже связан с внешним запросом, который мешает браузеру быстро предъявить пользователю первый экран.

Если код JavaScript размещен в шапке, header’е сайта, браузер сделает остановку и будет дожидаться ответа от серверов, на которые ссылаются скрипты. Если бы он не столкнулся с скриптами-js в начале рендеринга, он бы загрузил начальный результат быстрее.

Чтобы ваш сайт отвечал этому требованию оптимизации:

• удалите код JS из тега (верхней части страницы). Проследите, чтобы любые обращения к внешним ресурсам располагались максимально близко к концу html-файла. JavaScript-запрос стоит размещать перед закрывающимся тегом.

Исключение составляет CSS: стили целесообразно загружать в теге, предварительно склеив и минимизировав. Об оптимизации кода CSS, читайте в .

• используйте асинхронную загрузку javascript. Асинхронная загрузка позволит браузеру не делать остановку на время ожидания ответа от внешнего сервера и продолжать обрабатывать основной html-документ. Чтобы добавить асинхронную загрузку, используйте атрибут async .

Обратите внимание

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

Удалить код JavaScript и CSS из верхней части страницы можно автоматически с помощью специальных плагинов CMS.