Kako simulirati počasne omrežne pogoje na robu omrežja in analizirati vse

Preizkusite spletno mesto, kot bi to storil uporabnik s slabo povezavo Ključno je zagotoviti, da izkušnja ni prekinjena, ko je omrežje preobremenjeno. Microsoft Edge Na voljo imate izvorna orodja za posnemanje visoke zakasnitve, nizke pasovne širine, izgube paketov in celo situacij brez povezave. Vse to brez nameščanja dodatnih naprav, neposredno iz orodij DevTools.

V tem praktičnem vodniku vam bom pokazal, kako simulirati počasna omrežja v brskalniku Edge. z orodjem Omrežni pogoji in zavihkom Omrežje ter vsem, kar potrebujete za pregledovanje, filtriranje, razvrščanje in izvoz zahtev. Videli boste tudi, kako onemogočiti predpomnjenje, ponarediti uporabniškega agenta, delati z WebSocketom, ustvariti profile za dušenje po meri in izpisati čiste HAR-je ali tiste z občutljivimi podatki, ne da bi pri tem kaj ostalo.

Kaj pomeni simulirati počasne omrežne pogoje na robu omrežja?

Simuliraj počasno omrežje To vključuje omejevanje povezave brskalnika za nadzor prenosa, nalaganja, zakasnitve, izgube in vrstnega reda paketov. Edge to integrira v orodja DevTools, tako iz glavne orodne vrstice »Omrežje« kot iz »Omrežni pogoji« na plošči »Hitri pregled«.

Edge vam omogoča tudi onemogočanje predpomnilnika brskalnika., spremenite niz uporabniškega agenta in konfigurirajte, katera kodiranja vsebine odjemalec sprejema (gzip, deflate, br), da posnemate scenarije prvega obiska ali združljivosti iz resničnega sveta.

Zakaj to storiti? Ker se povezave zelo razlikujejo: optična vlakna doma niso enaka javnemu Wi-Fi-ju, omejenemu 4G ali preobremenjenemu omrežju. Pomembno vlogo igrata tudi zakasnitev (TTFB) in pogajanja s posredniki in Service Workerji. Z oponašanjem različnih situacij boste vedeli, kje prilagoditi svoje spletno mesto.

Kratka opomba o obsegu- Omejevanje prometa v orodjih za razvojne programe (DevTools) vpliva na promet brskalnika znotraj te seje. Če morate omejiti Windows Na splošno lahko v brskalniku Edge za preverjanje spleta ali sistemskih orodij/orodij drugih ponudnikov uporabite zelo počasne profile, ki niso vključena v ta priročnik.

Začetek: Odprite DevTools in zabeležite omrežno aktivnost

Odprite DevTools z desnim klikom > Preglej na kateri koli testni strani. Pojdite v orodje Omrežje. Ko je orodje DevTools odprto, bodo vse zahteve zabeležene v tabeli na zavihku Omrežje, ko bo stran ponovno naložena.

• Bistveni gumbiBeleženje lahko ustavite ali nadaljujete (Ctrl+E ali Cmd+E), izbrišete zahteve (Ctrl+L ali Cmd+K) in omogočite možnost »Ohrani dnevnik«, da se izognete izgubi zgodovine med ponovnimi nalaganji.
• Posnetki zaslona med nalaganjemV ikoni omrežnih nastavitev v zgornjem desnem kotu omogočite možnost Zajem posnetkov zaslona in ponovno naložite s kombinacijo tipk Ctrl+F5. Ogledali si boste lahko sličice, povečali sliko, filtrirali po času in analizirali, kaj je uporabnik videl med prejemanjem bajtov.
• Predvajaj XHRPoiščite zahtevo XHR, jo kliknite z desno miškino tipko in izberite Ponovni predvajaj XHR (ali pritisnite R). To je uporabno za ponovitev zahteve, ne da bi se dotaknili uporabniškega vmesnika strani, in za ogled vpliva z omejevanjem ali brez njega.

Onemogočanje predpomnilnika brskalnika in spreminjanje načina nalaganja

