Web

Performance and Future

Yan (Peter) Li / Sep 2015

http://10.197.38.188/velocity

https://github.microstrategy.com/pages/yali/web-performance-and-future

View online

http://10.197.38.188/velocity/pdf

Download PDF

Hello, I'm Yan

Joined MSTR in July 2008 Work on Usher Network Manager Love Web

Topic

• Web Performance Tuning
• Brief Introduction to HTTP/2
• A little on HTTPS

Hope it helps!

Do you know web?

Page Size (top 1000)

http://httparchive.org/trends.php

Page Size

Network speed

http://www.webperformancetoday.com/2012/04/02/mobile-versus-desktop-latency/
http://chimera.labs.oreilly.com/books/1230000000545/ch07.html#_brief_history_of_the_g_8217_s

Faster web sites

What rules/best practices do you know?

YAHOO! Best Practices

1. Make Fewer HTTP Requests
2. Use a CDN
3. Add Expires or Cache-Control Header
4. Gzip Components
5. Put Stylesheets at Top
6. Put Scripts at Bottom
7. ...

https://developer.yahoo.com/performance/rules.html

Google PageSpeed insights

https://developers.google.com/speed/pagespeed/insights/

Page load timeline

Similar graph: http://www.w3.org/TR/navigation-timing/#processing-model

Redirections

Minimize Redirections

• Links/forms
• HTTP 3XX status codes
• HTML meta refresh

  <meta http-equiv="refresh" content="5; url=http://example.com/">

• JavaScript

  
  window.location.reload(true); // document.location?
  window.location.replace("http://www.z.cn");
  window.location.assign("http://www.z.cn");
  window.location.href = "http://www.z.cn";
  window.location = "http://www.z.cn";
  window.history.forward();
  window.history.back();
  window.history.go(-1);
                                  

DNS

DNS lookup

www.google.com

1. Browser/OS cache
2. Intranet cache
3. ISP/local cache
4. Root name server
5. .com name server
6. google.com name server

How fast is your local DNS?

chrome://histograms/DNS.ResolveSuccess

• Good: <30ms
• Average: 30-100ms
• Ouch: 100ms+

HttpDNS

• 1st request: Http gets nearest server IP
• Subsequent: nearest server IP

全局精确流量调度新思路-HttpDNS服务详解
App域名劫持之DNS高可用 - 开源版HttpDNS方案详解

DNS prefetch

                            <link rel="dns-prefetch" href="www.microstrategy.com">
                        

Hint browser to pre-resolve these names

Supported: Chrome, Firefox, Safari, IE9+

chrome://dns/

TCP

TCP 3-way handshake

See TCP 3-Way Handshake (SYN,SYN-ACK,ACK)

TCP Slow Start

TCP Slow Start

Wikipedia: Slow Start

Tuning initcwnd for optimum performance

Linux TCP/IP tuning for scalability (tcp_slow_start_after_idle)

Request & Response

Caching

Caching Tutorial by Mark Nottingham

Check your pages with REDbot

Domain Sharding

http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/

Resource Prefetch

                            
<link rel="prefetch" href="next-page.css">
<link rel="subresource" href="critical.js">
                            
                        

• prefetch
  • Low-priority download of resources to be used on subsequent pages
  • Chrome, Firefox, Safari, IE9+
• subresource
  • Early loading of resources within the current page
  • Chrome only

Rendering

Inline critical resources

http://www.smashingmagazine.com/2015/08/understanding-critical-css/

Alva Cheung

“Load non-critical features asynchronously”

Facebook - The technology behind preview photos

Prerender

                            <link rel="prerender" href="http://www.microstrategy.com">
                        

Initiate background pre-render of entire page

Supported: Chrome, Firefox

chrome://net-internals/#prerender

chrome://predictors/

JavaScript rendering

Why care?

AngularJS, React

Inline Caching

Speed up runtime method binding by remembering the results of a previous method lookup directly at the call site

https://en.wikipedia.org/wiki/Inline_caching

Inline Caching can be easily broken

function addTwoThings(thing1, thing2) {
    return thing1 + thing2;
}

addTwoThings(1, 2);
addTwoThings(100, 200); /* fast */
addTwoThings('a', 'b'); /* slow */
                        

                            
function Dog(name) {
    this.name = name;
}

var dog1 = new Dog('Jim'); /* hidden class C1 */
var dog2 = new Dog('Bin'); /* hidden class C2 */
dog2.gender = 'male';
                        

CSS rendering

