Performance

Performance
Measurements and
Optimization
Why You Should Care

Page Load Optimizations

JavaScript Optimizations

CSS Optimizations

Saturday, January 26, 13

About Me

• Ynon Perek

• ynon@ynonperek.com

• Slides are available from:

• http://ynonperek.com


Awesome Resources

• Ilya Grigorik’s free performance crash course
http://www.igvita.com/2013/01/15/faster-websites-crash-course-on-web-
performance/

• Web Performance Today Blog:
http://www.webperformancetoday.com/

• Steve Souders Blog and Books:
http://stevesouders.com/


Facts & Stats

“ 47% of consumer s expect a web ”
load in 2 seco nds or less.
page to


Facts & Stats

“ 73% of m obile interne t users say
ncountered a website
”
th at they’ve e
tha t was too s low to load.


Facts & Stats

y In Page-
“ Just One S econd Dela
Can Cause 7% Loss In
”
Load
Customer C onversions


How Load Time Affects Conversion Rate

• Glasses Direct measured



• Strangeloop measured



• Wallmart measured



• Google measured

Duration
Type Of Delay Delay (ms) Impact
(weeks)

Pre Header 50 4 -

Pre Header 100 4 -0.2%

Post Header 200 6 -0.59%

Post Header 400 6 -0.59%


How Load Time Affects Your Mood

• Harris Interactive asked

• 84% had problems.

• Here’s what they did


Web Performance: You Should Care

• Page load time affects your bounce rate

• Page load time affects time on site

• Page load time affects conversion

• Page load time affects user satisfaction


Web Performance Stats (Retailers)

Website Load Time (In Seconds)

Barnes & Noble 4.88

Grainger 4.65

Buy.com 5.03

Amazon.com 6.31

Data from: http://www.keynote.com/keynote_competitive_research/
performance_indices/mobile/retail/index.html

What Is Page Load Time

Page Load Starts Here

GET data

Here It Is


What Affects Page Load

• Network

• Server Code

• Number Of HTTP Requests

• Size Of HTTP Responses

• How Fast Is The Browser

• Browser Decisions


Demo: Page Load cnn.com


cnn.com Takeaways

• Site loading involves GETting over 100 resources

• Most data is still images

• Browser cache is misleading


Bandwidth Vs. Latency


Demo: Testing Latency With httping


Q&A


Optimizing Page
Load
HTTP Basics
Reduce # Of Requests
Reduce Distance
Reduce Size


HTTP Basics

• Verify using HTTP 1.1 and Keepalive

• Verify using GZip compression

• Can use chrome or:

• curl -I --compressed http://yoursite.com


Using CSS Sprites To Reduce Images

• Group all small images into one large image called sprite sheet

• Use CSS code to “cut” the relevant pieces of the sprite sheet


Using CSS Sprites To Reduce Images

• Demo: Use http://www.spritecow.com/ to generate a new sprite sheet


Inline Images Using Data URLs

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAIAAADb
+IFwAAAABmJLR0QA/wD/AP+gvaeTAAADLklEQVR4nO2dwZLjMAgFN1vz/
7+cuemiCgZEx5lU9zGWLecVIghw/Hg+n/+E4f/dN/DNKC6I4oIoLojigiguiOKC/Lw68Hg8Tq67h8/
rgkFkHYw5vJ/MjU1dcKHlgiguyEu3sCjtj/
clFiy6zHrcx2S8SmbwzuE33dFyQRQX5NotLIKFECyodWidnlm8e9gQOJw1JhgcnBWM2Sm5Di0XRHFB
Cm6hR+AEdkeRifAz63qf4paagJYLorgguFsoRQI9/5DhFv+g5YIoLkjBLfQWVGk9BruA3sa/
d89TrkPLBVFckGu3MFUC6BFsB6Y+WYx/
Uy0XRHFBHjc24o2HBJk8hpuIL0FxQWb6FjIlgMPTS1Nk6hfB4F6wsaPlgiguyPuihU
+L8HsrvRThaLkgigty7RZKbQb7mKnTS66jt8CDO+yh5YIoLkghWpgKv3dKRcxe71Mv/
DhMTWi5IIoL8tItlNZ1wBs2CIdTTFVFd7RcEMUF6eQWev3Dh7uAqX3K4SFzC5+C4oIU+hZ6oX4vnu/
VQXbG26ozky60XBDFBbneRAQcJvNvaUMqxSHBPWfQckEUF6RQieg9crgYTxWWnNJhwjNzaEfLBVFc
kEI702FFr/fkY+n0Ke80VQzVckEUF6TwNyxTVb/
SlQ8zGwGHpRajhZtRXJDOJqL0w801HvTueadXzcyg5YIoLsj1JiKzsjKHenF4L6LYL9j7FuYWPhfFBRkuUA
anZyg5it5ch5WI/RNzC/eguCCFLsfMmN7CjO7vrE5a2p70vnKAlguiuCDDf9o2lf0rTZEpmgT
+oddamUHLBVFckM4zEeMNRcF1pmqFU49dlCbVckEUF+RltBBk7TKDF+8sWQaTHp5ul
+PHobgg73urVIapZEUpnuH2O1ouiOKC4G+VKqXvuL6FqSuXog4tF0RxQfC3SgXLp5TiG28qGC
+a7Gi5IIoLgr8+pkRp7zDlKGx+/
pMoLshnuYXeHy9MeYPxLmgtF0RxQfC3Si2mfrinkpnBpL2ay46WC6K4IDe8Var37BXXwDD
+PPVCywVRXJA73yr19Wi5IIoLorggiguiuCCKC6K4IIoL8gvjNAP/KJZ4+gAAAABJRU5ErkJggg==


