Перейти до основного вмісту

Покращення швидкості завантаження

1. Робота з JS кодом​

  • Якщо є JS код, який використовується для прикладу тільки пк - можна обгорнути його в медіа, щоб браузер його ігнорував на менших розмірах,і навпаки. Робиться це звичайною обгорткою з обмеженням потрібної ширини екрану:
if (window.innerWidth >= 1025) {
	code code code...
}
  • При роботі у JS з DOM, варто мінізувати кількість запитів до DOM.

Для прикладу, якщо потрібно робити багато document.queryselector, то можна скоротити кількість запитів стягуванням батьківського блоку у змінну, а наступні змінни вже ініціалізовувати з батьківського блоку, а не через document.

Розглянем приклад оптимізованого коду. На картинці нижче відбувається ініціалізації 4-х змінних, які в подальшому всі будуть опрацьовуватись. Змінні SliderDom та thumbnailItemsDom були ініціалізовані з батьківського блоку, не створючи додаткові 2 запити до DOM.

Optimized js code

2. Пріорітетність​

Робота з елементами.​

  • Елементам, які знаходяться на початку завантаження сторінки, варто задавати пріорітетніші властивості для завантаження, і навпаки, переважній більшості,особливо важким файлах які знаходять внизу сторінки варто задавати нижчий пріоритет(fetchpriority, loading).
  • Для JS коду це може бути DOMContentLoaded Optimized js code loaded

Робота з блоками.​

  • Не важкі блоки, які відображаються відразу на видимій частині сайту при завантаженні, можна закинути preload-ом,для швидшого завантаження. Тут потрібно бути уважним,адже якщо картинка досить велика, або блок має за собою якісь важкий код і тд., то цим можна більше нашкодити,ніж оптимізувати. Почитати про створення секції в якої високий пріорітет.

Пріорітетність додавання css властивостей.​

  • Для прикладу у нас є home page, відтворена у Ecomposer,але сам банер ми додали через Shopify, і нам потрібно певні css властивості. Додаючи властивості у base.css, ми погіршуєм показники сайту, включаючи навіть TBT. Нижче наведено 2 скріна з статистикою до додавання наших властивостей, та після. Навіть якщо картинка оптимізована, починає завантажуватись ще до рендерингу сторінки і ви додали звичайний user-select: none це нашкодить. Чому? Бо щоб задати ці звичайні властивості, йому приходиться завантажувати весь файл з стилями, де останні властивості будуть застосовуватись для банера. Рішенням такої проблеми може бути або критичний css, закинутий у head, або писати властивості у саму секцію у Shopify.

Optimized css Do not optimize css

3. Clenup​

  • Якщо сторінка зроблена у Ecomposer, можна переглянути структуру і підчистити лишні вкладення. Для прикладу при створенні слайдера, створюється базову структуру, але якщо умовно ми просто задаєм фотку як background для слайда, то та структура нам не потрібна(він свторює inner row i column), в такому випадку можна їх видалити. У інших елементах можна спробувати перенести елемент вище column. Це дозволить позбутись надлишкової вкладеності.