Pagini web mai rapide

2,837 views

Published on

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.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,837
On SlideShare
0
From Embeds
0
Number of Embeds
590
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Pagini web mai rapide

  1. 1. Pagini web mairapidealex.burciu amazon.com
  2. 2. 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
  3. 3. 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/
  4. 4. 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.
  5. 5. 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ă.
  6. 6. clickToPageLoaded = serverRenderTime + clientPageLoaded ?
  7. 7. Încărcarea unei paginii webper W3C Navigation TimingPrompt App for redirect DNS TCP Request serverRenderTime cacheunload unload Response generation and transfer clientPageLoaded DOM Processing onLoad
  8. 8. Interacțiune browser-server serverRenderTime clientPageLoadedClick PL Unload RTT Response transfer DOM Redirect Cache DNS TCP SSL
  9. 9. HTTP Flushing serverRenderTime clientPageLoadedClick PL Unload RTT Response transfer DOM Redirect Cache DNS TCP SSL
  10. 10. clickToServer serverRenderTime clientPageLoadedClick PL Unload RTT Response transfer DOM Redirect Cache DNS TCP SSL
  11. 11. unload<script type=“text/javascript”> window.onpagehide = null; window.onbeforeunload = null; window.onunload = null;</script>
  12. 12. Cerere/răspuns HTTPGET / HTTP/1.1Host: www.amazon.comUser-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12 Safari/534.30Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-US,en;q=0.8Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3Cookie: key=value;HTTP/1.1 200 OKDate: Mon, 01 Aug 2011 18:49:50 GMTServer: UnknownContent-Type: text/html; charset=ISO-8859-1Set-cookie: key=new_value; path=/; domain=.amazon.com; expires=Tue Jan 01 08:00:01 2036 GMTTransfer-Encoding: chunked<html>...</html>.
  13. 13. Evitați redirectările HTTPGET /tags HTTP/1.1Host: www.amazon.comHTTP/1.1 301 Moved PermanentlyDate: Mon, 01 Aug 2011 19:00:09 GMTLocation: http://www.amazon.com/gp/tagging/cloudContent-Length: 246Content-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.1Host: www.amazon.comHTTP/1.1 200 OKDate: Mon, 01 Aug 2011 19:00:09 GMTTransfer-Encoding: chunked<html>…</html>.
  14. 14. Caching în browser clientPageLoadedClick PL Unload DOM Redirect Cache
  15. 15. Validarea cache-ului HTTPGET /images/logo.gif HTTP/1.1Accept: */*Referer: http://www.amazon.com/If-Modified-Since: Thu, 23 Aug 2010 17:42:04 GMTUser-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1;)Host: www.amazon.comHTTP/1.1 304 Not ModifiedContent-Type: text/htmlServer: UnknownContent-Length: 0Date: Thu, 01 Oct 2008 12:00:00 GMT
  16. 16. 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>
  17. 17. Controlul Fluxului în TCP• 1 segment = 1460 octeți• RTT = ~1000 ms• cwnd = 3• 4KB în 2s
  18. 18. 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
  19. 19. Răspunsul HTTP serverRenderTime clientPageLoadedClick PL Unload RTT Response transfer DOM Redirect Cache DNS TCP SSL
  20. 20. 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
  21. 21. Cascada HTTP
  22. 22. Reducem numarul de resurse• Combinare resurse: • Sprite-uri • Imagini inline • Concatenare JS si CSS• Caching și prefetching
  23. 23. Paralelizare cereri HTTP
  24. 24. 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
  25. 25. Randarea răspunsului HTML serverRenderTime clientPageLoadedClick PL Unload RTT Response transfer DOM Redirect Cache DNS TCP SSL
  26. 26. Î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
  27. 27. Unelte pentru investigare• Firebug• YSlow• PageSpeed• HTTPWatch• dynaTrace AJAX• WebpageTest• Wireshark
  28. 28. 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
  29. 29. EOF “Premature optimization is the root of all evil.” — Donald Knuth

×