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

Miniﬁkace #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> ...

CSS & JavaScript připojujte externě <head> <link rel="stylesheet"
type="text/css" href="all.css"> </head>

CSS & JavaScript připojujte externě <html> <body>
<script> $('#container') .click(function(e) { // ... }); </script> </body> ...

CSS & JavaScript připojujte externě <script src="all.js"></script>

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 fotograﬁí příliš narůstá velikost

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

Vektorová graﬁka

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 graﬁce,
která se přes něj načte

Content Delivery Network (CDN) •  Určitě využijete pro načtení frameworků
•  Pozor na práci oﬀ-‐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 Modiﬁed

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í

Optimalizace webových aplikací

More Decks by Ondřej Mirtes

Other Decks in Technology

Featured

Transcript