Creative Digital Content

By itself, WordPress is an excellent engine. However, doing a standard installation on a shared server while using a number of different plugins can significantly slow your website down. You may be aware that Google came out with its mobile-first index early in 2018, and the main reason for this was slow mobile load speeds. Whenever Google comes out with a new update, it has a significant impact on a large portion of the web. If you’re not quick enough to adapt to their new regulations, then don’t be surprised when your SERP rank starts to suffer. Those of you who think that having load speeds of around 3 seconds is fine, think again. That 3 seconds on a desktop will turn into 7-10 seconds on an average mobile connection, you can test this yourself from a number of browsers. This guide will give you a step-by-step breakdown on improving WordPress performance and achieving load speeds under one second.  

Server Setup 

Before you can do anything regarding WordPress, you’ll need a server with a full LAMP install (Linux, Apache, MySQL, PHP). These are the language packages you’ll need to make sure every part of WordPress works correctly. However, before you get your blank Linux box and start coding away, you will need to determine the best datacenter location to host your website from. 

Server Location 

When you purchased your last hosting plan, did it mention where the datacenter was located? This is an important piece of information that many business owners overlook. The closer your datacenter, the less times it takes for each HTTP request to process. This has the most impact on websites that have to deal with a lot of HTTP requests on load, which is something you’ll find with many WordPress themes. However, in some cases hosting companies do not offer the option of choosing your datacenter location, especially if you opted for the shared hosting solution. With cloud servers on the other hand, this is almost never an issue, since I’ve been able to find a datacenter in almost every state, and in a number of other countries as well.  

Shared Hosting 

If you want WordPress load speeds of under 1 second on a shared server, that may not be possible. Since you don’t have root access, you won’t be able to make the right modifications, which is a necessary step of improving  WordPress performance issues. Another problem with shared servers is reliability. If someone on that server is eating up resources, your website will suffer in terms of load speeds, which is why you can’t guarantee a specific load speed when it comes to shared hosting. 

Dedicated Hosting 

Having your own dedicated server gives you near absolute control over how it functions. If you have room in your budget for something that costs $80 or more per month, then this option is good for you. It comes with a unique IP address, root access, larger resource pool, and a certain degree of tech support as well. 

Cloud Hosting 

Cloud hosting combines the best of both worlds in a way. The price of running a cloud server is ridiculously cheap, as low as $5 per month, and yes, you still get your own IP, root access, and choice of datacenter location. With a cloud server, you can achieve load speeds of under 1 second relatively easy. The best part about using them is their scalability. On a dedicated server, if you run out of resources, you’ll most likely have to purchase another package and move your entire website. When dealing with a cloud environment, you can scale your resource use to keep up with demand. However, the downside of using cloud servers is that they come as a blank box with only some software installed, and pretty much no tech support. You won’t be able to run WordPress on them without installing additional software such as apache and php. However, keep in mind that hiring someone to get a cloud server up and running is still cheaper than paying for shared hosting in the long run. If you can’t find someone to do it, ask me for help. 

Google PageSpeed Module and Server-Side Caching 

You may have heard about PageSpeed insights from Google, which is an good tool to use when it comes to improving WordPress performance and achieving load speeds under one second. Well, to help you out, Google also came out with a special module just for Apache2, which optimizes and caches your web content before it gets delivered to the browser. As a result, when a visitor views your website, they won’t have to load the full version of your page, just the cached one. Do not confuse this with browser caching, which is only beneficial for repeat visits. This module actually writes the cached data to the server, not your browser, which is why it benefits new and returning visitors alike. Using PageSpeed alone can cut the load time of your website in half. Installation is relatively easy: 

Verify whether you’re using Ubuntu 32 or 64 bit: 

uname -a   

Move to the tmp directory and execute the rest from there. 

cd /tmp 

For 64 bit: 

wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb  

dpkg -i mod-pagespeed-stable_current_amd64.deb 

For 32 bit: 

wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_i386.deb  

dpkg -i mod-pagespeed-stable_current_i386.deb 

Once you’ve done that, restart apache2.

service apache2 restart 

The next part is improving the PageSpeed caching mechanism. 

Using In-Memory Caching 

