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
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
Follow us on twitter: twitter.com/wallacode
And github: github.com/wallacode
Alex Kneller
@alex_kneller
alexander_k@walla.net.il
Web performance
By Walla Code