1. Simulirati prvi kraljevi obisk, na vrhu zavihka Omrežje označite možnost Onemogoči predpomnilnik. Na ta način se izognete odgovorom, poslanim iz predpomnilnika, in dobite celotne glave in čase omrežja.
2. Iz omrežnih pogojev (Gumb Več omrežnih pogojev na zavihku Omrežje) Omogočite lahko tudi Onemogoči predpomnilnik, če ga želite centralizirati skupaj z omejevanjem in uporabniškim agentom. To potrditveno polje je aktivno, ko je v fokusu orodje DevTools.
3. Ročno brisanjeV tabeli zahtev kliknite z desno miškino tipko in izberite Počisti predpomnilnik brskalnika ali Počisti piškotke brskalnika, ko morate med preizkusi počistiti.
4. Shranjevanje zahtev med nalaganji: Omogočite možnost »Krepitev dnevnika«, da ohranite časovnico zahtev, tudi ko ponovno naložite ali se pomikate med potmi. Zelo uporabno za A/B primerjave.

Omejeno omrežje: Brez povezave, prednastavitve 4G/3G in profili po meri

1. Hitra omejitev iz zgornje vrstice: Odprite spustni meni Omejevanje in izberite prednastavitev, kot je Hitri 4G, Počasni 4G, 3G ali Brez povezave. Na zavihku Omrežje se bo prikazala ikona opozorila, ki vas bo opomnila, da je omejevanje aktivno.
2. Način brez povezaveUporabno za testiranje PWA-jev s Service Workerji. Izberite »Brez povezave« in preverite, kako se aplikacija odziva, kaj se shrani v predpomnilnik in kaj spada v strategije, kot sta »najprej predpomnilnik« ali »najprej omrežje«.
3. Ustvarite svoj profilPojdite na Omejevanje > Po meri > Dodaj ali uporabite pot do orodij za razvoj > Omejevanje > Dodaj profil. Določite ime, prenos (kbps), nalaganje, zakasnitev (ms), izgubo paketov (%), dolžino čakalne vrste in ali želite prerazporeditev paketov. Ekstremen primer: prenos/nalaganje 10 kbps, 10 ms, 1-odstotna izguba.
4. Uporabi profil po meriZaprite Nastavitve, vrnite se na zavihek Omrežje in v razdelku Omejitev > Po meri izberite profil, ki ste ga ustvarili. Z vodo do vratu si oglejte TTFB, velikost prenosa in čase prenosa.

Omejitev tudi za WebSocket

Omejevanje vpliva na povezave WebSocket, ne samo HTTP. Nastavite svoj počasni profil in odprite stran, ki uporablja WebSocket. Povežite se, pošljite sporočila in nato filtrirajte po vtičnici z gumbom Socket Filter (WebSocket | WebTransport | DirectSocket), da izolirate povezavo.

• Zavihek SporočilaIzberite vnos vtičnice in odprite zavihek Sporočila. Videli boste dohodna in odhodna sporočila, njihovo dolžino v bajtih in čas. V razdelku omejevanje boste videli učinek zakasnitve in preobremenjenosti na časovne žige.
• Vrste okvirjev v tabeli so podprti: nadaljevanje, binarno, zapiranje, ping in pong. Idealen je za odpravljanje napak v klepetih, pretakanje podatki ali sinhronizacija v realnem času v omrežjih, prevedena v pedale.
• NasvetiZa zagotovitev minimalno izvedljive in razumne uporabniške izkušnje zamenjajte svoj profil s 10 kbps s počasnim 4G. Če ima aplikacija že težave s počasnim 4G, je treba še nekaj postoriti.

Namigi za uporabniškega agenta in odjemalca uporabniškega agenta

• Razveljavi uporabniškega agentaV razdelku Omrežni pogoji počistite polje Uporabi privzeto brskalnika. Izberite vnaprej določeno uporabniško ime brskalnika ali vnesite svojega. Uporabno za testiranje zaznav, ki temeljijo na uporabniško ime brskalnika, ali odzivov, odvisnih od strežnika.
• Namigi za stranke UAV istem razdelku lahko prilagodite blagovne znamke in različice (npr. Edge 92), polno različico brskalnika, platformo in različico (npr. Windows 10.0), arhitekturo (x86) in model naprave. To vam omogoča simulacijo odziva zalednega sistema z uporabo sodobnih namigov.
• Preverjanje: Odpre konzolo in ovrednoti navigator.userAgentData, da preveri, ali namigi odražajo nastavljene vrednosti.

Nastavite veljavno kodiranje vsebine

Edge vam omogoča, da določite, katere kode vsebine sprejema z možnostjo Preveri kodiranje vsebine. V praksi konfigurirate podporo za glavo kodiranja vsebine za gzip, deflate in br. Strežniki običajno pošiljajo stisnjene odgovore, glava pa označuje, kako je bil odgovor kodiran.

