Підтримайте 
Коли справа доходить до рішення про покупку, люди звертають увагу на багато речей у вашому магазині, і швидкість завантаження є однією з найважливіших. Хоча ви можете покращити швидкість веб-сайту, зменшивши розмір зображень або вимкнувши JS bundling, цього не завжди достатньо.
Відповідно, сьогодні ми хочемо поговорити про елемент сторінки, який завжди залишається поза увагою при оптимізації швидкості — CMS блок. У цій статті ви дізнаєтесь, як оптимізувати швидкість сторінки за допомогою розширення CMS Display Rules.
Зміст [приховати]
Використання Ajax запитів
Ми створили дві CMS сторінки з однаковим вмістом: банер і слайдер продуктів. Одна сторінка містить CMS блок із default режимом, друга — CMS блок із режимом Ajax load on first scroll.
Тепер давайте порівняємо режими відображення Default і Ajax load on the first scroll.
CMS блок - products included in DOM
CMS блок - products loaded aia Ajax request
|
Param |
Default |
Ajax load on first scroll |
|
Page Size |
26.2kb |
15.9Kb |
|
Time To Load Page Content |
783 ms |
591 ms |
|
DomContentLoaded |
1.43 s |
1.11 s |
|
Page Load |
3.13 s |
2.58 s |
Значення швидкості сторінки краще, якщо деякі елементи, як-от слайдери та віджети, завантажуються в окремих Ajax запитах. Це економить час на завантаженні контенту та рендерингу сторінки.
Крім того, це може значно покращити швидкість сторінки, особливо якщо сторінка містить слайдери з багатьма елементами або важкими блоками, розташованими за межами вікна перегляду.
Як оптимізувати швидшкість з CMS Display Rules?
Ви можете покращити швидкість завантаження легше, ніж ви думаєте. Вам просто потрібно зробити кілька простих кроків.
1. Знайдіть віджети, слайдери, відео, блоки або інші елементи, які впливають на швидкість.
2. З’ясуйте, як цей елемент додається на сторінку (Layout/Widget/*.phtml).
Примітка: ви можете ввімкнути template path hints. щоб знайти темплейти швидше.
3. Відтворіть цей елемент у CMS блоці. Ви можете викликати CMS блок у phtml файлі у Magento 2 наступним чином:
{{block class="Magento\Framework\View\Element\Template" template="Vendor_Module::template.phtml"}}
Крім того, в CMS блок можна вставити будь-який віджет.
4. Змініть режим відображення CMS блоку на один із наведених нижче, як пропонують налаштування CMS display rules:
- Lazy load on scroll
- Ajax load on page load
- Ajax load on first scroll
Ці методи виконують окремі запити для завантаження вмісту CMS блоку. Таким чином, це один із найпростіших і найшвидших способів оптимізувати швидкість сторінки вашого сайту. Все, що вам потрібно зробити, це додати свій елемент в CMS блок і змінити режим відображення.
Тим не менш, коли ви оптимізуєте завантаження вмісту CMS блоків, можуть виникнути інші речі, які вам потрібно буде оптимізувати, щоб покращити швидкість Magento 2.