Optimize your WordPress page speed for better search engine rankings

Optimize your WordPress page speed for better search engine rankings

Page speed or page load time (how fast the page loads when your URL is entered) is a very important part of the technical search engine optimization (SEO) and assuring a good user experience.

You only have a few seconds to convince a visitor to stay on your page. If your potential visitors have to wait too long for the page to load, they will simply click the back button. Every millisecond counts in this regard.

That’s one of the reasons why search engines prioritize faster pages. They want to provide users high quality pages that load fast and save bandwidth. WordPress is a great blogging platform, but if you aren’t careful (and install too many plugins, for example, or set things up wrong), you can quickly end up with an extremely slow site.

1 second delay in page load time leads to 7% loss in conversions, 11% fewer pageviews and 16% decrease in customer satisfaction. – Strangeloop

What are the targets when it comes to the page load time? The page load time that you want to achieve is at least under 3 seconds and the size of your page should be under 3 MB.

Ideally, the page load time should be 1 second and the page size under 1 MB. If you manage to achieve that, you have a winning strategy; but it’s hard to achieve such an ambitious goal, especially if you want to have a nicely designed webpage with all the contemporary interactivity. But you can absolutely keep it under 3s/MB.

Optimize wordpress page speed

Never miss the best personal development content again.

Get 5 free books.

When it comes to the page speed, milliseconds matter and they can quickly add up with every new thing (widget, ad, plugin etc.) that you add to your blog page. The most common reasons why the site is loading slowly are:

  1. Low-cost servers
  2. Unoptimized images
  3. Too many widgets and plugins
  4. Inefficient code and WordPress settings
  5. Poorly performing ad networks and too many ads

How to measure page speed

There are a few tools that enable you to regularly check the health of your blog loading speed. Most of the one time checks are for free.

All the tools give you a grade, so you can easily monitor how you’re performing. The most popular page speed measurement tools are:

These tools measure page speed and give you recommendations on how you can improve it based on the time it takes to load above-the-fold and the full page.

ALL - Monthly page speed check

Once per month I make sure that my blog is loading fast enough

Tips and tricks to optimize page speed

Even if you’re not a professional programmer, there are several things you can do to speed up your page loading time. Some of them are very easy to implement (a few clicks) and some of them demand a little programming effort or structural changes to your blog.

In the end, there are a few core things you can do to optimize page speed:

  1. Provide fast infrastructure (hosting, CDNs etc.)
  2. Optimize the page size (smaller page gets downloaded faster)
  3. Cache as many assets as possible (so they don’t have to be downloaded or processed again)
  4. Clean all the garbage content (database, plugins that are not in use, clean code etc.)
  5. Minimize the number of requests from client to server (RTTs)

What are RTTs?

The points above are pretty self-explanatory, except the last one, so here is the explanation. Every asset (CSS files, JS files, images) that needs to be downloaded and then loaded is requested by a browser individually. In other words, every file is a new HTTP request.

A browser sends a request to a server and the server sends data back for each and every file. To optimize the page speed, you want to minimize the number of RTTs. The idea is to minimize the number of requests from a client (visitor’s browser) to a server, which is referred to as round-trip times (RTTs). Fewer requests, faster page speed.

Now let’s dive in all the things you can do to speed up your WordPress blog.

Finding reliable and quality hosting

The most frequent reason for slow page load times are cheap servers. So you need to find a reliable hosting provider. You need to look for three things with your hosting provider:

  • Reliability
  • Speed
  • Support

You want your site to have 99.9 % uptime, you want to have awesome support when technical things go wrong, and you want to have a hosting provider that’s obsessed with speed.

Unfortunately, fast hosting doesn’t equal cheap hosting. If you want to have a hosting provider that meets all three criteria, you will have to pay a little bit more than for “shared hosting” with a very cheap provider for a few dollars per month.

  • The hosting service I am using is called WPXHosting.

Go for WordPress specialized hosts

