optimalizace webových aplikací

Op#malizace webových aplikací

Ondřej Mirtes @OndrejMirtes Vašek Purchart

@VasekPurchart

Spojování souborů

•  reset.css •  layout.css •  typography.css •  naviga;on.css •  bu=ons.css •  forms.css •  tables.css •  editor.css

all.css

Minifikace #navigation ul { font-‐size: 24px; line-‐height: 40px; } #navigation ul li { padding: 0; } #navigation ul li a { border: 0; color: #333; } #navigation ul li a .count { font-‐size: 14px; color: #c41700; }

#navigation ul{font-‐size: 24px;line-‐height: 40px;}#navigation ul li{padding:0;#navigation ul li a{border: 0;color: #333;}#navigation ul li a .count{font-‐size:14px;color: #c41700;} #navigation ul li a:hover {color:#c41700;#navigation ul li ul{padding: 0;font-‐size: 18px;}#navigation ul li.active > a {color:#c41700;#navigation ul li:before{display: none;}select.submenu {display: none;}

CSS & JavaScript připojujte externě

<html> <head> <style> #navigation ul { font-‐size: 24px; line-‐height: 40px; } #navigation ul li { padding: 0; } ... </style> </head> ...


<html> <body> <script> $('#container') .click(function(e) { // ... }); </script> </body> ...

Kam připojit JavaScript?

•  Náročná blokující operace •  Těsně před </body> •  Prohlížeč dá při načítání přednost viditelným prvkům jako jsou obrázky

CSS sprites

CSS sprites

.question-‐mark-‐icon { width: 15px; height: 19px; background-‐image:

url(sprites.png); background-‐position:

-‐103px -‐172px; }

Obrázky s data URI

•  Zakódování obrázku do řetězce •  V Internet Exploreru s problémy

background-‐image: url(data:image/png;base64,iVBORw0KGgoAAAA...);

Opakující se pozadí

PNG

•  Bezeztrátová komprese •  Vhodný pro ikony a webdesign •  U fotografií příliš narůstá velikost

Vektorová grafika

•  CSS3 – kulaté rohy, barevné přechody, sZny •  SVG – obrázky zapsané v XML •  Sady ikon jako speciální fonty – Font Awesome

Vektorová grafika

Doporučení k obrázkům

•  V HTML by měly mít uvedené rozměry •  Zabrání se nechtěným skokům při načítání

<img src="image.jpg" width="150" height="100">

Doporučení k obrázkům

•  Barva pozadí by měla odpovídat grafice, která se přes něj načte

Content Delivery Network (CDN)

•  Určitě využijete pro načtení frameworků •  Pozor na práci off-‐line •  Pro vlastní sta;cké soubory – Amazon S3, CloudFront – Velcí hráči si budují vlastní CDN

•  Max. 2-‐6 souběžných požadavků na doménu – Řeší se rozložením na více subdomén

Obsluha sta#ckých souborů přes PHP

•  Jen při potřebě zabezpečení souborů pro přihlášené uživatele

•  Spouštění aplikace je náročné a prodlužuje odezvu

•  Server za nás implementuje např. navazování stahování

☠

Průběh načtení stránky

F12 tools

•  Firefox – Firebug (addon)

F12 tools

•  Chrome

Komunikace se serverem

Last-‐Modified, If-‐Modified-‐Since

•  První dotaz Response: Last-‐Modified: Fri, 3 May 2013 12:00:00 GMT

Last-‐Modified, If-‐Modified-‐Since

•  První dotaz Response: Last-‐Modified: Fri, 3 May 2013 12:00:00 GMT

•  další dotazy Request: If-‐Modified-‐Since: Fri, 3 May 2013 12:00:00 GMT

•  304 Not Modified

ETag, If-‐None-‐Match

•  První dotaz Response: ETag: "686897696a7c876b7e "

ETag, If-‐None-‐Match

•  První dotaz Response: ETag: "686897696a7c876b7e "

•  další dotazy Request: If-‐None-‐Match: "686897696a7c876b7e "

•  304 Not Modified

Expires

•  První dotaz: Response: Expires: Mon, 3 Jun 2013 12:00:00 GMT

Expires

•  První dotaz: Response: Expires: Mon, 3 Jun 2013 12:00:00 GMT

•  další dotazy Nic, pokud neexpirovalo

Cache-‐Control: max-‐age

•  První dotaz: Response: Cache-‐Control: max-‐age=2678400

Vyhnue se cachování

•  Cache-‐Control: no-‐cache •  staré Expires

gzip komprese

•  Pro HTML, CSS, JavaScript •  V .htaccess: <IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-‐javascript text/javascript application/javascript application/json </IfModule>

Chrome Audit

Ukládání dat u uživatele

Applica#on Cache

Web(local) storage

Web SQL

IndexedDB

Dynamické načítání obsahu

Vizuální zrychlení

Server

•  Návrh aplikace •  Volba frameworků •  Nastavení a volba serveru •  Op;malizace aplikačního kódu •  Opcode cache •  Cachování dat

Databáze

•  Databázové indexy •  Pozor na počet dotazů •  Stahovat jen potřebná data

optimalizace webových aplikací

Technology