Налаштування плагіна W3 Total Cache Minify: як вибрати тип вбудовування? Мій досвід усунення несправностей та поради щодо порятунку життя

Важко вибрати правильний тип вбудовування для W3 Total Cache Minify? У цій статті розповідається про реальний досвід веб-майстра та надається покрокове керівництво для точного вибору правильного типу вбудовування Minify, уникаючи невідповідностей стилю веб-сайту та збоїв під час завантаження. Вона також містить надійне рішення для налаштування, яке можуть легко застосувати навіть новачки.WordPress Розганяйтеся без зіткнень!

Я оптимізував вебсайт, і коли відкрив налаштування Minify у W3 Total Cache, я був повністю приголомшений. Випадаюче меню для вбудованого типу мало чотири опції: За замовчуванням (Блокувати), Використовувати JS для неблокування, Використовувати "Асинхронний" для неблокування та Використовувати "Затримка" для неблокування.

Я на мить задумався, до чого все це?

Повірте, ви не самотні. Ці чотири варіанти, ймовірно, спантеличать навіть новачка, не кажучи вже про того, хто користується WordPress роками. У цій статті я безпосередньо розповідаю про підводні камені, з якими я зіткнувся, та про уроки, які я отримав. Вам не потрібно звертатися до документації; просто дотримуйтесь моїх інструкцій.

Що саме являють собою ці чотири типи вбудовування?

Давайте спочатку поговоримо про те, який характер мають ці чотири варіанти.

За замовчуванням (блок)Це називається блокуванням за замовчуванням. Це найпростіший підхід: браузер зупиняється, коли зустрічає скрипт, завантажує та повністю виконує його, а потім продовжує відображати сторінку. Звучить надійно, чи не так? Але компроміс полягає в тому, що початкове завантаження сторінки буде заблоковано; користувачам доведеться чекати, поки скрипт завершить роботу, перш ніж вони зможуть щось побачити.

Використання JS для неблокуванняЦе досить цікаво. Замість того, щоб безпосередньо писати теги `<script>` на сторінці, спочатку виводиться невеликий скрипт, а потім динамічно вставляється на сторінку скрипти, які потрібно завантажити, через JavaScript після її запуску. Таким чином, сторінка може бути відрендерена спочатку, а скрипти можуть завантажуватися поступово. Звучить чудово, чи не так? Однак проблема полягає в тому, що цей процес динамічного введення може порушити початковий порядок виконання скриптів. Якщо деякі скрипти на вашій сторінці сильно залежать від порядку виконання, можуть виникнути проблеми.

Використовуйте "асинхронний" для неблокуванняЦе передбачає додавання атрибута `async` до тегу `<script>`. Скрипт завантажуватиметься асинхронно у фоновому режимі та виконуватиметься одразу після завантаження, без очікування сторінки. Однак недоліком є ​​те, що порядок виконання повністю неконтрольований; будь-який скрипт, який завершить завантаження першим, виконується першим, незалежно від порядку, вказаного в коді.

Використання "затримки" для усунення блокуванняОсь що означає додавання атрибута `defer`. Скрипт чекатиме, поки вся сторінка буде проаналізована перед виконанням, і, що важливо, він збереже початковий порядок, у якому ви його написали. Це досить зручно для користувача, оскільки не блокує перший екран і не порушує порядок.

Який з них мені обрати?

Простіше кажучи, ці чотири варіанти відповідей схожі на запитання з вибором однієї правильної відповіді:Ви хочете швидкості чи порядку?

Моя пропозиція така:

Якщо ваш вебсайт невеликий, має мало скриптів і у вас немає надзвичайно високих вимог до швидкості завантаження, використання налаштування за замовчуванням (заблоковано) є найпростішим варіантом. Хоча це трохи повільніше, це не спричинить жодних проблем.

Якщо ви хочете покращити швидкість відображення першого екрана, і ваші скрипти не мають сильних залежностей, таких як "A має виконатися перед B", розставте пріоритети...Використання "затримки" для усунення блокування(відкласти). Наразі це майже найідеальніше рішення, оскільки воно не блокує рендеринг і не порушує порядок.

Якщо ви спробуєте відкласти, але все одно виявите проблеми з деякими функціями, то подумайте...Використання JS для неблокуванняЦе рішення є більш радикальним, але його сумісність дещо гірша.

Використовуйте "асинхронний" для неблокування(асинхронний) – це варіант, який я найменше рекомендую. Оскільки порядок виконання повністю збійний, легко призвести до збою, якщо ви не абсолютно впевнені, що всі ваші скрипти працюють незалежно.

Дві великі пастки, в які я потрапив

Розмови — це дешево. Я записав дві помилки, яких сам припустився; ви можете перевірити їх на власному досвіді, щоб побачити, чи зможете їх уникнути.

Перша пастка: користувацькі теми WordPress не можна переглядати в режимі реального часу.

Деякий час під час налаштування теми, після натискання кнопки «Зберегти», попередній перегляд не оновлювався. Я вносив деякі зміни, оновлював сторінку, але вона все одно залишалася такою ж.

Після деяких досліджень я виявив, що винуватцем була функція стиснення Minify. Рішення просте:

Отримайте доступ до плагіна W3 Total Cache常规设置,з'явися"стиснення"Зніміть позначку з цієї опції. Потім натисніть маленьку стрілку під пунктом «Зберегти налаштування» у верхньому правому куті та виберіть «...»Зберегти налаштування та очистити кешЦей крок є вирішальним; якщо ви не очистите кеш, ви все одно бачитимете стару версію.

Після завершення поверніться до налаштування теми, і попередній перегляд повернеться до звичайного режиму.

Друга проблема: поле пошуку теми Astra не реагує на натискання.

Я зіткнувся з цією проблемою досить давно. Я користувався темою Astra, і одного разу раптом виявив, що поле пошуку не реагує, як би я його не натискав. Спочатку я думав, що це проблема з самою темою, але пізніше виявив, що це викликано налаштуваннями Minify у W3TC.

Рішення таке:

Перейдіть до W3 Total Cache → Загальні налаштування → Додаткові налаштування стиснення → JS → Налаштування механізму мінімізації → Налаштування локалі та змініть тип вбудовування на один із цих двох:

1. Раніше неблокування досягалося за допомогою JavaScript.
2. Після цього використовуйте JS для неблокування

Так само очищення кешу та оновлення сторінки дозволить полі пошуку працювати належним чином.

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

Список місць, які варто відвідати

Нарешті, ось контрольний список, якого ви можете дотримуватися безпосередньо:

Перший крок – уточнити свою мету. Ви хочете найшвидшого початкового завантаження сторінки, чи пріоритетом є стабільність та безпомилкова робота? Це визначить, який тип вбудовування вам слід використовувати.

Другий крок — не змінювати все одразу. Спочатку знайдіть менш важливу сторінку для тестування, спостерігайте за нею день-два та просуйте її на весь сайт лише тоді, коли ви впевнені, що немає проблем.

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

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

напишіть в кінці

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

Але пізніше я зрозумів, що це компроміс. Не можна мати одночасно найшвидший і найстабільніший; завжди доводиться жертвувати одним. Мій досвід показує, що спочатку потрібно використовувати defer, який наразі є найбезпечнішим рішенням без блокування, а потім використовувати зворотний виклик, якщо виникають проблеми.

Якщо у вас виникнуть подібні проблеми або якщо у вас все ще залишаться інші труднощі після виконання мого методу, не соромтеся обговорити це. Розробка веб-сайтів — це метод спроб і помилок; ніхто не є винятком.

Дякую, що прочитали мою статтю. До зустрічі наступного разу.