a přednášce
se jako kritická cesta při programování prosím přinášejícího
doufám že mně slyšíte dobré tak
nebo dybyste mně slyšeli napiš přes ten repráky bitovou špatný této pak nebude na záznam
na to byl určitého znáš kodér
tak osel ten performer nic zeptám se mu možná na začátek kdo
vy víte ve by
to asi všichni a kdo ste nikdy dostalo ta school nebo úkol ale trošku to
zrychlený to nic moc
tak i všichni
třeba to t dnešní budete vědět co na to odpovědět
a nebo se radši když se vás někdo zeptaj pokud zbaběle utečete
protože to je taky možnost
já se ještě jednou představim
menu se dominik till možná někteří o známější co se pohybujete
brněnský dělá s tím komunitárního znáte
můžete mě taky znát práce teď
pracuju x nízká von tam sem taky čerpal některé věci které vám dneska povídat
protože
rychlost nebo je něco co se s tak na řeší zvlášť když děláte jako s
platformu tam i každá sekunda praha
poté na to
podíváme se jak se načítá stránka
ona se načítá docela dlouho někdy
a kdybyste byli běžní uživatelé
tak nejspíš už by vás teďka si tak třetina odešla
a každou další sekundový tam nechám tady tenhle slajdech vykřičelo další deset procent dva
a ta rozhodně nechci jaká trať přepnu
co to vlastně znamená mít rychlou stránku vyšla mi řekne ale není to vono je
to pomalý
to jako když vám někdo řekne máš pomalý auto tak to asi znamená že z
nuly na sto
právě za deset sekund to deset metrika
už to uplně řekne potomek touto je třeba rychlý zatáčkách a podobně
takže s týmem můžem řekla něco podobnýho tam je to navíc ještě složitější protože
co je ten kritické body řeknem že ten velké načteny
co je tady kritická doba po kterou ten uživatel a něco čeká a vlastně na
co čekáte uživatel
to všechno musíte vědět a samozřejmě prohlížeče nám k tomu nějak pomáhají není mají takový
super dílen ty
který sou více některé méně užitečné právě při měření rychlosti webu
určitě ho do kontem bloudit nebo long event uslyšela si každý případně kdo znáte
máte tu smůlu že znáte jenomže který tak
tam jaké jsou první ven do medy který vlastně to nějak obaluje a je tam
taková super magie leží nejvíc dobřany dělat kdy sto spustí
a
to je určitě nějaký bod který se dá dobře měří ten prohlížeč nás o tom
sám upozornil řekne nelep se to stalo
můžem standa jaký hodiny je někde sto trekování nějaký statistiky si dělat
no ale
to možná nestačí ani jsou ty jako že lepší způsob jak čísel štemberk načtený
neska nebo u často se
říká něco o takový optimalizaci nut překladem nebo na skladem to vyšlo z nějakých novin
typografie kdy prostě čte noviny jsou poskládaný vtom stánků také hrozně důležitý co je vidět
na
ty první stránce ještě navíc na tím překladem této nebo
nebo u fault kontem
na webu je to podobný protože ten super málokdy vidíte celej
tak velký promyšlené velký je
monitory neska nemám ač máme čtyři k tak stejně výsledku se to tváří uspořádané takže
nevidíme všechno je hrozně důležitý toho
uživatele nalákat a samozřejmě ideálním tady tu část
ukázat co nejdřív
pak jsou metriky kterým se že se říká sjezd mi nymfu paint to znamená daný
okamžik když se mi těleso něco smysluplný ho
podobně first mi nymfu interaction té daný okamžik kdy uživatel mohl dělat něco smysluplný označíme
a pak sou takový nastoupím ty a
ono by začnete přemejšlel potom simlibu tak musíte právě vědět co ten uživatel tam přišel
dělat
jestli si přišel číst článek taky mu možná jedno že to bude chvilku nějaký trošku
ne nastavovaný že tam dole nebylo komentáře svýmu konečný a podobně a lehce si přečíst
vánek
jestli přišel koupit radu
jestli dva dvacet sekundy zobrazíte tlačítko koupit produkt tak to asi taky nebude šťastnej
no
prostě musíme vědět
co ten náš uživatel přišel dělat na stránky
musíme znát taky toho uživatele a ten kontext ve kterém mám na ty stránky přišel
protože dneska je taková uspěchaná dva takže spoustu lidí chodí naved mobilu nejlépe šalině
cestou do práce takže máte asi tady z y jednu sekundu načíst klepneš to zavře
než do něj do strčí o ztratí pozornost a ušli víc tam chtěl udělat
co je teda
průmětny uživatel
nebo on ten průměrnej není reálnej ale my nemůžem znát všechny naše uživatele takže se
ho tak nějak zprůměrujeme řeknete ten uživatel na který rádi chci cíli tak ty rotace
optimalizovat
používá destou nebo mobil nebo tablet
jaký má vlastně
to zařízení
možnosti jaký má výkon v že ne všichni mám chlapce poslední i von jakýma rozlišení
obrazovky
jaký má připojení k dispozici protože
if česku aspoň nemáme tendenci říkat že šídlo rychlý připojení to máme jako štěstí
americe když někdo má po deset mega za sekundu ta kuše to prostě jako divný
hodit jinak nepočítej
no ale i tak je dobrý říci že
tak je průměrnej stáří pátého prostě příde navážce to mobilu
není to žádný já jsem zařízení
máme nejspíš pomalý třídě připojení a ještě se na to koukal někde po cestě do
práce
tomu jeho musíte zaujmout a na tom jestli rychlejší pech rychlému nabízí to proč přišel
když už víme co je průměrnej uživatel možná bysme si měří co to je průměrná
stránka nebo je ve stránka normální vypadá
a
tam je to dost jednoduchý den prohlížeč neska pořád ještě furt i po těch dvaceti
letech umí jenom o tom l c sesadila skript krát že ten že vlastně se
trošku zlepšilo to css kostek je trochu zlepšo potom l
taky ale kdo používá něco z auta to mohl pětky
no a pak je tam spousta skriptu ze třetích stran kterých se hrozně těžko ovlivňujou
a když se jestli máte třeba je šuplinem recipe do těch skriptu tam máte hrozně
moc protože všichni chtějí vědět
kdo tam přišel co dělo analytiky tech sledování pěti moderní takovýto nahrávání uživatelských session
znamená další a další skripty nějaký personalizace
webu přes nějaký třetí služby a podobně
no
ve výsledku zjistíte že jako proměnná stránka
znamená že se načte dvě a půl mega
to je sakrálně když si uvědomíte že
když vyšel první dům tak to bylo po dvě mega nešlo se to na disketu
tak jako co ta stranka neska dělali jsme sto malými celou
načte se víc než stovek městům to znamená je tam s tou požadavků na nějaký
obrázek externisté se sto nebo něco a
s těch stovek vestou piva zhruba asi tak zatřesení různých domén to znamená spousta skriptu
s třetích stran
a podobně
je tam zhruba nějaký průměrný stránce
čtyry sta kilo javaskriptu
to je docela dost javaskriptu když si vezmete že ten infikován eště lásky
a nějaký obrázky samozřejmě tam asi nepřekvapí ta velikost
naopak
asi první co jsme se naučili optimalizovat byly obrázky
ono je to dost jednoduchý protože zmíníte kompresi na webu
maximálně nějakej den když jich tam máte hodně to transformed do té nové lepší komprese
pak to pošlete uživatelů a ho se stane zázrak že se všechno zrychlí a všechno
vyřeší nestane
akorát s takže umí dát ale
ušetří na nějakým internetovým připojení a podobně takže budu šťastnější
tady ta průměrná stránka
to sem si nevycucám peněz trestu to sou statistiky který můžete najít na webu sleduje
to tisíc nejnavštěvovanější chlebů na celém světě z nich to dělá různí statistiky je tam
nějaká historie
zpětně ve že se můžete kouknu třeba že ještě před pěti lety jsme se vešli
na jeden mega
tak jo takže mně co změřit učíme co chce měřit
tak
vesměs nějaký stránky a něco změříme
co to
ale znamená změřit to sem vám vzít stovky marduka dolní do prohlížeče adresou čekat patentována
stopka zároveň a musí stopovali to znám trvá deset sekund to asi by nebylo p
přesný
na druhou stranu možná bych přesně to je to ten okamžik kdy vím že ta
stránka mi došlo dávat smysl takže takovýto o úplně tupý uživatelský testování rychlosti je taky
dobrý
a je to hodně pocitu protože někomu dává smysl že se načetl první text někomu
dává smysl že se to do
přestalo otáčet takovýto super kolečko
asi budeme mít nějaký lepší nástroje na to
tak
je až s obdivem že každej prohlížeč neska má nějaký vývojářský nástroje když se vezme
takže ty pro výše soudělný primární přece pro normální uživatelé
jako
pěti nás tady přednášku kapalná vývojářů
ale ten má uživatel vůbec jako neví že tam nějaký byl objektů
a oni tam přes to sou a my to můžem využít samozřejmě to že oni
nám dávají
docela
podobný
když se kouknete na ten obrázek tak si možná říkáte že cache moc
podrobný náhle co se vtom pro většího vpravdě
ukazuje nám to věcné vytěžili paměť ukazuje nám to kdy probíhá a vykreslování do prohlížeče
co jak se stahuje takovej ten filtr flow
a podobně
je nám to schopni říct jak dlouho sme stahovali
nějakých soubory nebo se ty soubory potom pasovali případně se vykonávala ňáká akce
na co sme čekali
tady nahoře
najdu blíž
takový ty
světlejší části předtím a samotném stahování
to sou
vlastně čekáme na internetových spojení to znamená nějakej dns krev h
a podobně
nevím jako moc je třeba rozšíření a toto p dva kdo třeba wifi nikdo pro
používat doplňovat reducible
takže čtyři s těch nevím kolik na takže asi desetina i kdyby
to je super gratuluju
samozřejmě nevyřeší to všechny problémy
ale některýho
a kdybyste takle měli testovací jako tím prohlížečem vlastně stránky této fúze zcela manuální práce
cache někdy mravenčí protože
musíte si vzít prostě spoustu
stránek jo nechcete testovat jenom jednu na ta jedna může bejt trošku jiná byste to
zopakovat víckrát protože prostě jeden test nic neznamená jak nejlépe ze zapnutým kešování vypnutým kešování
a podobně
sou
na to naštěstí lepší nástroje který to dokážu částečně zautomatizovat
takový pro mě dva důležitý sou jeden vajdhauzu spásající pít a jo
vajdhauzu c je nástroj jiný googlem přímo byl to nějakej platit do stromu
dokonce
push teďka je to součástí vydáních rómka nedej to znamená zase to dostane do všech
normálních rom
ten účel toho nástroje původně je na hodnocení a nějakou a jako by oznámkováni regrese
klepet
preserved směr nějak i moderní trend jak psát webový aplikace tak abys byly ta uživatelský
zážitek do co nejlepší a podobně je to zase hodně to tlačí google
ještě dneska
krát narazím na to že něco udělá proto aby stránky byly rychlejší můžete si říct
proč to dělá možná chci jenom aby jeho stránky byly rychlejší
a když si uvědomíme že indexy ucel internet tak oni by asi byli rádi kdyby
všechny stránky byly rychlejší protože jsi zrychlíte všechny stránky o sekundu tak oni možná v
ruce lindy internet indexovat asi tak ho měsíc mi
takže asi i tady tadlencta motivace první je docela důležitá
ten druhý nástroj se menuje
site ctít a jo
já jsem teda chtěl ukázat výstupy přímo s těch nástrojů bohužel mě zradil notebook takže
prezentované ze svého a bude to jsem se stačit si modráskem
jak vidíte vtom light halsů dostaneme nějaké hodnocení stránky
se sem něco přepnu
to asi samo
máme jaké hodnocení stránky z hlediska performance nechce se ty a nějaký best edikty monte
nástroje dělaný tak aby právě normální
běžný franta revolver
nemusel zkoumá tady tydlencty vodopád d a při pečky a jeden čtverečky pinning a t
ale aby prostě spusť nějakej a ten nástrojů řekl ale prostě ta performance fakt jako
není dobrá máš patnáct bodů ze sta
asi by se s měl zamyslet
a on mu neřekla jenom jako není to dobrý řekne co mám dělat tomu aby
tomu lepší on tam je takové by
cache výukovej motivy vám to říká hele
prostě neměli fi květem krásky
tady jsou nějaký články k tomu
a podobně
tady je o to není ten o tom nástroje toho těch technika a vlastně ta
tagů komunita je vtom vesmíru docela ty
a ten
sites pít io
je
vtom sněhu výuky trošku jako by horšíma tam tak nějak jen ty
ale se tam hodně hezky zpracovaný právě teď event windowsech
je to o proces nástroj takže tyhlencty se mu tak můžete dohledat jak je to
implementovaný sušiny se nikdy hodí
můžete s tam dokonce udělat nějaký plastovým typu
tím že trošku tam pohybujete to jádro nebo ten že oblasti
který se tam vkládat stránky potom
a takže můžete mít statistiky vopravdu že načetl sem můj nebo u default který nechat
zajímá nebo načetla se prostě kritický obrázky produktu tlačítkovou pět
to už dál samozřejmě víc práce musíte zas vědět co chcete měřit ale oba tudle
nástroje se dají třeba spouštět se příkazový řádky můžete mít někde na serveru
my tam nějak i tondou padělat si z nich statistiky studium času
tak
zhruba
víme co bysme chtěli měřit
u sme si to možná jako změřili zjistili jsme
je třeba naše stránka se načítá za nějakých dvacet sekund
na mobilu
na tři dědečků nějakej průměrný zařízení
to si řeknete že asi docela dostanem do byste čekal dvacet sekund na stran
tady máte pocit jiný čekáte dvacet sekund na stránku na mobilu
jestli ne je to zvláštní protože to je úplně normální čas kdy se na tři
děličku na nějakym kdy delays načítá jakákoli stát
nějakou optimální domů se
aktuální považuje patnáct sekund ale zase záleží na vaší aplikaci měli byste si ten svůj
styl asi nastavit sami
a samozřejmě když ten a změřit a že se vám to načítat dvacet sekund
není p dobrý propadat panice začínala výpověď já nevím co všechno možný
jo vykopnou c co na tom vaši jako by na protihráččina through jestli děláte prostě
jako s tak se kouknete tady na český ve škarpě který vám konkurentů přímo třeba
velikosti zjistíte že na tom nejsme špatně jste průměru
ale proč by průměrný do
může to bejt lepší můžete říct ale já jsem rychlejší než a lze
co asi
třeba možná ani by nebylo tak těžký
tak
když se program na to co můžem zoptimalizovaný
je tam spoustu kategorií já jsem daty kde může motem vzala velikost l musime přenášet
to nemá translace eyes a můžem optimalizovat ten čas pro který se na stránkách nevykresluje
když tam optimalizovat velikost tak se koukneme máme velký obrázky jestli je posuvem jenom kousek
menší jestli nemůže mít nějak lépe komprimovaný nějaký lepší formáty
ještě formátech obrázků je třeba google hrozně aktivní a každý rovinná něco co je lepší
dyž to před tím
aby to musíte s nimi když chcete mít o nejnovější
můžete optimalizátor mohl ale tam asi moc ne ušetříte
pochybuju že byste nikdo psal tak ošklivej o
a když neska se částečně teda generuje že by potřebovala k optimalizaci kvůli vykreslování
ale taky není dobrý plně psát jako
takový že štosy neustále že na nějaký standarty se většinou jako
dnes tam von c r
ale když ten do on je pak jako ve špatném o tato vole stránka není
validní tak vykreslí sestavit z něj ten domů
ten dokument může model prostě trvalo kousek
určitě můžete optimalizovat velikost javaskriptu zase unifikace g si a podobně
více slezska a co nejvíce asi optimalizuje jsou jako by telepaty skripty
s máte zkušenost nějakým jako by větší masky tomat který si volíte do stránky na
sto tváří jako jeden skripta pak zjistíte že vám to tam tácech řekli a bootstrap
jenom proto aby vám to tam někde udělat ti vokýnko
tak super nikdy nechápu co za lidi pracuje chtěli firmách který poskytujou jako skripty třetím
stranám a že se nestydí
protože je to opravdu
abyste to ten za ten data
musí to za prvé vědět nepoložíš funguje sečte kouknem
austria k jsou možný techniky takže můžete uvězněna pořadí načítání můžete
použít nějaký lízou d asynchronní načítaní
a pak nějaký novější techniky jako prefix a pro
když byste se chtěli teda vybrat je kulisy css nebo že vlastně tak s m
lo přemejšlel
co teda je vlastně toto stránku kritičtější
a nakonec sem si měl takovej hrozně loupej test že sem si tuto stránku stáhnul
a měl jsem si přivezeno tu původní se vším jednu s t dvě stě lásky
samozřejmě ta bezcenné slezska byla jako ošklivá
a to bez řezová skriptu samozřejmě nefungovala
ale když se to takhle jako otestujete tak zjistíte že co vás vlastně zdržuje víc
není to uplně ta jako inzertní věra protože když se pak opět rok od tak
zjistíte jak ste s tu stránku stále tak některých skripty se vám nestavil kvůli nějakým
autorizaci a podobně
tak rozsa jestli týmů
ale je taky dobrej první povinní když čtete si říct ale taky nám čas jenom
na
c seschlé bod že lásky potřebuju vědět co mám dělat
no města mysli takže láskyplně zdržujete navíc evidentně
takže budu mluvit nestaví to javaskriptu ono optimalizovat c se skóre vubec refaktorizace se sto
je totiž ještě složitější revizi stejný zkoušel někde reflektovat jsem se styly nějakým větším webu
to je v podstatě to nejjednodušší to přepsat protože
tak se prostě
deklarativní tak pořadí není jasný jak se to vlastně nějakých to prohlížeči
takže nikde pak
jedinej
možný způsob to vzít
po stránkách začít přepisovat něčom vyššího
no
ono totiž na tom vebu je všechno spojení
a takže když optimalizujete velikost načítání tak s to bylo trošku rychlejc je pak pasovat
agregovat
když z optimalizujete c s esko nejspíš pak poběží rychleji si že vlastně možná vám
to začne připadat divný
a možná se do toho kouknete trošku chlubit
já nevím jestli někdo poznáte zmatek to je
a předpokládám že ne ale takle se pro seriál
ne sto listy detektiv
a vy si to neznáte tak doporučuju waters tak zábavná dva večery
a je to celý o tom že celej svět
je totálně propojenej nic není náhoda
a všechno na sebe závisí
a je to naprosto šílený a myslím si že přesně takové dneska neboli vývoj akordy
se s pustíte do toho
že chcete něco zoptimalizovat
že nás takových technik
je to u splitting to znamená vím že prostě načítám jeden velkej s tím že
s
a u sem zjistil že trasy není
prostě na posílat do rodiče mega
na každý stránce jako samozřejmě sto pak na cache v podobně ale sou to tam
proč musí napasovat
on sto krát za po máte mezitím routrem
tak
mohl bys letos zkusit rozdělit
a
eště možná
předám jakou poznámku jestli
máte push jakoby modernější a půl která je s p a nebo s nějakým se
je to vlastně se nastaví tréninkem
tak tam sou ty problémy trošku jiný
šest zas trošku jinak
ale třeba ten kouskuje texelem řeší taky ale n z důvodu
nebo ze stejných důvodů ale prostě trošku jinak možná trošku líp a s či courat
automatický nástroje
na jako spatřujeme je většinou takový štěstí nemáte
ono je to bez zajímavý protože teprve nedávno jsme se naučili jako využívat modulem javaskriptu
spojovat více zdrojových souborů jedno
nebo řešit to tupým tupou konkatenací těch souborů ale ten nástroj užším trochu rozumí
a spojíme to do jednoho a texely kamarádek muset asi neměli spojovat do jednoho nebo
lepší byste udělit malejch souborů
a teď mám jich udělat lícovaných rovnou však o že s tím budou na tom
deset tou zdrojáků
třeba štaci rozdělit na stránky
tak se to dá
ale když čtete oddělit nějakou část který se často říká vendor nebo nějaký prostě knihovny
té party
to udělat ručně by se vám asi nechtěl
jsou na to naštěstí neska nástroje jako třeba lépe k které jsem vzpomenout realizmu tomu
podtitulku
ve pěkně určitě super nástroje pro vám s tím pomůže ale největší ten váš problém
vy musíte vědět co chcete udělat tomu doteku to
říct
a když vám ta syntaxe kterou to říkáte příde smysluplná nebo ne
a
potom on vám s něčím pomůže už je to taky rozdělit podlec nějakých fit že
nebo komponent nezkaz
takže právě těch eskáček se často řeší že nějaký ty top level komponenty mají odděleny
soubor a načítají se jenom když potřebuju dělá nějakým lojzi holdingem takže se čeká až
budete výpletu tak komponenta
někdy to vypadá jako totální magie
někdy
to uděláte tak na co ji zlomí jako
když teďka nedávno vypustili novej link adding
tak to bylo super napsaný zpět technologie všechno ale dycky se
všechno se načítal hrozně moc jako po částech a fakt
to proto tak zase stránka ty tam bude se koleček tedy se točila postupně vaši
pro blikal
ten uživatelsky znáš tech asi nebyl tak o jaký si představovali postupem času vzešly jako
vylepšovat
jak mám pocit že ještě nějaká česká banka dělala takovoudle věc s vojenským webem dělaj
ty s p áčko pět renderem krabici nespomenu na
co to bylo a možná je to dobře esemeskou
jak teda chcem to rozdělit
může podělit ten škod o těch ty party kódů k tomu je dobrý že napomůžou
ty nástroje
artuš pepek nebo myslím že většina z vás esemeska bude využívat pepek nebo blyštěla
můžem brzděte a pohled stránek to znamená na produktový stránce vám si nějakej specifickej to
vlastně italistik stránce mám nějakej jinej pak checkout zase pro něco jinýho
je zbytečný data posílal prostě hnedka všechno
může to rozdělit na komponenty nebo fí čili
no
to je sice hrozně hezký ale když nemáte to štěstí že otec ste si řekne
větrem dělat pořádně a celý to přepíšem ale nikdo vám dá nějaký prvek který už
má nějakej ten
krok za sebou
a je tam spousta třeba dekodéry takové mtime s kým způsobem jako globální vidět i
který se prostě někde vobilí a nikdy někde nevobjeví
tak je hrozně těžký jako zjistit vůbec tedy ten kolt mám oddělit který třeba potřebují
jo když můžete zánikem při ideálně programátorem zeptat se ho kde popsal on vám řekne
lze používaným támle určitě to může smazat
a když takovýho člověka třeba steve i v němž nemáte nebo na to chudáku zapomněl
protože to třeba psalo ale uštváni neví rady vede bloky tu tak mu to ani
nedokážete
tak se můžete tak prohlížeče pro že on to samozřejmě musí vědět o spustila co
a od vopravdu v
a vy to docela hezky on vám je schopnej říct jaký využití máte jednotlivých souborů
jaký procento kódu používáte aby zůstane jenom těch procent ale vy se podíváte na zdroják
potom tak tady vidíte krásný zelený a černý kousky
ty zelený znamená hele tady ten program běžel ty červený znamenají ale tady jsem vůbec
nedošel
z nějakýho důvodu
samozřejmě když nebo jaký podmínky tak asi zrovna byl ten případ že to neběželo ale
vy zjistíte třeba že to nepoužilo co nejede modul
tak je to dobrej adept asi to nějak kam odstranit
nebo vůbec zjistit jestli se to třeba používá spona nějaký stránce to že možná zjistíte
že tam máte call který nepoužíváte vůbec
tak proč byste optimalizovány že o tom že trhu smazat
kdybyste si řekli že todle je ste někdy viděli ale ty červený a zelený špičky
taky ste tam neměli tak vězte že beze budete protože zase je to von trenéry
a
je to fakt jako docela zajímavý nástroj samozřejmě je to zas tam manuální práce
ale vyplatí se
takže sme si řekli poďme rozdělit náš obří s tím že
náš končí s tím že se v té době měl jeden celá jedna mega to
je b s g zipu
těch čtyry sta kilo co sem vzpomínal na začátku se počítá že používá peníze kompresi
takže ten skripta výsledku byl a něco okolo tři s tá padesáti mám pocit
kilo a tak sme si řekli má tak trestat jako hrůza vostuda to nechcem dělat
tím se nebudem chlubit já si tak tady tím kluby a řekli sme si rozdělíme
to rozdělíme to na knihovny to znamená ten vendor ten bod asi velkej dneska jako
tento si že máte medvědem x let e s tady koncovým takže to máte decibely
ani jedna kňourání zrovna malá
a pak ta máte ještě nějaký další knihovny který právě si nejste jistý jestli používáte
ještě pořád
a vezmete to teda podle stránek pořady šoků nebo jako s platformě to dává smysl
tyto podle stránek vezmete si produktu stránku kouknete si jo tady použila nositele že vlastně
tady u toho si nejsem jistej jak se kouknu ty konzole
a takhle postupně začnete oddělovat ten kód začnete to trošku modularizovat když to máte před
tím takový divočejší
no a dojdete k ničemu že máte dejme tomu čtyři typy jako by dalších souboru
každej se ta a jenom na daný stránce znamená na stránce s teď místo jedno
obřího souboru trhají dva menší
no otázka jestli je to lepší protože to spojení tento jaký nebo něco stav fučíka
nemůžete split o jako s
se bejt jistý že mají slušný připojení
tak to prostě musíte otestovat zase použijete nějaký ten nástroje co sme se bavili a
zjistíte jestli se vám to vyplatilo nebo ne
no
dnes toho aniž byste si to
zkusili a otestovali to prostě bohužel nezjistíte když samozřejmě vedle měla z optimalizujete dvě tři
stránky tak ty čtvrtý push asi dokažte pěknou kdysi se to vyplatí nebo ne
a třeba si ušetříte práci
a u tady toho rozdělování
se dost často neudržíte začne veden kotelnou optimalizovat protože vidíte ten svůj úkol cellista napsali
před pěti lety
a ještě než zjistíte že ste to na collide tak se rozčilujete který
to napsal
a pak se koupit r bitů a už určitě
takže sme na proto to ví stránce gametou dva striptérkou nejvíc takže tam hodně interakce
sme se dostal nějakých necelých tři sta kilo co když sečtete s command tak se
vlastně docela na stejným jako stejný objemu dat
takže otázka jestli se to vyplatilo a nám se to vyplatilo z důvodu těch ostatních
stránek protože ty jsou daleko menší
a třeba máme hodně návštěvníků který přichází kriminalistik h což znamená min rychlejc něco načten
a pak do váš na první h takže
ten přínosy je jednak tomdle jedna k tomu že ten vektor se zas tak často
nemění ten co může mít i uživatele nakešovány klidně
se mi sem tři měsíce protože
kdy aktualizujte nějakou knihu no přikrytou sem že rušná pouze nikdo to jenom čeká té
štve to moc smazat
a bude jak to sice ty jako verze vypadá vydávají tak rychle že bysme to
mohli aktualizovat každé
ale na to asi nemáme čas ani test čas jako zjišťovali se nám to fixní
uvěří funguje
co se teda stane když vezmete ten
rozdělíte ho
dát si s tím tu práci a pak si to spustíte nad tím test a
doufáte že to udělá třeba aspoň deset procent
zejtra toto poláková k dobrá meta to může říci potom jako vedoucímu jsem to prostě
to deset procent to z ještě docela dobře
obujte se je to become procento a ztratil ste penetrace
a text to spustíte si tady zapomněl vyznačit nejdůležitější tady pro mě teďka metrika bude
průměr jsem to spouštěn jsem desetkrát enters takže to je průměty deseti testů
kdy se ta stránka zářil kofoly load it to znamená přestalo se točit kolečko načítáním
záložky
tak vlevo mám ten původního vesna nikde deseti sekund vpravo ten rozděleny jako a tam
jsem byly někde u pěti a půl sekundy
což je lepší než deset procent
nebudu váhat my sme tam nějaký kotyza optimalizovány ale
větší část tady toho instrumentů byla opravdu vtom rozdělení tím že sme ty kódy rozdělili
tak sme na některých stránkách ušetřili třeba padesát procent tou datovýho traffic ú
a ten kód je zamořeny pak menší nemusí se vůbec pracovat a podobně takže některý
stránky jsou to jako po může být
do stance třeba ke čtyryceti procentu některými nejsme nějakých deseti proud je to docela hezkej
výsledek zároveň se mně dáte vtom kódu jako pořádek a pokuď třeba máte f větší
platformu kterou ani celou neznáte tak tím mají určitě poznáte
no a když to rozdělíte tak srdeční tep jako přemejšlet by si měl jsem to
třeba nebo nějak před načítat nebo optimalizovat načítání že
tam ten vodopád tich jakou request u na server
je takovej o strašidelné jako něco na sebe čeká a něco n
tak neska exist rouna to metody a
jsou často
označován jako které něco doprav leťte konec perlou které kde
tak teďka p konvekce vyřeší jenom to že ten to spojení a tak jsem se
kde před naváže
takže to jako by simuluje tu
tu hlavní
vývodů toto dva je na tom starší prohlížeč
zajímavější je prasečák proud
ono to zní jako do stejně že něco budu před načítat
press h má třeba lepší po plus prohlížečích ale on je trošku jako takovej
jako pomůže to ale pomůže vám to načítat nějaký sem si nebo a se ty
který potřebujete až dalším kroku to znamená třeba dyž metod r rozdělit a víme že
zákazník s produktový stránky bude devadesát procent na kategorie klidně ten produkt
tak mi můžem něco před načíst když ten pro lidi se zlomeným
ten graphic se právě děje vtom okamžiku když se ten pro víš
když to p lout
ten řekne ale načtěme tenhle s těmi pelechu budu potřebovat
ale
viku jako by tak byly potřeboval skriptu nebo načte do toho do se stane a
šla sem tam budete pro ten skripta takže mám nemaj skripta který nastavuje externí javaskriptu
ale v hlavičce použil proud
tak emil interlovu
a
řeknu mu
já ten sketa potřebu a načti jo u štyřka naopak
pro za použiju
budu šťastnější zablešeným takže muset teprv stahovat
eště mocnější je ten
to znamená že když vy můžete uživatel bude na tu stránku kategorie tak já bych
si mohl načíst třeba jako celou
a nejlépe si kreslit dvouma pakáž von ani pude tak mu to jenom jako tak
podstrčit
a budu se tváří že to byl různě rychlý
no
to zní hrozně hezky a von by to jako na některých stránka dávalo smysl
ta technika
existuje listy měli funguje
je otázka jak je to efektivní hlediska jako toho prohlížeče kolikrát se trefíte že ten
uživatel tam von kde si byste rozmyslet
a pak jedna taková se průjezdu se kouknete napínají tak zjistíte že chrom to sice
vymyslela a začal podporovat
a pak jako to nějak zahodili
a získáte hádek touž asi je poměrně moderní nebo co vymysleli novějšího
voni nejslavnějšího nemysleli ale zjistili právě že jako to způsobuje nějaké problémy tou prohlížeči
a rozhodli se načetla mysim docela volt rozhodnutí že to teda radši jako udělaj vypli
kejty
a vymejšlí teď něco novýho který bude fungovat spíš jako které fetch
ale bude tato i další sem si navázaný na ten jeden
nevím jak sou s tím daleko byl že aktuálně ta tabulka dost vypadá takhle a
docela mě to zklamalo takže na to fajn vox jako taky nějak nereaguje je
překlady byste asi že to je škoda bude podporovat mohou
dobře to sme se snažili aby se něco stalo rychlejc nejš se stane normálně s
prohlížeči nikdy jako víme že
tak skill peněz tak kritické že vlastně c ú až někdy bude čas
a jenom to trochu jednoho třeba typicky jako vývojářům jedno kde se natáhnou kotců to
analytiky že ho analytiků to rozhodně do není tyto štěňátka
a ale pokud čili je třeba jako před mluví takže to fakír nikde kritický tak
můžete použít nějaký metodik věci lýka jej sync defer
možná jste slyšeli je to součástí teďka sem nastavil pětky
jako specifikace tak
a ke skriptů se přidá parametry sync nebude f a oba dělají to že jako
by
není mi typicky je ten s prahování skriptu blokující to znamená ta domu se pauzu
ne
začne sestavovat ski vykoná se ten skripta z pokračuje se vtom domů dál
a když dáte basic tak přitom stahování ste ten dondal parsuje až se dostane tak
se zavolá exekuce hnedka zase ten do se na chvilku zastavíme že ušetříte chvilku času
toho parsování read a tedy f tak mu říkáte je to fakt jedno vědecky vstane
šanci kopeš
to znamená docela zařadil ty fronty stáhne a chtěli chebem hodit
troš
předpokládáte že bude
použil to asi uplně nemusí třeba nás tady pět minut to na stránky odešel textem
veličin udělat instrukce omezovala proto ty analytici do nemají janičko potom dál
no tak už tady mluvím docela dlouho a eště sme se všude dostali k optimalizaci
teho kódu
a abyste mohl jeden kód optimalizovat měli byste je ten pravý funguje
a
to je takový do je dobrý věci zdra a zahrát si na prohlížeč to znamená
čteme za malá a říkám si co se asi takže je tam prohlížeči
já tady mám nějaký c seskok nebo na asi začne stala
tady mám třeba jaký to vlastě ale máma asynchronní tak já ho nebudu sto
a tady mám nějaký triggery a tak vám to bylo větší jede autem dostali do
tý filtr nastavování je se dostane co se něco děje
on si postupně vykreslí se stavíš paměti doma to byla zase není překvapením předpokládám
pokuď programujete webový stránky tak
dumě myslím si že zkratka kterou jste se naučili během prvního vlnovodu
já tady mám hele performer třinec dokonce nejen mluvil
no analýzy ste něco jako c se spolu
tu fu možná pro někoho by mohlo být překvapující ale je to logicky proces esko
který je prostě rozházených tom souboru úplně jako ale malá
tak ono se musí tak nějak sestavit ano se sestaví p do stejnýho s nebo
podobnýho stromu jako ten dokument
vytvoří se ten se svou
no a dohromady to vytvoří nějaký jenda tedy
už tady vtom okamžiku prohlížeči často dělají nějakou optimalizaci to znamenají znamená že to na
pasou na sebe zjistí že posters eska sebe se použila tak dělají že tam není
nebo zjistí že nějak je element je displej nám tak vono to vede na tý
zase vůbec zadanou třeba rozděle z displej na je lze byly ty jeden mezi built
jeden vtom render který bude moci vyrenderuje
ale vlastně tam není to není jen vědět
a
jak jsem říkal že jako ten styl který se nepoužívá nezapomenou
co když a najednou začnu používat tím že přidáme jakou třídu ú
nějakým a elementů a ta třída předtím se nepoužívat jako nástupce se svou váhou nějakou
není úplně nebo vypočte v tom rendered ideu zahozená no a tam dochází k nějaký
de kalkulaci stylu není to teda jenom tenhle případy to případ je třeba když se
ptáte na velikosti elementů
a podobně
zase ty developer tu s na tom pomůžou je sou tomu taková krásná fialová barva
a ta říká tady jsem dělal hroznou malý a když tam hrozná magie trvale různě
dlouho tak byste se měli zamyslet otomar je bylo
zjisti to není tak jednoduchý můžete zistí že vtom skriptu se někde v cyklu ptáte
třeba na velikost elementů
není to dobrý nápad
sou různý seznamy těch metod který prostě způsobujou tady ten r float
a jak sem říkal je to jakékoliv dotaz na velikost
je to dotaz na velikost okna je to dotaz na
jiné text
na fokus a podobně
seš třeba seznamy kterým se říká c je sestry gers
cože nekrajním vypočtení je tam spousta css
atributů a vysvětlení co se děje když aplikujete co to byl již musím dělat jestli
se jenom překreslí
jestli tam překreslí i následující elementy protože jsou na tom závislý a podobně
no ale jsoucna ještě no tam zvolit enko
ono to totiž není často potřeba
a
když se kouknete
co když si vyhubili té optimalizaci kódu
se tam začnou lidi hádat o tom jestli for cyklus rychlejší takle nebo takle
jestli operace na celé stream že nejlepší dělat tečkou plusem nebo string konkrét
nebo použít nějakou super knihovnu která tvrdí že nejrychlejší na světě
jestli lepší velký
malých modul nebo míň velkej modul javaskriptu jestli je lepší neska používat barva nic nebo
const
a jsou to opravdu mikro optimalizace to znamená jestli těm něco získáte
tak stařenkou semiformálně špatně napsaný
abyste k tomu došli tak s testovali velmi
získat těm mikrosekundy pokud to nedělat f cyklu to znamená neslyšíte vykreslování měli milionů nějakých
malých teče na kam hlasu třeba víte že tam máte nějaký matematicky operace tak se
tím a simple zabývat nemusíte
takový případ
nikdy nevěšte ten benchmarků co se tam všichni s nima volání na webu
za prvý každý prohlížeč je to jiný typ prohlížeče se optimalizují sami otcové
alfréde fax optimalizuje for cyklus jinak než pro a podobně takže tam třeba vyhrává let
filmu vyhrává dyž se neptáte pokaždý na délku toho pole který procházíte a podobně
jeden příklad ze života našeho když jsme
potřebovali javaskriptu
zjistit velikost okna a dělo se to dokonce f cyklu a docela často
ne otázky se to muselo být ale prostě dělo a první věc zvětšení blok ovoce
jak to dělat co nejefektivněji x napíšete supermyš má
který vám řekne že jake levity rušený pomalejší protože to dělal pomalý s nejspíš to
kombinuje všechny tady ty tři metody poctím
ještě se to samo rozhodne nějaká
ale třeba nerovnic který se zdá viď nejrychlejší nebo
client víc tedy o kousek pomalejší byste teda podle toho benchmark vlasy použili
no
je množina reálných stránce
ten performs pak může bejt úplně jinej protože jak ten jiné list tak ten kvantit
způsobuje právě trefilo u toho c stezka musí se přepočítávat stroj znáš to jsem těla
cyklu
tak ten prohlížeč jako
se trošku zapotí
když to match média
cože dokument match média a normální media kulis
mám řekne sto vyhovuje nebo ne
ten to grafu nezpůsobuje pošramocenou zeptat l prohlížeče a vlastně vyhodnotit se skoro byl sošek
oni se způsobí
takže pokud vám stačí todle a uděláte to cyklu tak je to docela nebo
no a máte najednou třeba ze sto milisekundový jo nějakýho cyklu asi ten deseti milisekundový
ale kdybyste věřil jenom tady tomu benchmarků
tak se k tomu nikdy nenastane
další takovej sebe příklad benchmarků a jakým nevěřit jakékoliv benchmark na frame velky
a dostáváme se právě k tomu r t
nemyslim protože nejrychlejší dycky budete ve vlastním životem prohlížecího neumí kdybyste se to z optimalizovány
sami protože víte co děláte tak vyhrajete
existuje něco jako l princip
když chcete optimalizovat
ne optimalizujete proto abyste se mohli chlubit že máte nejrychlejší pokud polem optimalizujete pro uživatele
to znamená
dejte jim vědět že se něco děje
mějte rychlý animace jejich výraz podzim na jejich požadavky
no
a tohle datové tak osm s tam forma měli protože oni nám pomůžou vyřešit problémy
který máme
jsou to moci nástroje ale nikdo nevyřeší všechny vaše problém pokud nedělá té sociální síť
kde je že prostě milióny záznamu
tak asi nepotřebujete super tady je to
a teď máme závi push fotku rauš vidím že sem asi před lehce
když sem včera přemejšlet že to zakonči tak jsem šel zrovna přes barák tak já
jsem tam tady ten super název shodou okolností nedaleko b a c party vennův abys
tam uvidíme
a ten název nepřišel úplně listi vystihující pro dnešní částice je a to je jedna
ta rozmanitosti protože vy těch knihoven máme tolik
že je děleno to je ten že hostit a dyž mu nebem hrozně tak ty
knihovny nebo něco z jako ty užívat rozumně
a to všechno
jak jsem se mi ste jestli máte na čas na dotazy
bohužel ne a napsal byste mi nějaký
děkuju za tu přednášku na dotazy už můžu máme prostor můžete kdyžtak zajíc dominikem osobně