Настройки плагина W3 Total Cache Minify: Как выбрать тип встраивания? Мой опыт решения проблем и полезные советы.

Возникли трудности с выбором правильного типа встраивания для W3 Total Cache Minify? В этой статье веб-мастер делится своим реальным опытом и предлагает пошаговое руководство по точному выбору подходящего типа встраивания Minify, избегая проблем со стилем сайта и сбоев загрузки. Также представлено простое решение для настройки, которое легко применят даже новички, обеспечивая плавную и быструю работу WordPress !

Я занимался оптимизацией веб-сайта, и когда открыл настройки минификации в W3 Total Cache, был совершенно ошеломлен. В выпадающем меню для типа встраивания было четыре варианта: по умолчанию (блокировка), использовать JS для неблокирующего режима, использовать «асинхронный» для неблокирующего режима и использовать «отложенный» для неблокирующего режима.

Я на мгновение задумался: что всё это значит?

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

Что же представляют собой эти четыре типа встраивания?

Давайте сначала поговорим о том, к какому типу характера относятся эти четыре варианта.

Блокировка по умолчанию — самый простой подход. Когда браузер встречает скрипт, он останавливается, загружает и полностью выполняет его, а затем продолжает отрисовку страницы. Звучит надежно, не правда ли? Но недостаток заключается в том, что первоначальная загрузка страницы будет задержана; пользователям придется ждать завершения выполнения скрипта, прежде чем они смогут что-либо увидеть.

Использование JavaScript для неблокирующего выполнения довольно интересно. Вместо того чтобы напрямую добавлять теги `<script>` на страницу, сначала генерируется небольшой скрипт, а затем необходимые скрипты динамически внедряются на страницу с помощью JavaScript после запуска страницы. Таким образом, страница может сначала отобразиться, а скрипты загружаются постепенно. Звучит здорово, не правда ли? Однако проблема в том, что этот процесс динамического внедрения может нарушить исходный порядок выполнения скриптов. Если некоторые скрипты на вашей странице сильно зависят от порядка выполнения, могут возникнуть проблемы.

Использование асинхронного режима для неблокирующего выполнения сводится к добавлению атрибута `async` к тегу `<script>`. Скрипт будет загружаться асинхронно в фоновом режиме и выполняться немедленно после завершения, без ожидания со стороны страницы. Однако недостаток заключается в том, что порядок выполнения совершенно не контролируется; выполняется тот скрипт, который загрузится первым, независимо от порядка, указанного в коде.

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

Какой из них мне выбрать?

Проще говоря, эти четыре варианта — это как вопрос с несколькими вариантами ответа: вам нужна скорость или порядок действий?

Моё предложение следующее:

Если ваш сайт небольшой, содержит мало скриптов и у вас нет крайне высоких требований к скорости загрузки, то использование настроек по умолчанию (блокировка) — самый простой вариант. Хотя это немного медленнее, проблем это не вызовет.

Если вы хотите повысить скорость отображения первого экрана, и ваши скрипты не имеют жестких зависимостей, таких как «A должен выполниться до B», отдайте приоритет использованию `defer` для неблокирующего выполнения . Это практически идеальное решение из доступных в настоящее время, поскольку оно позволяет избежать блокирующего рендеринга, сохраняя при этом порядок выполнения.

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

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

Две большие ловушки, в которые я попал.

Слова ничего не стоят. Я записал две свои ошибки; вы можете сравнить их со своим опытом и посмотреть, сможете ли вы их избежать.

Первый недостаток: пользовательские темы WordPress нельзя просмотреть в режиме реального времени.

Некоторое время при настройке темы после нажатия кнопки «Сохранить» предварительный просмотр не обновлялся. Я вносил изменения, обновлял страницу, и всё оставалось по-прежнему.

После некоторого расследования я обнаружил, что виновником была функция сжатия Minify. Решение простое:

Перейдите в общие настройки плагина W3 Total Cache , найдите параметр «Сжатие» и снимите с него галочку. Затем нажмите маленькую стрелку под кнопкой «Сохранить настройки» в правом верхнем углу и выберите « Сохранить настройки и очистить кэш ». Этот шаг крайне важен; без очистки кэша вы будете видеть старую версию.

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

Вторая проблема: поле поиска темы Astra не реагирует на нажатия.

Я столкнулся с этой проблемой довольно давно. Я использовал тему Astra, и однажды внезапно обнаружил, что поле поиска перестало реагировать, как бы я ни нажимал на него. Сначала я подумал, что это проблема самой темы, но позже выяснил, что она вызвана настройками минификации W3TC.

Решение следующее:

Перейдите в W3 Total Cache → Общие настройки → Расширенные настройки сжатия → JS → Настройки механизма минификации → Настройки локали и измените тип встраивания на один из двух следующих:

1. Ранее неблокирующий режим работы достигался с помощью JavaScript.
2. Затем используйте JavaScript для неблокирующей работы.

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

Что касается выбора именно этих двух вариантов, а не других, я провел небольшое исследование. Проще говоря, компоненты фронтенда темы Astra довольно чувствительны к времени выполнения скрипта, и некоторые неблокирующие методы могут привести к сбою привязки событий. Использование режима «неблокирующий с JS» гарантирует, что скрипт будет выполняться только после полной загрузки страницы, избегая при этом хаотичного выполнения, наблюдаемого при асинхронном режиме.

落地清单

И наконец, вот контрольный список, которому вы можете следовать напрямую:

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

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

Во-третьих, всегда очищайте кэш после каждого изменения. Механизм кэширования W3TC не позволит вам увидеть последние изменения, поэтому шаг «очистить кэш и проверить снова» абсолютно необходим.

В-четвертых, используйте инструменты разработчика вашего браузера или такие инструменты, как PageSpeed ​​Insights, чтобы сравнить скорость загрузки до и после. Пусть данные говорят сами за себя, а не только ваша интуиция.

Напишите в конце

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

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

Если вы столкнетесь с подобными проблемами или если у вас все еще останутся другие вопросы после применения моего метода, не стесняйтесь обсудить это. Разработка веб-сайтов — это сплошной метод проб и ошибок; никто не является исключением.

Спасибо за прочтение моей статьи. До встречи в следующий раз.