Удалите неиспользуемый код javascript pagespeed

Справочник проблем PageSpeed Insight

1. Сократите время до получения первого байта от сервера — данная проблема обозначает что текущих ресурсов сервера недостаточно для быстрой отдачи страницы. Нужно либо повышать ресурс, либо оптимизировать настройки сервера, либо искать ошибки разработки сайта (код сайта слишком тяжелый)

2. Задайте правила эффективного использования кеша для статических объектов — Данную проблему можно решить только для стилей и файлов вашего сайта (для файлов метрики, и прочих сервисов данную проблему решить нельзя). Нужно скорректировать настройки сервера, задав время кеширования требуемых типов файлов равным 1 год

Проблемы, которые можно решить только с участием разработчиков

1. Для изображений не заданы явным образом атрибуты width и height — Нужно скорректировать шаблоны и страницы, прописать требуемые атрибуты

2. Настройте подходящий размер изображений — Изображения в странице имеют больший размер чем на странице, нужно доработать масштабирование на уровне шаблонов

3. Уменьшите влияние стороннего кода — нужно максимально уменьшить количество подключаемых скриптов и стилей. Обычно это счётчики метрики, jivosite и т.п.

Проблемы, которые не решить

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

1. Сократите размер структуры DOM — зависит от количество блоков на странице. Для улучшения показателя нужно переверстывать части сайта или отрезать часть функционала сайта

2. Сократите время выполнения кода JavaScript — зависит от количества и качества javascript на вашем сайте. Для улучшения показателя нужно анализировать весь javascript сайта, переписывать на более оптимальный или отрезать часть функционала.

3. Удалите неиспользуемый код CSS / Удалите неиспользуемый код JavaScript — зависит от шаблона, т.к. pagespeed не показывает что именно он считает неиспользуемым кодом, найти и вычистить почти нереально

4. First Contentful Paint (3G) — общий вес контента на странице, можно уменьшить, но фактически очень сложно дотянуть до нормы.

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

Значимость проблем: First Contentful Paint (3G), можно уменьшить с помощью решения Ускорение загрузки сайта т.к. его механизмы уменьшают вес стилей, картинок и т.п.

Источник

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

Продолжаю тему ускорения сайта, теперь передо мной ещё один пункт, который мне подсказал заботливый Google.

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

Сейчас попробую разобраться, что там лишнего и как удалить лишний JavaScript и CSS?

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

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

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

Как удалить из верхней части страницы код 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 нужно вставить код, который будет давать команду нужным нам скриптам загружаться не сразу:

[/crayon]
В примере добавлено два скрипта, но мы добавляем сколько угодно, и именно те, которые тормозят загрузку страницы. Попробовал применить это решение — у меня оно не сработало, может что-то не так делал?

Сам 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

Источник