Как удалить неиспользуемый код javascript на вордпресс

CSS и JavaScript из темы.

CSS-коды анимации сильно влияют на отрисовку первого экраны. Вот пример:
/wp-content/themes/название темы/assets/animations/animations.min.js
Медленное появление или исчезновение — привлекает глаз. Но это тормоз для скорости загрузки.
Пока, я выгрузил этот скрипт по всему сайту. Возможно, в дальнейшем, включу.

В любой теме присутствуют скрипты:
/wp-content/themes/название темы/js/scripts.js
Обязательно включите отложенную (defer) загрузку.

CSS и JavaScript из WordPress Core.

В фалах JavaScript — jquery и jquery-core не забудьте поставить галочку — Игнорируйте правило зависимости и оставляйте дочерние элементы загруженными.

От этого файла существует зависимость «дочерних» файлов JS.
При их выгрузке, будут удалены и некоторые скрипты тем, плагинов и самого движка WordPress.

Если в основных настройках плагина — Общие выгрузки по всему сайту , вы отключали библиотеку блоков CSS Gutenberg и используете Классический редактор, значит в Менеджере страницы увидите выгруженный (удаленный) CSS-код wp-block-library — не удивляйтесь.
В редакторе он будет выделен красным цветом.

Все дополнительные материалы, дистрибутив плагина WP Asset CleanUp Pro, с подробнейшими видео-уроками, можно получить, зарегистрировавшись в Учебном разделе сайта Centr-Sit-Info Уровень Profi-bizblog.

Продолжение темы об оптимизации HTML, CSS, JavaScript, медиа-файлов, их асинхронной загрузке, активации настроек кэширования, которые гарантированно ускорят сайт, читайте в следующей статье: — Кэширование сайта на WordPress…

Если возникли вопросы или нужна дополнительная информация? — пишите в комментариях – рад буду помочь.

Подписывайтесь на обновления Sit-Info, чтобы вовремя знать о выходе нового поста.

Не забываете нажать на кнопку Поделиться в социальных сетях.

Как удалить неиспользуемые файлы CSS JavaScript в wordPress

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

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

Объяснение JavaScript и CSS с блокировкой рендеринга

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

Недостатки JavaScript и CSS с блокировкой рендеринга

Первое и самое главное влияние сценариев JavaScript и CSS, блокирующих рендеринг, на веб-сайте заключается в том, что они замедляют скорость его загрузки. Скорость сайта — это очень важный параметр, который определяет, насколько полезен сайт и насколько хорошо он работает в поисковой выдаче. Если сайт загружается медленно, более вероятно, что посетители перейдут с него на другой сайт; последующий показатель отказов является сильным сигналом SEO, который снижает рейтинг в поисковых системах. В соответствии с SearchEngineJournal., больше, чем фактическое время, затрачиваемое на загрузку сайта, проблема заключается в восприятии пользователями времени, затрачиваемого на загрузку сайта. Поскольку браузеры пытаются загружать все, включая скрипты блокировки рендеринга, одновременно, вы должны постараться убедиться, что сайт загружает только те скрипты, которые необходимы для работы сайта вначале, после чего остальные скрипты могут нагрузка.

Устранение JavaScript и CSS, блокирующих рендеринг

Еще до того, как вы попытаетесь удалить скрипты, блокирующие рендеринг, вам нужно будет определить скрипты, которые вызывают проблему. Самый простой способ сделать это — использовать инструмент Google PageSpeed ​​Insights. Вы должны составить список скриптов, которые требуют внимания, а затем решить, хотите ли вы решить проблему вручную или использовать плагин, специально разработанный для этой цели.

Однако, если вы реализуете определенные передовые практики по сокращению количества скриптов, блокирующих рендеринг, на своем веб-сайте на этапе разработки, вы не только упростите себе жизнь, но и обеспечите доступный SEO. Некоторые из распространенных тактик включают минимизацию JavaScript и CSS путем удаления ненужных пробелов и комментариев в коде, объединение файлов JavaScript и CSS для уменьшения их общего количества, а также использование асинхронной загрузки для отсрочки загрузки Java Script.

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