Inline Images Using Data URLs

• A data url is a base64 encoded version of the image bytes

• Data URL basic form:

data:[<mediatype>][;base64],<data>

• Use server side code or http://websemantics.co.uk/online_tools/
image_to_data_uri_convertor/ to generate

• From Unix:
echo -n 'data:image/png;base64,';base64 image.png


Why DataURLs are not awesome

• They make your HTML ugly

• They’re not saved in browser cache

• No IE7 support

• Image blocks page load

• Larger in size (about 1.333%)


Use CSS3 Instead of Images

• Replace onions with border-radius

• Use css gradients instead of images

• Use box-shadow instead of images

• Tools:

• http://css3generator.com/

• http://www.colorzilla.com/gradient-editor/


Use CSS Shapes Instead Of Images

<body>
<div class="shape triangle-up red"></div>
<p></p>
<div class="shape triangle-down red"></div>
</body>


Use CSS Shapes Instead Of Images

.shape {
border: 30px solid;
width:0; height: 0;
}

.red { border-color: red; }

.triangle-up {
border-left-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
}

.triangle-down {
border-left-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
}


More CSS Shapes
http://css-tricks.com/examples/ShapesOfCSS/


Old Browsers Fallback

• Old browsers may not support CSS shapes

• Use Modernizr to detect and fallback

.no-js .glossy,
.no-cssgradients .glossy {
background: url("images/glossybutton.png");
}

