How to Speedup Your WordPress Blog without Any Caching Plugin

On
WordPress logo stickers.Several bloggers often struggle to properly configure a caching plugin on their self-hosted WordPress blog. After much tweaking, they never get the expected results and end up dumping the caching plugin altogether. If you're facing the same situation, you can utilize several other methods to significantly improve the speed of your blog. These techniques may not make your blog a flyer, but it will definitely load much quicker than before. Before you try these optimization steps, make sure you've backed up your blog to deal with any kind of mishap. Some of these solutions can be combined with regular caching plugins. Remember, these solutions only contribute to reducing the loading latency of your blog. If you're experiencing heavy traffic with a lot of resource consumption, you may consider implementing a professional caching solution for your flourishing blog. So, let's get started and implement some of the best optimization techniques to significantly quicken the page load time of our WordPress-powered site.

WordPress logo stickers.

Work on Reducing Database Requests

While designing our blog, we never pay attention to the number of database queries that are used to populate fixed content sections on a single post page. For example, it is quite common to include 'Recent Posts' section in the sidebar which fires a database query every time a new post page is requested by a new visitor.

Quite similar to this, there are several other sections that add more database queries to a single page request. Here's a simple PHP code snippet, you can use to know the number of DB queries fired on a webpage and the time taken by them.

add_action( 'wp_footer', 'db_queries_on_page' );
function db_queries_on_page() {
  date_default_timezone_set( get_option( 'timezone_string' ) );
  $content  = '[ ' . date( 'Y-m-d H:i:s T' ) . ' ] ';
  $content .= 'Page created in ';
  $content .= timer_stop( $display = 0, $precision = 2 );
  $content .= ' seconds from ';
  $content .= get_num_queries();
  $content .= ' queries';
  if( ! current_user_can( 'administrator' ) ) $content = "<!-- $content -->";
  echo $content;
}

Insert this code within your theme's functions.php file. This snippet can help you identify unnecessary queries taking a lot of time on a webpage. Afterwards, you can remove this code snippet from the functions.php file.

Your goal should be to reduce these database queries to the minimum such that only the most critical data is pulled through DB queries.

Additional queries contribute to increasing the page load time. Recent posts sections can be hard coded and so is the author box. This way you can reduce 3 to 4 database queries for each page request.

If you're getting high traffic on your blog, this will save you thousands of additional database queries making your pages load much faster than before. Once you've reduced the total number of database queries, use this technique to identify and address those queries which consume maximum system resources.

Another handy way to reduce database requests is to replace the most common queries with its equivalent static code.


/* --- Original Coding --- */
<title><?php bloginfo(’name’); ?><?php bloginfo('description'); ?></title>
/* --- Replaced by static HTML --- */
<title>Website Title - Your Website Description</title>

In the example shown above, we've replaced the two most common database requests with static HTML code. Similarly, you can find more such requests on your website pulling stagnant data and can replace them with their static HTML equivalents.

Disable Gravatars Within Your Comments Section

If you're getting tons of comments on your blog, your posts may load slowly due to time spent in fetching countless Gravatar images. Although these images are fetched from an external source, still they contribute to overall time spent in loading the requested web page.

For better performance, you must disable Gravatars from within your WordPress settings. This way, your post will load much quicker as no images will be fetched from external Gravatar server thus reducing the load times for posts containing a large number of comments.

If you're not comfortable with removing these avatars, you may consider using smaller sized images which can be configured easily within 'Discussion' option in your WordPress blog settings.

WordPress settings.
Both 'Avatar Display and Default Avatar can be configured to disable pulling of Gravatar image data as shown in the image above. Another good option is to either turn off the comments completely or use a minimal 3rd party comment system.

Compress Static Objects and Serve Through a CDN

One of the best ways to improve load times is to compress all the important static objects residing on your web server. This includes CSS, JavaScript, and common image or icon files that are used for every single page on your blog.

There are several compression tools available on the web to correctly reduce the size of these files.

Read Also:
Best Tools to Optimize and Speed up Your Website

I pay most attention to image compression to make the page lean and fast.

The second step is uploading these static files to a content delivery network for not only reducing the load on your web server but also for quicker delivery at the reader's end.

This combination gives you very good results as all the important static content is delivered very quickly while a web page is loading within the browser. Here are some of the best content delivery networks you can use for your WordPress site.
The combination of static assets compression and integration of content delivery network is the most potent and surest way to speed up a WordPress website. If you're going to stream videos through your website, make sure they're stored off-site on a reliable cloud storage solution.

Use a Subdomain for Images

A lot of websites and blogs use a subdomain to serve a massive number of images to their visitors. This is an excellent way to speed up page loading as subdomain forces a new concurrent connection instead of serving all objects from the same connection.

There are several ways to setup image serving from a subdomain and it just takes a few simple steps to configure it for a typical WordPress blog.

Speedometer sketch.
Here's an excellent guide to configuring a subdomain to deliver all your post images through a separate concurrent connection while the page is requested by the visitor.

If you have a large number of images already served on tons of posts, you must consult an expert before making the transition. The best way to implement it is to first test it on a sample installation and then making the necessary changes on a live blog.

Use WordPress Internal Caching Mechanism

Very few bloggers know that WordPress has a pretty good inbuilt caching mechanism that can be used to cache frequently requested data. This method is generally used by intermediate to advanced users who're comfortable with PHP coding and have a good understanding of the working of a typical web server.