Лучшие плагины для уменьшения количества скриптов JavaScript и CSS, блокирующих рендеринг

WP Rocket

WP Rocket действует как очень хороший инструмент для оптимизации веб-сайтов, потому что он чрезвычайно универсален и может обрабатывать множество задач, таких как минимизация CSS и JavaScript, отсрочка удаленных запросов JavaScript, отложенная загрузка изображений и многое другое. Хотя простой процесс установки является большим плюсом, плагин потребует от вас адаптации к другому интерфейсу панели управления WordPress, чем то, к чему привыкло большинство разработчиков. Несмотря на то, что WP rocket поставляется с несколькими бесплатными дополнениями, базовая цена для одного веб-сайта начинается с 49 долларов в год.

Autoptimize

Autoptimize, созданный специально для решения проблем, выявленных такими инструментами, как PageSpeed ​​insights, позволяет пользователям настраивать плагин с новым меню на панели инструментов WordPress. Хотя Autoptimize выполняет все основные задачи, такие как кеширование и минификация скриптов, он также может оптимизировать и преобразовывать изображения в формат файла WebP. Хотя его настройка может быть немного сложной, бесплатный плагин очень высоко ценится за его функциональность. Также доступны план пользовательской конфигурации за 165 долларов и план настройки экспертного плагина за 667 долларов с профессиональным обзором веб-сайта.

JCH Оптимизировать

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

Генератор спрайтов, который преобразует фоновые изображения в спрайты, поэтому для загрузки браузера требуется меньше HTTP-запросов. Хотя пользователям понравятся его расширенные функции, крутая кривая обучения может стать проблемой, даже если доступна соответствующая вспомогательная документация для обеспечения безошибочной установки. Вы можете начать использовать бесплатную версию; однако, если вы хотите получить доступ к расширенным функциям, вам нужно будет подписаться на один из планов по цене от 29 долларов США на шесть месяцев.

Удалите неиспользуемые файлы CSS JS в WordPress

Есть 4 основных способа удаления неиспользуемых записей CSS JS в интерфейсе WordPress:

• wp_deregister_script (дескриптор $)
• wp_dequeue_script (дескриптор $)
• wp_deregister_style (дескриптор $)
• wp_dequeue_style ($ дескриптор)

// удаляем дескрипторы контента, о которых нам не нужно беспокоиться, каждый со своими условиями

add_action (‘wp_print_scripts’, ‘wra_filter_scripts’, 100000);

add_action (‘wp_print_footer_scripts’, ‘wra_filter_scripts’, 100000);

// Поддержка пикселей устройства

// это улучшает цели переводов Gravatars и wordpress.com в программах высокого разрешения и увеличенных изображений. У нас есть только Gravatars, так что без них все будет хорошо.

if (! is_singular (‘docs’))

if (! is_singular (array (‘docs’, ‘post’)))

wp_deregister_script (‘кодовое поле’);

wp_dequeue_script (‘кодовое поле’);

// удаляем ненужные стили

add_action (‘wp_print_styles’, ‘wra_filter_styles’, 100000);

add_action (‘wp_print_footer_scripts’, ‘wra_filter_styles’, 100000);

// больше никаких стилей bbpress.

wp_deregister_style (‘bbp-по умолчанию’);

wp_dequeue_style (‘bbp-по умолчанию’);

// монитор загрузок не используется в интерфейсе.

if (! is_singular (‘docs’))

// плагин списка содержимого используется на страницах документации в прежнем виде

// так быть не должно. Нужно разобраться в этом.

if (! is_singular (array (‘docs’, ‘post’)))

wp_deregister_style (‘кодовое поле’);

wp_dequeue_style (‘кодовое поле’);

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

Заключение

Обеспечение быстрой загрузки вашего веб-сайта важно для удобства пользователя и предотвращения снижения производительности SEO из-за высокого показателя отказов. Хотя может быть много причин, по которым ваш сайт WordPress может не загружаться быстро, распространенной причиной является ненужная очередь сценариев JavaScript и CSS для блокировки рендеринга, возникающая из-за использования плагинов.

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

