2025 m. rugsėjo 1 d.Lietuvių

Išsamus vadovas, kaip pasinaudoti Frontend Performance API, renkant ir analizuojant puslapio įkėlimo metrikas, siekiant pagerinti svetainės našumą pasaulinei auditorijai.

Frontend Performance API naršymas: puslapio įkėlimo metrikų rinkimo įvaldymas

Šiuolaikiniame skaitmeniniame pasaulyje svetainės našumas yra svarbiausias. Lėtai įsikelianti svetainė gali nuvilti vartotojus, lemti apleistus pirkinių krepšelius ir galiausiai prarastas pajamas. Jūsų frontend našumo optimizavimas yra labai svarbus siekiant užtikrinti teigiamą vartotojo patirtį, nepriklausomai nuo to, kurioje pasaulio vietoje yra jūsų vartotojai. Frontend Performance API suteikia galingus įrankius įvairiems puslapio įkėlimo našumo aspektams matuoti ir analizuoti. Šis išsamus vadovas padės jums pasinaudoti Navigation Timing API ir kitomis susijusiomis našumo sąsajomis, kad surinktumėte ir suprastumėte pagrindines puslapio įkėlimo metrikas, leidžiančias nustatyti kliūtis ir pagerinti jūsų svetainės greitį bei reakciją pasaulinei auditorijai.

Puslapio įkėlimo metrikų svarbos supratimas

Puslapio įkėlimo metrikos suteikia vertingų įžvalgų apie tai, kaip greitai jūsų svetainė įsikeliama ir tampa interaktyvi vartotojams. Šios metrikos yra labai svarbios dėl kelių priežasčių:

Vartotojo patirtis: Greičiau įsikelianti svetainė suteikia sklandesnę ir malonesnę vartotojo patirtį, o tai lemia didesnį įsitraukimą ir pasitenkinimą. Įsivaizduokite vartotoją Tokijuje, bandantį pasiekti jūsų el. prekybos svetainę; lėtas įkėlimas greičiausiai privers jį atsisakyti pirkimo.
SEO reitingas: Paieškos sistemos, tokios kaip „Google“, atsižvelgia į puslapio greitį kaip į reitingavimo faktorių. Optimizavus svetainės našumą, galima pagerinti jūsų matomumą paieškos sistemose.
Konversijų rodikliai: Tyrimai parodė tiesioginį ryšį tarp puslapio įkėlimo laiko ir konversijų rodiklių. Greičiau įsikeliantys puslapiai dažnai lemia didesnius konversijų rodiklius, ypač regionuose su lėtesniu interneto ryšiu.
Optimizavimas mobiliesiems įrenginiams: Didėjant mobiliųjų įrenginių naudojimui, optimizavimas mobiliesiems įrenginiams yra būtinas. Puslapio įkėlimo laikas gali ženkliai paveikti mobiliojo vartotojo patirtį, ypač vietovėse su ribotu pralaidumu. Pavyzdžiui, vartotojai Indijoje, besinaudojantys 3G ryšiu, labiau įvertins greitai įsikraunančią svetainę nei vartotojai su didelės spartos šviesolaidiniu ryšiu.
Pasaulinis pasiekiamumas: Našumas gali labai skirtis priklausomai nuo vartotojo geografinės padėties, tinklo sąlygų ir įrenginio galimybių. Našumo stebėjimas iš skirtingų regionų gali padėti nustatyti sritis, kuriose reikia optimizavimo.

Pristatome Frontend Performance API

Frontend Performance API yra JavaScript sąsajų rinkinys, suteikiantis prieigą prie su našumu susijusių duomenų tinklalapiuose. Ši API leidžia kūrėjams matuoti įvairius puslapio įkėlimo laiko, išteklių įkėlimo ir kitų našumo charakteristikų aspektus. Navigation Timing API, pagrindinis Frontend Performance API komponentas, suteikia išsamią laiko informaciją apie įvairius puslapio įkėlimo proceso etapus.

Pagrindiniai Performance API komponentai:

