I spent the better part of last week improving my blog, and I figured I would write about my experiences. WordPress is a great platform and I’m having fun working with it. But, like any piece of software, it needs some fine-tuning before it can work the way you want it to.

GTmetrix

My first major problem was the site’s speed. I’d always noticed that it was slow, but I never realised by how much. I discovered GTmetrix, a site that scans web pages and determines how you can improve them to make them faster. When I scanned my home page: 27+ seconds!

I needed to fix this.

Plugins

The first piece of advice you will see about making a WordPress site run faster is to deactivate your plugins one by one. GTMetrix can help you figure out which plugins (if any) are slowing your site down. The “Timeline” view lists all the requests made when downloading your page and how long each one took.

When I looked at this I noticed that the nRelate Related Content plugin was making a request resulting in a 404 error. This request was taking 18-20 seconds! I disabled the plugin and my average page loading speed dropped to 3 seconds. Later in the week I got an email saying that nRelate is discontinuing their services. I liked this plugin so it was a shame to disable it, but 18+ seconds is too much to pay for it.

The next offenders were my social plugins – links to Facebook, Twitter and Reddit. These added around 2-3 seconds. I had many plugins running, and some weren’t even working. I disabled them, but I’ll need look into adding social links again at a later date.

So it turns out plugins are an important factor in page speed. Each plugin comes with a cost, but you need to determine if that cost is worth paying.

Reducing Requests

WARNING: Editing the theme can break your entire site if you are not careful. I only recommend doing this if you have FTP access to the website you are working with.

The obvious ways to reduce the number of requests is to reduce the number of scripts and number of images. Each request adds a certain overhead to your page download time so its important to keep the number of requests as low as possible.

Another way to reduce the number of requests in a WordPress site is to alter your theme to not make unnecessary function calls. For example, you may see this somewhere in header.php:

<meta http-equiv="Content-Type" content="
  <?php bloginfo('html_type'); ?>;
  charset=<?php bloginfo('charset'); ?>" />

You might as well replace this with:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Of course a lot of this is only applicable if you are running a single site. Yoast has a good article on this on their site.

Image Problems

The next major issue was images. This website has become image heavy. This is especially bad on the home page, where it displays up to ten articles . This had a major impact on page speed.

GTMetrix gives you a list of ways to improve your website’s speed. Top of the list was image compression, or lack of it. I use a plugin called Lazy Image Load” href=”https://wordpress.org/plugins/lazy-image-load/” target=”_blank” rel=”noopener”>Lazy Image Load. This plugin delays the loading of images until you can see them on the screen. This seemed to work beautifully. My page load time dropped to less than half a second. Images faded in neatly when they finished loading.

Unfortunately more than half the time the page didn’t load any images at all. I’m not saying this is an issue with the plugin itself – it may have been a clash with other plugins I was using. I’d still recommend it to others since it may still help them.

What I did realise was that I was approaching the problem from the wrong angle. I didn’t like the fact that my homepage was displaying full posts. What I wanted to do was to display short summaries of each article, not the full article.

On the same settings page there is an option to display Summaries on the front page. Unfortunately this didn’t work. I found that this was down to the theme I was using. What I needed to do now was edit the theme itself.

You can edit the files contained in your current theme under Appearance > Editor. I found the relevant code in loop.php:

<?php if ( is_archive() || is_search() ) : ?>
  <div class="entry-summary"
    <?php the_excerpt(); ?>
  </div><!-- .entry-summary -->
<?php else : ?>
  <div class="entry-content">
    <?php the_content( __( 'Read more &raquo;</span>', 'adventurejournal' ) ); ?>
  </div><!-- .entry-content -->
<?php endif; ?>

Excerpts were only shown in archive and search pages. I altered the code so that it would always display excerpts:

<div class="entry-summary">
  <?php the_excerpt(); ?>
</div><!-- .entry-summary -->

A separate file called single.php handles single posts so this had no effect on them.

Now my home page loaded fast again even with 10 post summaries displayed. There was only one problem. It looked awful.