How To Remove Unused JavaScript In WordPress (Usually From Bloat, Plugins Third-Party Code, Themes/Page Builders)

Delaying JavaScript and removing bloat are 2 common ways to remove unused JavaScript in WordPress. Many optimization plugins can delay JavaScript, disable plugins on pages they’re not used, and host third-party code locally. But, avoiding bloated plugins/page builders can save you trouble from having to optimize them.

For example, a popular setup (Elementor/Divi + WP Rocket/SiteGround Optimizer) adds more JavaScript than GeneratePress + FlyingPress/LiteSpeed Cache. With GeneratePress, there’s no need to tweak performance settings (because it doesn’t need it), use less widgets/columns, or code your header/footer in CSS like you would with Elementor and Divi. And unlike most cache plugins, FlyingPress + LiteSpeed Cache can not only minify/delay JavaScript, but also removes bloat and hosts third-party code locally. This is why the “right” setup is so critical for web vitals.

No matter which setup you use (and no matter which JavaScript files are causing you trouble), I’ll cover everything I can in the guide. You can also leave a comment if you have any questions!

1. Find your largest JavaScript files
2. Delay JavaScript
3. Host third-party JavaScript locally
4. Disable plugins on pages they’re not used
5. Optimize Elementor + Divi
6. Replace bloated plugins (especially if they use jQuery)
7. Disable emojis, embeds, jQuery Migrate
8. Disable email obfuscation, Rocket Loader, bot protection
9. Disable WooCommerce scripts on non-eCommerce pages
10. Minify JavaScript
11. Don’t combine JavaScript

1. Find Your Largest JavaScript Files

Open your Chrome Dev Tools coverage report by viewing your site and click Ctrl + Shift + J (PC) or Ctrl + Option + J (Mac). Go to the coverage tab and you’ll see your largest JavaScript files. I prefer this over PageSpeed Insights as it shows more data. You can also use GTmetrix Waterfall.

The URL usually tells you where it’s from. You can filter by type to see all your JavaScript files, or look at usage visualization to see total bytes and unused bytes. It should tell you everything!

• Is it jQuery?
• Is it a plugin?
• Is it your theme/page builder?
• Is it third-party code from external domains?

After you find out what is adding JavaScript, use my tutorial to optimize it.

2. Delay JavaScript

This is usually done with third-party code (like Google Analytics or Facebook Pixel) or heavy JavaScript files loading below the fold (like social sharing and third-party comment plugins). While this won’t “remove” JavaScript, it delays it from being loaded until user interaction (i.e. scroll, mouse click, touching the screen on mobile). This can significantly improve web vitals.

FlyingPress + LiteSpeed Cache both have settings to delay/exclude files. Delay all gives you better scores, but you’ll need to exclude files or things can break. Perfmatters has a nice list of common JS delay exclusions. Still, you’ll want to check your plugin’s documentation on how they handle this. Delaying specific scripts is safer but you risk missing JavaScript files to delay. In this case, view your coverage report from step 1 and add JS files IF they load below the fold.

WP Rocket + Perfmatters automatically delay JavaScript files and let you toggle specific themes/plugins ON or OFF. You can also manually exclude files if delaying causes them to break.

SiteGround Optimizer and most other cache plugins don’t support delaying JavaScript, in which case you’ll want to use Flying Scripts (free plugin). This requires manually adding JS files.

You may need to increase the timeout period to see better results (I generally recommend 5-7 seconds). Just be careful when delaying AdSense or Analytics since this can affect data/revenue.

3. Host Third-Party JavaScript Locally

If third-party code can’t be delayed, try to host it locally.

For example, you can replace YouTube iframes with a preview image in most cache plugins. Or host Gravatars locally if you have lots of comments (using FlyingPress or Simple Local Avatars).

If you must use third-party code, avoid loading it above the fold and limit where it’s used. For example, only load Maps on contact/local SEO pages, don’t load AdSense above the fold, and avoid over tracking in Tag Manager. Use Perfmatters or Asset CleanUp to only load your social sharing plugin on your blog instead of your entire website. Check your third-party code report:

