Коли справа доходить до рішень про покупку, клієнти звертають увагу на багато речей у вашому магазині. Швидкість завантаження є однією з найважливіших. Хоча ви можете покращити швидкість веб-сайту, увімкнувши відкладене завантаження зображень або вимкнувши JS-пакетування, цього не завжди достатньо.
У цьому посібнику ви дізнаєтеся, як відкладено завантажувати блоки CMS у Magento за допомогою розширення та Pages.
Режими відображення блоків CMS
Ми створили дві сторінки CMS з однаковим вмістом: банер і слайдер товару. Одна сторінка містить блок CMS з за замовчуванням, друга — блок CMS з режимом відображення Ajax завантажується при першому прокручуванні.
Тепер порівняємо режими відображення За замовчуванням та Ajax завантажується при першому прокручуванні.
Блок CMS - Продукти, включені в DOM
Блок CMS - Продукти, завантажені через запит Ajax
|
Параметр |
Режим за замовчуванням |
Ajax завантажується при першому прокручуванні |
|
Розмір сторінки |
26.2 кб |
15.9 кб |
|
Час завантаження вмісту сторінки |
783 мс |
591 мс |
|
DomContentLoaded |
1.43 с |
1.11 с |
|
Завантаження сторінки |
3.13 с |
2.58 с |
Показник швидкості завантаження сторінки кращий, якщо деякі елементи, такі як слайдери та віджети, завантажуються в окремих Ajax-запитах. Це економить час на завантаження контенту та рендеринг сторінки.
Більше того, це може значно покращити швидкість сторінки, особливо якщо сторінка містить слайдери з багатьма елементами або важкими блоками, розташованими поза областю перегляду.
Як відкладено завантажувати блоки CMS у Magento?
Ви можете покращити швидкість завантаження блоків контенту легше, ніж ви думаєте. Вам просто потрібно зробити кілька простих кроків для відкладеного завантаження блоків CMS у Magento.
Крок 1: Знайдіть віджети, слайдери, відео, блоки або інші елементи, що впливають на показник швидкості.
Крок 2: З'ясуйте, як цей елемент додається на сторінку (Макет/Віджет/*.phtml).
Примітка: ви можете увімкнути підказки щодо шляху шаблону швидше знаходити шаблони.
Крок 3: Відтворіть цей елемент у блоці CMS. Ви можете викликати блок CMS у phtml-файлі у Magento 2 наступним чином:
{{block class="Magento\Framework\View\Element\Template" template="Vendor_Module::template.phtml"}}
Крім того, ви можете вставити будь-який віджет у блок CMS.
Крок 4: Змініть режим відображення блоку CMS на один із наступних після того, як ви увімкнути динамічні блоки :
- Відкладене завантаження під час прокручування
- Завантаження Ajax під час завантаження сторінки
- Завантаження Ajax під час першої прокручування
Ці методи виконують окремі запити для завантаження вмісту блоку CMS. Таким чином, це один із найпростіших і найшвидших способів оптимізувати швидкість завантаження сторінки вашого веб-сайту. Все, що вам потрібно зробити, це додати свій елемент до блоку CMS та змінити режим відображення.
Тим не менш, після відкладеного завантаження блоків CMS у Magento вам може знадобитися оптимізувати інші речі, щоб пришвидшити Magento 2 .
