Sa JavaScript ng median na mobile page sa 2024 Web Almanac, 168 kilobyte ang first-party at 375 kilobyte ang third-party.1 Mahigit kalahati ng script sa isang ordinaryong pahina, ayon sa bigat, ay isinulat ng iba bukod sa may-ari ng site. Natagpuan ng kabanata ng Almanac tungkol sa mga third party ang mga ito sa 92 porsiyento ng mga pahina, na script ang pinakakaraniwang uri ng third-party na request.2 Ang script ng ad network, ang idinadagdag ng publisher para dalhin ang mga ad nito, ay isa sa mga request na iyon. Ang gastos ng script na iyon sa pahina sa oras ng pag-load ay hindi gaanong nakadepende sa ginagawa nito kundi sa kung paano isinulat ang element na naglo-load dito.
Humihinto ang browser para sa script element na walang attribute
Sa ilalim ng HTML Living Standard, may tatlong paraan ang browser para hawakan ang isang external na script, at nagkakaiba lang ang mga ito sa isang attribute sa element.3 Ang una, na walang alinmang attribute, ang default: ang script ay "kinukuha at sinusuri kaagad, hinaharangan ang parsing hanggang matapos ang dalawang ito." Ang ikalawa, ang defer, ay kinukuha ang file nang kasabay ng parsing at sinusuri ito "kapag tapos na ang parsing ng pahina." Sa ilalim ng ikatlo, ang async, kinukuha rin nang kasabay ang file pero sinusuri "sa sandaling available ito (posibleng bago matapos ang parsing)." Ang unang paraan lang ang pumipigil sa parser habang tumatawid ang file sa network, at walang anumang kasunod ng element ang naiguguhit hangga't hindi dumarating ang file.
Ginagawa ng Lighthouse audit ng Google ang pagkakaibang ito bilang pagsubok na mapapatakbo ng publisher sa sarili niyang pahina. Minamarkahan nito ang script element sa head ng dokumento na walang defer o async.4 Ang ulat ay "naglilista ng lahat ng URL na humaharang sa first paint ng pahina mo." Hindi bahagi ng depinisyong iyon ang laki, at hindi rin ang layunin. Pare-pareho ang turing sa analytics script, ad script, at font loader kung nasa head ang mga ito nang walang attribute.
Ang third-party script ang kasong pinag-ukulan ng gabay sa pag-load
Diretso ang gabay sa web.dev tungkol sa mga script mula sa labas ng site. Ang mga synchronous na script, sabi nito, ay "nagpapaantala sa pagbuo ng DOM at sa pag-render," at ang DOM ang gumaganang modelo ng browser ng dokumento.5 Ang patakarang kasunod nito ay "laging i-load nang asynchronous ang mga third-party script maliban kung kailangang tumakbo ang script bago ma-render ang pahina." Angkop ang async sa script na kailangang tumakbo nang maaga sa proseso ng pag-load; angkop ang defer sa "mga hindi gaanong kritikal na resource," at ang halimbawa nito ay video player sa ibaba ng fold. Ayon sa pagsubok na iyon, ang ad script na gumagana pagkatapos lumabas ang teksto sa screen ay nasa ilalim ng hindi gaanong kritikal.
Lumaganap ang gawi, pero hindi sa bawat pahina. Natagpuan ng 2024 Web Almanac ang async sa 87 porsiyento ng mga pahina, mula 76 porsiyento noong 2022, at ang defer sa 47 porsiyento, mula 42 porsiyento.1 Inilalarawan ng mga numerong iyon ang mga pahina sa kabuuan. Ang pahinang deferred ang sarili nitong mga script ay puwede pa ring may isang humaharang na element na ibinigay ng third party. Ang install snippet, maliban kung i-edit ito ng publisher, ay naglo-load ayon sa pagkakasulat ng network.
Walang first paint na mahaharangan ang script na naghihintay sa DOM
Minamarkahan ng browser ng isang event ang sandaling natapos ng parser ang pagbuo ng DOM. Ayon sa MDN, ang DOMContentLoaded ay "nagfa-fire kapag ganap nang na-parse ang HTML document, at ang lahat ng deferred na script" ay na-download at naipatakbo na.6 Hindi naghihintay ang event sa mga larawan, subframe, o async na script. Kaya ang script na nagsisimula ng trabaho nito sa sandaling iyon ay nagsisimula pagkatapos umiral ang teksto, nang hindi hinihintay ang huling larawan.
Ang AdBubbles embed, adbubbles.js, ay naglo-load pagkatapos maging handa ang DOM ng pahina. Iisang static file ito, inihahatid sa pamamagitan ng cache ng Cloudflare at isinulat sa simpleng JavaScript na walang dependency. Ang datos kada site na binabasa nito ay static file din, na muling binubuo kapag may nagbagong campaign at naka-cache sa edge. Kaya walang gastos sa ad server ang isang page view, at ang tanging dynamic na request ay ang maliit na beacon. Sina-scan lang ng embed ang scope na kinonfigure ng publisher, at nilalaktawan ang mga heading, link, code, preformatted text, form control, navigation, header, footer, at anumang may markang data-noads. Inilalarawan ng mga tala sa pag-install ang setting ng scope.
Walang bayad ang pagbubukas ng publisher account, at ganoon din ang pagdagdag ng embed sa site. Ang publisher na nagdagdag ng site ay puwedeng humiling ng crawl na nagpapakita kung alin sa mga salita nito ang kasalukuyang naibebenta. Pinipili mula sa parehong account ang scope, ang maximum na bubble kada pahina, at ang mga hindi isinasamang kategorya ng advertiser.
Ang beacon na ipinapadala kapag umaalis ang mambabasa ang kabilang kalahati ng gastos
Ang sandali ng pag-alis ng mambabasa ang isa pang pagkakataon ng script na pabagalin siya. Ang analytics code na nag-uulat sa unload ay dating umaasa sa mga teknik gaya ng "isang humaharang na synchronous XMLHttpRequest call."7 Itinatala ng MDN na ang lahat ng paraang iyon ay "humaharang sa pag-unload ng dokumento, na nagpapabagal sa pag-navigate sa susunod na pahina." Pinapalitan ng sendBeacon method ang mga ito. Nagpapadala ito ng maliit na HTTP POST request nang asynchronous. Ipinapadala ng browser ang datos "kapag may pagkakataon ang user agent na gawin ito, nang hindi pinapaantala ang unload o ang susunod na pag-navigate."
Nag-uulat ang embed gamit ang sendBeacon, at tatlong uri ng beacon ang ipinapadala nito. Isang view ang ipinapadala kada pag-load ng pahina. Isang open ang ipinapadala kapag nakikita na ang bubble nang isang segundo, at isang click ang ipinapadala kapag sinundan ng mambabasa ang link sa loob ng bubble. Wala nang ibang lumalabas sa pahina.
Hindi naglalagay ng cookie ang AdBubbles, hindi nag-iimbak ng identifier, at hindi nangongolekta ng personal na datos mula sa mga mambabasa. Binabasa ang bansa ng mambabasa mula sa request header ng Cloudflare sa halip na mula sa naka-imbak na IP address. Ang pagtutugma ng mga salita sa mga pahina ng publisher sa advertiser na bumili ng mga ito ang kabuuan ng ginagawa ng AdBubbles. Walang kapangyarihan ang AdBubbles sa kung sinong tao ang makakakita ng bubble, hindi kailanman sinusundan ang mambabasa mula sa isang pahina o site papunta sa susunod, at walang ipinapangakong resulta. Buong nalathala ang posisyon sa privacy.
Binibilang na ngayon ng mga browser ang gastos ng isang ad at kumikilos batay sa kabuuan
Ipinapakita ng Heavy Ad Intervention ng Chrome kung ano ang itinuturing na sobra ng isang vendor ng browser. Itinuturing na heavy ang ad "kung hindi pa ito nakikipag-interaksyon ang user (halimbawa, hindi pa ito tina-tap o kini-click)."8 Bukod doon, sapat na ang alinman sa tatlong threshold. Ang una ay higit sa 4 na megabyte ng network bandwidth. Ang ikalawa ay higit sa 15 segundo ng main-thread time sa anumang 30-segundong window, at ang ikatlo ay higit sa 60 segundo sa kabuuan.
Kapag nag-fire ang intervention, ang nilalaman ng ad frame ay "pinapalitan ng mensaheng Ad removed," at kumikilos ang mekanismo sa mga iframe na may tag na ad.8 Ang sukat ay mga byte at main-thread time; walang papel ang nilalaman ng ad. Nire-render ang bubble sa loob ng Shadow DOM sa loob mismo ng dokumento ng publisher sa halip na sa iframe, kaya ibang uri ng ad ang pinupuntirya ng mekanismong ito. Ang idinadagdag ng embed sa isang partikular na pahina, sa mga byte at sa main-thread time, ay maipapakita ng sariling mga sukat ng pahinang iyon.
Walang kailangan bukod sa browser para sa pagsusuring magagawa ng publisher sa sarili niyang pahina. Inililista ng page source ang bawat script element sa head, at bawat isa ay may async o defer o wala ni isa. Inililista ng seksyong Opportunities ng Lighthouse ang mga wala ni isa bilang mga URL na humaharang sa first paint.4 Ang snippet ng network na nasa listahang iyon ay humaharang sa pahina ayon sa depinisyon ng standard, anuman ang sinasabi ng dokumentasyon ng network tungkol sa bigat nito. Kung mapapasama ba ang ad script sa listahang iyon ay pinagpapasyahan ng attribute sa element nito, at isinusulat ang attribute sa snippet bago pa ito i-paste ng sinumang publisher.