4. Disable Plugins On Pages They’re Not Used

Perfmatters (paid) and Asset CleanUp (free) let you disable plugins on pages/posts they’re used, which removes unused JavaScript and CSS.

I prefer Perfmatters because the interface is cleaner and has several optimizations not found in WP Rocket and SiteGround Optimizer. But if you’re already using FlyingPress, many Perfmatters features overlap. Which means you may want to save the money and use Asset CleanUp instead.

Step 1: Install Perfmatters or Asset CleanUp.

Step 2: Enable the script manager if using Perfmatters.

Step 3: Enable test mode in the settings. This prevents the script manager from breaking your website since only you will see the changes. Once you’re done configuring the script manager (and assuming it doesn’t break anything), deactivate this and it will make your changes go live.

Step 4: Head to the script manager and disable JavaScript files (or entire plugins) where they don’t need to load. For example, you may be able to disable contact form plugins everywhere but contact page, social sharing plugins everywhere but posts, and comments everywhere but posts. It depends where plugins are being used and whether they load JS/CSS across your site.

5. Optimize Elementor + Divi

Elementor and Divi add more JavaScript/CSS than alternatives.

If you absolutely must use a page builder, take the time to optimize it so it doesn’t look like this:

• Activate performance settings – Elementor’s improved asset loading and Divi’s dynamic framework/library settings will only load JavaScript when it’s being used.
• Use less widgets/columns – there’s a good YouTube tutorial on this, but you’ll want to design your pages in a way that reduces the number of columns/widgets.
• Code your header/footer/sidebar in CSS – you may need a developer, but it can make a big improvement (WP Johnny offers it as a service). When he did it for me, “Elementor” went from a couple thousand to a couple hundred in my source code.
• Avoid bloated page builder plugins – Elementor plugins are notoriously bloated and often load across your entire site. Check every plugin in WP Hive (and Chrome Dev Tools coverage report) before committing to it. I’ve personally replaced table, comment, and gallery plugins with Gutenberg blocks and lightweight alternatives.
• Add delay JavaScript exclusions – when delaying JavaScript, remember to add exclusions that are specific to your page builder (see Perfmatters’ documentation).

Lots of people are moving away from page builders (I went from Elementor to GeneratePress).

6. Replace Bloated Plugins (Especially If They Use jQuery)

Some plugins load extra JavaScript/CSS on the frontend (and can also use jQuery). Other plugins run resource-hungry background tasks and increase memory usage. Neither are good.

JavaScript-heavy plugins are often “design plugins” like galleries, sliders, comments, or contact forms. View my list of slow plugins and avoid them if possible. If you used the Chrome Dev Tools coverage report or Query Monitor, the culprits will be obvious. Look for lightweight alternatives.

jQuery is used in many themes/plugins. It may be possible to disable certain parts of jQuery (i.e. jquery-migrate) without breaking your site, which you test in Perfmatters + Asset CleanUp. However for best results, this goes back to using jQuery-free plugins/themes. Like this guy did:

7. Disable Emojis, Embeds, jQuery Migrate

All these add JavaScript and can be disabled using FlyingPress, Perfmatters, or Unbloater.

• Disable Emojis: On – removes a JavaScript file needed for emojis (use Unicode instead).
• Disable oEmbeds: On – when you paste a URL into your WordPress editor, this loads a pretty preview (from YouTube, Facebook, Tweets, etc). If you don’t need this, turn it on.
• Disable jQuery Migrate: Off – if you’re not using a page builder, turn it on . Perfmatters has docs on dealing with jQuery in the script manager, defer, delay, and preload settings.

8. Disable Email Obfuscation, Rocket Loader, Bot Protection

These Cloudflare features also add JavaScript. Unless you really need them, disable them.

