#BoostB2B
Speed = SalesA fraction of a second is all it can take to make
your visitors happy
Presented by Aran Reekswww.evosite.co.uk
@EvositeAran
#BoostB2B
Creating exceptional digitalexperiences for 15 yearsWe have helped hundreds of organisations improve their eCommerce websites and digital products.
Established in 2001
Talented team of 30
Over 250 active clients
700+ web solutions delivered
Multi award winning agency
#BoostB2B
Who am I?
● Head of Client Strategy at Evosite● Web Developer● Developed > 50 eCommerce solutions● Passionate about optimisation
#BoostB2B
The objectives of today's talk...By the end of this session, you will:
▪ Understand why web page speed is critical
▪ You’ll have a basic understanding of what makes up a web page
▪ Have a solid understanding of how to start optimising your website
▪ Create a solid plan to pass onto your developers, or to implement yourself
#BoostB2B
Let’s begin!
#BoostB2B
Why is speed important?
#BoostB2B
£1.73bnSlow loading websites cost retailers £1.73bn in lost sales each year.
QuBit
#BoostB2B
47%Of people expect a web page to load in two seconds or less.
Akamai
#BoostB2B
40%Will abandon a page that takes more than 3 seconds to load.
Akamai
#BoostB2B
52%Claim that quick page speeds are important for their loyalty.
Akamai
#BoostB2B
7%Drop in conversions caused by a one second delay in page-load.
TagMan
#BoostB2B
“You may have heard that here at Google we're obsessed with speed, in
our products and on the web. As part of that effort, today we're including a new signal in our search ranking algorithms:
site speed.”Google - Matt Cutts, Google Search Quality Team
#BoostB2B
How is the web growing?
#BoostB2B
2.24MBAverage web page size
April 2016 - httparchive.org
#BoostB2B
+12%Average web page size increase in the last year!
April 2016 VS April 2015 - httparchive.org
#BoostB2B
99Average requests per page load
April 2016 - httparchive.org
#BoostB2B
+13.29%Increase in MOBILE traffic we’ve observed in the last year
Evosite’s Global tracking - evosite.co.uk
#BoostB2B
Just how much does page speed affect you?
#BoostB2B
Which site would you rather use?
#BoostB2B
But what’s a web page made up of?
#BoostB2B
A typical web page is made up of the following...Essential page resources
▪ HTML
▪ CSS
▪ JavaScript
▪ Web fonts
Your page content▪ Images
▪ Videos
#BoostB2B
HTMLHTML sets out the structure of a web page and puts your content on the page.
#BoostB2B
CSSCSS makes your web pages look pretty.
#BoostB2B
JavaScript
JavaScript allows you to add interactivity to your web pages.
#BoostB2B
JavaScript powering a Supernav example
#BoostB2B
JavaScript inline form validation example
#BoostB2B
JavaScript deferred image loading example
#BoostB2B
JavaScript Image gallery (hover zoom)
#BoostB2B
JavaScript powered tooltip example
#BoostB2B
Fonts on the web
#BoostB2B
Web Safe Fonts
Arial - The quick brown fox jumps over the lazy dog
Times New Roman - The quick brown fox jumps over the lazy dog
Georgia - The quick brown fox jumps over the lazy dog
Verdana - The quick brown fox jumps over the lazy dog
Comic Sans - The quick brown fox jumps over the lazy dog
#BoostB2B
Web FontsWhat’s a web font comprised of?
Web Font file formats● TTF● WOFF● WOFF2● EOT● SVG
#BoostB2B
How can we speed up our web pages?
#BoostB2B
Caching
#BoostB2B
Minificationdiv.two_column {
width: 50px;height: 50px;float: left;display: block;
}
div.two_column a {display: block;width: 50px;height: 50px;
}
span {clear: both;float: none;display: block;background-color: red;color: green;
}
#BoostB2B
Minificationdiv.two_column {
width: 50px;height: 50px;float: left;display: block;
}
div.two_column a {display: block;width: 50px;height: 50px;
}
span {clear: both;float: none;display: block;background-color: red;color: green;
}
div.two_column{width:50px;height:50px;float:left;display:block}div.two_column a{display:block;width:50px;height:50px}span{clear:both;float:none;display:block;background-color:red;color:green}
#BoostB2B
Tools for Minification
CSS Minificationcssminifier.com
JavaScript Minificationjscompress.com
#BoostB2B
Compression
The average website has 54 images per page
#BoostB2B
Compression
Lossless VS Lossy
#BoostB2B
The best FREE tool for compressing your imagestinypng.com
#BoostB2B
GZIP Compression
Google’s homepage was reduced in size by 65.16% as a result of GZIP
#BoostB2B
CDN
A content delivery network (CDN) is a system of distributed servers (network) that deliver webpages and other Web
content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery
server.”
“
#BoostB2B
Reduce the number of resources
…
#BoostB2B
Measuring speed▪ Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
▪ Pingdom Toolshttp://tools.pingdom.com
▪ YSlowhttp://yslow.org/
#BoostB2B
How fast is your website?Would anyone care to put forward their website for us to work through together?
www.your-website.com
#BoostB2B
The evolution of the web▪ 1997: HTTP/1.1
▪ 2012: SPYD
▪ 2015: HTTP/2
#BoostB2B
5 minutes...▪ Run your own site
through Google Pagespeed Insights
#BoostB2B
30 minutes... ▪ Speak with your developers about where speed improvements can sit within your development roadmap
#BoostB2B
15 minutes... ▪ Track and measure the effects