Tabla de contenidos
Эти три вещи определены в самом начале для тех, кто не совсем понимает, что это такое.
Ленивая нагрузка
Ленивая загрузка - это шаблон проектирования, используемый для отсрочки загрузки или рендеринга объекта до подходящего момента использования, чтобы избежать ненужной предварительной загрузки объектов, которые могут не использоваться. Он чаще всего используется для изображений и способствует лучшему времени загрузки и экономии полосы пропускания.
Рендеринг каждого изображения откладывается до тех пор, пока оно не понадобится, загружаясь по мере того, как Вы прокручиваете область просмотра
Видовой экран
Видовой экранplaceholder, который не имеет точного перевода, но часто называется "графическое окно", был создан компанией Apple в 2007 году для своего iPhone и представлял собой виртуальное окно, похожее на то, которое Nokia разработала для Mini Map. Это был и остается мета-тег, который был предназначен для того, чтобы веб-страницы могли сообщать мобильным браузерам о том, как они хотят, чтобы браузер отображал страницу.
Без этого метатега смартфоны iPhone отображали веб-страницы в виде окна шириной 980px, которое пользователю приходилось увеличивать и уменьшать. С помощью этого мета-тега Вы можете отобразить страницу в ее реальном размере, а затем адаптировать макет для обеспечения такого вида страницы, который мы все ожидаем увидеть при использовании мобильного браузера. В конце концов, он стал стандартным мета-тегом, поддерживаемым большинством устройств, и сегодня используется для так называемого отзывчивого дизайна.
Litespeed Cache
LiteSpeed Web Server - это программное обеспечение для веб-сервера и LiteSpeed Cache for WordPress (LSCWP) - это универсальный плагин для ускорения сайта, который содержит уникальный кэш на весь сервер и набор функций оптимизации для страниц, использующих WordPress и размещенных на сервере, работающем под управлением этого программного обеспечения.
Загрузка изображений
В идеале, все изображения должны загружаться отложенно, за исключением тех, которые уже находятся в области просмотра при первоначальной загрузке страницы, т.е. то, что показывается на первый взгляд на экране до того, как мы прокрутим страницу.
Здесь есть проблема. При первой загрузке страница может выглядеть некрасиво, поскольку изображения не показываются, пока нет движения, и Вам приходится исключать первые два или три, которые показываются
Хотя WordPress имеет встроенную отложенную загрузку с версии 5.5, и мы можем делать это с помощью многих других плагинов, таких как Perfmattersс помощью элемента управления Viewport ограничить, какие именно изображения Вы хотите отобразить, а какие нет, не так просто, поскольку мы можем сказать ему не делать отложенную загрузку, например, изображений, которые мы хотим отобразить, но мы не можем установить или исключить изображения, которые мы хотим отобразить первые два, три или четырено мы не можем установить или исключить определенные изображения для каждой страницы простым способом, и мы можем сделать это только с помощью оптом.
VPI
25 июля компания LiteSpeed добавила в обновление версии 5.0 своего плагина гибкую опцию для устранения этой проблемы, которую она назвала VPI (Viewport Images).
Служба VPI изучает URL-адрес и определяет, какие изображения видны на экране размером 1300×900 пикселей для настольных компьютеров и какие изображения видны на экране размером 480×800 для мобильных устройств. Он возвращает список этих изображений плагину LiteSpeed, а плагин LiteSpeed исключает их из медленной загрузки при следующем кэшировании URL.
В результате страница полностью отображается над сгибом, в то время как все изображения под сгибом продолжают вести себя как прежде. Страница сохраняет хорошие показатели скорости страницы, в то время как посетители впервые видят содержимое во весь экран.
Конфигурация
Чтобы воспользоваться этой новой услугой, очевидно, Вам необходимо активировать Ленивая нагрузка в плагине.
Его конфигурация очень проста, просто включите его, и он имеет только два переключателя.
Когда изображения видовых экранов (далее VPI) включены и для параметра cron установлено значение ON, изображения VPI будут генерироваться в фоновом режиме с помощью очереди на основе cron.
Если Вы не хотите включать cron, Вам придется обрабатывать очередь VPI вручную. Вы можете сделать это с помощью кнопки"Manually run VPI queue", которая появится при наличии URL в очереди, или с главной приборной панели с помощью опции"Force cron".
Интересная и действительно полезная вещь в этой новой опции заключается в том, что теперь, как в классическом редакторе, так и в Gutenberg, в каждом посте и странице Вы найдете новое поле в опциях LiteSpeed, где Вы можете полностью отключить эту опцию и удалить любые изображения из Viewport, чтобы точно настроить его по своему вкусу.
Любые изображения, которые появляются в этих ячейках, не будут загружаться с задержкой
Если входные данные еще не были обработаны для VPI, оба поля будут пустыми, хотя Вы можете вручную добавить изображения по своему усмотрению или удалить изображения из обоих полей и заставить пересчитать VPI.
Хорошее и менее хорошее
Несомненно, большим преимуществом VPI от LiteSpeed является возможность быстро и легко решить по прихоти, к каким конкретным изображениям мы не хотим применять отложенную загрузку, и установить ее вручную для каждой страницы.
Загвоздка в том, что эта возможность предоставляется в дополнение к другим услугам по оптимизации WordPress от QUIC.cloud такие как Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) и Image Optimisation, для которых нам предлагается ограниченная бесплатная плата, которой не всегда может быть достаточно, после чего Вам придется покупать кредиты, хотя не дорого.
Я решил протестировать его, чтобы сравнить результат с родным 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;
}
