Embed Size (px)
DESCRIPTION
Getting full score on Google PageSpeed, Pingdom and GTMetrix
Citation preview
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