.cssgradients .glossy {
background-image: linear-gradient(top, #555, #333);
}


Combine Scripts And Stylesheets

• Combine multiple JS into a single script

• Combine multiple CSS ﬁles into a single stylesheet

• Ideal: Use one stylesheet and one script per page

• Tools:

• http://yui.github.com/yuicompressor/

• http://yeoman.io/


Avoid Redirects At All Cost

• Redirects add another request but with no value

• Worst kind: Mobile Redirects

• Demo: d.co.il


Avoid Redirects At All Cost

• Better Way: Oﬀer users to download the app
from your web page

• iOS 6 has the option built-in (smart app banners):

<meta name="apple-itunes-app" content="app-id=366977202">

• Or use the jQuery Plugin:
http://jasny.github.com/jquery.smartbanner/#android


Use Cache To Reduce # Of Requests

• No Request is better than fast request File size doesn’t matter
• Browser Cache Is Your Friend


Cache Headers

• HTTP 1.0 Had an Expires header:

Expires: Thu, 15 Apr 2010 20:00:00 GMT

• HTTP 1.1 Added Cache-Control header:

Cache-Control: max-age=315360000


Caching vs. Inlining

• Use external CSS and JavaScript for most web sites to allow caching

• Use inline CSS and JavaScript for pages that are only visited once (for
example: landing pages)

<style> <head>
h1 { <title>Canvas Color Picker</title>
color: red
} <link rel="stylesheet" href="style.css" />
</style> </head>


Reduce Distance

Closer => Lower RTT


Reduce Distance

• Consider using a local server

• Use a CDN

• Demo: Loading jQuery from CDN vs. Non-local server


Reduce Size

• Minify JS and CSS

• Use GZip Compression

• Split Payload

• Optimize Images


Help Thy Browser
Flush Early
Place Scripts At The Bottom
Place Stylesheets At The Top
Shard Dominant Domains


Flushing Early

• Web browsers try to do their best to load resources in parallel.

• Send some data ﬁrst, and browser will start rendering

<html>
<head>
<title>HeadFirst</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<p>Intro Text</p>

</body>
</html>

Demo
https://gist.github.com/4636526


Flush Early Caveats

• Verify presence of “Transfer-Encoding=chunked” header

• Verify header is long enough

• Chrome has a minimum threshold of ~2KB

• Safari has a minimum threshold of ~1KB

• Verify output buﬀering is oﬀ in php
(or use ob_ functions)


Place Scripts At The Bottom

• Scripts block rendering when they execute

• By placing them at the bottom, browser can display prior data

• Demo Blocking Script Tag

• Note: Some browsers won’t start downloading ANYTHING while script tags
are in queue


Defer vs. Async Scripts

• Defer downloads in parallel, executes by order

• Async downloads in parallel, executes when ready

• Use async if possible

• Best: Use require.js


Place Stylesheets At The Bottom

• No rendering is done before <html>
stylesheets are ready <head>
<title>HeadFirst</title>
<link rel="stylesheet"
• Placing them at the top hints
href="style.css" />
the browser to download ﬁrst
</head>

• Alternative: FOUC. Demo <body>
http://stevesouders.com/hpws/ <p>Intro Text</p>
</body>
css-fouc.php
</html>


Shard Dominant Domains

• Don’t automatically shard

• Find critical path using https://
developers.google.com/speed/
pagespeed/

• Sharding adds DNS work

• Usually 2 domains are enough


Optimize Site
Responsiveness
How To Measure Responsiveness
Use Short Event Handlers
Prefer CSS3 Transitions over JS
Avoid Expensive JS
Simplify CSS Selectors


Measuring Responsiveness

• Use Chrome Developer Tools, Timeline tab

• Keep event handlers < 100ms


Use JSPerf But Don’t Take It Too Seriously


Binding Vs. Delegating

• When you have a long list or table, should you bind event handler on the
parent or on each element ?


Binding vs. Delegating

• Event handler is faster if bound directly on the element

• Adding new elements is faster if bound on the container

• Flip side: Less event handlers => Less memory

• Tip: Be cautious with delegation


Prefer CSS3 Transitions Over JavaScript

• They’re hardware accelerated div {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
• They don’t involve event handlers -o-transition: all 0.2s;
transition: all 0.2s;
}
• They’re easier to write


Avoid Expensive JavaScript

• A browser saves its data in multiple data models

• Some JavaScript calls require syncing these models

• Find and mitigate using Chrome Developer Tools

• Demo


Simplify CSS Selectors

• Browsers need to match CSS rules to elements

• The less matching attempts => The more eﬃcient is the rule

div {
overflow: hidden;
}
<body>
<div></div>
<div class="one"></div>
<div id="two"></div>
</body>


Selectors Ordered By Complexity
• Most Simple: ID Selectors ( #wrapper { ... } )

• Class Selectors ( .item { ... } )

• Type Selectors ( a { ... } )

• Adjacent Sibling ( h1 + #wrapper { ... } )

• Child Selectors ( #toc > li {...} )

• Descendants Selector ( ul li { ... } )

• Universal Selector ( * { ... } )

• Attribute Selector ( [href=”#home”] { ... } )

• Pseudo-Classes / Elements ( a:hover { ... } )


How Browsers Read Selectors

• Selectors are parsed right-to-left

• #top-menu a {...} ﬁnds all a elements on the page, and checks if they
are under a #top-menu element

• Try to use the most speciﬁc right part of a rule

• a.menu-item is better


CSS Selectors
Guidelines
Avoid Universal Rules
Don’t Qualify ID Selectors
Don’t Qualify Class Selectors
Use Speciﬁc Rules
Avoid Descendants Selectors
Avoid Tag-Child Selectors
Use Less CSS


Avoid Universal Rules

• Try to minimize using selectors other than:
ID, class and tag

a[href $= “pdf”] { ... } a.pdf { ... }


Don’t Qualify ID Selectors

• It’s simply unnecessary

• There’s only one element with that ID

div#wrapper #wrapper


Don’t Qualify Class Selectors

• Extend the class name to be more speciﬁc instead

• Classes are indexed, so class-only search is faster

ul.tasks .task-list


Use Speciﬁc Rules

• Long lists give the browser a hard time

ol li a .list-anchor


Avoid Descendant Selectors

• They’re expensive, because search is done right-to-left

ol li a .list-anchor


Avoid Tag Child Selectors

#menu > li > a .menu-item


Minimize CSS Rule Content

• Can set a property on the parent and have it inherited to contained elements

ul li { ul {
list-style-image: ... list-style-image: ...
} }


Now Forget Everything


Performance Bottom Line

• “97% of the time: premature optimization is the root of all evil”
--- Donald Knuth

• Only optimize what you need, when you need it

• Consider performance from day 1

• Measure business impact using Google Analytics


Thanks For Listening

• Ynon Perek

• ynon@ynonperek.com

• Slides are available from:

• http://ynonperek.com


Performance

More Related Content

What's hot (12)

Viewers also liked (20)

Similar to Performance (20)

More from Ynon Perek (20)

Performance