5️ метады лянівым-Load ўтрыманне вэб-сайта для лепшага 📈 SEO і вопыт карыстальніка

Гультаяватыя нагрузкі Сцэнарыі Зместу
сродкі масавай інфармацыі
код
копія
Апрацоўка Гультай загружаных малюнкаў
Што такое IntersectionObserver?
Разбіўка / Continuous Scroll
Выкарыстанне History API
Загрузка сцэнарыяў Па меры неабходнасці
падводзячы вынікі

Гультаяватыя актывы Загрузка вэб-сайта для лепшага карыстацкага досведу

Наша команда-партнер Artmisto

Хуткасць сайта з'яўляецца адным з найважнейшых аспектаў на старонцы SEO кожны можа кантраляваць. Ваша мэта складаецца ў тым, каб быць інтэрактыўнымі менш чым за 3 секунды, нават на асноўны тэлефон праз злучэнне 3G.

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

Але што, калі я сказаў вам, што ёсць спосаб, каб разгрузіць або нават пазбегнуць загрузкі старонкі актываў, пакуль яны не патрэбныя?

Гэта можа даць ваш сайт відавочнае перавага над канкурэнтамі, таму што не толькі будзе Google, як вашыя старонкі лепш так будзе вашы наведвальнікі!

Добрая навіна заключаецца ў тым, што трэба трохі JavaScript і наўмыснае намаганне, каб абнавіць сайт.

і Пошук каманды Google, усё для гэтага метаду , Называецца «лянівая загрузка».

кароткае кіраўніцтва Google згадвае тры асноўных моманты:

загружаць Змесціва
Як падтрымаць Бясконцыя пракруткі і разбіццё на старонкі
Як праверыць вашу рэалізацыю

Хітрасць не хавае змесціва, трэба праіндэксаваныя ад Google. Такім чынам, яны апублікавалі гэтую інфармацыю карыснай, але тонкі правадыр.

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

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

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

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

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

Гультаяватыя нагрузкі Сцэнарыі Зместу

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

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

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

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

Змест можа ставіцца да СМІ, кода або копію (тэкст і разметку).

сродкі масавай інфармацыі

Выявы і відэа вялікія файлы. Адтэрміноўка сваёй нагрузкі аказвае непасрэднае станоўчы ўплыў на час загрузкі старонкі.

код

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

копія

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

Для гэтага я пакажу вам, як выкарыстоўваць IntersectionObserver для загрузкі актываў як малюнкі і відэа, як яны пракруткі ў поле зроку. Але перш чым зрабіць гэта, мы павінны наладзіць разметку, каб зрабіць малюнкі і відэа Зменныя.

Складаныя вэб-прыкладанні могуць быць трохі больш тонкімі, паколькі яны абапіраюцца на больш логіку прыкладання. Гэта азначае, што яны патрабуюць больш файлаў JavaScript. Калі гэтыя файлы загружаюцца пытанні. У той час як вы можаце выкарыстоўваць IntersectionObserver для гэтага, ваша прыкладанне мае патрэбу ў добрай тэхнікай для дынамічнай загрузкі скрыптоў, як гэта неабходна. Пазней у гэтым артыкуле я дам вам толькі што!

Апрацоўка Гультай загружаных малюнкаў

У той час як Google і Bing можа выканаць JavaScript вашай старонкі, яны не робяць гэта прыярытэтам. Яны таксама не спрабаваць пракруціць старонку, каб выклікаць такія рэчы, як IntersectionObserver.

Гэта азначае, што ваша гультаяватае загружанае змесціва, магчыма, таксама не існуе.

Спачатку вы не можаце лічыць гэта вялікая справа, але малюнак SEO можа быць ключавым фактарам, каб дапамагчы вам больш высокі рэйтынг для пошуку. Акрамя таго, пошук малюнка можа быць схаваным крыніцай дадатковага арганічнага трафіку.

Сакрэт, каб зрабіць ваш кантэнт даступным павук з'яўляецца «схаваць» гэта за NoScript тэг.

Я ведаю, што ёсць шмат кода ў гэтым прыкладзе, але я пайду за «Data-» атрыбуты ў наступным раздзеле.

