32

WordCamp Finland 2015, Page performance optimization

Embed Size (px)

Citation preview

Page 1: WordCamp Finland 2015, Page performance optimization
Page 2: WordCamp Finland 2015, Page performance optimization
Page 3: WordCamp Finland 2015, Page performance optimization

© 1998 PhotoSpin

Page 4: WordCamp Finland 2015, Page performance optimization

Average page is 1795 KBin size and growing

Page 5: WordCamp Finland 2015, Page performance optimization

WordPress sites are worse

Page 6: WordCamp Finland 2015, Page performance optimization

In Finland: WordPress sites average 2,5 MB

Page 7: WordCamp Finland 2015, Page performance optimization
Page 8: WordCamp Finland 2015, Page performance optimization

Page size matters

Page 9: WordCamp Finland 2015, Page performance optimization

Page sizedoes not matter

(that much)

Page 10: WordCamp Finland 2015, Page performance optimization

Page size≠

page performance

Page 11: WordCamp Finland 2015, Page performance optimization

Page performance ≠

server-side performance

Page 12: WordCamp Finland 2015, Page performance optimization

PRACTICAL TIPS

Page 13: WordCamp Finland 2015, Page performance optimization
Page 14: WordCamp Finland 2015, Page performance optimization

Optimize images

Page 15: WordCamp Finland 2015, Page performance optimization

Optimize images for users automatically

Page 16: WordCamp Finland 2015, Page performance optimization

Never use the original sizes of uploaded images

Page 17: WordCamp Finland 2015, Page performance optimization

Prevent users usingthe full size image

Page 18: WordCamp Finland 2015, Page performance optimization

There is a filter for that

function h1_remove_full_image_size( $sizes ) { unset( $sizes['full'] ); return $sizes; }

add_filter( 'image_size_names_choose', 'h1_remove_full_image_size' );

Page 19: WordCamp Finland 2015, Page performance optimization

Don’t load imagesa.k.a. lazy loading

Page 20: WordCamp Finland 2015, Page performance optimization

Make browserscache resources

Page 21: WordCamp Finland 2015, Page performance optimization

Minimize,combine, compress

Page 22: WordCamp Finland 2015, Page performance optimization

Minimize,combine, compress

Page 23: WordCamp Finland 2015, Page performance optimization

Minimize,combine, compress

Page 24: WordCamp Finland 2015, Page performance optimization

Minimize,combine, compress

Page 25: WordCamp Finland 2015, Page performance optimization

Advanced stuff

Page 26: WordCamp Finland 2015, Page performance optimization

Move scripts to bottom

Page 27: WordCamp Finland 2015, Page performance optimization

…with WP Simple Asset Optimizer

Page 28: WordCamp Finland 2015, Page performance optimization

Moving scriptsadd_filter( 'wpsao_move', function () { return array( 'jquery_json', 'gform_placeholder', 'gform_gravityforms', 'optin-monster-api-script', 'wp-mediaelement', 'visualizer-google-jsapi', 'visualizer-render' ); } );

Page 29: WordCamp Finland 2015, Page performance optimization

Inline CSS and JavaScript

Page 30: WordCamp Finland 2015, Page performance optimization

Inliningadd_filter( 'wpsao_inline', function () { return array( 'modernizr', 'h1-stylesheet' => array( 'replace' => '../../', 'with' => get_template_directory_uri() . '/assets/' ) ); } );

Page 31: WordCamp Finland 2015, Page performance optimization

Topics skipped: CDNs, responsive and retina images, continuous performance measurement,

inlining images, CSS sprites, server side optimization, prioritizing visible content, avoiding

redirects, DNS, asynchronous JavaScript, HTTP2…

Page 32: WordCamp Finland 2015, Page performance optimization

Thanks!

@akibjorklund

Go to akibjorklund.com/wcfi2015 to get all the links mentioned in this talk.