Speeding up WordPress

Jason Yingling@jason_yinglingJasonyingling.me

Where to Test

• Google Pagespeed Insights - https://developers.google.com/speed/pagespeed/insights/

• GT Metrix - https://gtmetrix.com/

Pick good hosting

• Helps:– Reduce server response time– Leverage browser caching– Enable compression

Server Speedup

Setup Cloudflare

• Easily minify and concatenate HTML, CSS, JS• Bundle and load JS asynchronously• Cache files• Helps with:– Minify CSS– Minify HTML– Minify Javascript– Minify request size– Prefer asynchronous resources– Defer parsing of JS

Setup Caching

• Store static files in a cache so they are accessed faster

• Most hosts have some form of caching available

• Plugins:– W3 Total Cache

• Helps:– Leverage browser caching

Enable Compression

• Gzip it up via .htaccess or your host• https://codex.wordpress.org/Output_Compres

sion• http://winningwp.com/how-to-enable-gzip-co

mpression-for-wordpress/• Helps:– Enable compression

Optimize Your Content

Crop and Resize Images• Images make up > 60% of average site file size• Don’t upload massive 3000 x 3000 images for a 150 x 150 square• Editor Tip:

– Use Photoshop or Canva to crop images to smaller sizes– https://photo-editor.canva.com/

• Developer Tip:– Use add_image_size() to create thumbnail sizes to use within themes

• Helps:– Minimize request size– Serve scaled images– Optimize images

Optimize Images

• Reduce the file size of images• ImageOptim• Plugins– WP Smush It– Kraken.io

• Helps:– Optimize images

Optimize Content

• Use embeds sparingly– They’re nice but can load slow

• Be aware of what plugins add– More JS– More CSS

• Helps:– Minimize request size– Defer parsing of Javascript

Plugins

Jetpack Photon

• CDN for images– Serves images from WordPress.com

• Scales images it serves to the browser• Performs “blur up” method of loading• Helps:– Serve scaled images– Use a Content Delivery Network (CDN)– Optimize images

Autoptimize

• Minify and concatenate CSS and JS• Works with scripts enqueued by plugins• Helps:– Minify HTML– Minify CSS– Minify JS– Minimize request size– Make fewer http requests

a3 Lazy Load

• Easily lazy load images and iframes below the fold

• Helps:– Defer parsing of Javascript– Minimize request size– Reduce server response time– Prioritize visible content– Eliminate render-blocking Javascript and CSS in

above-the-fold content