By default, mod_pagespeed uses file system caching, but that’s not ideal for load speed purposes. To speed things up even further, you should use an in-memory caching system, which is significantly faster than file caching. To do this, you’ll have to install Memcached and configure your PageSpeed module to use it. 

apt -y install memcached 

netstat -tap | grep memcached 

apt -y install php-memcached 

vi /etc/apache2/mods-available/pagespeed.conf 

Remove # from: 

# ModPagespeedMemcachedServers localhost:11211 

# ModPagespeedCreateSharedMemoryMetadataCache "/var/cache/mod_pagespeed/" 51200 

Now save the file and restart apache2.

service apache2 restart 

To see cache stats run the following command: 

echo stats | nc 127.0.0.1 11211 

Now go to your browser and reload the webpage, take a look at your HTTP requests. You’ll notice that your files have a pagespeed extension added to the filename, and everything should be loading almost twice as fast. 

Using HTTP2 

Depending on your server setup, you may or may not be using the HTTP2 protocol, which reduces latency and accelerates content download. To verify this, you can use the Chrome add on, Lighthouse, which will determine if you’re using HTTP1 or 2. The latest Ubuntu versions already come with HTTP2 installed, but it needs to be activated like so: 

a2enmod http2 

Now modify the ssl configuration file for your website. If you don’t have an SSL, read this short article on how to get a free, trusted certificate. Add “Protocols h2 http/1.1” after “<VirtualHost *:443>”: 

vi /etc/apache2/sites-enabled/your-site-le-ssl.conf 

<VirtualHost *:443> 

    Protocols h2 http/1.1 

    ServerAdmin ...

    ServerName ...

Save the file and restart apache2.

service apache2 restart 

WordPress uses mod_php, which relies on prefork. You need to change this in order for HTTP2 to work: 

a2dismod mpm_prefork  (shows which php version) 

a2dismod php7.2 

a2dismod mpm_prefork 

a2enmod mpm_event proxy_fcgi setenvif 

apt install php7.2-fpm 

systemctl start php7.2-fpm 

systemctl enable php7.2-fpm 

a2enconf php7.2-fpm 

systemctl restart apache2 

Modify Default WordPress Functions, Don’t Overwrite 

Now let’s get down to WP specifics. WordPress has certain default functions, such as loading additional scripts and stylesheets. By default, most of these are loaded in the head of your website, which means it gets processed by the browser before the rest of your website does. This alone can add a second or more to your overall load time, and since it gets processed first, your visitors will be starting at a white screen for that duration. Keep in mind that this has a larger impact on mobile load speeds. While many tutorials suggest overwriting this behavior in your functions.php file, this doesn’t always work, and it will always be slower in terms of load speeds. Changing default behavior is the most optimal method if your goal is improving WordPress performance and achieving load speeds under one second. You can modify your default-filters.php file (located in /wp-includes/default-filters.php) to change the way these scripts load. Once you open the file, look for a code block starting with // Actions (at around line 244) and remove the following lines:  

  add_action( 'wp_head', 'wp_enqueue_scripts', 1 ); 

  add_action( 'wp_head', 'locale_stylesheet' ); 

  add_action( 'wp_head', 'print_emoji_detection_script', 7 ); 

  add_action( 'wp_head', 'wp_print_styles', 8 ); 

  add_action( 'wp_head', 'wp_print_head_scripts', 9 ); 

  add_action( 'wp_footer', 'wp_print_footer_scripts', 20 ); 

  add_action( 'wp_print_footer_scripts', '_wp_footer_scripts' ); 

  add_action( 'wp_print_styles', 'print_emoji_styles' ); 

Keep in mind this means you’ll have to load your own custom scripts if you want a dynamic website. For those of you who still want to load certain scripts the default way, I suggest doing it after the rest of your website loads, that way your text and images can show up first. You can do this by changing wp_head to wp_footer instead of deleting the lines described above, or by manually adding the required scripts to your footer (this doesn’t work with the emoji detection script). However, be aware that loading scripts at the end will render some of your website useless until they execute. This problem is magnified if you have large images which load before your external scripts. To eliminate render blocking issues with your scripts, you should inline them via your header or footer. 

Working with Pretty Permalinks 