Internally, WordPress supports two types of caching methods and you can choose the best one that suits your requirements and gels with your web server configuration.

Cache performance graph.
Here's a detailed tutorial on how to implement your own caching code using one of the caching methods supported natively by WordPress.

Make sure, you first use this methodology in a test environment before implementing on the actual blog. You must be familiar with PHP to effectively use this technique.

Remove or Substitute Sluggish Plugins

This is yet another effective way to speed up your WordPress blog. I've always advocated about careful selection of plugins before you decide to use them on your blog.

Several plugins are not well coded and introduce unnecessary delays and high resource consumption while the page is fetched by the visitor. For an average user, identifying such plugins is a difficult task.

Plugin performance graph.
Luckily, we have a simple solution to this problem. Use this P3 (Plugin Performance Profiler) plugin made specially to identify sluggish plugins that are slowing down your blog.

It effectively analyzes each activated plugin activity and presents you with a detailed report about each one of them. This way, you can easily identify the culprits and can either remove them or can find a better alternative.

Append Trailing Slash ('/') in Permalinks

While specifying the default permalink structure in your WordPress dashboard, make sure you append forward slash '/' in the end as shown below. You can configure this via 'Settings → Permalinks → Custom Structure' option.

/%postname%/
/%category%/%postname%/
/%year%/%monthnum%/%postname%/

Appending the forward slash at the end of URL clearly indicates the server that it is a directory page and no further lookups are required. This quickens the page delivery time automatically.

Another handy way is to use a .htaccess directive.

# Force trailing slash
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_METHOD} GET
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ^(.*)$ http://%{HTTP_HOST}/$1/ [L,R=301]

If you're not comfortable editing the .htaccess file, use this plugin to automatically add trailing slashes to the website URLs.

Remember, applying this .htaccess fix may not give an immediate result of significant speed improvement, but it adds to the total time reduction for a page delivery.

Fix Render-Blocking Assets/Resources

One of the common issues related to sluggish page load times is the presence of one or more render-blocking JavaScript or CSS resources. But wait, what the heck is this render-blocking issue?

In simple words, when a web browser waits for one or more resources (JavaScript or CSS files) so that it can interpret and gather enough information to start rendering the webpage, such resources are known as render-blocking assets.

If you want to find all the render-blocking resources on your website, use Google PageSpeed to get a detailed report about the same as shown in the partial screenshot below.

Google PageSpeed report.
To address this issue, one can apply the tried and tested method discussed below.

The easiest and the fastest way to tackle render-blocking resources is to use the Autoptimize plugin. This powerful extension minifies, combines, and inline such resources.

One can also transfer the payload (minified & combined resources) to the webpage footer and can also defer fetching of non-critical resources. It also provides an option to manually provide critical CSS payload for quick rendering of above-the-fold page content.

Use Browser Caching for Faster Page Loads

Web browsers have an excellent feature to locally store static resources (images, scripts, CSS, and so on...) fetched by a webpage, provided it is instructed to do so.

This way, subsequent page loads are significantly faster using locally stored resources. To make it happen, all you need to do is to instruct the browser to locally store such static resources with a reasonable maximum expiration date for each type of such resource.

If you're using Nginx as your web server, use the following directives within the default configuration file. Generally, this file is located at /etc/nginx/sites-available/default which contains the main server {} block.

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 30d;
}

The directive shown above caches both scripts and images locally on the end user's computer for up to 30 days. If you want to set a different expiration time for different file types, you can do so easily via two different directives as shown below.

location ~*  \.(jpg|jpeg|gif|png)$ {
        expires 30d;
}

location ~*  \.(css|html|js)$ {
        expires 10d;
}

The second example configures longer expiration time for images and a shorter expiration time for scripts and HTML code. One can configure multiple location blocks to fine-tune the expiration time of different types of static resources.

In case, your WordPress-powered site is served through Apache web server, include the following directives in your .htaccess file.

# 30 days expiration time for image files
<filesmatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

# 15 days expiration time for scripts and code
<filesmatch ".(css|js|html)$">
Header set Cache-Control "max-age=1296000, public"
</filesMatch>

The expiration time is given in seconds which can be changed, at will. Make sure to take a backup of these important configuration files before making any changes.

Although there are several plugins to implement browser caching without messing with code, I'll recommend sticking with the methodology explained above. For all self-hosted WordPress websites, this is one of the most important speed optimization settings—one should never miss.

Closing Thoughts

And, before we wrap up this tutorial, let's once go through some of the best practices to keep our WordPress site, lean and fast.

All it takes a few precautions and few routine exercises to help you deliver a speedy website to the visitors. To get it done, you may need to avoid existing shortcuts and few automated routines. So, let's once go through these important points.
  • Always pay attention to the image size before uploading to the site. Ideally, optimize it for the web before uploading.
  • Avoid using large number of plugins.
  • If your budget allows, avoid shared hosting at all costs. Instead, go for a VPS or a managed WordPress hosting plan.
  • If possible, use Google's Accelerated Mobile Pages (AMP) to give blazing fast browsing experience to the visitors who're using smaller devices.
  • And last but not the least, avoid using an extremely jazzy and complex design bloated with sluggish 3rd-party widgets.
This finishes our speed improvement guide without the use of any caching plugin. Hope, you will make your WordPress site, a flyer, after implementing some of the techniques mentioned here.