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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

落地清单

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

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

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

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

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

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

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

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

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

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