Every SEO expert will stress the importance of pretty permalinks, it’s a fundamental part of blog SEO. Modern WordPress installs will automatically fill your htaccess file with the right rewrite rules. However, if you want a faster website, then get rid of the htaccess file and hardcode those rules into the main configuration file of your server. For Ubuntu OS, this file is apache2.conf (located in /etc/apache2/apache2.conf), or httpd.conf for Cent OS (located in /etc/httpd/conf/httpd.conf). Here is an example code block, where blog is the installation directory. 

<Directory /var/www/example.com/html/blog> 

        RewriteEngine On 

        RewriteBase /blog/ 

        RewriteRule ^index\.php$ - [L] 

        RewriteCond %{REQUEST_FILENAME} !-f 

        RewriteCond %{REQUEST_FILENAME} !-d 

        RewriteRule . /blog/index.php [L] 

</Directory> 

You can copy and paste that directly into your config file, but don’t do this inside any other <Directory> brackets, otherwise it won’t work. 

 

Keep in mind that without an htaccess file, you may have to do more modifications if plugins are added, although my recommendation is to code whatever functions you need directly into your theme, since plugins are one of the leading causes of slow load speeds and security issues. 

Creating Your Own Theme 

You could spend days or even weeks looking through all the themes available for WordPress. Many of them look pretty at first glance, until you take a closer look at their code. Quite a few themes out there come with an excessive number of external scripts and stylesheets, especially free themes. In fact, some of them need 50 or more HTTP requests just to load the page. This becomes a serious problem in terms of WordPress performance and achieving load speeds under one second on mobile networks. My themes require somewhere between 10-15 HTTP requests, no matter how much content is on the page. Even if you have a huge gallery to load, with 500 images, only the images in view need to be loaded first, the rest can follow when the user scrolls to them. This is called the lazy load technique, and I’ll be posting more on lazy loading shortly. If you want to read about building a WordPress theme optimized for performance, click here. However, if you don’t want to mess with code and would rather use a free theme, simply ask me and I’ll provide you with one. 

Dealing with Images 

It’s no secret that images which are poorly customized, or not customized at all, will have a significant impact on your load speeds. Even if you have a fully customized server and WordPress install, uploading a few unedited images into your blog post can quickly ruin things. This has an even bigger impact if your images are loaded before the rest of your external scripts and styles. A large image will delay the time it takes the rest of your scripts to execute, which means some parts of your website may be unusable until those scripts load. Now add a few more unedited images to your blog, and try loading your post on a mobile network. You can see how those images cause significant WordPress performance issues. This problem can be fixed by using a free online tool for basic file resizing purposes, such as tinypng.com, or you can download free image editing software such as GIMP, which can provide you with advanced resizing options. If you want to take it a step further and reduce the amount of HTTP requests needed to render your page, use CSS sprites. This is a simple process of taking multiple pictures and placing them side by side in one image. You can then adjust the image position in each element to show the desired picture.  

WordPress Avatars 

WP uses a service called gravatar to serve profile images. This has a big impact when it comes to comments. Unfortunately, the way WP and Gravatar communicate poses some issues for load speeds. On top of having to access another domain to get an image for a commenter, WordPress has to make several round trips for the exact same image. After running several tests, I’ve found that one image requires 6 or more roundtrip HTTP requests. If you have posts with a large amount of comments, you’re likely suffering from this right now. From a desktop network, it’s not so bad, but from a mobile one, this will cause issues, especially if the connection is weak. The best way to handle this is by using custom images to represent you and your visitors, while at the same time blocking connection attempts to Gravatar. You can do this by modifying your functions.php file, simply copy and paste the following block of code at the very end: 

//Avatar  

define('DEFAULT_AVATAR_URL', get_template_directory_uri() . '/images/default-avatar.jpg'); 

function no_gravatars( $avatar ) { 

    return preg_replace( "/http.*?gravatar\.com[^\']*/", DEFAULT_AVATAR_URL, $avatar ); 

} 

add_filter( 'get_avatar', 'no_gravatars' ); 

?> 

The top function will let you change the default avatar for all users by specifying an image path in the first line. 

This next code snippet will give each user the ability to use their own custom avatar via URL. 

<?php 