• Email Obfuscation (email-decode.min.js) – stops bots from collecting your email address. If you publicly show it, you can list it like this: tom(at)onlinemediamasters.com.
• Rocket Loader (rocket-loader.min.js) – lots of compatibility issues with plugins/themes and is notorious for breaking WordPress sites, or has an opposite effect of slowing it down.
• Bot Protection (cdn-cgi) – blocking bad bots is recommended and can even reduce CPU usage, but there are other ways to go about this… like the Blackhole For Bad Bots plugin.

9. Disable WooCommerce Scripts On Non-eCommerce Pages

If you’re using WooCommerce, try the Disable WooCommerce Bloat plugin. In addition to disabling WooCommerce scripts/styles on non-eCommerce pages, it also has bloat removal options like removing WooCommerce junk in the dashboard. GitHub also has a few solutions.

10. Minify JavaScript

Minifying JavaScript removes unnecessary characters from your code. If this breaks your website, find the problematic files in your source code and exclude them from minification.

11. Don’t Combine JavaScript

Combining JavaScript isn’t almost always not recommended.

WP Johnny recommends only combining JavaScript on small websites where the total CSS + JavaScript file size is under 10KB (most websites are well over 10KB). Check your GTmetrix Waterfall chart, see how big your CSS and JS files are, and decide whether you should combine.

Frequently Asked Questions

How do I reduce unused JavaScript in WordPress?

Two easy ways to reduce unused JavaScript in WordPress are to host third-party code locally and delay JavaScript. Page builders can be optimized and plugins can be disabled on pages they’re not used. Avoiding bloated page builders/plugins can save also you work.

How do I remove unused JavaScript in WP Rocket?

WP Rocket removes unused JavaScript by minifying/delaying it. Other JavaScript optimizations (like hosting it locally and removing bloat) can’t be done in WP Rocket.

How does Autoptimize remove unused JavaScript?

Autoptimize can minify/combine JavaScript and defer files, but you’ll need to do other JavaScript optimizations (like delaying files and hosting them locally) for better scores.

You Might Also Like:

22 Comments.

Thank you. This information is concise, helpful and executable. Unlike most of the devs I’ve hired who were quite executable. If you know what I mean 🙂 lol thank you Reply

Koushik Mridha

Thanks for this article, My website speed for desktop is perfect 90 and mobile 49, I can’t understand why my mobile speed not increase Reply

Tom Dupuis

PSI tests mobile on a 3G connection. Checked out your site though, I would start by hosting fonts locally and optimizing those, or at least try the Swap Google Fonts Display plugin to ensure text remains visible during font load. They’re pulling from fonts.gstatic.com now. Also looks like you need to reduce TTFB which is obviously hosting. Reply

Leave a Comment Cancel reply

Core web vitals threw a lot into the mix, but the main factors of website speed are the same: use lightweight themes/plugins on a fast server and CDN (then you’re already 90% there).

Get The Low Down

About Tom

I fall asleep to serial killer documentaries, rap to Eminem, and play way too much Rocket League. View my bio to learn 50 random & disturbing things about me (with cat and travel pics).

Сайт на WordPress VS PageSpeed Insights

В это статье мы расскажем как оптимизировали конкретное WordPress веб приложение. Какие действия были выполнены чтобы попасть из красной зоны оценки PageSpeed Insights в зеленую, тут будет мало общих рекомендаций универсальных для любых платформ и приложений, которыми пестрит поисковая выдача, a большe описание действий, которые повлияли на результат в рамках конкретной задачи.

PageSpeed Insights — противоречивый инструмент по оптимизации скорости загрузки веб страниц от Google, который за свою семилетнюю историю много раз менял свои алгоритмы, интерфейсы, все время дорабатывался, нещадно хейтился и даже закрывался, но в 2021 году по прежнему более чем актуален и находится в особом почете и уважении у SEO специалистов. И вовсе не потому что является самым объективным и точным, есть много других отличных инструментов 1, 2, 3, а потому что за ним стоит сам “великий и ужасный” Google.

Итак, у нас задача оптимизировать сайт на CMS WordPress до зеленой зоны.