It’s not only about which hosting provider to choose. Deciding between shared hosting, VPS (Virtual Private Server) and a dedicated server greatly influences the page speed you can achieve.

  • Shared hosting
  • Virtual Private Server – VPS
  • Dedicated Server

On a shared server, there may be hundreds of hosted pages and the resources are not shared evenly; who knows how much resources are dedicated to your page. VPS, as a much better option, usually has fewer users and the resources are distributed evenly.

On a dedicated server, you are the sole user with access to all the resources, but of course the cost is much higher accordingly and you have to know how to set up servers. Which type of hosting to go to completely depends on your budget and knowledge.

You should also pay attention to server parameters such as performance (CPU, RAM etc.) and location. The important information when it comes to hosting your WordPress blog is also that some hosting providers are specialized for WordPress hosting. That’s what you should be looking for.

To sum up the directions when it comes to hosting:

  • Compare prices, server performance, speed, reliability and support
  • Go for managed WordPress hosting or VPS
  • Servers should be where your target geo is (if you won’t use CDN; more about that later)
  • Make sure the hosting provider supports the latest core technologies (PHP7)
  • Don’t forget to regularly update WordPress

Choosing an optimized theme that you regularly update

If you want your page to load fast, you need a lightweight theme, which is speedy and isn’t bloated with unnecessary features that you never use.

Before you buy or install any theme, do extensive research if the theme is also optimized for search engine optimization and speed.

You can find many reviews and recommended themes online if you do a little bit of research. When you install the chosen theme, don’t forget to create a child theme and do regular updates. And delete all the other themes that you aren’t using and don’t plan to use.

Go for a minimalistic first page

Your first page is usually the most visited page on the site, so it must load fast and it must be as simple, clear and minimalistic as possible. A simple and minimalistic first page also provides a better user experience.

Here are a few directions how to architect your first page and subpages:

  • Simplify your design, make it as minimalistic as possible (but still nicely designed)
  • Don’t show full posts on the first page, but summaries (excerpts)
  • Reduce the number of posts that you show to visitors (keep it between 5 – 7)
  • Reduce the number of widgets, especially for social sharing (they can really slow down your site)
  • Don’t have too many banners, photos, CTAs to load
  • Don’t have huge and demanding footers and other unnecessary add-ons

The things that especially slow down your website are:

  • Social media widgets and buttons
  • Facebook comments
  • Too many different analytical and other tools
  • Unoptimized ad networks

Reduce the number of plugins and make sure they are updated

When you start using WordPress (standalone installation), you quickly realize that there is a plugin for everything. Most of them are free and it only takes one click to install them. Soon you can find yourself having dozens of plugins. But here’s the big downside.

P3 - Plugin performance report

Example of P3 report.

Every plugin slows down your page speed a little bit. That’s why you want to keep the number of plugins to minimum. A great tool to analyze how plugins are effecting your page speed is Godaddy’s P3 – Plugin Performance Profiler.

Here are the main recommendations regarding plugins:

  1. If you don’t really need a plugin, don’t install it in the first place.
  2. Delete all the old plugins you no longer use.
  3. Select the best performing plugins among the many options you usually have.
  4. Deactivate plugins that you only need occasionally and activate them only when you need them.
  5. If you can achieve the same with a plugin as by tweaking a little bit of code, learn to tweak the code.

Turn off pingbacks and trackbacks

The purpose of pingbacks and trackbacks is to notify you that somebody linked or referenced your site from their own. We could say that pingbacks and trackback are the way how WordPress blogs interact with each other. Pingbacks are sent automatically and trackbacks are initiated manually by site owners.

The first problem is that you have to manage (approve, trash, spam) pingbacks and trackbacks, and that takes time, especially because most of them are spam. If you decide to approve them, they appear beside your blog post, but they don’t really mean anything.

They are also abused by spammers and have quite a negative renown. Disabling them won’t hurt your search engine ranking, they have low value for readers and they take time to manage. You can simply disable them in WordPress settings.

