Web

Performance &

Optimization

Dustin Tauer - Easel Solutions

Dustin@easelsolutions.com

@dtauer - #infotec15

http://slides.com/dtauer/infotec15/live

Page Size

1.018 MB

April-2012

1.95 MB

April-2015

http://httparchive.org/trends.php

RWD Bloat

http://daverupert.com/2014/07/rwd-bloat/

"Expect RWD to add ~10%"

- Dave Rupert

RWD Bloat

http://www.filamentgroup.com/lab/weight-wait.html

"More weight doesn't mean more wait"

- Scott Jehl

Where do I start?

Admit you have a problem

Tools

What does my site cost?

Webpage Test

Google Page Insights

ySlow

whatdoesmysitecost.com

webpagetest.org

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

Don't forget about your browser developer tools

Let's Optimize

Requests - CDN

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

//instead of this
<script src="js/jquery-1.11.2.min.js"></script>

Requests - Minify/Uglify

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

//instead of this
<script src="//code.jquery.com/jquery-1.11.2.js"></script>

Requests - Concatenate

//this
<script src="js/all.min.js"></script>

//instead of this
<script src="js/core.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

(with build tools)

Requests - Async

//this
<script async src="js/all.min.js"></script>

//instead of this
<script src="js/all.min.js"></script>

(use loadJS instead: github.com/filamentgroup/loadJS)

Page Construction

<html>
    <head>
        <link rel="stylesheet" href="css/styles.min.css">
        <script>
            //critical JS like Analytics
            //Mustard-cutting async requests
        </script>
    </head>
    <body>
        <h1>Page content</h1>
        <div>
            ...
        </div>
        <script src="js/all.min.js"></script>
    </body>
</html>

Assets - SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 359 136" enable-background="new 0 0 359 136" xml:space="preserve">
<g id=“Logo”>
	<g id="_x39_gGN4A.tif">
		<g>
			<path fill="#FFFFFF" d="M2,108.7c2-2.6,3.8-5.3,5.6-8c6.5-9.5,13-18.9,19.4-28.4c5.3-7.7,10.5-15.4,15.8-23.1
				c0.8-1.1,1.6-2.2,2.3-3.4c0.6-1,0.9-0.5,1.4,0.1c2.7,4,5.5,8,8.2,12c5.9,8.7,11.9,17.4,17.8,26.1c4.3,6.3,8.6,12.6,12.9,18.8
				c4.7,6.8,9.3,13.6,14,20.4c0.1,0.2,0.2,0.3,0.3,0.6c-0.5,0-0.8,0-1.1,0c-8,0-15.9,0-23.9,0c-0.6,0-1.1-0.1-1.6-0.7
				c-6.3-9.4-12.7-18.7-19.1-28c-2.8-4-5.5-8.1-8.3-12.1c-0.4-0.5-0.5-0.8-1-0.1c-4.5,6.7-9.1,13.4-13.7,20c0,0.1,0,0.1-0.1,0.2
				c0.4,0.3,0.8,0.1,1.2,0.1c6.3,0,12.7,0,19,0c1,0,1.6,0.3,2.2,1.2c4.2,6.3,8.4,12.6,12.6,18.9c0.1,0.1,0.1,0.2,0.2,0.3
				c-0.2,0.3-0.6,0.2-0.9,0.2c-17.4,0-34.8,0-52.1,0c-0.9,0-1.3-0.5-1.7-1.1c-3-4.4-6-8.8-9-13.2c-0.1-0.2-0.3-0.3-0.5-0.5
				C2,109,2,108.9,2,108.7z"/>
			<path fill="#FFFFFF" d="M66.7,15.2c4.4,6.4,8.7,12.7,13.1,19.1c1.3,1.9,2.5,3.7,3.8,5.6c0.4,0.6,0.4,1,0,1.5
				c-4.7,6.7-9.3,13.5-13.9,20.3c-0.7,1.1-1.5,2.1-2.2,3.3c-0.5,0.8-0.7,0.7-1.2,0c-2.3-3.4-4.7-6.8-7-10.2
				c-3.2-4.6-6.3-9.2-9.5-13.8c-0.5-0.7-0.2-1.1,0.1-1.6c3.9-5.6,7.7-11.3,11.6-16.9c1.6-2.4,3.3-4.8,4.9-7.2
				C66.5,15.2,66.6,15.2,66.7,15.2z"/>
			<path fill="#FFFFFF" d="M87.8,45.4c1.4,2,2.7,4,4.1,5.9c4.3,6.3,8.7,12.6,13,19c5,7.3,10,14.6,14.9,21.9
				c3.6,5.3,7.2,10.5,10.8,15.8c0.5,0.7,0.5,1.1,0,1.8c-3.1,4.4-6.1,8.8-9.1,13.3c-0.4,0.6-0.9,0.9-1.7,0.9c-3.9,0-7.8,0-11.7,0
				c-0.8,0-1.2-0.3-1.6-0.9c-5.7-8.4-11.5-16.8-17.3-25.2c-6-8.8-12.1-17.7-18.1-26.5c-0.5-0.7-0.6-1.2-0.1-1.9
				c5.5-8,11-16,16.4-23.9C87.5,45.6,87.6,45.6,87.8,45.4z"/>
		</g>
	</g>
	<g>
		<path fill="#FFFFFF" d="M183.9,46.1l33.9,62.5H205l-9.5-18.8h-36.6l-9.7,18.8h-11.8l33.7-62.5H183.9z M191.9,82.8l-14.4-29.2h-0.2
			l-14.7,29.2H191.9z"/>
		<path fill="#FFFFFF" d="M238.3,46.1v62.5h-11.5V46.1H238.3z"/>
		<path fill="#FFFFFF" d="M273.7,46.1L301,98.7l27.4-52.5h15.8v62.5h-10.9v-52H333l-27.1,52h-9.8l-27.1-52h-0.2v52h-10.9V46.1H273.7
			z"/>
	</g>
</g>
</svg>

Assets - Sprites

<style>
.services2{
    background: url(../images/services/sprites.png) no-repeat;
    display:block;
    background-position: -100px 0;
    width: 78px;
    height: 91px;
}
</style>

<div class="services2"></div>