Navigation Timing API: Suteikia laiko informaciją apie skirtingus puslapio įkėlimo proceso etapus, tokius kaip DNS paieška, TCP ryšys, užklausos ir atsakymo laikai bei DOM apdorojimas.
Resource Timing API: Suteikia laiko informaciją apie atskirus puslapio įkeltus išteklius, tokius kaip paveikslėliai, scenarijai ir stilių lentelės. Tai neįkainojama norint suprasti, kurie ištekliai labiausiai prisideda prie įkėlimo laiko, ypač kai pateikiamos skirtingos paveikslėlių raiškos priklausomai nuo įrenginio ir regiono (pvz., pateikiant WebP paveikslėlius palaikomoms naršyklėms geresniam suspaudimui).
User Timing API: Leidžia kūrėjams apibrėžti pasirinktines našumo metrikas ir pažymėti konkrečius kodo taškus, kad būtų galima išmatuoti vykdymo laiką.
Paint Timing API: Suteikia metrikas, susijusias su turinio atvaizdavimu ekrane, tokias kaip First Paint (FP) ir First Contentful Paint (FCP).
Largest Contentful Paint (LCP): Nurodo didžiausio matomo paveikslėlio ar teksto bloko atvaizdavimo laiką, palyginti su tuo, kada puslapis pirmą kartą pradėjo krautis. Tai yra pagrindinė metrika „Google“ Core Web Vitals.
First Input Delay (FID): Matuoja laiką nuo tada, kai vartotojas pirmą kartą sąveikauja su puslapiu (pvz., kai spusteli nuorodą, paliečia mygtuką arba naudoja pasirinktinį, JavaScript pagrįstą valdiklį) iki to laiko, kai naršyklė iš tikrųjų gali pradėti apdoroti įvykių tvarkykles reaguodama į tą sąveiką.
Cumulative Layout Shift (CLS): Matuoja visų netikėtų maketo poslinkių, įvykusių per visą puslapio gyvavimo laikotarpį, bendrą sumą.

Puslapio įkėlimo metrikų rinkimas su Navigation Timing API

Navigation Timing API suteikia daugybę informacijos apie puslapio įkėlimo procesą. Norėdami pasiekti šiuos duomenis, galite naudoti performance.timing savybę JavaScript.

Pavyzdys: Navigation Timing duomenų rinkimas

Štai pavyzdys, kaip surinkti Navigation Timing duomenis ir juos registruoti konsolėje:


if (window.performance && window.performance.timing) {
  const timing = window.performance.timing;
  console.log('Navigation Start:', timing.navigationStart);
  console.log('Fetch Start:', timing.fetchStart);
  console.log('Domain Lookup Start:', timing.domainLookupStart);
  console.log('Domain Lookup End:', timing.domainLookupEnd);
  console.log('Connect Start:', timing.connectStart);
  console.log('Connect End:', timing.connectEnd);
  console.log('Request Start:', timing.requestStart);
  console.log('Response Start:', timing.responseStart);
  console.log('Response End:', timing.responseEnd);
  console.log('DOM Loading:', timing.domLoading);
  console.log('DOM Interactive:', timing.domInteractive);
  console.log('DOM Complete:', timing.domComplete);
  console.log('Load Event Start:', timing.loadEventStart);
  console.log('Load Event End:', timing.loadEventEnd);
}

Svarbu: performance.timing objektas yra pasenęs ir pirmenybė teikiama PerformanceNavigationTiming sąsajai. Pastarąją rekomenduojama naudoti šiuolaikinėse naršyklėse.

PerformanceNavigationTiming naudojimas