function be_custom_avatar_field( $user ) { ?> 

    <h3>Custom Avatar</h3> 

    <table> 

    <tr> 

    <th><label for="be_custom_avatar">Custom Avatar URL:</label></th> 

    <td> 

    <input type="text" name="be_custom_avatar" id="be_custom_avatar" value="<?php echo esc_url_raw( get_the_author_meta( 'be_custom_avatar', $user->ID ) ); ?>" /><br /> 

    <span><strong>Image should be 300x300 pixels.</strong></span> 

    </td> 

    </tr> 

    </table> 

    <?php  

} 

add_action( 'show_user_profile', 'be_custom_avatar_field' ); 

add_action( 'edit_user_profile', 'be_custom_avatar_field' ); 

function be_save_custom_avatar_field( $user_id ) { 

    if ( current_user_can( 'edit_user', $user_id ) ) { 

        update_usermeta( $user_id, 'be_custom_avatar', esc_url_raw( $_POST['be_custom_avatar'] ) ); 

    } 

} 

add_action( 'personal_options_update', 'be_save_custom_avatar_field' ); 

add_action( 'edit_user_profile_update', 'be_save_custom_avatar_field' ); 

?> 

<?php 

function be_gravatar_filter($avatar, $id_or_email, $size, $default, $alt) { 

    $email = is_object( $id_or_email ) ? $id_or_email->comment_author_email : $id_or_email; 

    if( is_email( $email ) && ! email_exists( $email ) ) 

        return $avatar; 

    $custom_avatar = get_the_author_meta('be_custom_avatar'); 

    if ($custom_avatar)  

        $return = '<img class="avatar" src="'.$custom_avatar.'" width="'.$size.'" height="'.$size.'" alt="'.$alt.'" />'; 

    elseif ($avatar)  

        $return = $avatar; 

    else  

        $return = '<img class="avatar" src="'.$default.'" width="'.$size.'" height="'.$size.'" alt="'.$alt.'" />'; 

    return $return; 

} 

add_filter('get_avatar', 'be_gravatar_filter', 10, 5); 

 

Each user should now be able to set their own avatar through a URL. To get started, go to your profile window in the admin panel and scroll down to avatars, you should see a new input window for an image URL. 

Testing Your Website on Mobile Connections 

There’re a number of websites out there which can give you a fairly good idea of what your load speed is. However, you can also test this directly from your browser. For example; in Chrome, right click anywhere on your webpage, select inspect element, then click on network at the top of the inspect menu. Once you have the window open, reload your page, you will see exactly how long each HTTP request takes, and the total load time. To switch to mobile network speeds, click on the mobile icon at the top left while your inspect menu is open. Above the mobile display of your website, you’ll see an online menu button, click this and switch to either mid-tier mobile or low-end mobile to slow your network speed down so it can match average mobile speeds. As far as online speed tools go, Google PageSpeed Insights is an excellent software for spotting WordPress performance issues. Other tools such as gtmetrix.com and tools.pingdom.com are reliable as well. However, keep in mind that when you’re running tests on these websites, you’ll be getting results from their servers, which may not necessarily reflect the speeds you’d get locally. Those services are best used to see how your website would load from other parts of the world. 

Getting Started with No Coding Knowledge 

If you don’t have the budget to hire anyone, you could always learn how to do this yourself. My suggestion: buy yourself a cloud server for $5 and start experimenting (don’t ever try this on a live environment unless you know exactly what you’re doing). In a worst-case scenario, leave a comment and I’ll help you out. Dealing with WordPress performance and achieving load speeds under one second is relatively simple once you figure it out.

2 responses to “WordPress Performance: Achieving Load Speeds Under One Second”

  1. Aly Chiman says:

    Hello there,

    My name is Aly and I would like to know if you would have any interest to have your website here at cdcontent.com promoted as a resource on our blog alychidesign.com ?

    We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well
    .
    If you may be interested please in being included as a resource on our blog, please let me know.

    Thanks,
    Aly

Leave a Reply

Design will determine how user-friendly your websites and applications are. A UI that is fast, convenient, and easy to understand is key to improving consumer interaction.

About

kirill sukharev's profile photo
kirill sukharev's University of Washington diploma
w3schools.com logo linking to kirill sukharev's certificates

Generating traffic won't mean much for your business if your conversion rate is low. I can help you with that, by eliminating web and application issues that have a negative impact on user interaction, and by filling your site with content readers actually find valuable.