Our next event is on the 21st of May.

Speakers:

Andre Wyrwa

TCP, HTTP & mobile Performance

A short trip into the lower layers of networking and their implications for initial page load performance over mobile carriers. You will hear about RTT, congestion windows, chunked transfer encoding, how HTTP2 will help and how to utilise that knowledge when developing PHP applications served to mobile devices.

Static sites & blog automation

Jack Skinner

With all the bells and whistles of a CMS, we forget about simple, static HTML. In this talk reintroduce you to the concept of a static site, how to build one (using PHP of course) and deployment techniques to manage it. Examples include using sculpin, markdown, twig, CI and CDN's.

A common case

first content after ~4s

75% of users have stated that they'd never come back to a page they had to wait for for more than 4s

Google

loss of flow of thoughts occurs after 1s

Jakob Nielson Group

Our next event is on the 21st of May.

Speakers:

Andre Wyrwa

TCP, HTTP & mobile Performance

A short trip into the lower layers of networking and their implications for initial page load performance over mobile carriers. You will hear about RTT, congestion windows, chunked transfer encoding, how HTTP2 will help and how to utilise that knowledge when developing PHP applications served to mobile devices.

Static sites & blog automation

Jack Skinner

With all the bells and whistles of a CMS, we forget about simple, static HTML. In this talk reintroduce you to the concept of a static site, how to build one (using PHP of course) and deployment techniques to manage it. Examples include using sculpin, markdown, twig, CI and CDN's.

So what if?

first content after ~1s

next event

21st May

...loading content...

Our next event is on the 21st of May.

Speakers:

Andre Wyrwa

TCP, HTTP & mobile Performance

A short trip into the lower layers of networking and their implications for initial page load performance over mobile carriers. You will hear about RTT, congestion windows, chunked transfer encoding, how HTTP2 will help and how to utilise that knowledge when developing PHP applications served to mobile devices.

Static sites & blog automation

Jack Skinner

With all the bells and whistles of a CMS, we forget about simple, static HTML. In this talk reintroduce you to the concept of a static site, how to build one (using PHP of course) and deployment techniques to manage it. Examples include using sculpin, markdown, twig, CI and CDN's.

Or maybe?

first content after ~1s

keeping the user entertained

network time = amount of data / bandwidth

relatively complex page ~ 30 KB

@ 5 Mbit/s = ~ 600 KB/s : ~ 0.05 seconds

@ 384 kbit/s = ~ 47 KB/s : ~ 0.65 seconds

doesn't explain 4+ seconds

Bandwidth

maximum amount of data that can travel through the network in 1 second

Round-Trip Time

the time it takes for a single bit of data to travel from client to server and back

NOT included in bandwidth metric

Round-Trip Time

mobile average: 200ms

What does that mean for our mobile page?

Initial Page Request

Redirects

Budget

But that's not all

Internet Protocol Suite (TCP/IP)

• Application Layer (HTTP)
• Transport Layer (TCP)
• Internet Layer (IP)
• Data Link Layer (PPP)
  incl. physical layer: Bandwidth, Round-Trip Time

TCP Flow Control

200ms per Roundtrip

TCP Congestion Control

Congestion

more data enters the network than it can handle

RFC 2001

TCP Slow Start

• start by sending 10 segments (congestion window)
• doubled on successful ACK
• halved on missing ACK
• linear increase (+1/RT) above slow start threshold

TCP segments

(aka packets)

10 * 1460 b = 14600 b

How do we do that?

HTTP/1.1 - Chunked Encoding

• remove Content-Length header
• add Transfer-Encoding: chunked
• disable gzip compression
  (gzip compression is one layer above HTTP)
• use php flush()

Finally some PHP code

// emit a chunk
$content = ob_get_clean();     // get the content so far
$length = strlen($content);    // calculate length
echo dechex($length) . "\r\n"  // emit length in hex + CRLF
echo $content . "\r\n";        // emit content + CRLF
flush();                       // flush to browser
ob_start();                    // start a new buffer
                        

// terminate the page with a 0-length chunk
echo '0' . "\r\n";
echo "\r\n";
                        

inline what you need

defer all other assets

<html>
    <head>
        <meta />
        <!— … —>
        <style>
            /*
            all styles we need for the initial page
            BASE64 encoded images
            */
        </style>
        <script type=“text/javascript”>
            /*
            include initial js
            */
        </script>
    </head>
    <body>
        /* initial content */
        <?php
        // send first chunk
        ?>
        /* keep processing */
    </body>

</html>
// send terminating chunk
                        

HTTP/2

• single connection
• framed transfer
• server-side push
• header compression