Optimized images

When a visitor opens your blog, the page needs to be downloaded to their computer. Most of the files are text (HTML: your marked-up content, CSS: styling sheets, JS: scripts) and then we have images.

Text files are always small in size and you want to minimize them as much as possible, as we will learn. Non-optimized images can get quite huge (even over 1 – 3 MB) compared to the text files, so they should always be optimized first.

Remember we want to keep the site below 3 MB, so one unoptimized image can prevent us to achieve that goal.

Images are one of the most frequent reasons behind a slow page loading time. That’s why you want to pay a lot of attention to optimizing images on your blog. You can achieve that in a few ways:

  1. The right format of an image
    • JPG: For more quality images
    • PNG: Icons, illustrations, signs, text, logos, clip arts, charts, transparent
    • GIF: For small and simple images – logos and simple illustrations, animation, transparent
  2. Proper image sizing (resize images with Photoshop or Gimb)
  3. Image compression
  4. Optimal number of images
  5. Lazy image loading
  6. Disabling Gravatar images

The first thing you should do, besides saving an image in the right format, is to make sure the images are the same size as you need them on the page. If you upload a larger image, it affects the bandwidth and decreases page speed.

Larger image size means larger file size. There are many programs and apps that enable you to quickly and simply resize images to the size you need (to 700×350 or whatever suits you best). Photoshop and Gimb are two such programs.

Even when you resize images, you can further make them smaller by optimizing and compressing them. There are many WordPress plugins that optimize image size automatically when you upload them. You should also make sure not to use too many images on a page. Try to use as few images as possible, but definitely add them (and add proper alt tag).

The most popular image compression plugins are:

Lazy image loading

Lazy image loading is a concept that not all images are loaded when a visitor opens a page, but only the ones seen on the screen (above the fold). When a visitor scrolls down the page, the images are loaded just in time when they need to appear on the screen.

That reduces page loading time by a lot if you have many images in your blog posts. For example, if you have 5 images on your page and only 1 above the fold (visible screen), only one will be loaded when your blog is opened and the rest just in time when a visitor scrolls down.

Some themes have the option to enable lazy image loading, otherwise there are plugins you can use:

Gravatar images

Gravatar images take time to load as any other images. Disabling them is not the most aesthetic thing to do, but it can increase the loading page speed a little bit, since all the images don’t have to be loaded.

You can choose the default image to be shown or disable Gravatars all together.

Caching plugin

Caching means storing website data in a temporary place – cache (RAM or HDD). For the website you often visit, your browser saves parts of the static assets in cache to load it faster.

The page can then load faster because the browser needs to fetch less information from the server (client-side caching, the data are saved on your disk). Caching plugins use the same principle to reduce processing time on the server side.

Page cache

How page cache works, Source: WP Beginner

Here is what the process looks like when a visitor visits a WordPress page without a caching plugin. When a visitor enters the URL and calls the page, the server first sends the PHP request to the MySQL Database to get the data about the requested webpage. MySQL sends the data back and the website is generated on the fly and shown to the visitor. That’s called a dynamically generated website.

Caching plugins save dynamically generated website files in cache (dynamically generated HTML sites are saved on server’s disk and RAM) and serve them to a visitor. Instead of loading all the PHP scripts and executing PHP code every time a user refreshes the site, a cached version from previously generated data is served to a user.

That contributes to faster page load times. This is called (server‑side) page caching. There are few other types of caching that work in a similar way – database caching (saving database query results), object caching, opcode caching.

Types of caching - Page speed

There are many plugins that take care of caching on the WordPress platform. If you choose a good host, they will help you choose the right plugin and set it up properly.

Content delivery network (CDN)

The idea of the Content Delivery Network or CDN is to place webpage assets geographically closer to a visitor. It’s a network of servers all over the world which host your blog’s static files (CSS, JavaScript, Images etc.).

That enables the visitors of your blog to download these assets as fast as possible, because files are served to them by a server closest to their location. Distance among the client and a server affects speed.