Сайт несложный с обычной судьбой, был сверстан под нужды заказчика и натянут на wp+woocommerce, в процессе нагружен 40+ плагинами ( что для сайтов на wp обычное дело ).
PSInsights оценивает ваш сайт отдельно для мобильных и десктопных устройств и делит их на три зоны.

• 0–49 — красная
• 50–89 — желтая
• 90–100 — зеленая

Изначально наш сайт имеет такие грустные оценки.

Для тех кто хочет 100/100

Эта статья для вас не подойдет, можно поискать в разделе фантастика, если такой есть на хабре. Современные сайты, а тем более сделанные на CMS обвешаны огромным количеством js и css библиотек, в случае с WP — это почти всегда много плагинов, каждый из которых может что-то добавлять свое на ваш фронт, все это делает сайт огромной неповоротливой махиной и ждать от нее космических скоростей не стоит.

Хотя пустая установка стандартной темы WP twentytwentyone еще выдает желаемую сотню.

Но если помимо этого вы ещё захотите добавить на страницу хоть что-то, то это что-то будет нуждаться в оптимизации.

Этапы оптимизации

• Удалим лишние плагины.
• Поработаем с изображениями.
• Сократим количество js и css на страницах.
• Специфические оптимизации для конкретного проекта.

Удалим лишние плагины

Современный WP это зоопарк различных плагинов, каждый из них это отдельный мир и экосистема. Любой плагин потенциально может добавлять свой функционал на фронт, даже если изначально он задуман только для административной части сайта. Изучать код всех плагинов и оценивать потенциальную угрозу для производительности займет слишком много времени, поэтому действуем от простого к сложному. Удаляем по максимуму все плагины, доводим сайт до нужной зеленой отметки и потом ставим по одному обратно, отслеживая как каждый из них влияет на оценку PSInsights, если влияние присутствует, то думаем над заменой плагина аналогом или отказаться от него.

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

Поработаем с изображениями

Наш проект имеет три разных предупреждения касающихся изображений на сайте.

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

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

Этап 0. Добавим lazy load для изображений

PSInsights оценивает только те изображения, которые смог увидеть, так зачем ему видеть лишнее? Давайте отложим загрузку изображений, которые находятся ниже начальной загрузки экрана.

WP версии 5.4 добавил поддержку lazy load изображений из коробки, в теории просто добавляем атрибут loading=»lazy» к тегу изображений и должно работать, на практике для PSInfights срабатывает не всегда, поэтому ставим плагин autoptimize, который нам еще пригодится ниже для оптимизации js и css кода, и активируем в нем lazy load загрузку изображений.

Этап 1. Настройте эффективную кодировку изображений

По факту это значит что изображения недостаточно оптимизированы.

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

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

Этап 2. Используйте современные форматы изображений

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

Для конвертации всех изображений в webp формат я воспользовался этим плагином, который в папке uploads рядом с существующими изображениями создает новые с расширением webp. То есть, если раньше у вас было изображение foo.jpeg, то сейчас рядом с ним появилось foo.jpeg.webp

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

Поэтому, в тех местах где lazy load не смог скрыть изображения, я вручную заменил тег img на тег picture, как это работает хорошо описано тут.

Код замены привожу ниже, все php переменные естественно должны быть объявлены перед тегом.

Этап 3. Настройте подходящий размер изображений

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

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

add_action( 'init', 'frank_theme_init' ); function frank_theme_init()

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

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

Переходим к следующему этапу оптимизации.

Сократим количество js и css на страницах

У нас осталась группа рекомендаций по оптимизации скорости загрузки, все из них относятся к js и css файлам.

• Уменьшите размер кода JavaScript
• Удалите неиспользуемый код CSS
• Удалите неиспользуемый код JavaScript
• Устраните ресурсы, блокирующие отображение

Как видим основные рекомендации это размер js и css библиотек. Нужно определить кто эти библиотеки нам на фронт добавляет. Открываем вкладку network панели хрома, выбираем отображение только js файлов, затем обновляем страницу через ctrl + F5. После этого сортируем по размеру файлов, чтобы выявить самые тяжелые, от которых потенциально исходит самая большая угроза.

