Performance

is the name of the game

Alex Kneller

@alex_kneller

alexander_k@walla.net.il

Why should I care

Faster sites lead to better user retention.

Internet speed on mobile device is still not fast enough.

Google looks on performance in his rating system.

Let the numbers talk

3 must know rules

to improve HTML5 banner load time

1. Minify sources

2. Make fewer HTTP requests

3. Put stylesheets at the top and scripts at the bottom

Minify sources

Minify JavaScript , CSS and HTML files.
Reduce the use of third party libraries.
Use GZIP.
Compress images.

Minify sources

Compress Images

Choose right quality.
Compress images with tools.
Use SVG where it possible.
Use CSS3 where it possible.

Compress Images

Example of banner compressed with https://tinypng.com/

Before 110.3kb

After 61.8kb

Saving 44% !

SVG vs Images

SVG

PNG

Pure CSS logo

Less HTTP requests

Combine JavaScript files.
Use sprites.
Leverage cache.

Style sheet at the top

Scripts at the bottom

<!doctype html>
<html lang="en">
    <head>
          <meta charset="utf-8">
          <title>The HTML5 Banner</title>
          <link rel="stylesheet" href="css/styles.css?v=1.0">
    </head>
    <body>
        <!-- html code -->
        <script src="js/scripts.js"></script>
    </body>
</html>

Do not guess it, Test it!

Use browser developer tools (F12)
Chrome extension Yslow
http://www.webpagetest.org/

Just nice demo to end up with

You can find this slides at: slides.com/wallacode

And github: github.com/wallacode

Alex Kneller

@alex_kneller

alexander_k@walla.net.il