How CDN Works

Content Delivery Network, Source: GTMetrix

If your hosting is in the US and you don’t have CDN, all the files have to be downloaded from the US server. If somebody is from Asia, all the data have a long way to go.

If you have CDN, static files can be downloaded from a closer location. That speeds up the page loading time a little bit. With CDN, you don’t only speed up your page load time, but also increase the security of your site.

The most popular CDNs are:

You can even take a step further and server static content backed by CDN from a cookieless domain. Static content doesn’t need cookies, so you can serve them from the cloud. Racketspace files and Amazon Cloudfront enable you to achieve that.

Ad Networks and page speed

If you are using Ad Networks, they can dramatically affect your page speed, especially if you use several of them or non-optimized ones.

Analyze how Ad Networks are affecting your page load time (use the tools with networks enabled and disabled), and choose the networks that don’t hinder your page load time dramatically, because you can be losing more money than earning it.

Poor page load times cause visitors to leave, not click ads.

Code and database optimization

Everything until now you can do alone or with the help of the hosting provider. Now comes a slightly harder part.

Code and database optimization in most cases require editing core WordPress files (wp-config.php, functions.php, database and others) and a little bit more knowledge. But it’s not rocket science and you can learn it fast (at least a few basic tricks).

Important notice: Make sure that you do a backup before you make any changes to these files. If you are not a professional programmer, things can go wrong quickly, so you want to have the option to go to the previous version of your files. And make sure you are doing changes to the child theme.

Database optimization

Database is where all of the content and data of your blog is stored, including post revisions, spam, comments, drafts, tables and all other data. If you don’t keep your database optimized, it can get quite huge and messy.

You probably don’t need all the revision history of pages and blog posts, all the spam comments and other clutter in your database. The goal of database optimization is to clean the garbage content from the database, such as:

  • Post revisions
  • Items in trash
  • Unapproved comments
  • Spam
  • Other historic unused data

There are quite a few plugins that can help you keep your WordPress database clean and optimized. Two examples include:

You can also manually clean the database if you have enough knowledge. Here is a great article guiding you how to clean your WP database using the SQL queries.

Wordpress database

This is the structure of the complex WordPress database

Number of revisions stored

If nothing else when it comes to database optimization, you can reduce the number of revisions stored.  By default, WordPress saves every revision, every small update that you do. Every time you click the save or update button, a new revision is saved into the database.

You probably don’t need 10 – 15 revisions to be saved, 2 – 3 is more than enough. You don’t want to have huge amounts of unneeded data in your database (but be careful if you do need any revisions). You can control the number of revisions with the Revision Control plugin.

You can also edit wp-config.php directly to change the number of revisions stored. You can do that by adding one of the following codes below (after ‘DB_COLLATE’,”) in the wp-config.php file:


/** Disable post revisions. */
define('WP_POST_REVISIONS', false);

/** Limits post revisions. */
define ('WP_POST_REVISIONS', 3);

In the same way, you can shorten the time posts are kept in the trash, which is 30 days by default:


define('EMPTY_TRASH_DAYS', 7);

Preventing hotlinking

Images on your blog can be accessed with links. When an image is served from your server to a foreign website that has nothing to do with you, this leads to hotlinking or “bandwidth stealing”.

Instead of saving and putting images on their own server, leeches use your resources. That burdens your server and you want to prevent that.

This is the code you have to put into the root .httaccess file to prevent hotlinking:


disable hotlinking of images with forbidden or custom image option
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mydomain.com/.*$ [NC]
RewriteRule \.(gif|jpg|js|css)$ - [F]

Expires header to static resources

Remember when we talked about caching as a way to reduce HTTP requests? How long an asset should be cached is defined by the Expires header in the HTTP response.

With the expires header, you define the time when an asset gets expired and thus the static content has to be downloaded again. In other words, the Expires header is used to tell browsers how long they should keep specific asserts.

