pagini web mai rapide
DESCRIPTION
80% din timpul de incarcare al paginilor web se petrece pe frontend. Vom studia interactiunea dintre browser si serverul web ca sa vedem cum il putem reduce.TRANSCRIPT
![Page 1: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/1.jpg)
Pagini web mai rapide alex.burciu amazon.com
![Page 2: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/2.jpg)
Despre mine
• Absolvent al facultății de Informatică din cadrul Universității ”Alexandru Ioan Cuza” din Iași și al Masterului de Inginerie Software din cadrul aceleiași facultăți.
• Software Development Manager, Amazon.com
• Domenii de interes:
• Tehnologii Web
• Securitatea informației
• Interacțiune om-calculator
![Page 3: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/3.jpg)
Amazon Dev Center România
• Community Tags, Entity, Client-Side Metrics
• Platform Analytics
• Web Analytics
• Automated Targeted Merchandising
• Distributed Job Scheduling
• A9 Platform Search
• AWS Simple Email Service
• Internship-uri studenți: http://romania.amazon.com/
![Page 4: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/4.jpg)
Motivație
• 80-90% din timpul de încărcare a paginilor web este consumat pe front-end.
• Viteza de încărcare a paginilor îmbunătățește experiența utilizatorilor și mărește timpul petrecut de aceștia pe site.
• Poate fi un factor decisiv față de competiție.
• Ajută la SEO, fiind folosit în algoritmii pentru Page-rank.
![Page 5: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/5.jpg)
Metrici performanță web
• Pentru optimizarea încărcării paginii, trebuie întâi să știm ce anume încercăm să îmbunătățim și cum măsurăm performanța.
• Definiții metrici: • serverRenderTime = timpul petrecut de serverul web din
momentul în care acesta primește o cerere HTTP până când ultimul octet din HTML este generat și trimis către client.
• clientPageLoaded = timpul petrecut de browser din momentul în care a primit primul octet de HTML (generat de server) până când evenimentul ”load” din arborele DOM este declanșat.
• clickToPageLoaded = timpul petrecut de utlizator din momentul în care acesta a solicitat o pagină web până când aceasta este încărcată.
![Page 6: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/6.jpg)
?
clickToPageLoaded = serverRenderTime + clientPageLoaded
![Page 7: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/7.jpg)
Încărcarea unei paginii web per W3C Navigation Timing
Prompt for
unload
App cache
redirect DNS TCP Request
unload
onLoad
serverR
end
erTim
e
clientPageLo
aded
Response generation
and transfer
DOM Processing
![Page 8: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/8.jpg)
Interacțiune browser-server
serverRenderTime
clientPageLoaded
Response transfer RTT Unload Redirect Cache DNS TCP SSL
DOM PL Click
![Page 9: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/9.jpg)
HTTP Flushing
serverRenderTime
clientPageLoaded
Response transfer RTT Unload Redirect Cache DNS TCP SSL
DOM PL Click
![Page 10: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/10.jpg)
clickToServer
serverRenderTime
clientPageLoaded
Response transfer RTT Unload Redirect Cache DNS TCP SSL
DOM PL Click
![Page 11: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/11.jpg)
unload
<script type=“text/javascript”> window.onpagehide = null; window.onbeforeunload = null; window.onunload = null; </script>
![Page 12: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/12.jpg)
Cerere/răspuns HTTP
GET / HTTP/1.1 Host: www.amazon.com User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12 Safari/534.30 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-US,en;q=0.8 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 Cookie: key=value; HTTP/1.1 200 OK Date: Mon, 01 Aug 2011 18:49:50 GMT Server: Unknown Content-Type: text/html; charset=ISO-8859-1 Set-cookie: key=new_value; path=/; domain=.amazon.com; expires=Tue Jan 01 08:00:01 2036 GMT Transfer-Encoding: chunked <html>...</html> .
![Page 13: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/13.jpg)
Evitați redirectările HTTP GET /tags HTTP/1.1 Host: www.amazon.com HTTP/1.1 301 Moved Permanently Date: Mon, 01 Aug 2011 19:00:09 GMT Location: http://www.amazon.com/gp/tagging/cloud Content-Length: 246 Content-Type: text/html; charset=iso-8859-1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>301 Moved Permanently</title> </head><body> <h1>Moved Permanently</h1> <p>The document has moved <a href="http://www.amazon.com/gp/tagging/cloud">here</a>.</p> </body></html> GET /gp/tagging/cloud HTTP/1.1 Host: www.amazon.com HTTP/1.1 200 OK Date: Mon, 01 Aug 2011 19:00:09 GMT Transfer-Encoding: chunked <html>…</html> .
![Page 14: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/14.jpg)
Caching în browser
clientPageLoaded
Unload Redirect Cache
DOM PL Click
![Page 15: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/15.jpg)
Validarea cache-ului HTTP GET /images/logo.gif HTTP/1.1 Accept: */* Referer: http://www.amazon.com/ If-Modified-Since: Thu, 23 Aug 2010 17:42:04 GMT User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1;) Host: www.amazon.com HTTP/1.1 304 Not Modified Content-Type: text/html Server: Unknown Content-Length: 0 Date: Thu, 01 Oct 2008 12:00:00 GMT
![Page 16: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/16.jpg)
DNS
• Serviciu ce rezolvă domenii în adrese IP.
• Q: Care este adresa IP pentru ecx.images-amazon.com? • A: ecx.images-amazon.com este la 216.137.41.52.
<head> <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="http://ecx.images-amazon.com"> </head>
![Page 17: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/17.jpg)
Controlul Fluxului în TCP
• 1 segment = 1460 octeți
• RTT = ~1000 ms
• cwnd = 3
• 4KB în 2s
![Page 18: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/18.jpg)
Recomandări TCP Slow Start
• Fiecare octet din primele segmente este critic
• Headere HTTP minimale
• Conexiuni pentru resurse în primele 3 segmente, în ordinea mărimii
• DNS prefetching
• Flush devreme
• cwnd := 10
• Folosiți un Content Delivery Network pentru RTT mai bun
![Page 19: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/19.jpg)
Răspunsul HTTP
serverRenderTime
clientPageLoaded
Response transfer RTT Unload Redirect Cache DNS TCP SSL
DOM PL Click
![Page 20: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/20.jpg)
Dimensiunea răspunsului
• Content-Encoding: gzip
• 70% reducere pentru HTML
• Micșoram conținutul JS și CSS prin:
• Externalizarea scripturilor in-line
• Minimizare și obfuscare
• Compilare JS
• Eliminarea duplicatelor
• AJAX pentru încărcare întârziată a componentelor necritice
• Optimizari imagini
![Page 21: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/21.jpg)
Cascada HTTP
![Page 22: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/22.jpg)
Reducem numarul de resurse
• Combinare resurse:
• Sprite-uri
• Imagini inline
• Concatenare JS si CSS
• Caching și prefetching
![Page 23: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/23.jpg)
Paralelizare cereri HTTP
![Page 24: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/24.jpg)
SPDY
• Protocol la nivelul aplicație pentru transportul conținutului web cu latențe minime
• Experiment Google, disponibil in Chrome
• Caracteristici:
• Multiplexare cereri HTTP folosind o singură conexiune TCP
• Prioritizare cereri HTTP
• Compresie headere HTTP
• Reducere cu până la 64% a timpului de încarcare
![Page 25: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/25.jpg)
Randarea răspunsului HTML
serverRenderTime
clientPageLoaded
Response transfer RTT Unload Redirect Cache DNS TCP SSL
DOM PL Click
![Page 26: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/26.jpg)
Îmbunătățiri DOM
• Eliminați redesenările • La fiecare stil nou, browserul aplică regulile CSS pe tot arborele
DOM
• CSS-ul trebuie mutat în <head>
• Simplificare CSS și selectori eficienți
• Mutați scripturile JS ce blochează randarea • Doar simpla descărcarea oprește desenarea paginii
• JavaScript se execută cu DOM-ul înghețat așa cum s-a randat până atunci
• Se recomandă ca acesta să fie mutat cât mai jos în pagină sau încărcarea asincronă
• Optimizare cod JS
• Încărcarea progresivă a funcționalității
![Page 27: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/27.jpg)
Unelte pentru investigare
• Firebug
• YSlow
• PageSpeed
• HTTPWatch
• dynaTrace AJAX
• WebpageTest
• Wireshark
![Page 28: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/28.jpg)
Resurse suplimentare
• TCP and the Lower Bound of Web Performance, John Rauser 2010
• High Performance Web Sites, Steve Souders 2007
• Even Faster Web Sites, Steve Souders 2010
• SPDY: An experimental protocol for a faster web, Google
• Velocity Conference 2011 Talks
![Page 29: Pagini web mai rapide](https://reader033.vdocuments.net/reader033/viewer/2022052900/55619bb1d8b42ae27d8b59c8/html5/thumbnails/29.jpg)
EOF
“Premature optimization is the root of all evil.” — Donald Knuth