Середньостатистична вага веб-сторінки складає 2406 kB, з яких 75% займають зображення та відео, згідно з Архів HTTP. Це багато для завантаження браузером відвідувачів веб-сторінок і все вказує на те, що в майбутньому розміри веб-сторінок збільшуватимуться.
WordPress - найпопулярніша платформа в області додавання медіафайлів на сайт. З WordPress інтегрувати зображення та відео в записи, сторінки та навіть фон теми – дуже просто.
Дивіться також:
Однак це все робить сайт важким, і користувачі повинні чекати на завантаження великих файлів, включаючи файли, які відразу не видно, до того, як побачать веб-сторінку.
Саме тут потрібне відкладене завантаження. Відкладене завантаження (Lazy Load, лінива завантаження) – це метод оптимізації, який завантажує лише видимий контент для певної області монітора, але відкладає завантаження і рендеринг контенту, що з'являється нижче, після прокручування сторінки.
Google у захваті від цього методу, ви теж повинні звернути на нього увагу, якщо ваші записи або сторінки містять багато вбудованих відео та зображень з високою роздільною здатністю.
Як працює відкладене завантаження?
«Лінива» завантаження працює так:
- Браузер будує DOM веб-сторінки, не завантажуючи зображення та відео
- Застосовується JavaScript, щоб зрозуміти, які зображення і відео потрібно завантажувати відразу на першому етапі. Це залежить від видимого вмісту під час завантаження. Ці зображення завантажуються як завжди.
- Завантаження та рендеринг додаткових медіафайлів відкладається доти, доки відвідувач сайту не прокрутить сторінку вниз і додатковий контент не відобразиться на екрані.
Зрештою, зображення та відео не завантажуються до тих пір, поки вони не будуть дійсно потрібні. Це підвищить показники швидкості роботи сайту, що містить велику кількість зображень з високою роздільною здатністю та вбудованих відео.
Відкладене завантаження потенційно вплине на швидкість завантаження вашого сайту, якщо ви використовуєте багато зображень.
Використання відкладеного завантаження в Wordpress
Як і в багатьох інших сайтів, WordPress можуть виникати проблеми з рабою сайту, але існують плагіни, щоб це виправити. Насправді є багато безкоштовних плагінів для відкладеного завантаження зображень та відео.
Переглянувши та протестувавши десятки плагінів, ми знайшли три найкращі. Вони суттєво покращують роботу сайту. Якщо ви готові використовувати відкладене завантаження, зверніть на них увагу.
Чи справді зображення та відео уповільнюють веб-сайти?
Нам потрібна стартова оцінка, щоб ми бачили вплив додавання картинок та відео на швидкість завантаження сайту. Немає сенсу вирішувати проблему, якщо ми не знаємо, в чому її суть.
Для нашого тесту ми встановили стандартну версію WordPress із темою Двадцять шістнадцять – це рідна тема, де не використовуються жодні способи кешування чи плагіни оптимізації.
Ось так Pingdom оцінює швидкість нашого сайту перед додаванням зображень чи відео.
Як ви бачите, сторінка дуже легка, важить менше ніж 155 kb і завантажується менш ніж за півсекунди. Важко причепитися до таких оцінок.
Що станеться, якщо ми завантажимо на сторінку великий файл із зображеннями або вбудовані відео з YouTube?
Розмір сторінки збільшився до 1,7 MB, а час завантаження майже втричі до 1,3 секунди. TwentySixteen – це добре написана, легка тема, тому навіть із півдюжиною зображень та відео з YouTube сайт залишився легким та завантажується досить швидко. Однак, ми бачимо, що додані зображення та відео помітно збільшили розмір та швидкість завантаження сторінки.
WordPress плагіни для відкладеного завантаження
Ось три плагіни, які прискорюють завантаження веб-сторінки: BJ Лінивий навантаження, Lazy Load XT и a3 Ледача навантаження. Погляньмо на роботу кожного з них.
Ми тестували інші плагіни, але вони не дали значних результатів. Проводьте виміри до та після встановлення відкладеного завантаження, щоб знайти плагін, що задовольняє ваші вимоги.
1. BJ Лінивий навантаження
BJ Lazy Load - це дуже популярний плагін. Його використовують на понад 40 000 веб-сайтах WordPress та оцінюють на 4,1 із 5 зірок.
Встановлення та налаштування дуже легкі. Після активації в меню з'явиться новий пункт Установки → BJ Lazy Load. Всі параметри відкладеного завантаження встановлені за замовчуванням, і ви швидше за все не змінюватимете їх, якщо не зіткнетеся з якимись проблемами у фронтенді вашого сайту після активації плагіна.
У цьому плагіні є одна функція, яка недоступна для двох інших, це можливість додавати URL для зображень і використовувати їх як папку для відкладеного завантаження зображень і відео до тих пір, поки справжні зображення та відео не завантажаться. Звичайно, якщо ви будете використовувати цю функцію, ви використовуватимете маленькі файли, а не зображення у високій роздільній здатності.
Для кращого результату ми рекомендували б створити зображення того ж кольору, як і фон, і зберегти його у форматі png.
Ви також можете вказати клас HTML, який буде виключений з відкладеного завантаження. Ви можете застосувати це для будь-якого зображення чи відео. І нарешті, ви можете встановити, як близько має виявитися зображення або відео до вікна перегляду для початку завантаження та відображення.
Давайте перевіримо швидкість завантаження нашої сторінки зі встановленим BJ Lazy Load.
Це навіть дуже швидко. Ми тестували сайт дюжину раз протягом усього дня, але час завантаження завжди було близько 300-400 мс.
Цей блискучий результат – не аномалія.
Хоча сторінка завантажується дуже швидко, її розмір збільшився. Як це відбулося? Теоретично з відкладеним завантаженням розмір сторінки повинен зменшитися, оскільки не всі зображення завантажуються на початкову сторінку.
Після деяких досліджень ми дещо з'ясували.
Як WordPress завантажує зображення?
За промовчанням WordPress надає файли в декількох розмірах браузеру, використовуючи атрибут srcset елемента img для розміщення зображення. Браузер переглядає список доступних розмірів та завантажує найменшу версію зображення, яке заповнить вільний простір.
Це означає, що якщо ви завантажите дуже велике зображення, WordPress автоматично запропонувати меншим відвідувачам веб-сайту версії. Браузер ваших відвідувачів вибере найменше відповідне зображення, залежно від доступної кількості пікселів.
Як BJ Lazy Load змінює режим роботи WordPress?
BJ Lazy Load бере гору над режимом роботи WordPress. Атрибут srcset замінюється на атрибут adata-lazy-srcset, який працює у поєднанні зі сценарієм плагіна. Однак, замість того, щоб завантажувати зменшену версію зображення, завантажується і відображається зображення у високій роздільній здатності.
Це не ідеально, але якщо ви оптимізуєте файли перед завантаженням на WordPress, ви не матимете проблеми з цією проблемою.
Проведіть тест – просто завантажте сайт та подивіться, що станеться. Якщо у вас колір фону не білий, потрібно буде додати зображення-заповнювач місця. Тому що без нього, на місці зображення буде білий gif заповнювач місця.
2. Lazy Load XT
Last Load XT добре проявив себе під час наших тестів і вартий вашої уваги. Він менш популярний, ніж BJ Lazy Load, всього 1000 активних установок, але плагін має рейтинг 4,9 з 5. Тільки один опублікований відгук із 22 поставив оцінку нижче за 5.
Після активації плагін можна налаштувати у меню Установки → Lazy Load XT. Там ви дізнаєтеся про інші функції плагіна, крім відкладеного завантаження зображень та відео. Ви також можете використовувати цей плагін для зменшення JS і CSS файлів, завантаження JavaScript і CSS бібліотек, використовуючи Cloudflare CDN, і переміщувати скрипти в футер сайту.
Є ще кілька додаткових параметрів для фінального налаштування роботи сайту. Однак, оскільки ми тестуємо лише відкладене завантаження, ми не використовували зменшення або переміщення CSS та JavaScript, ми просто видалили кеш сервера та запустили тест нашої сторінки на Pingdom.
Вага сторінки становить 2 MB, швидкість завантаження хоч і не така висока, як у BJ Lazy Load, але вдвічі швидше ніж без використання відкладеного завантаження.
Аналіз дерева файлів показав, що у Lazy Load XT йдуть самі процеси, як і в BJ Lazy Load. Замість завантаження оптимізованої версії зображення, плагін завантажує та відображає зображення з високою роздільною здатністю.
І хоча BJ Lazy Load швидше, але Lazy Load XT перемагає під час візуального тестування. В результаті, немає порожніх білих полів під час завантаження зображень і відео. Вам не потрібно хвилюватися про створення та завантаження зображень-заповнювачів місця.
3. a3 Ледача навантаження
a3 Lazy Load — ще один популярний вибір у директорії плагінів WordPress, він використовується на понад 10 000 веб-сайтів та отримав оцінку 4,7 із 5 зірок.
Під час активації плагіна в меню з'являється вкладка Установки → a3 Lazy Load. Для нашого експерименту ми не змінювали стандартні налаштування, окрім одного пункту. Ми використовували параметр Loading Background Color, щоб зробити заповнювачі місця такими ж кольорами, як і фон веб-сторінки. З базовими налаштуваннями та однією зміною плагін показав себе дуже добре.
Ми прискорили завантаження до 488 мс, що вражає з кількістю зображень і відео, які ми додали на сторінку.
Порівняння результатів
Ви, напевно, помітите зменшення розміру сторінки та кількості запитів. Що спричинило ці зміни? Pingdom надає знімки стану розміру контенту, а порівнявши їх ми отримаємо відповідь.
По-перше, ось розмір контенту з активованим a3 Lazy Load:
Вага зображення зовсім невелика – всього близько 150 kb. І BJ Lazy Load і Lazy Load XT створюють сторінку вагою 2,0 MB. Ось скріншот контенту із загальною вагою 2,0 MB:
Скрипти, HTML, CSS та вага решти контенту приблизно рівні. А вага зображень складає 1,86 МБ. Розмір усієї сторінки без зображень не перевищує 150 kb.
Так що відбувається?
Як ми згадували раніше, WordPress автоматично пропонує варіанти розміру зображень, а браузер вибирає та відображає найменший можливий варіант, залежно від розміру екрана, на який виводитиметься зображення.
BJ Lazy Load та Lazy Load XT скасовують цю функцію і доставляють зображення у високій роздільній здатності. Однак, a3 Lazy Load зберігає стандартну функцію WordPress без змін, і в результаті відправляються значно менші за розміром зображення.
Цікаво, що незважаючи на різницю у вазі сторінки, сайт завантажується швидше з активованим BJ Lazy Load, ніж A3 Lazy Load. Ми протестували сайт багато разів, щоб переконатися у правильності результатів. Різниця полягає в числі запитів HTTP, необхідних для завантаження сторінки.
На перший погляд може здатись, що BJ Lazy Load потрібно більше запитів. Але якщо ми поглянемо на дерево файлів, то побачимо дійсний стан речей:
З активованим BJ Lazy Load файл сайту включає близько 20 запитів, які починаються на data:image/gif. Це швидше data URIs, ніж запити HTTP. По суті, вони говорять браузеру створити gif локально, а не вимагати gif з сервера.
В результаті BJ Lazy Load потрібно лише 17 HTTP запитів для створення сторінки, а a3 Lazy Load потрібно 27. Це пояснює швидкість завантаження сторінки.
Lazy Load XT використовує схожу тактику, але йому потрібно на кілька запитів більше, ніж BJ Lazy Load, що пояснює не такі високі результати.
Підсумки та рекомендації
Що нам лишається? Всі три варіанти роблять відмінну роботу щодо підвищення швидкості завантаження сайту за допомогою відкладеного завантаження зображень та відео. Вибір плагіна залежить від особистих уподобань та того, як ви готуєте зображення до завантаження на веб-сайт WordPress.
- Якщо ви попередньо не оптимізуєте зображення перед завантаженням на веб-сайт WordPress, то вам підійде a3 Ледача навантаження, де ви зможете оцінити вбудований оптимізатор зображень.
- Якщо ви оптимізуєте зображення перед завантаженням і хочете максимально високої швидкості завантаження з найменшими зусиллями, вибирайте BJ Лінивий навантаження.
- Якщо ви оптимізуєте зображення перед завантаженням та хочете мати додаткові параметри конфігурації, то вашим ідеальним вибором буде Lazy Load XT.
Відкладене завантаження – це один із способів оптимізації вашого сайту WordPress. І потенційно може впливати на швидкість завантаження сайту, навіть якщо ви завантажили дуже багато зображень та відео.
Джерело: kinsta.com
Коментарі до запису: 12
Підкажіть, чи є сенс ставити плагін BJ Lazy Load, якщо сайт кешується плагіном Wp Super Cache? Або відкладене завантаження зображень є доцільним, якщо на сайті не використовується кешування?
Ці плагіни повинні бути сумісні, тому сенс є. Картинки просто підвантажуватимуться в міру прокручування сторінки не безпосередньо з файлів сайту, а з кешу. Проблема може виникнути, якщо у вас налаштований сервер-кеш, наприклад Memcached на nginx
Доброго дня, дякую вам за цікаву та пізнавальну статтю.
У мене ось яке питання, чи є плагін, який повністю сторінку буде підвантажувати по мережах завантаження? Тобто та ж лінива завантаження, але тільки не тільки для зображень, а для всього контенту?
Заздалегідь дякую
[decom_attached_image_1472456084121]
гарна стаття
Прикольний сайт
Дякую, ось цей BJ Lazy Load дуже гарний.
Доброго дня, дякую вам за цікаву та пізнавальну статтю.
У мене ось яке питання, чи є плагін, який повністю сторінку буде підвантажувати по мережах завантаження? Тобто та ж лінива завантаження, але тільки не тільки для зображень, а для всього контенту?
Заздалегідь дякую
На моєму блозі найкращий результат показав "a3 Lazy Load плагін". Думаю, його залишу. В цілому, подобається ваш блог. Є що підкреслити собі.
Дякую. Поки що зупинився на a3 Lazy Load. Приємні враження поки що. Відео з youtube та Adsense теж «ліниво» підвантажує.
Як цікаво і докладно ви всі розписали) відрізняючи статтю!
Взагалі лінива завантаження штука цікава. Мене тільки бентежить одне питання. Якщо у відвідувача з мобільного дуже несправжній інтернет
Поставив плагін a3 Lazy Load для відкладеного завантаження картинок та відео.
У pingdom сторінка 8мб вантажилася за 6-8с, а стала за 2с і вага завантажується 950кб.
Тепер картинки та відео підвантажуються у міру перегортання контенту.
Дякую.