• Reflow
  • relocate elements
  • change content
  • window resize
• Repaint
  • change color
  • change background color
  • change visibility

Event debouncing/throtting

onresize, onscroll...etc

Use the DOM change queue

                            
var $div = $('#content')
var elements = ['a', 'b', 'c', 'd'];
for(var i=0,l=elements.length; i<l; i++) {
    $div.append(elements[i]);
}
                            
                        

var $div = $('#content')
var elements = ['a', 'b', 'c', 'd'];
for(var i=0,l=elements.length; i<l; i++) {
    // one line of evilness
    var a = $(window).scrollTop;
    $div.append(elements[i]);
}
                        

Painting performance

• Minimize DOM depth
• Minimize z-index depth
• Minimize CSS rules
• Use faster selectors
  • Avoid descendant selector
  • Structure selector right to left

    .class ul li a { color: blue; }

• Use expensive properties sparingly

  border-radius; box-shadow; transform,filter; :nth-child; position:fixed;

• Don't use universal selectors

  *; [disabled]; [type="text"]

Improving CSS Performance

Prepare for HTTP/2

IETF RFC 7540

HTTP/2 Aims

1. Reduce latency
2. Reduce total number of TCP connections
   i.e., reduce number of open sockets
3. Maintain compatibility with HTTP/1.1
   clients and server
4. Maintain same usability as HTTP/1.1
   i.e., can be used wherever we use HTTP/1.1
5. Better web security

HTTP/2 Features

1. Multiplexing
   Multiple asynchronous HTTP requests over a single TCP connection.
2. Server Push
   Multiple responses for single request
3. Header Compression
   Compress HTTP headers along with content.
4. Request prioritization
   While making multiple HTTP requests to a same domain they can be prioritized.
5. Binary Protocol
   HTTP/2 is binary protocol whereas HTTP/1.1 is text protocol.

HTTP/2 Complete Tutorial

HTTP/2 Compatibility

GET / HTTP/1.1
Host: server.example.com
Connection: Upgrade, HTTP2-Settings
Upgrade: h2c
HTTP2-Settings: <payload>
                                        

HTTP/1.1 200 OK
Content-Length: 243
Content-Type: text/html

...
                                        

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: h2c

[ HTTP/2 connection ...
                                        

See IETF RFC 7540

Mulplexing in HTTP/2

• HTTP/1.1 Pipelining
  • Multiple HTTP requests are sent on a single TCP connection asynchronously
  • Server responses synchronously
  • First-in-first-out
  • Head-of-line (HOL) blocking, see Wiki
• HTTP/2 Mulplexing
  • Streams and frames
    Every HTTP/2 request and response is given a unique id called as stream id
  • Server also responses asynchronously
  • The request and response both happen parallelly

Server push in HTTP/2

• Server sends multiple responses for a single request
• A client can request that server push be disabled
• A client cannot push

IETF RFC 7540, Section 8.2 Server Push

Header compression in HTTP/2

• A technique of not sending the same headers again
• Client and server maintain a headers table containing the last response and request headers
• For the first request or response they send all the required header
• For subsequent requests client and server omit headers which are same as the previous request or response

IETF RFC 7541, HPACK: Header Compression for HTTP/2

HTTPS

HTTP + SSL/TLS = HTTPS

• Authentication
  Am I talking to who they claim to be?
• Data integrity
  Has anyone tampered with the data?
• Encryption
  Can anyone see my conversation?

Equally Important!

Encyption

• Handshake: asymmetric crypto
• Application data transfer: symmetric crypto

Transport Layer Security

Is HTTPS slow?

• Extra CPU costs
• Extra roundtrips

IsTlsFastYet.com:

“TLS has exactly one performance problem: it is not used widely enough.
Everything else can be optimized.”

Dive deeper: YouTube - Is TLS Fast Yet?

HTTPS

• Get a 2048-bit TLS certificate
• Eliminate both Yello Triangle and Shield
• Use latest version of Kernal, OpenSSl and Apache/Nginx
• Use SPDY3.1 & HTTP/2
• Use protocol relative URIs

  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

• HTTP URL --> 301 --> HTTPS URL
• Apply HSTS (see next slide)

Mozilla Wiki
Qualys SSL Labs

HTTP Strict Transport Security (HSTS)

                            Strict-Transport-Security: max-age=10886400; includeSubDomains
                        

Browser remembers (for specified max-age period) that it should automatically request HTTPS resources for this site and its subdomains.

HSTS eliminates HTTP --> HTTPS redirects.