Pagini web mai rapide

Pagini web mai rapide alex.burciu amazon.com

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

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/

http://romania.amazon.com/

http://romania.amazon.com/

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.

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ă.

?

clickToPageLoaded = serverRenderTime + clientPageLoaded

Î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

Interacțiune browser-server

serverRenderTime

clientPageLoaded

Response transfer RTT Unload Redirect Cache DNS TCP SSL

DOM PL Click

HTTP Flushing

serverRenderTime

clientPageLoaded


DOM PL Click

clickToServer

serverRenderTime

clientPageLoaded


DOM PL Click

unload

<script type=“text/javascript”> window.onpagehide = null; window.onbeforeunload = null; window.onunload = null; </script>

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> .

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> .

Caching în browser

clientPageLoaded

Unload Redirect Cache

DOM PL Click

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

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>

ecx.images-amazon.com







Controlul Fluxului în TCP

• 1 segment = 1460 octeți

• RTT = ~1000 ms

• cwnd = 3

• 4KB în 2s

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

Răspunsul HTTP

serverRenderTime

clientPageLoaded


DOM PL Click

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

Cascada HTTP

Reducem numarul de resurse

• Combinare resurse:

• Sprite-uri

• Imagini inline

• Concatenare JS si CSS

• Caching și prefetching

Paralelizare cereri HTTP

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

Randarea răspunsului HTML

serverRenderTime

clientPageLoaded


DOM PL Click

Î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

Unelte pentru investigare

• Firebug

• YSlow

• PageSpeed

• HTTPWatch

• dynaTrace AJAX

• WebpageTest

• Wireshark

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

EOF

“Premature optimization is the root of all evil.” — Donald Knuth

Pagini web mai rapide

Technology

Transcript of Pagini web mai rapide