Zakaj bi ga gledal/a? Ker neposredno vpliva na velikost in čas prenosa v počasnih omrežjih. Če vaš strežnik ne usklajuje datotek br ali gzip pravilno, boste na časovnici videli večje velikosti.

Iščite, filtrirajte in razvrščajte zahteve kot profesionalec

• Globalno iskanje: Odprite zavihek Najdi v orodju Omrežje (Ctrl+F ali Cmd+F), vnesite niz in po potrebi omogočite ujemanje z razlikovanjem med velikimi in malimi črkami ali regularne izraze. Rezultati so označeni tako v tabeli kot v glavah ali odgovorih.
• Filtri po lastnostihZa izraze, ki združujejo presledke, uporabite polje Filter (delujejo kot IN). Primeri: mime-type:image/png larger-than:1K, domain:*.com, has-response-header:cache-control, status-code:404, scheme:https, method:POST, url:/api/.
• Razpoložljive lastnosti: domena-piškotka, ime-piškotka, pot-piškotka, vrednost-piškotka, domena, ima-preglasitve, ima-glavo-odziva, se:izvaja (za WebSocket), večje-kot, metoda, tip-mime, mešana-vsebina:vsa ali mešana-vsebina:prikazana, prioriteta, tip-vira, piškotek-za-nastavitev-glave-odziva, shema, nastavi-domen-piškotka, nastavi-ime-piškotka, nastavi-vrednost-piškotka, koda-stanja, url.
• Filtri po vrstiStikala Vse, Pridobi/XHR, Dokumentacija, CSS, JS, Pisava, Slika, Srednja ia, Manifest, WS, Wasm ali drugo. Več jih lahko aktivirate tako, da držite tipko Ctrl ali Cmd da pridem do bistva.
• Več hitrih filtrov: skrije URL-je podatkov (data:), skrije URL-je razširitev (chrome-extension://), prikaže samo blokirane zahteve, zahteve tretjih oseb ali z blokiranimi piškotki odgovorov (z neposrednim dostopom do zavihka Piškotki in orodja Težave).

Uredite in razumite kaskado časov

• Razvrsti po stolpcih- Kliknite glave tabele (Ime, Stanje, Vrsta, Pobudnik, Velikost, Čas, Dokončal/a) za razvrščanje. Če stolpec Kaskada ne vidite, ga lahko dodate tako, da z desno miškino tipko kliknete na glavo.
• Napredni kaskadni vrstni redZ desno miškino tipko kliknite naslov Slap in izberite Začetni čas, Čas odziva, Končni čas, Skupno trajanje ali Zakasnitev. Preklopite med naraščajočim/padajočim vrstnim redom s klikom na naslov stolpca.
• Predogled razčlenitvePremaknite miško nad vrstico zahtev Cascade, da si ogledate opis s čakalnimi vrstami, DNS-om, povezavo, SSL-jem, pogajanji o proxyju, oddajo zahteve, čakanjem (TTFB) in prenosom. Vklopite velike vrstice, da si hkrati ogledate preneseno in razpakirano velikost.
• Nalaganje dogodkovDOMContentLoaded in load se v ploščah Pregled, Kaskada in Povzetek prikažeta kot navpične črte. Za DOMContentLoaded sta modri in za load rdeči. To vam pomaga videti, kam v slapu spadajo vaši ključni dogodki.

Združi po okvirjih iframe in pregledaj iniciatorje in odvisnosti

• Združi po okvirjih: V omrežnih nastavitvah omogočite možnost »Združi po okvirjih«, da strnete/razširite okvirje iframe s podzahtevami. To je koristno, če stran vstavi veliko okvirjev.
• Iniciatorji in odvisnostiDržite tipko Shift in premaknite miško nad zahtevo. Oseba, ki jo je začela, bo prikazana zeleno, odvisne osebe pa rdeče. V kronološkem vrstnem redu lahko sledite verigi pobudnikov nazaj.

Razčlenite vsako zahtevo: predogled, odgovor, glave in koristni tovor

• PredogledIzberite zahtevo in odprite zavihek Predogled, kar je idealno za slike ali predmete, ki jih je mogoče upodobiti.
• Odgovor: Zavihek Odgovor, da si ogledate telo sporočila, ko prispe. Za JSON lahko obliko kopirate iz Predogleda tako, da z desno tipko miške kliknete prvo vrstico in izberete Kopiraj vrednost.
• Glave- Zavihek Glave z možnostmi Splošno, Zgodnji namigi (če je primerno), Odgovor in Zahteva. Izberite Neobdelano, da si ogledate dejanski vrstni red prejema. Če se prikažejo Začasne glave, je to lahko posledica lokalnega predpomnilnika, neveljavnega vira ali varnostnih omejitev. Onemogočanje predpomnilnika in ponovno nalaganje običajno vrne celotne glave.
• koristni tovor: Naloži zavihek za parametre niza poizvedbe in podatke obrazca. Za ogled izvirne predstavitve in preklapljanje med kodiranjem URL-jev in dekodiranjem URL-jev pri testiranju parametrov s posebnimi znaki uporabite možnost »Ogled izvorne kode«.

Piškotki, velikost in izpolnjevalci

• Zavihek Piškotki: Prikaže piškotke, poslane z zahtevo, s podrobnimi polji. Uporabno za pregled SameSite, Secure, domene in datumov poteka. V orodju Network (Omrežje) boste videli obvestila, ko piškotke blokirajo pravilniki ali nastavitve brskalnika.
• Prenesena in nestisnjena velikost: Omogočite velike vrstice zahtev, da stolpec Velikost prikaže preneseno velikost v velikih korakih in razpakirano velikost v majhnih korakih. To pomaga oceniti dejanski vpliv stiskanja na omejena omrežja.
• Izpolnil/a: Ta stolpec označuje, ali je bil odgovor poslan iz predpomnilnika HTTP ali iz storitvenega delavca. Pri prvih testnih zagonih je priporočljivo onemogočiti predpomnilnik, da se izognete ponarejanju časov.

Analizirajte WebSocket in tokove dogodkov

• WebSocketKo je filter vtičnic aktiven, izberite povezavo in odprite zavihek Sporočila. Videli boste do zadnjih 100 sporočil, vključno z njihovo smerjo (gor/dol), časom in dolžino. V razdelku Omejevanje vam časi povedo zgodovino omrežja.
• EventSource in pretakanjeKo sprožite SSE, boste videli zahtevo tipa SSE in zavihek EventStream s sporočili, ki prihajajo s fiksno hitrostjo. Filtrirate lahko z regularnim izrazom in sporočilo počistite z gumbom Počisti.

Izvoz in uvoz: Saniziran HAR ali z občutljivimi podatki

• Izvozi vse kot HARV vrstici z dejanji ali z desnim klikom na katero koli zahtevo izberite Izvozi HAR (očiščeno). Ta oblika zapisa JSON privzeto izključuje občutljiva polja, kot so piškotek, nastavi piškotek in avtorizacija.
• Vključite skrivnosti, če je potrebnoV nastavitvah orodij za razvijalce > Nastavitve > Omrežje izberite Dovoli ustvarjanje HAR-jev z občutljivimi podatki. Tam lahko različico z občutljivimi podatki tudi izvozite.
• Uvozi HAR: Povlecite datoteko HAR v tabelo orodij Network ali uporabite možnost Import HAR File. Edge bo prikazal zahteve, njihove iniciatorje in vam omogočil, da jih analizirate, kot da bi jih posneli v živo.
• Kopiraj v odložiščeZ desnim klikom na zahtevo lahko kopirate URL, na primer cURL (cmd ali bash), na primer PowerShell, na primer fetch (brskalnik ali Node.js), kopirajte odgovor ali sled sklada (če ga sproži JavaScript). Obstajajo tudi možnosti za kopiranje vseh ali filtriranih odgovorov v enakih oblikah in za kopiranje vsega kot očiščenega HAR-a ali s podatki.

Števci in nadzorne plošče: pregled

• Povzetek na dnu- V plošči Povzetek je prikazano skupno število zahtev in skupna velikost prenosov od odprtja orodij DevTools. Upoštevajte, da se prenosi, ki so se zgodili pred odprtjem orodij DevTools, ne štejejo.
• PregledČe vam moti, ga lahko skrijete tako, da počistite polje »Prikaži pregled«. Všeč mi je, ker omogoča ogled porastov aktivnosti ter lokacije DOMContentLoaded in nalaganja na časovnici.
• Skrij ploščo s filtriČe želite več prostora za tabelo, strnite ploščo filtrov z gumbom Filter. Ponovno jo aktivirajte, ko jo boste spet potrebovali.

Praktični primeri z omejitvami: od 4G do 10 kbps

• Minimalni razumen testUporabite počasen 4G in ponovno naložite. Pazite na čas TTFB in kaskadne čase. Če vizualni prikaz junaka traja predolgo, preverite kritične pisave, CSS in JS ter na strežniku omogočite stiskanje br/gzip.
• Ekstremni preizkusUporabite svoj profil 10 kbps, 10 ms, 1 % izgube in prerazporejanja. Da, to je pekel, vendar razkrije skrite odvisnosti, neprijazne časovne omejitve in vire, ki ne bi smeli nikoli blokirati.
• PWA brez povezaveOmogoča pridobivanje brez povezave in preverja poti, strategije predpomnjenja in rezervne strani, shranjene v storitvi Service Worker. Preveri, kako se obnašajo neuspešne zahteve za pridobivanje in ali je uporabnik pravilno obveščen.
• WebSocket z zakasnitvijo: S profilom Počasi pošiljajte in prejemajte sporočila ter preverite zavihek Sporočila. Po potrebi prilagodite intervale ping/pong, ponovne poskuse in eksponentne ponovne povezave.

Dodatni nasveti: dopolnilna orodja

• WebPageTest: Brezplačna storitev z odprto kodo za simulacijo tipičnih pogojev (56K, 3G itd.) z izbiro lokacije in brskalnika. Omogoča osnovno in napredno testiranje z videoposnetki, blokiranjem vsebin in še več.
• Vrtenje v glavi: omogoča vam testiranje v mobilnih omrežij Primerjalni testi iz resničnega sveta. Če potrebujete popoln realizem in meritve v več kot 1.000 omrežjih, je to zmogljiv primerjalni test.
• SpeedCurve: posnema razmere čez dan za oceno sprememb zaradi zastojev. Zelo uporabno za ogled spreminjanja metrik v času prometnih konic.
• Omogočalec omrežne povezave v sistemu macOS: del Xcode, idealen za simulacijo latenc, izgub ali napak na sistemski ravni v Apple okoljih.

Kratek vodnik po časovnih fazah

• Faze, ki jih boste videli na zavihku Časovni načrtČakalna vrsta (zaradi prioritete ali omejitve 6 povezav v HTTP/1.0/1.1), Zastoj (zaradi čakalne vrste), Iskanje DNS, Povezava (TCP in SSL), Pogajanje o proxyju, Zahteva poslana, Priprava in zahteva za ServiceWorker, Čakanje (TTFB) in Prenos vsebine. V HTTP/2 boste videli tudi Prejem potisne zahteve in Branje potisne zahteve, če je primerno.
• Praktična interpretacijaDolge čakalne vrste spodbujajo določanje prioritet virov in zmanjšanje števila povezav, visoki klici TTFB za optimizacijo zaledja in razdalje ter descargas večno, da omogoči stiskanje in particioniranje, kar je resnično ključnega pomena.

Majhne prilagoditve vmesnika, ki naredijo razliko

• Velike čakalne vrste zahtev: V omrežnih nastavitvah omogočite te funkcije, da na hitro vidite, kaj je bilo preneseno v primerjavi s tem, kaj je bilo razpakirano, ter začetne in končne prioritete. To zagotavlja jasnost, ko je seznam dolg.
• Stolpci po meriZ desno miškino tipko kliknite glavo tabele, da skrijete/prikažete stolpce in dodate stolpce po meri na podlagi glav odgovorov. Stolpce glave lahko celo upravljate v namenskem oknu.

Če zgradite testni tok z onemogočenim predpomnjenjem, realističnim dušenjem, filtri po vrsti in pregledom TTFB, slapa, koristnih obremenitev in HARImeli boste resničen pregled delovanja vašega spletnega mesta v težkih situacijah in natančno vedeli, kaj storiti, da bo delovalo tudi, ko bo omrežje slabo.

Povezani članek:

Popoln vodnik za pravilno izvedbo preizkusa hitrosti omrežja

Isaac

Strasten pisec o svetu bajtov in tehnologije nasploh. Rad delim svoje znanje s pisanjem in to je tisto, kar bom počel v tem blogu, saj vam bom pokazal vse najbolj zanimive stvari o pripomočkih, programski opremi, strojni opremi, tehnoloških trendih in še več. Moj cilj je, da vam pomagam krmariti po digitalnem svetu na preprost in zabaven način.