Как настроить as artslider

Как настроить SQLAlchemy, SQLModel и Alembic для асинхронной работы с FastAPI

В этом руководстве предполагается, что у вас есть опыт работы с FastAPI и Postgres с помощью Docker. Вам нужна помощь, чтобы ускорить работу с FastAPI, Postgres и Docker? Начните со следующих ресурсов:

Настройка проекта

Начните с клонирования базового проекта из репозитория fastapi-sqlmodel-alembic:

В корневом каталоге проекта создайте образы и разверните контейнеры Docker:

Как только сборка будет завершена, перейдите к http://localhost:8004/ping. Вы должны увидеть:

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

SQLModel

Далее, давайте добавим библиотеку SQLModel для взаимодействия с SQL-базами данных с помощью объектов Python. По сути, это оболочка поверх pydantic и SQLAlchemy, основанная на аннотациях типов Python.

Нам также понадобится Psycopg.

Добавьте две зависимости в project/requirements.txt:

Создайте два новых файла в разделе «проект/приложение», db.py и models.py.

Здесь мы определили три модели:

SongBase это базовая модель, от которой наследуются другие. У неё есть два свойства name и artist, оба из которых являются строками. Это модель только для данных , так как в ней нет table=True, а это значит, что она используется только в качестве модели pydantic.

Song Тем временем добавляет id в базовую модель. Это табличная модель, так что это модель pydantic и SQLAlchemy. Она представляет собой таблицу базы данных.

SongCreate это модель pydantic, основанная только на данных, которая будет использоваться для создания новых экземпляров песен.

Инициализировал новый движок SQLAlchemy с использованием create_engine из SQLModel. Основные различия между версией create_engine из SQLModel и версией SQLAlchemy заключаются в том, что версия SQLModel добавляет аннотации типов (для поддержки редактора) и включает стиль движков и соединений SQLAlchemy «2.0». Кроме того, мы передаём echo=True чтобы мы могли видеть сгенерированные SQL-запросы в терминале. Это всегда приятно включать в режиме отладки.

Создали сеанс SQLAlchemy.

Далее, внутри project/app/main.py, давайте создадим таблицы при событии startup:

Стоит отметить, что строчка from app.models import Song обязательна. Без неё таблица песен не будет создана.

Чтобы протестировать, удалите старые контейнеры и тома, соберите заново образы и разверните новые контейнеры:

Откройте логи контейнеров через docker-compose logs web. Вы должны увидеть:

Теперь, когда таблица создана, давайте добавим несколько новых маршрутов в project/app/main.py:

В браузере перейдите к http://localhost:8004/songs. Вы должны увидеть:

Асинхронная модель SQLModel

Двигаясь дальше, давайте добавим поддержку асинхронности в SQLModel.

Во-первых, остановите контейнеры и тома:

Обновите URI базы данных в docker-compose.yml, добавив в

Затем замените Psycopg на asyncpg:

Обновление project/app/db.py: чтобы использовать асинхронность в SQLAlchemy engine и session:

Мы использовали конструкции SQLAlchemy, например, create_async_engine и AsyncSession, поскольку на момент написания SQLModel для них не было обёрток.

Мы отключили expire on commit передав expire_on_commit=False .

metadata.create_all не выполняется асинхронно, поэтому мы использовали run_sync для его синхронного выполнения в асинхронной функции.

Превратите on_startup в асинхронную функцию в project/app/main.py:

Вот и все. Пересоберите образы и запустите контейнеры:

Убедитесь, что таблицы были созданы.

Наконец, обновите обработчики маршрутов в project/app/main.py чтобы использовать асинхронное выполнение:

Добавьте новую песню и убедитесь, что http://localhost:8004/songs работает, как и ожидалось.

Alembic

Наконец, давайте добавим Alembic, чтобы правильно обрабатывать изменения схемы базы данных.

Добавьте его в файл требований:

Удалите событие запуска из project/app/main.py так как мы больше не хотим, чтобы таблицы создавались при запуске:

Опять же, остановите существующие контейнеры и тома:

Взгляните на использование Asyncio с Alembic, пока создаются новые образы.

После запуска контейнеров инициализируйте Alembic с помощью асинхронного шаблона:

В созданной папке «проект/миграции» импортируйте SQLModel в script.py.mako, файл шаблона Mako:

Теперь, когда будет создан новый файл миграции, он будет включать import sqlmodel .

Далее, нам нужно обновить верхнюю часть project/migrations/env.py вот так:

Здесь мы импортировали SQLModel и нашу модель песни. Затем мы устанавливаем в target_metadata метаданные нашей модели, SQLModel.metadata . Для получения дополнительной информации об аргументе target_metadata ознакомьтесь с Автоматической генерацией миграций из официальных документов Alembic.

Обновите sqlalchemy.url в проекте/alembic.ini:

Чтобы создать первый файл миграции, выполните:

Если все прошло хорошо, вы должны увидеть новый файл миграции в разделе «project/migrations/versions», который выглядит примерно так:

Убедитесь, что вы можете добавить песню.

Давайте быстро протестируем изменение схемы. Обновите модель SongBase в project/app/models.py:

Не забывайте об импорте:

Создайте новый файл миграции:

Обновите функции upgrade и downgrade из автоматически сгенерированного файла миграции следующим образом:

Обновите обработчики маршрутов:

Вывод

В этом руководстве мы рассмотрели, как настроить SQLAlchemy, SQLModel и Alembic для асинхронной работы с FastAPI.

Вы можете найти исходный код в репозитории fastapi-sqlmodel-alembic. Ваше здоровье!

Источник

Шаблон Joomla AS 002057

AS 002057 Free является бизнес-шаблоном, который не может похвастаться огромным количеством настроек, но имеет привлекательный интерфейс и довольно легкую панель управления, с которой сможет справиться даже самый неопытный пользователь.

AS 002057 Free создан на основе BootstrapFramework. Структура шаблона состоит из 19 пунктов для модулей, за счет чего сайт может иметь три колонки. Создатели AS 002057 хорошо поработали над созданием делового ресурса, который имеет привлекательный дизайн. К тому, необходимо заметить, что шаблон полностью соответствует всем современным параметрам, которые включает в себя интернет-ресурс.

Также, как и при оформлении некоторые других шаблонов, здесь можно использовать 10 стандартных шрифтов и 30 Google-шрифтов. Также, в бесплатную версию шаблона разработчиками было добавлено: фирменный слайдер, под названием AS ArtSlider; затем кнопка «Наверх» (AS Scroller) и не обошлось без выпадающего меню AS ResponsiveMenu. Еще в состав шаблона были добавлены: компонент Acymailing и плагин Googlemap.

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

В качестве названия (логотипа) есть возможность загрузить любое фото или картинку. Шаблон имеет адаптивный интерфейс, а значит, работает на любом смартфоне, планшете, а также мобильном устройстве. AS002057Free совместим с Firefox,Opera,Safari, IE7+, Chrome, а также с мобильными браузерами.

Источник

Как настроить отложенную загрузку картинок: lazy loading изображений

В статье:

Отложенную или по-другому ленивую загрузку изображений используют довольно много сайтов. В октябре 2019 команда Backlinko провела исследование, в котором проанализировала скорость загрузки 5,2 млн десктопных и мобильных страниц. Они подсчитали, какие способы оптимизации загрузки практикуют самые быстрые страницы.

Оказалось, что чаще всего используют адаптивные изображения, но ленивая загрузка не сильно отстает и занимает второе место.

Исследователи посмотрели, какой подход используют сайты, получившие высокие оценки инструмента для измерения скорость загрузки Lighthouse. Таблица похожа на предыдущую, lazy loading на втором месте после адаптивных изображений:

Разберем, как работает lazy loading, каким сайтам нужно внедрять эту функцию, и как это сделать.

Что такое lazy loading изображений

Lazy loading или «ленивая загрузка» — это способ отложенной загрузки изображений, когда картинки подгружаются не сразу вместе с запрашиваемой страницей, а по мере надобности, асинхронно. Функция работает на технологии AJAX с помощью JavaScript.

Способ работает для картинок img и фреймов iframe. У этих элементов есть атрибут src, указывающий на источник.

Варианты отложенного отображения контента:

1. По скроллингу
   Изображения и фреймы подгружаются, когда пользователь до них доскролливает. Обычно используют в блогах с бесконечной лентой, в интернет-магазинах с большими листингами.
2. По клику
   Контент подгружается, когда пользователь переходит по ссылке. К примеру, большое изображение загружается, когда пользователь нажимает на миниатюру.
