O P T I M I S I N G F O R P E R F O R M A N C E

G E T T I N G F U L L S C O R E O N G O O G L E PA G E S P E E D , P I N G D O M A N D G T M E T R I X

T H O M A S B E N S M A N NL E A D D E V E L O P E R A N D S O L U T I O N S A R C H I T E C T M E T R O N E T A S - M E T R O N E T. N O

W H Y S P E E D M AT T E R S ?

• More returning visitors

• More page views

First impressions matter

W H Y S P E E D M AT T E R S ?

• More returning visitors

• More page views

• Google cares (SEO)

• When you know something could be better…

“Fast is better than slow.”

T E R M I N O L O G Y

S E R V E R T E C H

T E R M I N O L O G Y

• Nginx - known for speed and resource usage

• Varnish - used for caching and/or load balancing

• Apache - very common

• Google PageSpeed mod - Google’s module for Apache and Nginx

– A M A Z O N C T O , W E R N E R V O G E L S

“I’ve hugged a lot of servers in my life, and believe me, they do not hug you back. They hate you.”

C O M P R E S S I O NS A V I N G B A N D W I D T H

C O M P R E S S I O N

• Save bandwidth

• No difference in content

• Gzip

• mod-deflate (apache)

R E N D E R B L O C K I N GW H O D O E S N ’ T L I K E W A I T I N G I N L I N E ?

R E N D E R B L O C K I N G

• Scripts

• Styles

• The page has to wait

• Load CSS before JS

• Load JS in the footer

• Load JS async

M I N I F Y…K E E P I T S H O R T

M I N I F Y

• CSS, JS and HTML

• Reduced file sizes

• YUI Compressor

• Google PageSpeed mod for Apache and Nginx

O P T I M I S E I M A G E S

• ImageOptim (on your mac)

• Atomised with Grunt or Gulp

• Server-side optimisers (jpegtran, optipng/pngout)

• WordPress plugin (EWWW image optimizer)

• Google PageSpeed mod

G E T T I N G R E S O U R C E S W H E N N E E D E D I F N E E D E D

Lazy loading

P L U G I N : B J L A Z Y L O A D

R E D U C E R E Q U E S T SW H Y M A K E I T D I F F I C U LT F O R O U R S E L F ?

R E D U C E R E Q U E S T S

• Why keep asking the server?

• Combine files

• Inline small files

• Reduce request

P L U G I N : M I N I T B Y K A S PA R S D

Keep your content in stock

C A C H I N G P L U G I N S

• W3 Total Cache

• Batcache

• WP Super Cache

• Quick Cache

C A C H I N G E N G I N E S

• APC (PHP < 5.5)

• Memcache

• Redis

C A C H I N G S O L U T I O N S

• Varnish

• Nginx

• Cloudflare (external)

C L I E N T S I D E C A C H I N G

• Setting HTTP headers

• expires

• cache-control/pragma

• Version numbers in name

x script.js

x script.js?v=1.2

✓ script-1.2.js

M O D _ PA G E S P E E D

• Caches

• Combines and/or inlines files

• Minifies JS, CSS and HTML

• Optimizes images (metadata, compression, dimensions)

• Lazy loading images

W A R N I N GA F R I E N D LY

T E S T I N G A N D E VA L U AT I O N

• Google Pagespeed Insights

• Pingdom Website Speed Test

• GTMetrix

!

• Most importantly, the people who visit the site

R E S U LT SC H E C K I N G O U T

R E S U LT SC H E C K I N G O U T

R E S U LT SC H E C K I N G O U T

G O A L S

• Full score should not be a goal

• Use it as guidelines

• Don’t follow it blindly

• Know why

T H A N K Y O U F O R Y O U R T I M E – A N Y Q U E S T I O N S ?

T H A T ’ S A L L I H A D