if (window.performance && window.performance.getEntriesByType) {
  const navigationEntries = performance.getEntriesByType('navigation');

  if (navigationEntries && navigationEntries.length > 0) {
    const navigationEntry = navigationEntries[0];

    console.log('Navigation Type:', navigationEntry.type); // pvz., 'navigate', 'reload', 'back_forward'
    console.log('Navigation Start:', navigationEntry.startTime);
    console.log('Fetch Start:', navigationEntry.fetchStart);
    console.log('Domain Lookup Start:', navigationEntry.domainLookupStart);
    console.log('Domain Lookup End:', navigationEntry.domainLookupEnd);
    console.log('Connect Start:', navigationEntry.connectStart);
    console.log('Connect End:', navigationEntry.connectEnd);
    console.log('Request Start:', navigationEntry.requestStart);
    console.log('Response Start:', navigationEntry.responseStart);
    console.log('Response End:', navigationEntry.responseEnd);
    console.log('DOM Interactive:', navigationEntry.domInteractive);
    console.log('DOM Complete:', navigationEntry.domComplete);
    console.log('Load Event Start:', navigationEntry.loadEventStart);
    console.log('Load Event End:', navigationEntry.loadEventEnd);
    console.log('Duration:', navigationEntry.duration);


    // Laiko iki pirmojo baito (TTFB) apskaičiavimas
    const ttfb = navigationEntry.responseStart - navigationEntry.requestStart;
    console.log('TTFB:', ttfb);

    // DOM įkėlimo laiko apskaičiavimas
    const domLoadTime = navigationEntry.domComplete - navigationEntry.domLoading;
    console.log('DOM Load Time:', domLoadTime);

    // Puslapio įkėlimo laiko apskaičiavimas
    const pageLoadTime = navigationEntry.loadEventEnd - navigationEntry.startTime;
    console.log('Page Load Time:', pageLoadTime);
  }
}

Navigation Timing metrikų supratimas

Štai keletas pagrindinių metrikų, kurias pateikia Navigation Timing API:

navigationStart: Laikas, kada pradedama naršyti į dokumentą.
fetchStart: Laikas, kada naršyklė pradeda gauti dokumentą.
domainLookupStart: Laikas, kada naršyklė pradeda dokumento domeno DNS paiešką.
domainLookupEnd: Laikas, kada naršyklė užbaigia dokumento domeno DNS paiešką.
connectStart: Laikas, kada naršyklė pradeda užmegzti ryšį su serveriu.
connectEnd: Laikas, kada naršyklė užbaigia ryšio su serveriu užmezgimą. Apsvarstykite CDN naudojimo poveikį skirtinguose regionuose; gerai sukonfigūruotas CDN gali žymiai sumažinti prisijungimo laiką vartotojams visame pasaulyje.
requestStart: Laikas, kada naršyklė pradeda siųsti užklausą serveriui.
responseStart: Laikas, kada naršyklė gauna pirmąjį baitą atsakymo iš serverio. Tai yra atskaitos taškas matuojant laiką iki pirmojo baito (TTFB).
responseEnd: Laikas, kada naršyklė gauna paskutinį baitą atsakymo iš serverio.
domLoading: Laikas, kada naršyklė pradeda analizuoti HTML dokumentą.
domInteractive: Laikas, kada naršyklė baigė analizuoti HTML dokumentą ir DOM yra paruoštas. Vartotojas gali sąveikauti su puslapiu, nors kai kurie ištekliai vis dar gali būti kraunami.
domComplete: Laikas, kada naršyklė baigė analizuoti HTML dokumentą ir visi ištekliai (paveikslėliai, scenarijai ir kt.) baigė krautis.
loadEventStart: Laikas, kada prasideda load įvykis.
loadEventEnd: Laikas, kada baigiasi load įvykis. Tai dažnai laikoma tašku, kai puslapis yra visiškai įkeltas.
duration: Bendra naršymo trukmė. Prieinama su PerformanceNavigationTiming.

Puslapio įkėlimo metrikų analizė optimizavimui

Surinkus puslapio įkėlimo metrikas, kitas žingsnis yra jas išanalizuoti, siekiant nustatyti optimizavimo sritis. Štai keletas pagrindinių strategijų:

1. Nustatykite kliūtis

Išnagrinėję Navigation Timing duomenis, galite nustatyti, kurie puslapio įkėlimo proceso etapai trunka ilgiausiai. Pavyzdžiui, jei domainLookupEnd - domainLookupStart yra didelis, tai rodo DNS sprendimo problemą. Jei responseEnd - responseStart yra didelis, tai rodo lėtą serverio atsakymo laiką arba didelį turinio dydį.

