Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Once More, With Feeling at Code 2016 in Sydney

Once More, With Feeling at Code 2016 in Sydney

As an industry, we’re starting to recognize that what really matters for performance is how fast the experience feels. While this seems like a relatively minor revelation, in reality it requires a significant shift in the way we approach speed online: everything from the way we measure to the optimizations we use. Let’s look at how to reframe performance on the web, and what techniques and technologies are out there to help us create experiences that feel fast and frictionless.

Presented at Code 2016 in Syndey, Australia on July 28, 2016.

Tim Kadlec

July 28, 2016
Tweet

More Decks by Tim Kadlec

Other Decks in Technology

Transcript

  1. A B

  2. 100ms 1000ms Feels instantaneous & maintains a connection between action

    & reaction. Anything longer and the user loses focus on their task.
  3. <html> <head> <meta charset="UTF-8"> <title>Hey there</title> <link rel="stylesheet" href="style.css" />

    <script type=“text/javascript” src=“jquereactugular.js“> </script> </head> <body> <h1>Super awesome site</h1> <div id=“main"> <p>Super interesting stuff, I'm sure.</p> </div> </body> </html> 1
  4. <html> <head> <meta charset="UTF-8"> <title>Hey there</title> <link rel="stylesheet" href="style.css" />

    <script type=“text/javascript” src=“jquereactugular.js“> </script> </head> <body> <h1>Super awesome site</h1> <div id=“main"> <p>Super interesting stuff, I'm sure.</p> </div> </body> </html> 2
  5. <html> <head> <meta charset="UTF-8"> <title>Hey there</title> <link rel="stylesheet" href="style.css" />

    <script type=“text/javascript” src=“jquereactugular.js“> </script> </head> <body> <h1>Super awesome site</h1> <div id=“main"> <p>Super interesting stuff, I'm sure.</p> </div> </body> </html> 3
  6. <html> <head> <meta charset="UTF-8"> <title>Hey there</title> <link rel="stylesheet" href="style.css" />

    <script type=“text/javascript” async src=“jquereactugular.js“ ></script> </head> <body> <h1>Super awesome site</h1> <div id=“main"> <p>Super interesting stuff, I'm sure.</p> </div> </body> </html>
  7. <html> <head> <meta charset="UTF-8"> <title>Hey there</title> <link rel="stylesheet" href="style.css" />

    <script type=“text/javascript” async src=“jquereactugular.js“ ></script> </head> <body> <h1>Super awesome site</h1> <div id=“main"> <p>Super interesting stuff, I'm sure.</p> </div> </body> </html>
  8. <html> <head> <meta charset="UTF-8"> <title>Hey there</title> <style type=“text/css”> //critical css

    inlined and minimized </style> <script type=“text/javascript” async src=“jquereactugular.js“ ></script> </head> <body> <h1>Super awesome site</h1> <div id=“main"> <p>Super interesting stuff, I'm sure.</p> </div> </body> </html>