Ці три речі визначені на самому початку для тих, хто не зовсім розуміє, що це таке.
Lazy Load
Ліниве завантаження (англ. Lazy load), також неправильно назване "ледачим" за дослівним перекладом, - це шаблон дизайну, який використовується для затримки завантаження або рендерингу об'єкта до потрібного моменту використання, щоб уникнути непотрібного попереднього завантаження об'єктів, які можуть не використовуватися. Він найчастіше використовується для зображень і сприяє кращому часу завантаження та економії пропускної здатності.
Відображення кожного зображення затримується до тих пір, поки воно не буде потрібне, завантажуючись по мірі прокрутки в області перегляду
Вікно перегляду
Вікно переглядуякий не має точного перекладу, але часто згадується як "графічне вікно", був створений компанією Apple у 2007 році для свого iPhone і являв собою віртуальне вікно, подібне до того, яке компанія Nokia розробила для Mini Map. Це був і залишається метатег, який був призначений для того, щоб забезпечити спосіб для веб-сторінок повідомляти мобільним браузерам про те, як вони хочуть, щоб веб-браузер відображав сторінку.
Без цього метатега iPhone відображав веб-сторінки у вигляді вікна шириною 980 пікселів, яке користувач мав збільшувати та зменшувати. За допомогою цього метатега ви можете відобразити сторінку в її фактичному розмірі, а потім адаптувати макет, щоб забезпечити той вид сторінки, який ми всі очікуємо побачити при використанні мобільного браузера. Згодом він став стандартним мета-тегом, який підтримується більшістю пристроїв, і сьогодні використовується для так званого адаптивного дизайну.
Litespeed Cache
LiteSpeed Web Server - це програмне забезпечення для веб-серверів і LiteSpeed Cache для WordPress (LSCWP) - це універсальний плагін для прискорення роботи сайтів, який має унікальний загальносерверний кеш і набір функцій оптимізації для сайтів, що використовують WordPress і розміщені на сервері під управлінням LiteSpeed.
Завантаження зображень
В ідеалі, всі зображення повинні завантажуватися з відстрочкою, крім тих, які вже знаходяться в області перегляду при початковому завантаженні сторінки, тобто того, що показується на перший погляд на екрані до того, як ми прокручуємо сторінку.
У цьому є проблема. При першому завантаженні сторінка може виглядати негарно, оскільки зображення не показуються, поки немає руху, і доводиться виключати перші два-три, які показуються
Хоча WordPress має власну відкладену завантаження з версії 5.5, і ми можемо зробити це за допомогою багатьох інших плагінів, таких як Парфумеріякерування Viewport для обмеження того, які зображення ви хочете відображати, а які ні, не таке просте, оскільки ми можемо вказати йому не відкладати завантаження, наприклад, зображень, які ми хочемо відображати, але ми не можемо встановити або виключити зображення, які ми хочемо відображати перші два, три або чотириале ми не можемо встановити або виключити певні зображення для кожної сторінки простим способом, і ми можемо зробити це лише за допомогою навалом.
VPI
25 липня LiteSpeed додав в оновлення версії 5.0 свого плагіна гнучку опцію для виправлення цієї проблеми, яку він назвав VPI (Viewport Images).
Служба VPI досліджує URL-адресу і визначає, які зображення видно на екрані з роздільною здатністю 1300×900 пікселів для перегляду на робочому столі, а які - на екрані з роздільною здатністю 480×800 пікселів для перегляду з мобільних пристроїв. Він повертає список цих зображень плагіну LiteSpeed, і плагін LiteSpeed виключає їх з повільного завантаження наступного разу, коли він кешує цю URL-адресу.
В результаті сторінка рендериться повністю над згином, в той час як всі зображення під згином продовжують поводитися як і раніше. Сторінка зберігає хороші показники швидкості, а відвідувачі вперше бачать повний екран контенту.
Конфігурація
Для того, щоб скористатися новою послугою, очевидно, потрібно активувати Lazy Load в плагіні.
Конфігурація VPI проста, він має лише два комутатори.
Якщо ввімкнено зображення видового екрану (далі VPI) і cron встановлений на ON, зображення VPI будуть генеруватися у фоновому режимі за допомогою черги, заснованої на cron.
Якщо ви не хочете включати cron, вам доведеться обробляти чергу VPI вручну. Зробити це можна за допомогою кнопки"Запустити вручну чергу VPI", яка з'явиться при наявності URL-адрес у черзі, або з головної панелі управління за допомогою опції "Примусово запуститиcron".
Цікавим і дійсно корисним в цій новій опції є те, що тепер, як в класичному редакторі, так і в Gutenberg, в кожному пості і сторінці ви знайдете нове поле в опціях LiteSpeed, де ви можете повністю відключити цю опцію і видалити будь-які зображення з області перегляду, щоб налаштувати її на свій смак.
Будь-які зображення, що з'являться в цих полях, не будуть відкладені для завантаження
Якщо вхідні дані ще не були оброблені для VPI, обидва поля будуть виглядати порожніми, хоча ви можете вручну додати зображення за бажанням або видалити зображення з обох полів і примусити перерахувати VPI.
Про хороше і менш хороше
Без сумніву, великою перевагою VPI від LiteSpeed є можливість швидко і легко вирішити, до яких саме зображень ми не хочемо застосовувати відкладене завантаження, і встановити його вручну для кожної сторінки.
Заковика в тому, що ця опція є доповненням до інших послуг з оптимізації WordPress від QUIC.cloud такі як Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) та Image Optimization, за які нам пропонують обмежену безкоштовну плату, якої не завжди може бути достатньо, і після цього вам доведеться купувати кредити, хоча не дорого.
Я вирішив протестувати його, щоб порівняти результат з рідним Lazy Load з WordPress Core і Perfmatters (з фіксованими виключеннями на кількість) і поки що я бачу поліпшення в межах того невеликого запасу, який вже залишився.
Кінцевий візуальний результат точно такий же, як і при використанні Perfmatters, оскільки ви просто змінюєте колір заповнювач з сірого на білий і відрегулюйте тривалість ефекту"затухання" за допомогою цього CSS.
/* Fade para Lazy Load de Litespeed - PART 1 - Before Lazy Load */
img[data-lazyloaded]{
opacity: 0;
}
/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
opacity: 1;
}
