webperf.txt

webperf.txt

ilya grigorik
-chrome:
techniques:
70% of time is network.
not really bound by bandwidth.
bandwidth chart. --> look at that on chrome.
look at connection view (tcp connection did we open for this page) -- lag time
minimize the RTT -->
pre-resolve
preconnect
prefetch
pre-render
--------------
preresolve all dns for top 10 sites for user.
-------------
use a prerender tag
tag put on the page, so that the chrome can prerender
--> page visibility event in chrome and all other browsers.  -- javascript
chrome preloader --> when you have blocking resources.
write resources on html markup. don't insert them
XHR has lower priorities.  -- use html tags!
prefetching - pre-rendering. --- try to schedule things much earlier.

1. DNS -- mark critical sub resources
really high priority
<link rel='dns-prefetch' href='hostname.com'>

high priority
<link rel='subresource' href='critical/app.js'>

lower priority
<link rel='prefetch' href='checkout.html'>

lower priority -- must attach the page viewablity event on chrome

<link rel='prerender' href='thanks.html'>

inject the link tag at the head of the document.


===================================================================
THIRD PARTY PERFORMANCE TALK
@guypod

tags on pages. 
SPOF - single point of failure. 
why we don't do $.ready(function()..) --> 
    there is something special about ready event to the user
    the spinning wheel stops, there is an expectation that
    the page will just be 1/2 a second to see the rest of the content. 
    we try not to mess with that experience. 

resource contention

SPOFOMATIC extensions --> chrome.
create iframe -- make it hidden, then add a script tag

---> There is no guaranteed that you will run before onload. 
script can have an onload event. --- attach to that instead. 
---> window.document.write = function(x) {console.log('x');} --> you can 
rewrite it and overload it. --- it takes a lot of time ti figure that out. 

resource priority spec. 

Timing-Allow-Origin header. 

===================================================================
colt macanlis
#perfmatters 

Need to be using the GPU brah!

software rasterization

Permutation of all the css parameters fucks up with rendering time. 

Assingned layer promotions.  -- Use this ! w00t.  -- make
everything resident on the gpu. 

animation layer promotion/demotion

Do not resize images on the client side. resize on the server side.

responsive image resize methodologies -- revisit. how gpu tiling works

-- in Chrome. ===> show layer borders
-- continous page repainting... use that for formats. 

@duhroach

===================================================================

as you approach the buying funnel the speed matters. get faster as 
you get closer to the action -- interesting thing to test. 

==================================================================

@apodelko

===================================================================

jmeter for lead and recording all the data. 

==================================================================
-- background rendering for third party systems 


-------------------------------------
connection sharing. 
-------------------------------------

Qubism.js --> from square. for drawing graphs. 
webrtc --> video, audio, 
hockey.io --> peeeer to peer 

----------------------------------------------------------------