Pavyzdys: Įsivaizduokite scenarijų, kai connectEnd - connectStart yra žymiai didesnis vartotojams Pietų Amerikoje, palyginti su vartotojais Šiaurės Amerikoje. Tai galėtų rodyti poreikį naudoti CDN su buvimo taškais (PoPs), esančiais arčiau Pietų Amerikos vartotojų.

2. Optimizuokite serverio atsakymo laiką (TTFB)

Laikas iki pirmojo baito (TTFB) yra labai svarbi metrika, matuojanti laiką, per kurį naršyklė gauna pirmąjį duomenų baitą iš serverio. Didelis TTFB gali ženkliai paveikti bendrą puslapio įkėlimo laiką.

Strategijos TTFB pagerinti:

Optimizuokite serverio pusės kodą: Pagerinkite savo serverio pusės kodo efektyvumą, kad sutrumpintumėte HTML atsakymo generavimo laiką. Naudokite profiliavimo įrankius, kad nustatytumėte lėtas užklausas ar neefektyvius algoritmus.
Naudokite turinio pristatymo tinklą (CDN): CDN gali talpinti jūsų svetainės turinį ir jį teikti iš serverių, esančių arčiau jūsų vartotojų, taip sumažinant delsą ir pagerinant TTFB. Apsvarstykite CDN su tvirtais pasauliniais tinklais, kad aptarnautumėte vartotojus skirtinguose regionuose.
Įjunkite HTTP podėliavimą: Sukonfigūruokite savo serverį siųsti tinkamas HTTP podėlio antraštes, kad naršyklės galėtų talpinti statinius išteklius. Tai gali ženkliai sumažinti užklausų į serverį skaičių ir pagerinti TTFB vėlesniems puslapio įkėlimams. Efektyviai išnaudokite naršyklės podėliavimą.
Optimizuokite duomenų bazės užklausas: Lėtos duomenų bazės užklausos gali ženkliai paveikti TTFB. Optimizuokite savo užklausas naudodami indeksus, vengdami visos lentelės nuskaitymo ir talpindami dažnai pasiekiamus duomenis.
Naudokite greitesnį žiniatinklio prieglobos paslaugų teikėją: Jei jūsų dabartinis žiniatinklio prieglobos paslaugų teikėjas yra lėtas, apsvarstykite galimybę pereiti prie greitesnio.

3. Optimizuokite išteklių įkėlimą

Resource Timing API suteikia išsamią informaciją apie atskirų išteklių, tokių kaip paveikslėliai, scenarijai ir stilių lentelės, įkėlimo laiką. Naudokite šiuos duomenis, kad nustatytumėte išteklius, kurie ilgai kraunasi, ir juos optimizuotumėte.

Strategijos išteklių įkėlimui optimizuoti:

Suspauskite paveikslėlius: Naudokite paveikslėlių optimizavimo įrankius, kad suspaustumėte paveikslėlius neprarandant kokybės. Apsvarstykite galimybę naudoti modernius paveikslėlių formatus, tokius kaip WebP, kurie siūlo geresnį suspaudimą nei JPEG ir PNG. Pateikite skirtingas paveikslėlių raiškas priklausomai nuo vartotojo įrenginio ir ekrano dydžio, naudodami <picture> elementą arba reaguojančių paveikslėlių technikas.
Sumažinkite CSS ir JavaScript: Pašalinkite nereikalingus simbolius ir tarpus iš savo CSS ir JavaScript failų, kad sumažintumėte jų dydį.
Sujunkite CSS ir JavaScript failus: Sujunkite kelis CSS ir JavaScript failus į mažiau failų, kad sumažintumėte HTTP užklausų skaičių. Naudokite įrankius, tokius kaip Webpack, Parcel ar Rollup, sujungimui.
Atidėkite neesminių išteklių įkėlimą: Įkelkite neesminius išteklius (pvz., paveikslėlius, esančius žemiau matomos srities) asinchroniškai, naudodami technikas, tokias kaip tingusis įkėlimas (lazy loading).
Naudokite CDN statiniams ištekliams: Pateikite statinius išteklius (paveikslėlius, CSS, JavaScript) iš CDN, kad pagerintumėte įkėlimo laiką.
Suteikite prioritetą svarbiausiems ištekliams: Naudokite <link rel="preload">, kad suteiktumėte prioritetą svarbiausių išteklių, tokių kaip CSS ir šriftai, įkėlimui, siekiant pagerinti pradinį puslapio atvaizdavimą.