3. В фоновом режиме
   Контент подгружается фоново, к примеру, когда пользователь загрузил документ и оставил его открытым. Этот способ обычно используют для документов, которые нужны для работы — картинок больших размеров, чертежей, схем.

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

На демонстрационной странице indexoid.com/speed картинки загружаются по мере просмотра:

Отображение загрузки картинок на странице при скроллинге Код страницы indexoid.com/speed

Не стоит настраивать такую загрузку для элементов на первом экране — они должны загружаться сразу же, как только пользователь зашел на страницу.

Как ПС относятся к отложенной загрузке

Раньше у Google была проблема с индексированием контента с атрибутом loading, сейчас бот воспринимает такие элементы. Но нужно убедиться, что все материалы страницы доступны для Googlebot.

Каким сайтам нужно внедрять отложенную загрузку

В пятом выпуске рубрики «Спроси PR-CY» один из пользователей задал эксперту вопрос о способах оптимизации картинок на сайте:

«Стоит ли на сайте интернет магазина внедрять lazy loading изображений? Слышал, что Google прочитает фото, находящиеся за пределом экрана, а вот Яндекс — нет. Общался с популярными SEO конторами, 7 из 10 уверяют, что не стоит, обрушу SEO.

И еще вопрос по поводу WebP, jpeg2000 — стоит ли внедрять на сайт? На сайте уже 25000 фото, сам процесс конвертации не быстрый».

Ответил Михаил Шакин, автор SEO-блога и специалист по продвижению сайтов в рунете и англоязычном интернете:

«Если есть хороший трафик с изображений, то реализовывать lazy loading не стоит.

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

По поводу новых форматов изображений — пока можно не тратить на это время. А вот оптимизировать для быстрой загрузки без потери качества очень желательно».

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

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

В каких случаях стоит внедрять lazy loading:

1. На страницах много больших изображений.
2. Картинки составляют основную часть контента — вы продвигаете сервисы с фотографиями, фотостоки, статейники с большим количеством иллюстраций и фреймов.
3. Невысокий балл PageSpeed ​​Insights.
4. Много посетителей с мобильных устройств, больше 50%.
5. Конкуренты быстрее вас, хотя вы уже провели оптимизацию и ускорение страниц.
6. Сервер слабый и не может дать быструю загрузку.

Проверить скорость загрузки сайта и узнать, как его ускорить, можно с помощью сервиса
«Анализ сайта»: анализ оптимизации главной и внутренних страниц.
Неделя всех функций бесплатно
Попробовать

Как настроить отложенную загрузку изображений на сайте

Разберем, какие есть способы для настройки отложенной загрузки, и что проще применить на практике.

Атрибут loading

C помощью атрибута loading веб-мастеры задают условия для загрузки. Атрибут loading можно установить для изображений с тегом img и для медиа с тегом iframe.

Он поддерживает три значения:

• lazy — асинхронная загрузка по мере надобности изображения;
• eager — загрузка элемента немедленно;

• auto — порядок загрузки по усмотрению браузера.

Если значение для атрибута loading не указали, браузер воспримет его как auto.

Для iframe код аналогичный.

Иногда на сайте используют скрытые фреймы, к примеру, для аналитики, для них отложенная загрузка не действует. Chrome определяет, является ли фрейм скрытым, по критериям:

• высота и ширина фрейма — 4px или меньше;
• применяются свойства display: none или visibility: hidden;
• расположение за пределами экрана с помощью отрицательного позиционирования по осям X или Y.

Если хоть одно условие соблюдено, Chrome считает фрейм скрытым и не будет загружать его асинхронно.

Как работает lazy loading

Без внедрения lazy loading браузер делает запросы по адресам из атрибутов, и когда картинок много, он одновременно делает много запросов ко внешним источникам. Это замедляет загрузку страницы.

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

Для отложенной загрузки картинок и фреймов есть два работающих способа настройки:

Как это работает в Chrome:

