Як аптымізаваць загрузку малюнкаў на ваш сайт

Вэб-сайт, поўны малюнкаў, можа стаць вялізным вузкім месцам для працы веб-сайта. Такім чынам я аптымізаваў загрузку малюнкаў для лепшага карыстацкага досведу.

Мець вэб-сайт, поўны прыгожых малюнкаў, выдатна і можа стаць важным вузкім месцам для загрузкі старонкі. Я часта бачу вэб-сайты, якія загружаюць выявы на некалькі мегабайт, каб мець слайдэр на галоўнай старонцы. Уявіце, што ў вас павольная сотавая сувязь 3G, і вы загружаеце гэты сайт. Для загрузкі спатрэбяцца стагоддзі і прымусіць карыстальнікаў пакінуць ваш сайт. Вы можаце праверыць гэта на сваім бягучым вэб-сайце, выбраўшы сеткавае абмежаванне ў Chrome Devtools.

праблема

Праблема тут у тым, што часта, пакуль выявы яшчэ загружаюцца, дакумент сайта ўжо загружаецца. Гэта прыводзіць да пустых раздзелаў на вашай старонцы, дзе малюнак загружаецца павольна. Не тое, што вы хочаце.

У прыведзеным ніжэй прыкладзе я стварыў просты вэб-сайт з фонавым малюнкам 4,8 МБ. Як бачыце, DOM загружаецца за 1,14 секунды. У асноўным карыстальнік бачыць змест праз 1,14 секунды. Даволі добра для сеткі 3G. Аднак загрузка фонавага малюнка займае 27,32 секунды, калі карыстальнік бачыць часткі загружаных малюнкаў. На гэты момант карыстальнік, магчыма, ужо пакінуў ваш сайт.

Просты, дрэнна аптымізаваны вэб-сайт з фонавым малюнкам 4,8 МБ па хуткай сотавай сетцы 3G

Здаецца, гэта не адзіная прычына, па якой ваш карыстацкі досвед падае. У 2010 годзе Google заявіў, што хуткасць старонкі з'яўляецца адным з фактараў алгарытму ранжыравання. Я мяркую, што з гадамі гэта становіцца ўсё больш важным фактарам. Здаецца, Google укладвае шмат сродкаў у навучанне распрацоўшчыкаў пра прадукцыйнасць старонак на іх канферэнцыях.

раствор

Як нам пераадолець гэтую праблему? Ну, першае, што мы можам зрабіць, - гэта сціснуць шпалеры з дапамогай розных інструментаў у Інтэрнэце. Гэта лёгкі выйгрыш і скарачае час загрузкі прыблізна да дзесяці секунд. Гэта здаецца вялікім крокам, але дзесяць секунд усё роўна занадта шмат.

Наступным крокам было б загрузіць тое, што называецца "запаўняльнік", перад тым, як фактычна загрузіць зыходны малюнак. Гэта запаўняльнік з'яўляецца версіяй зыходнага малюнка з нізкім дазволам. Пры стварэнні гэтага малюнка мы паменшылі дазвол малюнка з 7372 х 4392 пікселяў да 20 х 11 пікселяў. У выніку атрымліваецца выява памерам ад 4,8 МБ да 900 байт.

Гэта памяншэнне памеру прыводзіць да часу загрузкі 550 мілісекунд замест 10 секунд. Зараз у нас ёсць размытае малюнак з нізкім дазволам у якасці фону. Гэта ідэальна падыходзіць для першых некалькіх секунд загрузкі старонкі, але мы хочам даць карыстальніку цудоўны досвед нашых арыгінальных шпалер.

Для гэтага мы хочам спачатку загрузіць малюнак з нізкім дазволам, а потым асінхронна загрузіць малюнак з высокім дазволам у фонавым рэжыме. Пасля загрузкі малюнка з высокім дазволам мы хочам замяніць малюнак з нізкім дазволам на малюнак з высокім дазволам.

Каб дасягнуць гэтага, я выкарыстаў наступны javascript, які загрузіў да канцавога тэга. Такім чынам, наш сцэнар не блакуе змест нашай старонкі.

(() => {'выкарыстоўваць строга'; // старонка загружаецца const objects = document.getElementsByClassName ('asyncImage');
Array.from (objects) .map ((item) => {// Загрузіце малюнак const img = new image (); img.src = item.dataset.src; // Калі малюнак загружаны, заменіце зыходны код элемента HTML img.onload = () => {item.classList.remove ('asyncImage'); return item.nodeName === 'IMG'? item.src = item.dataset.src: item.style.backgroundImage = ʻUrl ($ {item.dataset.src}) `;};}); }) ();

Функцыя Javascript шукае ў DOM кожны клас "asyncImage". Пасля ўсе выявы, указаныя ў атрыбуце data-src, загружаюцца ў гэтыя элементы. Як толькі выява загружаецца, альбо крыніца тэга выявы, альбо фонавы малюнак элемента, які не з'яўляецца IMG, замяняецца.

...

альбо

Цудоўны пейзаж усход сонца

Паколькі сцэнар выдаляе клас элемента пасля змены выявы, мы можам зрабіць некалькі выдатных пераходаў CSS, калі хочам. Напрыклад, простае растварэнне, якое прывядзе да растварэння, як толькі малюнак будзе заменены.

Выснова

Дык што мы зрабілі? Мы палепшылі карыстацкі досвед, паскорылі загрузку нашага сайта, палепшылі доступ для карыстальнікаў без хуткай сувязі і, магчыма, палепшылі рэйтынг у Google. Гэта вялікае паляпшэнне такіх невялікіх змен.

Новая сітуацыя, калі мы спачатку загружаем малюнак з нізкім дазволам, а потым замяняем яго на зыходны малюнак

Як бачыце, мы загружаем выяву запаўняльніка за 570 мс. Пасля загрузкі карыстальнік убачыць размытую версію зыходнага малюнка з нізкім дазволам. Пасля загрузкі зыходнага малюнка малюнак з нізкім дазволам будзе заменены.

У нас больш не ўзнікаюць дзіўныя праблемы з рэндэрынгам малюнкаў, і мы хутка даем карыстальніку грунтоўку.

Глядзіце працоўны прыклад тут

Лянівая загрузка малюнкаў

Калі вы хочаце яшчэ больш палепшыць загрузку малюнкаў, падумайце аб затрымцы загрузкі малюнкаў.

Лянівая загрузка - гэта метад, пры якім выявы, якія не адлюстроўваюцца непасрэдна ў праглядзе карыстальніка, не загружаюцца. Як толькі малюнак наблізіцца да краю прагляда, ён будзе загружаны.

Гэта мае перавагу ў тым, што пры першай загрузцы старонкі трэба загружаць менш байтаў. Часта не ўсе выявы павінны быць адлюстраваны ў праглядзе карыстальніка. Пасля таго, як карыстальнік пачынае пракручваць, нам трэба загружаць усё больш і больш кантэнту. Добры падыход да ажыццяўлення такіх паводзін - паглядзець на назіральніка за перасячэннем.

Спадзяюся, вам спадабалася чытаць гэты артыкул і вам спадабаецца рабіць гэта самастойна :). Некалькі плясканняў шмат што азначала б.