4. Optimizuokite atvaizdavimą

Optimizuokite būdą, kaip jūsų svetainė atvaizduojama, kad pagerintumėte vartotojo patirtį. Pagrindinės metrikos apima First Paint (FP), First Contentful Paint (FCP) ir Largest Contentful Paint (LCP).

Strategijos atvaizdavimui optimizuoti:

Optimizuokite CSS pristatymą: Pristatykite CSS taip, kad būtų išvengta atvaizdavimo blokavimo. Naudokite technikas, tokias kaip kritinis CSS, kad įterptumėte CSS, reikalingą pradiniam matomam plotui, ir likusį CSS įkeltumėte asinchroniškai.
Venkite ilgai veikiančio JavaScript: Suskaidykite ilgai veikiančias JavaScript užduotis į mažesnius gabalus, kad neužblokuotumėte pagrindinės gijos.
Naudokite web workers: Perkelkite skaičiavimams imlias užduotis į web workers, kad išvengtumėte pagrindinės gijos blokavimo.
Optimizuokite JavaScript vykdymą: Naudokite efektyvų JavaScript kodą ir venkite nereikalingų DOM manipuliacijų. Virtualaus DOM bibliotekos, tokios kaip React, Vue ir Angular, gali padėti optimizuoti DOM atnaujinimus.
Sumažinkite maketo poslinkius: Sumažinkite netikėtus maketo poslinkius, kad pagerintumėte vizualinį stabilumą. Rezervuokite vietą paveikslėliams ir skelbimams, kad turinys nešokinėtų puslapiui kraunantis. Naudokite Cumulative Layout Shift (CLS) metriką, kad nustatytumėte sritis, kuriose vyksta maketo poslinkiai.
Optimizuokite šriftus: Efektyviai naudokite žiniatinklio šriftus, juos iš anksto įkeldami, naudodami font-display: swap;, kad išvengtumėte nematomo teksto, ir naudodami šriftų poaibius, kad sumažintumėte šriftų failų dydžius. Apsvarstykite galimybę naudoti sistemos šriftus, kai tai tinkama.

5. Nuolat stebėkite našumą

Svetainės našumas nėra vienkartinis pataisymas. Būtina nuolat stebėti našumą, kad būtų galima nustatyti ir spręsti naujas kliūtis, kai jos atsiranda. Naudokite našumo stebėjimo įrankius, kad stebėtumėte pagrindines metrikas laikui bėgant ir nustatytumėte perspėjimus, kurie praneštų, kai našumas pablogėja. Reguliariai tikrinkite savo svetainės našumą naudodami įrankius, tokius kaip Google PageSpeed Insights, WebPageTest ir Lighthouse. Apsvarstykite galimybę įdiegti tikrųjų vartotojų stebėjimą (RUM), kad rinktumėte našumo duomenis iš realių vartotojų skirtingose vietose.

User Timing API naudojimas pasirinktinėms metrikoms

User Timing API leidžia jums apibrėžti pasirinktines našumo metrikas ir matuoti laiką, per kurį įvykdomos konkrečios kodo dalys. Tai gali būti naudinga stebint pasirinktinių komponentų ar specifinių vartotojo sąveikų našumą.

Pavyzdys: Pasirinktinės metrikos matavimas


// Pradėti matavimą
performance.mark('start-custom-metric');

// Atlikti tam tikrą operaciją
// ... jūsų kodas čia ...

// Baigti matavimą
performance.mark('end-custom-metric');

// Apskaičiuoti trukmę
performance.measure('custom-metric', 'start-custom-metric', 'end-custom-metric');