В итоге видим что самые тяжелый файл нам добавляют:

• Плагин оператора сайта
• Сервисы статистики и аналитики ( facebook pixel, google tag manager)
• Стандартные библиотеки (jquery, bootstrap)

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

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

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

Также отключаем всякие мелочи по типу эмоджи wp, которыми мы не пользуемся на нашем фронте

 remove_action('wp_head', 'print_emoji_detection_script', 7); remove_action('wp_print_styles', 'print_emoji_styles'); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); 

После этого останется устранить ресурсы блокирующие отображение.

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

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

Под капотом плагин соберет все подключаемые файлы js и css в два больших файла, минифицирует их и отдаст на фронт.

После оптимизаций связанных с js и css наши цифры стали совсем близки к цели.

У нас 80+ для мобильных, и стабильно зеленая зона для десктопа.

Предупреждения по сокращению размеров js и css кода по прежнему висят, но их мы больше оптимизировать не будем, потому-что это будет очень трудозатратно по времени, и не нужно в рамках нашей задачи.

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

Специфические оптимизации для конкретного проекта

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

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

Итак в рамках нашего проекта мы видим, что одним из факторов отмеченных красным является “Largest content paint”

Логически глядя на страницу можно легко догадаться какой элемент является самым большим на странице, в нашем случае есть подозрение, что это верхний слайдер запускаемый slick библиотекой. Но мы не будем полагаться только на интуицию, а доверимся инструментам. Открываем панель хрома, вкладку “Performance” и запускаем тест, затем кликаем по кладке “LCP”. В итоге виновник найден. Подозрения подтвердились — это наш верхний слайдер.

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

В коде это будет выглядеть примерно так. Добавляем параллельно c html слайдера тег изображения и вставляем в его src первое изображение слайдера

 $post_thumbnail_id = $product->get_image_id(); $image = franc_get_appropriate_size_image_downsize($post_thumbnail_id, 'large'); $attachment_url = $image[0]; $image = image_downsize( $post_thumbnail_id, 'full' ); $alt = get_post_meta($post_thumbnail_id, '_wp_attachment_image_alt', true); if ( empty($alt) ) < $alt = __('product image', 'Frank_Maisler'); >?> 
 $image[0], 'alt' => $alt, 'width' => $image[1], 'height' => $image[2], 'class' => 'img-fluid', ]; frank_show_template('templates/parts/picture-tag', $args); ?>
 
 
get_gallery_image_ids(); foreach( $attachment_ids as $attachment_id ) < $alt = get_post_meta($post_thumbnail_id, '_wp_attachment_image_alt', true); if ( empty($alt) ) < $alt = __('product image', 'Frank_Maisler'); >?> 
 ?>
 
 
 ?>

Затем в js помещаем инициализацию слайдера в таймаут и скрываем изображением после инициализации

jQuery(document).ready(function($) < setTimeout(function() < if ( jQuery('.single-product-slider-carousel img').length != 1) < jQuery('.single-product-slider-image').removeClass('d-none'); jQuery('.single-product-slider-carousel').removeClass('d-none'); jQuery('.slider-nav').slick(< lazyLoad: 'ondemand', slidesToShow: 4, slidesToScroll: 1, arrows:false, asNavFor: '.slider-for', focusOnSelect: true >); setTimeout(function() < var main_image = jQuery('.preload-single-product-image'), height = main_image.height(); jQuery(".single-product-slider-image").height(height); main_image.addClass('d-none'); >, 1000); > >, 5000); >); 

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

Подведем итоги. Задача выполнена, все страницы нашего проекта в зеленой зоне. Конечно еще можно провести много всякий оптимизаций:

• Сократить bootstrap.css оставив только нужные элементы.
• Попрофилировать ресурс в поисках узких мест загрузки php и sql запросов.
• Настроить более эффективно кэширование.

И еще много чего, но на сегодня цель достигнута, сайт действительно стал грузиться быстрее и PSInsights оценивает его высоко.

• wordpress
• pagespeed insights
• pagespeed
• optimization