Тое, што я хачу засяродзіцца на цяпер з'яўляецца NoScript элементам. Унутры гэтага элемента з'яўляецца традыцыйнай IMG элемент са значэннем, усталяваным у Src вялікага памеру малюнка.

Цяпер пошукавыя павукі будуць загружаць выявы і індэкс яго для вас.

NoScript тэг семантычны механізм сказаць браўзэру толькі выводзіць змесціва ўнутры элемента, калі браўзэр (карыстацкі агент) не падтрымлівае JavaScript. Большасць наведвальнікаў будуць JavaScript уключаны, так што яны не будуць выклікаць малюнак для загрузкі на пачатковым этапе. Але, як вы хутка ўбачыце, што будзе, калі ня-NoScript малюнак відаць.

Зараз давайце паглыбімся ў тым, як выкарыстоўваць IntersectionObserver.

Што такое IntersectionObserver?

Адносна новы браўзэр API, IntersectionObserver падтрымліваецца ўсімі сучаснымі браўзэрамі і існуе стабільны polyfil вы можаце дынамічна загружаць для тых, якія гэтага не робяць.

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

Гэта просты API, але ёсць некалькі частак, якія трэба зразумець.

Па-першае, як стварыць IntersectionObserver:

вар конфіг = {// Калі выява трапляе ў 50px па восі Y, пачніце загрузку. rootMargin: '50px 0px', парог: 0,1}; imgObserver = новы IntersectionObserver (ShowImage, канфігурацыі); imgObserver.observe (yourImage);

IntersectionObserver Нагрузкі Змест як уводзіць Viewport

Вы можаце стварыць новы аб'ект IntersectionObserver, перадаючы метад зваротнага выкліку і аб'ект канфігурацыі. Зачыні зваротнага выкліку пазней.

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

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

Зваротнага выкліку будзе спрацоўваць ў межах 100 мс, таму што парог усталяваны на 0,1 секунды.

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

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

Метад зваротнага выкліку логіка, якая спрацоўвае, калі глядзеў элемент трапляе ў поле зроку.

Метад зваротнага выкліку прымае два параметру, мэты, якія выклікалі зваротны выклік (тэарэтычна больш, чым можна сустрэць свае парогі ў той жа час) і спасылку на фактычны назіральнік.

Функцыя ShowImage (запісы, назіральнік) {для (вар я = 0; я <entries.length; я ++) {вар Io = запісу [I]; калі (io.isIntersecting && io.intersectionRatio> 0) {вар выявы = io.target, SRC = image.getAttribute ( "дадзеных SRC"), srcSet = image.getAttribute ( "дадзеных srcset"); калі (srcSet) {image.setAttribute ( "srcset", srcSet); } Калі (SRC) {image.setAttribute ( "SRC", SRC); } // Спыніце глядзець і загружаць observer.unobserve малюнка (io.target); }}}

Запісы аналагічныя вашага тыповага аб'екта на аснове падзей апрацоўшчык падзеі. Для таго, каб атрымаць доступ да фактычнай DOM элемент вы спасылаецеся мэтавае значэнне дадзенай запісу. Аб'ект таксама мае ўласцівасці isIntersecting і intersectionRatio вы можаце выкарыстоўваць, каб вызначыць, калі вы хочаце, каб ўплываць на элемент ці не.

У гэтым прыкладзе я фліп "у DATA- атрыбуты іх адпаведны атрыбут ладу, які выклікае малюнак для візуалізацыі. Таму што я заўсёды выкарыстоўваю рэагуюць малюнка мне трэба пераварочваць дадзеныя-srcset, дадзеныя-Src і атрыбуты дадзеных, памерамі.

Да гэтага часу я выкарыстаў гэтую тэхніку з выявамі, відэа і карты на розных сайтах.

Калі вам цікава, я раблю гэта з усімі маімі малюнкамі, нават тыя, аказаныя «вышэй згіну». Хоць ёсць невялікая затрымка ў малюнках рэндэрынгу не аказвае вялікі ўплыў на маю UX. Асноўны змест нагрузкі супер-хутка, асабліва на мабільных прыладах.

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

Гаворачы аб прагортцы ў поле зроку, бесперапынная функцыянальнасць пракруткі таксама можа быць аблегчана з дапамогай IntersectionObserver.

Разбіўка / Continuous Scroll

Разбіўка і бесперапынная пракрутка

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

Па-першае, бесперапынны прагорткі.

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

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

Іншы сцэнар, спіс індэксаў, як на спосаб устаноўкі я паказальнага блог старонак. Кожная старонка адлюстроўвае 20 ці каля картак або запісы ў блогу. На ніжнім тарцы знаходзіцца стандартны раздзел «пагинация» са спасылкамі на папярэднія і наступныя старонкі па нумары.

У сцэнары бесперапыннай пракруткі Google не будзе выклікаць наступны артыкул. Так што проста ведаць пра гэта.

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

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

Выкарыстанне History API

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

У апошні час я разглядаў яго зноў, як Google рэкамендаваў яго ў шэрагу нядаўняй інструктыўна артыкула. І я павінен прызнаць, гэта другі раз ён адчувае сябе «лепш» і карысна.

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

Я згадваў аб выкарыстанні яго ў раздзеле бесперапыннай пракруткі, паколькі Google рэкамендуе выкарыстоўваць яго ў гэтым выпадку. Але калі вы едзеце адзінарны вопыт старонкі прыкладання вы таксама павінны выкарыстоўваць гэты API.

=> Уставіць адрасную радок графічны

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

вар stateObj = {Foo: "бар"}; history.pushState (stateObj "старонка 2", "bar.html");

У прыкладзе кода вы можаце ўбачыць метад гісторыі PushState мае тры параметру: стан, імя і URL. Для нашых мэтаў можна перадаць нуль на першых двух параметраў URL з'яўляецца важнай каштоўнасцю.

Змена URL тут змяняе URL у адраснай радку, але, як я ўжо згадваў звычай выклікаць запыт да сервера. У выпадку бесперапыннай пракруткі вы б зрабіць выклік AJAX ў фонавым рэжыме і ўвесці атрыманы HTML у DOM, крыху ніжэй бягучай артыкула або пункта. Пасля змены URL карыстальнік будзе бачыць рэальны URL для новай артыкулы, і калі яны падзяляюць URL будзе прамой спасылкай на старонку артыкула.

Проста пераканайцеся, што URL вы перадаеце метадзе PushState рэальная спасылка на новы артыкул!

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

Што Google сапраўды штурхае вас да выкарыстоўвае рэальны URL, але JavaScript кіраваны URL. У выпадку бесперапыннай пракруткі, калі IntersectionObserver трыгераў вы можаце загрузіць новую артыкул і змяніць URL дынамічна. Цяпер карыстальнік ўбачыць URL новай артыкулы і можа перазагрузіць старонку.

Цяпер вашыя URL-адрас у сінхранізацыі і Google ўбачыць прамую спасылку, калі ён знаходзіць спасылкі і г.д.

Загрузка сцэнарыяў Па меры неабходнасці

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

Так як жа захаваць залішнюю JavaScript падарваць ваш карыстацкі досвед?

Па-першае, выкарыстоўваць толькі тое, што вам сапраўды трэба. Напрыклад, Netflix скараціць іх сярэдні час рэндэрынгу на 50% пасля ліквідацыі React ад іх пярэдняга плана і абмяжоўваецца яго баку сервера рэндэрынгу (SSR).

Але як наконт тых часоў, калі вам патрэбна бібліятэка, каб кіраваць вашым вопытам прымянення?

Загрузіце іх, калі яны неабходныя, і толькі тады, калі яны неабходныя.

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

Хто не хоча, каб гэтая КПЭ?!

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

Вось сцэнар, і ні я не стварыць яго, каманда Chrome першапачаткова падзяляе яго:

спрабуюць {вар скрыпты = [{{{скрыпты}}}], SRC, pendingScripts = [], firstScript = document.scripts [0]; // polyfil праверкі і нагрузкі тут, калі (TypeOf IntersectionObserver === "не вызначана" || IntersectionObserver.toString (). IndexOf ( "[натыўны код]") === -1) {scripts.unshift ( "JS / ЛИЭС / polyfil / скрыжаванне-observer.js "); } // глядзець скрыпты загрузкі ў функцыі IE StateChange () {// Выканаць як шмат сцэнарыяў, каб, як мы можам Var pendingScript; у той час як (pendingScripts [0] && pendingScripts [0] .readyState == 'загружаны') {pendingScript = pendingScripts.shift (); // пазбегнуць будучых падзей загрузкі з гэтага сцэнара (напрыклад, калі змены ЦСІ) pendingScript.onreadystatechange = NULL; // не можа проста AppendChild, стары IE памылка, калі элемент не з'яўляецца закрытым firstScript.parentNode.insertBefore (pendingScript, firstScript); } Console.log ( «сцэнары павінны быць загружаныя цяпер»); } // Цыкл праз наш URLs скрыпт у той час як (SRC = scripts.shift ()) {калі ( 'асінхроннай' у firstScript) {// Сучасныя браўзэры сцэнара = document.createElement ( 'сцэнар'); script.async = TRUE; script.src = SRC; document.body.appendChild (сцэнар); } Яшчэ калі (firstScript.readyState) {// IE <10 // стварыць скрыпт і дадаць яго ў наш TODO ворса скрыпт = document.createElement ( 'сцэнар'); pendingScripts.push (сцэнар); // слухаць змены стану script.onreadystatechange = StateChange; // неабходна ўсталяваць SRC пасля дадання onreadystatechange слухача // інакш мы прапусцім загружанае падзея для кэшаваных скрыптоў script.src = SRC; } Яшчэ {// падаць назад адкласці document.write ( '<сцэнар SRC = "' + SRC +" Перанесці> </ '+' скрыпт> '); }}} Засаўка (памылка) {Alert (памылка); }

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

Заўвага: скрыпт выкарыстоўвае вусы абазначэння , Такім чынам, {{{сцэнар}}} поле ў верхняй частцы сцэнара, каб увесці спасылкі залежнасцяў сцэнара дадзенай старонкі.

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

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

Я выкарыстоўваю гэтую тэхніку для загрузкі polyfils, калі і калі яны неабходныя. Але вы можаце выкарыстоўваць гэты метад для загрузкі скрыптоў у якасці дзеянняў карыстальніка дыктуе. Замест polyfil можа быць, ваша прыкладанне мае патрэбу ў бібліятэцы, але не да пэўнага крытэра задавальняецца або дзеянне карыстальніка вырабляецца.

Цяпер замест таго, зацягванне часу першага ўзаемадзеяння на 1-5 секунд (або больш) вы можаце разгрузіць, што прадукцыйнасць і UX хіт, пакуль ён не спатрэбіцца. Ці, магчыма, вы выкарыстоўваеце гэта для загрузкі скрыптоў, калі паток карыстацкага інтэрфейсу знаходзіцца ў рэжыме чакання (карыстальнік актыўна не рабіць нічога), таму ён не будзе перашкаджаць з рэальным вопытам карыстальнікаў.

падводзячы вынікі

Ёсць мноства прычын, чаму ўтрыманне адкладзенай загрузкі старонкі дапаможа вам стварыць лепшы карыстацкі досвед. Асноўная перавага з'яўляецца больш хуткім часам ўзаемадзеяння або паляпшэння хуткасці старонкі. Але правільна кіраваць адкладзенай загрузкай можа даць вам SEO і перавага UX таксама.

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

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

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

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

Але што, калі я сказаў вам, што ёсць спосаб, каб разгрузіць або нават пазбегнуць загрузкі старонкі актываў, пакуль яны не патрэбныя?
Што такое IntersectionObserver?
Так як жа захаваць залішнюю JavaScript падарваць ваш карыстацкі досвед?
Але як наконт тых часоў, калі вам патрэбна бібліятэка, каб кіраваць вашым вопытам прымянення?
Хто не хоча, каб гэтая КПЭ?

Категории

Новости