Мързеливо зареждане на изображения: Пълно ръководство Плюс 3 начина да го приложим

Мързеливо зареждане на изображения: Пълно ръководство Плюс 3 начина да го приложим

Мързеливо зареждане на изображения: Пълно ръководство Плюс 3 начина да го приложим
СОДЕРЖАНИЕ
02 июня 2020

Мързеливо зареждане на изображения: Пълно ръководство


Тъй като функционалността и интерактивността се увеличават в мрежата, през последните няколко години се наблюдава непрекъснато увеличение на размера на уеб страниците. Към началото на 2018г, средния размер на страницата в интернет стои над 2 MB! Как да се преборим с това? Малко нещо, наречено мързеливо зареждане на изображения, е едно от по-добрите решения.

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

Нека започнем със съдържанието на предстоящото:

  • Защо има значение мързеливо зареждане?
  • Какво е мързеливо зареждане?
  • Предимства на мързеливо зареждане
  • Какво да вземете предвид при мързеливо зареждане на изображения
  • Вариант 1: Изпълнете мързеливо зареждане от нулата (за начинаещи: ⭐ / 5)
  • Вариант 2: Използвайте плъгин за JavaScript (за начинаещи: ⭐⭐ / 5)
  • Вариант 3: Използвайте приставка за WordPress (за начинаещи: ⭐⭐⭐⭐⭐ / 5)
  • заключение

Защо има значение мързеливо зареждане?

Огромният полезен товар на уеб страница се състои предимно от изображения, скриптове, таблици стилове, шрифтове и видеоклипове. Изображенията обаче заемат над 60% от размера на типичната уеб страница. Изображенията също са от решаващо значение за дизайна на уеб страница, така че не е като да се отървете от тях.

Без каквато и да е оптимизация, уеб браузърът на потребителя изтегля всички ресурси, преди да предостави страница напълно. Това води до увеличаване на времето за натоварване, което може да отвлече хората. WooCommerce изчисли че за всеки 100 мс подобряване на скоростта на страниците уебсайтът за електронна търговия може да увеличи приходите с 1%.

В такъв сценарий има много смисъл да правиш каквото е необходимо за оптимизиране на времето за натоварване. И тъй като изображенията са основният принос към размера на уеб страниците, започването с тях е добра идея. Това е мястото, където ленивото зареждане влиза в игра.

Какво е мързеливо зареждане?

За да разберете как работи мързеливо зареждане, ето един бърз анимиран GIF, демонстриращ как се изобразяват изображения на CodeinWP.

Демонстрация на мързеливо зареждане на изображенияДемонстрация на мързеливо зареждане на CodeinWP

Когато страницата се зареди, всички изображения не се изтеглят веднага. Когато превъртите надолу към изображение, първо виждате замъглена версия на него и действителното изображение започва да се зарежда във фонов режим. Това замъглено изображение е версия с ниска разделителна способност на крайното изображение, на части от размера. Този феномен на отлагане на изтеглянето и изобразяването на изображението, докато потребителят не премине върху него, е точно това, което се нарича мързеливо зареждане.

Макар че "мързелив" като цяло се свързва отрицателно, мързеливото зареждане всъщност е добра практика и води до намаляване на пъти за зареждане на страницата чрез оптимизиране на сайта ви като цяло.

Забележка. В тази публикация разглеждаме процеса на мързеливо зареждане на изображения, но мързеливото зареждане не се ограничава само до изображения – можете да използвате същата идея, когато изобразявате всеки друг ресурс като видеоклипове, коментарите (има цял раздел за това как да направите това в тази публикация) и дори шрифтове.

Предимства на мързеливо зареждане

Тъй като времето за зареждане на уеб страница е основен принос за изоставянето, мързеливото зареждане на изображения може значително да доведе до повишаване на потребителите, които остават на страницата, докато не се зареди, което в крайна сметка може да доведе до по-високи продажби или реализации.

Другото съществено предимство на мързеливите зареждащи изображения са понижените сметки за сървър. Вие обслужвате само онези изображения, през които зрителят превърта, и запазвате по честотна лента за части от страницата, които не са били преглеждани. Тъй като изображенията формират доминираща част от теглото на страницата, това може да доведе до потенциално по-ниски разходи за сървър.

Зареждането на всички изображения отпред е потенциално пагубно и за вашите читатели. Ако потребителят е в неограничен план за данни в мрежата, това вероятно не трябва да има значение. Въпреки това, при планове с ограничени данни, вие запазвате данните на зрителя си чрез мързеливо зареждане на изображения.

Какво да вземете предвид при мързеливо зареждане на изображения

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

Определете изображенията, които искате да заредите мързеливо

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

За мързеливо зареждане трябва да се считат само изображенията, които са извън екрана и не допринасят за структурата на страницата. Обикновено това са изображения в  елементи, които се появяват в тялото на страницата.

Изберете си запазени изображения

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

Има две направления, които разработчиците обикновено предприемат в това отношение:

  • Използвайте доминиращия цвят на изображението като фон
  • Използвайте нискокачествена версия на изображението

заместител с ниска резолюцияПример за нискокачествени версии на изображения като заместители за мързеливо зареждане

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