1. При загрузке страницы браузер создает DOM страницы без изображений и видео.
2. С помощью JavaScript он определяет, какие изображения и видео нужно загружать, запрашивает первые 2 КБ изображений и узнает из них сведения о размерах.
3. На основе этих данных браузер создает заглушки, заполняющие места изображений, с такими же размерами, как у картинок. У атрибута src появляется временное значение, которое содержит адрес шаблона с меньшим весом, чем у оригинального исходника. Элементы, которые будут загружаться асинхронно, встраиваются на страницу с новым значением src.
4. Когда изображение нужно загрузить, в атрибут src вставляется оригинальный адрес ресурса и изображение появляется в исходном качестве. Могут быть два условия для загрузки:
   1. автоматически, когда элемент попадает в область просмотра пользователя — путем проверки события scroll или resize или orientationchange для мобильных устройств;
   2. на элементах по требованию пользователя, когда для элемента наступают события click или hover.

Если изображения внедрены через CSS, настроить отложенную загрузку тоже можно. Это делают через JavaScript: нужно определить, когда элемент находится в области просмотра, и также загрузить фоновое изображение. Теги img загружаются вне зависимости от их видимости, а в загрузке CSS есть много предположений, так что сначала браузер проверяет применение CSS к документу, а потом запрашивает внешние ресурсы.

Какие браузеры поддерживают отложенную загрузку

Раньше для этой функции в любом случае приходилось писать специальный код или использовать отдельную библиотеку JavaScript, но сейчас есть такие браузеры, которые не нуждаются в сторонней библиотеке. Отложенная загрузка будет работать в них, даже если на стороне клиента отключен JavaScript.

Google Chrome обрабатывает loading начиная с 76 версии. Другие браузеры на базе Chromium 76 тоже могут работать с этим атрибутом. Для настройки отложенной загрузки в Firefox есть открытый баг.

Атрибут loading воспринимают пока не все браузеры, но его можно использовать для расширения возможностей страницы.

Браузеры, которые распознают lazy loading, будут следовать инструкциям отложенной загрузки, а браузеры, которые не поддерживают атрибут, будут загружать элементы как обычно.

Как настроить кроссбраузерную функцию lazy loading

Сначала нужно проверить, поддерживает ли браузер атрибут:

Для браузеров, которые не поддерживают встроенный режим отложенной загрузки, можно реализовать его с помощью полифила или сторонней библиотеки. Можно настроить, чтобы библиотеку загружал только браузер, который не поддерживает loading.

Изображения на первом экране просмотра

Изображения, которые должны быть видны сразу после загрузки страницы, нужно описать с помощью тегов img и указать атрибут src. Если использовать для них атрибут data-src без src, изображения не будут показаны.

Изображения на остальных экранах в ленивой загрузке

Если браузер поддерживает атрибут ленивой загрузки, используем src.

Если браузер не поддерживает lazy loading, нужно, чтобы обычная одновременная загрузка не сработала для изображений на всех экранах, кроме первого. Для этого в работе с изображениями на остальных экранах в разметке нужно использовать img data-src=image.png /, а не src, srcset или source.

Это можно сделать с помощью скрипта Lazy loading от David Walsh. Скрипт заменяет атрибут src на data-src в теге img:

Элементы img с атрибутами data-src скрыты в CSS. После загрузки картинок они будут отображаться с применением плавных переходов:

Затем JavaScript передает всем тегам img атрибут src, которые в итоге получают значение атрибута data-src. После загрузки всех изображений, data-src убирается из img:

JavaScript библиотеки

С помощью возможностей JavaScript можно загрузить соответствующую библиотеку. Библиотек много, к примеру, yall.js (Yet Another Lazy Loader), которая использует Intersection Observer API, Query Lazy, основанная на jQuery, LazySizes с поддержкой адаптивных изображений «srcset» и атрибута «sizes» и другие.

В случае с популярной библиотекой LazySizes нужно использовать чтобы указать библиотеке на изображения, которые должны загружаться асинхронно.

Как это выглядит на примере:

Демонстрация отложенной загрузки работы на сайте:

Загрузка картинок при быстром скролле

Как настроить время отложенной загрузки

В режиме auto скорость загрузки зависит от близости элемента к области просмотра и скорости интернета.

В режиме lazy пороговые значения для отложенной загрузки установлены в исходном коде браузера Chrome. Команда Chrome экспериментирует с разными пороговыми расстояниями, так что оно может измениться в будущем.

В своем браузере значения времени загрузки можно настроить средствами командной строки. К примеру, это настройки по умолчанию:

