#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