WordPress Performance Tuning and Optimization

There are a number of ways to optimize your WordPress site. In this post, I'm going to share some of the methods and tools I use to optimize WordPress.

Jump to section:
Scale and compress images
Compress and combine files
Further optimization for performance


Scale and compress images

Images are an important factor when it comes to page speed because they're usually the biggest files.

Scale

Edit your images so that they match the size needed for your page. WordPress already creates multiple sizes but they may need some tweaking to fit certain dimensions. If you are displaying a 400X200 pixel image from a 2560X1440 upload, a lot of unnecessary bytes will need to transfer for the image to show.

Compress

Before uploading an image, compress it through a compression site such as TinyPNG, or use a WordPress plugin such as WP Smush that provides a simple interface for optimizing all of your uploaded images.


Compress and Combine Files

Files sizes should not be overlooked since they can get quite large, especially when there are a lot of comments and white-space to render. In my experience, JavaScript and CSS libraries pile up the most. They should be compressed and combined for optimal loading.

W3 Total Cache plugin

W3 Total Cache provides various cache settings and adjustments for HTML, CSS and JavaScript files.

From the General Settings > Minify section, check the Enable box. If the mode is set to Auto, Each file type (HTML, CSS, JS) you check from the Minify tab will be compressed. If certain parts of the website break from compressing, select Manual from the General Settings and include each file URL you want minified from the Minify tab.

In W3 Total Cache General Settings, enable Page Cache and Browser Cache to improve responsive time, and enable HTTP (gzip) compression under General from the Browser Cache tab settings. This reduces text-based file download time. W3 Total Cache offers a multitude of settings, but I find the minification and browser cache settings to be the most useful.


Load JavaScript at the bottom

By moving your JavaScript files to the bottom before the closing </body> tag, the page will load visibly before running the scripts, improving user experience.

To make sure scripts load at the bottom in WordPress, edit the enqueued scripts in the functions.php file. Set true within your wp_register_script functions.

function custom_scripts() {
wp_register_script('script_name','get_template_directory_uri() . /js/example-script.js', '', '1.0.0', true );
wp_enqueue_script('script_name');
}
add_action ('wp_enqueue_scripts', 'custom_scripts');

Save the file and refresh you website source code (Ctrl+U) to check and make sure the script is now at the bottom.


Further optimization for performance

Use a content delivery network to reduce page load time.

Disable Emojis if you don't use them. Within your functions.php file, add the following lines.

// Remove Emoji Icons
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

Remove unused plugins

Switch to a better host such as Bluehost, Site5 or HostGator.