Допустим, нужно настроить, чтобы загрузка изображений начиналась, если от позиции прокрутки до изображения 400 пикселей Тогда все значения в этой команде нужно поменять на 400.

На сайте indexoid.com/speed настроена команда со значением один пиксель, задержка в загрузке не ощущается.

Загрузка изображений при скроллинге

Для сайтов на CMS настраивать отложенную загрузку проще всего с помощью плагинов, которые все сделают автоматически.

Плагины для настройки lazy loading

Собрали несколько плагинов и решений для популярных движков.

Настроить ленивую загрузку: скрипт bLazy.js на JavaScript

Скрипт для отложенной загрузки, работает на чистом JavaScript и не зависит от сторонних библиотек.

1. Запускает ленивую загрузку фоновых и добавочных изображений и картинок в прокрутке.
2. Работает со всеми элементами с атрибутом src, видео HTML5, фреймы.
3. Поддерживает srcset и элемент picture.
4. Загружает фотографии асинхронно с учетом разрешения и размера экрана.
5. Поддерживается устаревшими браузерами.
6. Весит меньше 1,4 КБ.
7. Использует CDN для размещения.

Реализация стандартная. Разметка:

Размыть изображение: Craig Buckler

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

1. Поддерживает любой тип изображений, включая CSS фоновые изображения, атрибуты srcset и sizes.
2. Быстро загружается и работает, занимает 1350 байт JavaScript, 440 байт CSS.
3. Не зависит от фреймворков и библиотек.
4. Поддерживает экраны с матрицами Retina.
5. Применяет прогрессивное улучшение для устаревших браузеров.
6. Делает до трех попыток, если изображение по какой-то причине не загрузилось.

Проще установить специальные плагины для CMS, которые запустят отложенную загрузку. Некоторые вообще не требуют настройки.

WordPress

В конце января 2020 команда разработчиков новой версии WordPress 5.4 поделилась планами. Начиная с этой версии, функция отложенной загрузки начнет работать по умолчанию: HTML-атрибут «loading» со значением «lazy» будет применяться ко всем элементам IMG. Веб-мастер может легко удалить атрибуты, если не хочет, чтобы ленивая загрузка работала.

Запуск WordPress 5.4 планируется в конце марта 2020 года, а пока можно справляться с помощью плагинов. Мы собрали самые лучшие плагины отложенной загрузки для WordPress.

Лучший плагин для lazy load WordPress: исследование

Хостинг Kinsta провел исследование популярных плагинов для lazy loading, чтобы выяснить, какие работают эффективнее.

Исследователи создали легкую страницу с темой TwentySixteen, она весила меньше 155 КБ и загружалась меньше, чем за полсекунды. Для теста ускорения загрузки страницу наполнили большими фото и видео с YouTube, вес увеличился до 1,7 МБ, а скорость уменьшилась до 1,28 секунд.

Тест скорости без плагинов для ленивой загрузки

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

3 лучших плагина WordPress для отложенной загрузки

• BJ Lazy Load — дополнительно позволяет настроить отложенную загрузку: указать класс HTML для исключений из асинхронной загрузки, который вы сможете применять к элементам страницы, указать, в какой момент загружать картинку или фрейм, добавить URL-адрес изображения для заглушки на месте картинки до ее загрузки в хорошем качестве.
• Lazy Load XT — кроме ленивой загрузки, плагин можно использовать для минимизации файлов JS и CSS, загрузки библиотек JavaScript и CSS с помощью Cloudflare CDN, перемещения скриптов в нижний колонтитул сайта.
• a3 Lazy Load — бесплатный плагин на WP, совместим с плагинами WooCommerce, AMP, WPTouch, WP Super Cache, W3 Total Cache и CDN. Позволяет настроить типы объектов для асинхронной загрузки и выбрать миниатюры, виджеты, граватары и другие, настроить загрузки видео и iframe. Переведен на русский.

Плагин a3 Lazy Load смог довести размер изображений до 150 КБ. У BJ Lazy Load и Lazy Load XT получились схожие результаты — размер страницы 2,0 МБ. Сравнение результатов внедрения плагинов показало, что a3 Lazy Load справился лучше.

Сравнение плагинов для lazy load