Въпреки че една от техниките е да зареждате изображения веднага след като влязат в порта за изглед, може да искате да помислите за добавяне на време за буфер, преди това да се осъществи – така че потребителят никога да не види задържателя.

Внимавайте за промяна на структурата на страницата при зареждане на изображения

Преди да се зареди изображението, то може да бъде показано с размери 0 px. Това не е идеално за поддържане на вашата дизайнерска структура.

Това може лесно да промени оформлението на страницата и позицията на текста. Просто решение е да добавите правилните размери към изображението веднага – това гарантира, че размерът на елемента на изображението остава същият след зареждането.

Предвид горните съображения, нека да разгледаме как всъщност можем да реализираме мързеливо зареждане в WordPress сайт.

Вариант 1: Изпълнете мързеливо зареждане от нулата

Нека първо да разгледаме как да направим това, без да използваме никакви приставки. Тази опция се препоръчва за онези от вас, които са удобни с JavaScript. В идеалния случай трябва да се предприемат следните стъпки:

  1. Предотвратяване на зареждането на изображението по време на зареждане на страница: Когато посочите URL адреса или пътя на изображението в атрибута src на  етикет, изображението ще бъде изтеглено от браузъра по време на зареждане на страницата. За да предотвратите изтеглянето на изображението от браузъра, трябва да посочите местоположението на изображението в атрибута data-src на  вместо това.
  2. Регистрирайте функциите за обработка на събития в JavaScript, за да проверите за елементи на две събития: зареждане и превъртане.
  3. Когато елемент влезе в порта за изглед, заредете стойността на елемента data-src в елемента src, което задейства браузъра да зареди изображението.

Простата реализация на този процес е обяснена от Робин Осборн и демонстрацията е налична на CodePen.

Вариант 1.1: Използвайте API за наблюдение на пресичане

API за наблюдение на пресичането помага да се идентифицират DOM елементи, които се намират в порта за изглед във всеки даден момент от време. Това е по-чист начин за прилагане на мързелив товар без писане на функции за обработка на събития. Броят редове код за изпълнение на мързелив товар също намалява значително. Съвместимостта на браузъра обаче остава проблем.

Блогът на разработчиците на Google обяснява прилагането на API за наблюдение на пресичане чрез тази демонстрация на CodePen.

Вариант 2: Използвайте плъгин за JavaScript

Двата варианта, обсъдени по-горе, се нуждаят от средно ниво на JavaScript. Ако търсите по-лесна реализация на мързеливо зареждане, без да използвате тежък плъгин, който поставя товар в сървъра, можете да опитате обикновения плъгин за JavaScript, Блази.

Най- bLazy библиотека при размер по-малък от 2 KB не поставя допълнително натоварване върху полезния товар, като същевременно ви позволява лесно да боравите с мързеливите изображения за зареждане.

За да използвате библиотеката bLazy, трябва да инициализирате  елементи със следните атрибути:

  • клас: задайте класа на всички  тагове за б-мързеливи
  • src: връзка към изображението на заместителя
  • data-src: връзка към изображението за зареждане
  • data-src-small: връзка към изображението, за да се зареди на екрани с ширина под 420 пиксела

Трябва да инициализирате библиотеката на bLazy само с няколко реда код и всичките ви изображения ще бъдат изобразени чрез мързеливо зареждане.

; (функция () {
// Инициализирайте
var bLazy = нов Blazy ();
}) ();

Налична е демонстрация на CodePen тук.

Вариант 3: Използвайте приставка за WordPress

Има няколко варианта, които могат да ви донесат мързеливо зареждане. Най-вече:

Всички тези приставки автоматично ще се справят с мързеливо зареждане. Всяка от тях също има някои приятни странични функции.

Например, Lazy Load by WP Rocket също мързеливо зарежда видеоклипове в YouTube и ги замества с миниатюра.

Optimole, освен че е най-новото попълнение към семейството на ThemeIsle, ви дава и оптимизация на неподвижни изображения (както е тествано тук) с доста разширени функции в това отношение. Например, той ви дава динамично оразмеряване въз основа на размера на екрана на потребителя.


Оптимизация на изображения и мързеливо зареждане от Optimole Оптимизация на изображения & Мързеливо натоварване от Optimole

Автор (и): Optimole

Текуща версия: 2.3.1

Последна актуализация: 21 април 2020 г.

optimole-wp.zip


96% Оценки


50000 + инсталирания


WP 4.7 + Изисква

Подобно на повечето плъгини, за да получите мързеливо зареждане, просто инсталирайте приставката и активирайте функцията в контролния панел на приставката:

Optimole за мързеливо зареждане на изображения

заключение

Тази публикация изследва необходимостта и ползите от мързеливо зареждане на изображения. Също така обсъдихме три различни начина за прилагане на мързеливо зареждане на уебсайт на WordPress:

  • Ако имате междинно владеене на JavaScript, можете да реализирате мързеливо зареждане от нулата
  • Ако знаете някакво програмиране, но не искате никакви плъгини, олекотена JavaScript библиотека, bLazy е опция
  • Ако искате решение с едно кликване за мързеливо зареждане на изображения на уебсайта си, трябва да отидете на плъгин като Optimole

Какво мислиш за мързеливо зареждане? Опитали ли сте да го използвате, за да подобрите ефективността на вашия уебсайт?

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector