42
@LukeFrake Luke Frake Driving down site speed and why it is important.

Driving down site speed and why it is important

Embed Size (px)

Citation preview

Luke FrakeDriving down site speedand why it is important.

@LukeFrake

@LukeFrake

Name my talkParagraph about the talkBrief introduction for Luke to say

https://images.unsplash.com/photo-1473042904451-00171c69419d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=8526530b838d3ce07e3742cdc32751ab

People compare youto your competitors

@LukeFrake

@LukeFrake

Speed has always been important, but peoples habits are changing, they expect everything faster.

https://images.unsplash.com/photo-1472220625704-91e1462799b2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=0249a45183cb35f272287f23c43932a1

People compare youto everybody else

@LukeFrake

@LukeFrake

Speed has always been important, but peoples habits are changing, they expect everything faster.

https://unsplash.com/search/computer?photo=GwVmBgpP-PQ

Peopleexpectspeed

@LukeFrake

@LukeFrake

Speed has always been important, but peoples habits are changing, they expect everything faster.

https://unsplash.com/search/computer?photo=GwVmBgpP-PQ

47% of users expect your websiteto load in under 2 seconds- http://bit.ly/2eOQvQD

@LukeFrake

@LukeFrake

http://www.bitcatcha.com/blog/2015/6-reasons-why-website-speed-matters-how-amazon-would-lose-1-6-billion-if-it-slowed-down/

https://images.unsplash.com/uploads/14120938606568dde6e2b/c9e42240?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=8503eb2dfdc0050a19072d0df4aa75ab

40% would leave your website if itloads slower than 3 seconds- http://bit.ly/2eOQvQD

@LukeFrake

@LukeFrake85% of users expect a mobile website to load asfast or faster than a desktop website- http://bit.ly/2eOQvQD

@LukeFrake

@LukeFrake

People know what it means to touch

@LukeFrake

@LukeFrake

People know what it means to touch something. Theyve touched things their whole lives. In the analog world, its instantaneous

Where to start?

@LukeFrake

@LukeFrake

https://images.unsplash.com/photo-1468645547353-56d325bb57ff?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=707cbe3f133dbb809c7f3295194b3442

SpeedBudget

@LukeFrake

@LukeFrake1 secondFirst load on a 3g connection

@LukeFrake

@LukeFrake1 second faster

@LukeFrake

@LukeFrakeBenchmarkcompetitors

@LukeFrake

@LukeFrakeTooling

@LukeFrake

@LukeFrake

https://images.unsplash.com/reserve/oIpwxeeSPy1cnwYpqJ1w_Dufer%20Collateral%20test.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=2f682168e7b0af70811c914882b0750b

@LukeFrake

@LukeFrake

web page test aimed at showing to their web developerWhy should you be using - Get an understanding and setting a benchmark

@LukeFrake

@LukeFrake

web page test aimed at showing to their web developerWhy should you be using - Get an understanding and setting a benchmark

@LukeFrake

@LukeFrake

web page test aimed at showing to their web developerWhy should you be using - Get an understanding and setting a benchmark

Driving downthe seconds

@LukeFrake

@LukeFrake

https://images.unsplash.com/photo-1431499012454-31a9601150c9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=3687f9b01d0a2a980c264367321184c1

What makesup a website?

@LukeFrake

@LukeFrake

https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=9d40ed55e2929fabf5e2fd86af5fe5e0

5% fonts

@LukeFrake

https://blogs.akamai.com/2015/06/performance-matters-more-than-ever.html

10% video

@LukeFrake22% code

@LukeFrakeRemoveold code

@LukeFrake

@LukeFrake63% images

@LukeFrakeOptimise images

@LukeFrake

@LukeFrake

5968 x 33581000 x 563

4.7mb 320kb93%

@LukeFrake

@LukeFrake

100% quality 70% quality320kb56kb82%

@LukeFrake

@LukeFrake4.7mb56kb

0.1%

@LukeFrake

@LukeFrakeTons more options

@LukeFrake

@LukeFrake

https://images.unsplash.com/photo-1447069387593-a5de0862481e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=45ac3ef78f838bdba234f87db62177f2

Page speed audit

@LukeFrake

@LukeFrake

AMP

@LukeFrake

@LukeFrake

Images - Retina when and where. Image quality explained. Showing stepped images against the saveRemoving - explainedRender - What does render mean?

You can fake web performance

@LukeFrake

@LukeFrake

@LukeFrake

@LukeFrake

@LukeFrake

@LukeFrake

@LukeFrake

@LukeFrake

https://s-media-cache-ak0.pinimg.com/originals/79/8c/0c/798c0cd60ce835b9de2016a89febade4.gif

@LukeFrake

@LukeFrake

https://newevolutiondesigns.com/images/inspiration/replace.gif

@LukeFrake

@LukeFrake

https://s-media-cache-ak0.pinimg.com/originals/f7/8f/30/f78f30ba63d407ee6ca4331362cd0e76.gif

1 second at a time

@LukeFrake

@LukeFrake

https://images.unsplash.com/photo-1429042007245-890c9e2603af?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=52951d0ab40597bcc8f43478f350724a

1 second at a time

@LukeFrake

@LukeFrake

https://images.unsplash.com/photo-1429042007245-890c9e2603af?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=52951d0ab40597bcc8f43478f350724a

Images are your quick win

@LukeFrake

@LukeFrake

https://images.unsplash.com/photo-1429042007245-890c9e2603af?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=52951d0ab40597bcc8f43478f350724a

Slight of hand

@LukeFrake

@LukeFrake

https://images.unsplash.com/photo-1429042007245-890c9e2603af?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=52951d0ab40597bcc8f43478f350724a

goo.gl/QTx5QQ

@LukeFrake

@LukeFrake

@LukeFrake

https://images.unsplash.com/photo-1446501356021-84cf6b450d07?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=9daebff25f53363e459fac920b940ea1