Speed Up Your WordPress Website

As a website owner, you probably already know how important it is for your site to load fast and efficiently so that your users can have a pleasant web experience and look forward to coming back to it.

This is especially necessary if you run a news blog, e-commerce or enterprise website that uses WordPress as a CMS because oftentimes most WordPress sites use tons of Plugins to add extra functionality for simple tasks. This can sometimes cause unnecessary bloat leading to slow load times. At other times, it could be a result of a myriad of other reasons that we’ll look into. The aim of this article is to show how we can optimize our WordPress website for better performance.

As a first step, head off to GTMetrix to do an assessment of your website, so you can see how well it ranks in terms of speed and performance. This will help you see how well your site is doing and potential areas of improvement for it.

Now to the fun part, the following ways are approaches you could use to make your WordPress website load faster:

1 — Selective Loading of JS files & Assets

By default, all enqueued styles and scripts load for all WordPress pages. This means if you have a script or group of scripts that potentially cause a slow load time running for every single page then your website will be super-slow! This is where Selective Loading comes in. Large JS files can be made to load on the exact pages where they are needed and not on all pages by default using conditional tags.

In the example below, the JS script is only loaded for the home, about and contact pages.

function wpdocs_selective_js_loading() {
  if ( is_page( ['home', 'about', 'contact'] ) ) {
    wp_enqueue_script( 'your-script', get_template_directory_uri() . '/js/your-script.js', array(), '1.0.0', true );
  }
}

add_action( 'wp_enqueue_scripts', 'wpdocs_selective_js_loading' );

2 — Transients

If you run a large WordPress website like a news or e-commerce website, you may find yourself making tons of query requests to the database to serve users over and over again. This can greatly impair the performance of your site and that is the exact reason why Transients were created. Transients give you a way to store information that is not going to change soon so that your website can avoid making unnecessary database query requests every time it needs to serve a new user.

Below is an example of a transient that stores the results of a complex query which you could use over and over again without having to make a database query request every time a user visits your website.

if ( ! get_transient( 'special_query_results' ) ) {
  // Set the arguments for the custom query
  $args = array(
    'post_type'      => 'album',
    'orderby'        => 'date',
    'order'          => 'DESC',
    'post_status'    => 'publish',
    'posts_per_page' => -1,
    'tax_query'      => array(
      'relation' => 'OR',
      array(
        'taxonomy' => 'genre',
        'field'    => 'slug',
        'terms'    => array( 'pop', 'hip-hop', 'funk' )
      ),
      array(
        'taxonomy' => 'author',
        'field'    => 'slug',
        'terms'    => array( 'michael-jackson', 'justin-timberlake', 'taylor-swift' )
    )
  )
);
  
  
  // Get all albums belonging to complex query
  $special_query_results = new WP_Query( $args );
  
  
  // Saving the $special_query_results object for a day
  set_transient( 'special_query_results', $special_query_results, 24 * HOUR_IN_SECONDS );
}

3 — CDN Libraries, Fonts & Assets

A CDN (Content Delivery Network) is your best friend when it comes to serving external/remote fonts, icons, & assets quickly. It works by selecting the closest CDN server to the user from where the request is made and then serving a copy of the requested files. This prevents the extra round-tripping the user’s client machine has to do to get the assets needed for your website to load up properly. An e.g of a CDN fonts library is Google Fonts.

In the example below, Montserrat which is a Google font is being loaded via its API font library (which acts like a CDN) like so:

function load_montserrat_font() {
  wp_enqueue_style( 'montserrat', 'https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap' );
}
  
add_action( 'wp_enqueue_scripts', 'load_montserrat_font' );

4 — Large Image Rescaling

Optimizing your large images to smaller sizes or compressionless formats like WebP for faster loading is a step in the right direction especially if you run a busy website. This is because large images often account for 80% of slow load times for many websites and the same can be said of WordPress websites. To do this, head over to tinypng.com. This site will help you reduce your large hero images and get smaller versions or WebP formats that load pretty fast.

5 — Use of Cache (WP Rocket or WP Super Cache)

Cache simply means your browser wouldn’t have to make the request for all the assets all over again. A simple plugin like WP Rocket or WP Super Cache can help you cache all your assets on the front-end side of things, so they are served up quicker for users. Another tool that comes in handy is a tool like Cloudflare.

And there you have it! Just a few ways to make your WP website load faster. Let me know what you think.