Making WordPress websites faster

53
Aki Björklund Making WordPress websites faster

Transcript of Making WordPress websites faster

Page 1: Making WordPress websites faster

Aki Björklund

Making WordPress websites faster

Page 2: Making WordPress websites faster
Page 3: Making WordPress websites faster
Page 4: Making WordPress websites faster

© 1998 PhotoSpin

Page 5: Making WordPress websites faster

Average page is 2225 kBin size and growing

Page 6: Making WordPress websites faster

Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/

Page 8: Making WordPress websites faster

In Finland: WordPress sites average 2,5 MB

Page 9: Making WordPress websites faster

Page size matters

Page 10: Making WordPress websites faster

Page sizedoes not matter

(that much)

Page 11: Making WordPress websites faster

Page size≠

page performance

Page 12: Making WordPress websites faster

Page performance ≠

server-side performance

Page 13: Making WordPress websites faster
Page 14: Making WordPress websites faster
Page 15: Making WordPress websites faster

PRACTICAL TIPS

Page 16: Making WordPress websites faster
Page 17: Making WordPress websites faster

Optimize images

Page 18: Making WordPress websites faster

Optimize images for users automatically

Page 19: Making WordPress websites faster

Never use the original sizes of uploaded images

Page 20: Making WordPress websites faster

Prevent users usingthe full size image

Page 21: Making WordPress websites faster

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 22: Making WordPress websites faster

Built-in responsive images in WordPress

Page 23: Making WordPress websites faster

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

Page 24: Making WordPress websites faster

Make browserscache resources

Page 25: Making WordPress websites faster

Minimize,combine, compress

Page 26: Making WordPress websites faster
Page 27: Making WordPress websites faster
Page 28: Making WordPress websites faster

Minimize,combine, compress

Page 29: Making WordPress websites faster

Minimize,combine, compress

Page 30: Making WordPress websites faster

Minimize,combine, compress

Page 31: Making WordPress websites faster

Advanced stuff

Page 32: Making WordPress websites faster

Move scripts to bottom

Page 33: Making WordPress websites faster

…with WP Simple Asset Optimizer

Page 34: Making WordPress websites faster

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 35: Making WordPress websites faster

Inline CSS and JavaScript

Page 36: Making WordPress websites faster

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

Page 37: Making WordPress websites faster

HTTP/2

Page 38: Making WordPress websites faster

SERVER SIDE OPTIMIZATION

Page 39: Making WordPress websites faster

Caching

Page 40: Making WordPress websites faster

Page caching

Page 41: Making WordPress websites faster

Full page caching does not work if users are

logged in

Page 42: Making WordPress websites faster

Object caching

Page 44: Making WordPress websites faster
Page 45: Making WordPress websites faster
Page 46: Making WordPress websites faster
Page 47: Making WordPress websites faster
Page 48: Making WordPress websites faster
Page 49: Making WordPress websites faster
Page 50: Making WordPress websites faster
Page 51: Making WordPress websites faster

PHP7

Page 52: Making WordPress websites faster

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

measurement, inlining images, CSS sprites, prioritizing visible content, avoiding

redirects, DNS, asynchronous JavaScript…

Page 53: Making WordPress websites faster

Thanks!

@akibjorklund