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