Исследование проводили в 2016 году, материал обновили в 2019, но в подборке остались плагины, которые не обновлялись по три месяца. Не смотря на это, они могут корректно работать, но вы можете подобрать другое решение, которое будет работать на вашем сайте.

Еще популярные плагины:

• Lazy Load Optimizer — бесплатный плагин, работает с изображениями и фреймами, использует библиотеку lazysizes, совместим с WooCommerce, переведен на русский.
• Loading Page with Loading Screen — плагин также запускает ленивую загрузку, но вдобавок предлагает настроить эффекты для оформления — полупрозрачный экран с процентом загрузки, анимацию, настройка цвета и изображения для фона.
• Lazy Load by WP Rocket — бесплатный и легкий, весит 6 КБ, не использует тяжелые библиотеки типа jQuery, не требует сложных настроек, работает с изображениями, фреймами, в том числе аватарками и превью. С помощью кода с репозитория можно отключить плагин для некоторых страниц.
• Lazy Load for Videos — плагин для отложенной загрузки видео с платформ Youtube и Vimeo, работает без загрузки JavaScript. Видео с Youtube загружаются в режиме повышенной конфиденциальности с использованием встроенного URL-адреса «https://www.youtube-nocookie.com».

1-C Битрикс

Для этого движка удалось найти два плагина:

• Ленивая загрузка изображений — платный плагин для отложенной загрузки на сайте, использует библиотеку lazysizes, работает с CDN Битрикса, поддерживает несколько сайтов, не требует работы с кодом и обрабатывает на лету. Поддерживается большинством версий Битрикса.
• Отложенная загрузка изображений — бесплатный плагин, который использует метод IntersectionObserver, не загружает сайт лишним JS, совместим с CDN Битрикс и поддерживает многосайтовость.

OpenCart

Несколько расширений ленивой загрузки для OpenCard:

• Lazy Load Images — бесплатный плагин, настраивает ленивую загрузку по прокрутке, работает на jQuery.
• Lazyload Images — плагин для асинхронной загрузки с возможностью настроить визуальные эффекты для появляющихся изображений. Поддерживает Opencart версии 1.5.X + 2.X + 3.0.X + 3.1.X. Цена 20 долларов.
• Lazy Load Images — плагин для ленивой загрузки изображений, каруселей, слайд-шоу, работает на JavaScript. Работает с версиями OpenCart v3.x. Цена 20 долларов.

Joomla!

Для Joomla! нашлась пара плагинов:

• JSLazyLoading — плагин для отложенной загрузки, работает с изображениями и динамическими модулями, в том числе с Retina изображениями, AJAX навигацией, выводит уменьшенные изображения для мобильных устройств. Единственный плагин для Joomla!, который работает с отложенной загрузкой фоновых изображений. Работает на чистом JavaScript, не зависит от внешних библиотек, к примеру от jQuery. Цена — 755 рублей.
• Lazy Load — запускает отложенную загрузку изображений для товаров, обрабатывает только фото товара virtuemart и joomshopping — картинки, в пути к которым указан «product». Использует jQuery плагин lazyload. Цена — 400 рублей.

Drupal

Для Drupal есть несколько модулей асинхронной загрузки.

• Lazy-load — модуль Drupal для отложенной загрузки встроенных изображений и фреймов, работает на библиотеке lazysizes.
• Blazy — плагин обеспечивает интеграцию с bLazy и Intersection Observer API для асинхронной загрузки изображений и фреймов.
• Bamboo Twig — модуль на Drupal 8 для повышения производительности, в том числе в нем можно включить отложенную загрузку.
• Image Lazyloader — модуль для ленивой загрузки картинок, подходит для версий Drupal 7.12 и выше.
• Lazy Pane — плагин загружает картинки по требованию со стороны клиента из кэша, через AJAX.

Как проверить ленивую загрузку

При настройке lazy loading нужно убедиться, что поисковые системы распознают и индексируют контент, которые загружается асинхронно. Обычно для локальной проверки используют скрипт Puppeteer.

Команды для проверки и запуска скрипта:

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

Еще интересное:
Как оптимизировать показатель LCP — время отрисовки самого крупного элемента страницы
Как оптимизировать CLS — сдвиги макета страницы
Как оптимизировать FID — еще один показатель Core Web Vitals

Что вы думаете о методе отложенной загрузки? Будем рады, если вы поделитесь своими мыслями и опытом!

Источник