It’s defined in the .htaccess file and measured in seconds. By increasing the time for assets to be expired, you can optimize the speed and bandwidth for your regular visitors. Here is an example of a code you add to the top of the .htaaccess file:


## EXPIRES CACHING ##

ExpiresActive On 
ExpiresByType text/html "access plus 1 days" 
ExpiresByType image/gif "access plus 1 weeks" 
ExpiresByType image/jpeg "access plus 1 weeks" 
ExpiresByType image/png "access plus 1 weeks" 
ExpiresByType image/x-icon "access plus 1 years" 
ExpiresByType text/css "access plus 1 weeks" 
ExpiresByType text/javascript "access plus 1 weeks" 
ExpiresByType application/x-javascript "access plus 1 weeks" 
ExpiresByType application/x-shockwave-flash "access plus 1 weeks" 

Using Gzip

Gzipping reduces the size of the HTTP response by compressing webpage assets before sending them to a visitor’s browser.

What Gzip does is that it locates similar strings in a text file and replaces those strings with shorter versions. The more patterns that appear in a text file, the better the compression works. Since HTML and CSS use a lot of repeated text, file size can be reduced for up to 70 %.

You enable Gzip compression by adding the following code to .htaaccess:


<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Minify HTML, CSS and Javascript

HTML, CSS and Javascript are text files with code that contain a lot of whitespace. Code minification is the process of removing whitespace and line breaks from these files to decrease file sizes. A smaller file size leads to faster page loading time.

Better WordPress Minify is quite a popular plugin. And if you use the W3 Total Cache, it can also do the minifying for you. Nevertheless, you may encounter problems with minifying and CDN. Ask your hosting or CDN support if everything will work properly.

Removing unnecessary styles from CSS

Most themes come with several styling and features options. You can change colors, enable and disable features, and so on.

No matter if you use a feature or not, styling still stays defined in the CSS files. And that makes CSS files larger. Even if you change general settings, like disabling comments, there is still defined styling in CSS files.

You can delete part of CSS that you don’t use. But you have to know CSS and really know what you are deleting. And if you ever decide to change your theme appearance or theme settings, changes might not work if you deleted the styling settings, so be careful.

Removing query strings from static resources

Query strings are URLS that have “&” or “?” in them. They are used by plugin developers for updates. They don’t get cached by default. Adding this code to functions.php will remove query strings from static resources:


//* Remove query strings from static resources
function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

Use Google Libraries

With Google Libraries, you can use the hosted version of jQuery and other scripts from their library.

There is a big chance that a visitor already has files from Google libraries cached, and that takes bandwidth load from your server which contributes to faster page speed.

You can use a plugin or add the code to functions.php, but you have to be careful to keep the versions compatible and up-to-date. I suggest you go with the plugin this time.


//Making jQuery Google API
function modify_jquery() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js', false, '3.1.0');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'modify_jquery');

Other code use recommendations

We have looked at the main ways to optimize your blog page load time on the WordPress platform. If you implement them, your site performance will dramatically improve.

Optimizing your page is not a one-time process, instead you should do it regularly as part of monitoring and optimizing your monthly blogging metrics.

There are, of course, other minor or advanced things you can do to even further increase the page speed. Below are a few of them. If you want to go even further with your page optimization, I suggest you research them.

  • Put stylesheets at the top
  • Put scripts at the bottom
  • Use <link> over @import
  • Use asynchronous JavaScript loading
  • Replace PHP with static HTML where possible
  • Use CSS sprites – it combines several small images into one big file
  • Enable HTTP Keep-Alive
  • Reduce redirects (and fix broken links)
  • Install Google Page Speed on your servers
  • Remove unnecessary files from the server
  • Disable parts of the WordPress functionalities with deleting code (emoticons, comments etc.)

I hope this blog post was helpful and gave you a few ideas on how to improve your blog page speed. You can read more useful articles on becoming a successful blogger in the blogging track. Happy blogging and may your page loading speed be as fast as light.

Shares
Share This