Зареждане при скрол
Зареждането при скрол е техника, която отлага зареждането на некритични ресурси, като изображения под видимата област, докато те действително не са необходими, подобрявайки скоростта на първоначалното зареждане на страницата.
Зареждането при скрол е стратегия за оптимизация на производителността, която отлага зареждането на ресурси, докато не са необходими. Вместо да се зареждат всяко изображение, видео и скрипт при първото отваряне на страницата, зареждането при скрол зарежда само ресурсите, видими в първоначалния изглед, и извлича останалите, докато потребителят превърта надолу. Най-честото приложение е зареждането при скрол на изображения. Типичната уеб страница може да има 20-50 изображения, но само 2-3 са видими при първоначалното зареждане на страницата.
Без зареждане при скрол браузърът изтегля всичките 50 изображения незабавно, хабяки трафик и забавяйки първоначалното рендиране. С зареждане при скрол първо се зареждат само видимите изображения, а останалите се зареждат, докато потребителят превърта до тях. Съвременните браузъри поддържат нативно зареждане при скрол с атрибута loading="lazy" на img и iframe елементи. Преди нативната поддръжка стандартният подход бяха решенията на базата на JavaScript, използващи Intersection Observer API.
На практика
- Портфолио за фотография с 200 изображения на страница намали времето за първоначално зареждане от 12 секунди на 1,8 секунди чрез зареждане при скрол на всички изображения под първите три реда
- Категорийна страница на електронен магазин с 60 продуктови изображения внедри нативно зареждане при скрол, намалявайки първоначалното тегло на страницата от 8MB на 800KB
- Новинарски сайт използва мързеливо зареждане (lazy loading) на вградени YouTube видеа, заменяйки ги с леки миниатюри, докато потребителят не кликне за възпроизвеждане, което спестява 1,5 MB JavaScript на видео
- Страница с дълга статия използва мързеливо зареждане (lazy loading) на уиджети за свързани статии и секции за коментари в долната част, приоритизирайки съдържанието на статията за възможно най-бързо първоначално зареждане
Не сте сигурни как се отнася за Вас?
Старши инженер разглежда сайта Ви, присъствието Ви в търсачките и начина, по който стигат запитванията до Вас, след което записва трите неща, които си струва да се поправят първо. Документът остава за Вас във всеки случай.