// Gauti matavimą
const measures = performance.getEntriesByType('measure');
if (measures && measures.length > 0) {
  const customMetric = measures[0];
  console.log('Custom Metric Duration:', customMetric.duration);
}

Tikrųjų vartotojų stebėjimas (RUM) pasaulinėms našumo įžvalgoms

Nors sintetinis testavimas (pvz., naudojant Lighthouse) suteikia vertingų įžvalgų, tikrųjų vartotojų stebėjimas (RUM) siūlo tikslesnį vaizdą apie tai, kaip jūsų svetainė veikia realiems vartotojams skirtingose vietose ir esant įvairioms tinklo sąlygoms. RUM renka našumo duomenis tiesiogiai iš vartotojų naršyklių ir suteikia įžvalgų apie pagrindines metrikas, tokias kaip puslapio įkėlimo laikas, TTFB ir klaidų dažnis. Apsvarstykite galimybę naudoti RUM įrankius, kurie leidžia segmentuoti duomenis pagal geografiją, įrenginį, naršyklę ir tinklo tipą, kad nustatytumėte našumo problemas, būdingas tam tikriems vartotojų segmentams.

Pasaulinio RUM įgyvendinimo aspektai:

Duomenų privatumas: Renkant vartotojų duomenis, užtikrinkite atitiktį duomenų privatumo taisyklėms, tokioms kaip GDPR ir CCPA. Kur įmanoma, anonimizuokite arba pseudonimizuokite jautrius duomenis.
Atranka: Apsvarstykite galimybę naudoti atranką, kad sumažintumėte renkamų duomenų kiekį ir sumažintumėte poveikį vartotojo našumui.
Geografinis segmentavimas: Segmentuokite savo RUM duomenis pagal geografinį regioną, kad nustatytumėte našumo problemas, būdingas tam tikroms vietovėms.
Tinklo sąlygos: Stebėkite našumą skirtinguose tinklo tipuose (pvz., 3G, 4G, Wi-Fi), kad suprastumėte, kaip tinklo sąlygos veikia vartotojo patirtį.

Tinkamų įrankių pasirinkimas

Yra keletas įrankių, kurie gali padėti jums rinkti ir analizuoti puslapio įkėlimo metrikas. Keletas populiarių parinkčių:

Google PageSpeed Insights: Nemokamas įrankis, kuris analizuoja jūsų svetainės našumą ir teikia rekomendacijas tobulinimui.
WebPageTest: Nemokamas įrankis, leidžiantis išbandyti jūsų svetainės našumą iš skirtingų vietų ir naršyklių.
Lighthouse: Atvirojo kodo įrankis, kuris tikrina jūsų svetainės našumą, prieinamumą ir SEO. Jis integruotas į Chrome DevTools.
New Relic: Išsami stebėjimo platforma, teikianti realaus laiko įžvalgas apie jūsų svetainės našumą.
Datadog: Stebėjimo ir analizės platforma, siūlanti tikrųjų vartotojų stebėjimo ir sintetinio testavimo galimybes.
Sentry: Klaidų sekimo ir našumo stebėjimo platforma, padedanti nustatyti ir ištaisyti našumo problemas.

Išvada

Frontend našumo optimizavimas yra nuolatinis procesas, reikalaujantis nuolatinio stebėjimo, analizės ir optimizavimo. Pasinaudodami Frontend Performance API ir kitais įrankiais, galite gauti vertingų įžvalgų apie savo svetainės našumą ir nustatyti tobulinimo sritis. Nepamirškite atsižvelgti į savo auditorijos pasaulinį pobūdį ir optimizuoti vartotojams skirtingose vietose ir su įvairiomis tinklo sąlygomis. Sutelkdami dėmesį į vartotojo patirtį ir nuolat stebėdami našumą, galite užtikrinti, kad jūsų svetainė suteiks greitą ir reaguojančią patirtį visiems vartotojams, nepriklausomai nuo to, kur jie yra pasaulyje. Šių strategijų įgyvendinimas padės jums sukurti greitesnę, labiau įtraukiančią ir sėkmingesnę svetainę pasaulinei auditorijai.