Speed is a critical part of user experience (UX) today. Google reports that more than half of visitors abandon mobile sites that take more than 3 seconds to load. Even Facebook is keen on making sure sites deliver better, in terms of mobile UX. This means slow-loading websites will be penalized and see a dip in traffic if their owners don’t do something to speed up page loads.

Image Credit: Pixabay

To see how your page is performing, you can head over to Google PageSpeed Insights to see how well your website performs on both desktop and mobile. If you’re using WordPress, you should not always take for granted how its code and themes are optimized for both mobile and desktop. You can still do better.

For example, this screenshot below is the result of a default WordPress installation, and already, Google is saying that we have some issues to resolve the most critical of which appear in the “Should Fix” label.

Here’s a guide on how to fix these common issues.

Reduce server response time

There are several ways to address this. The best way is to upgrade to a faster and more powerful hosting service. Cloud services and dedicated servers are fast but pricey, however. If you are like most WordPress site owners who only avail of the more affordable shared hosting services and price-locked in multi-year packages, this may not be an option.

One free and easy way to solve this is by deploying your site via a content delivery network (CDN). CDNs work by creating copies of your website’s resources across geographically distributed servers. Visitors around the globe will then access resources like images, scripts and stylesheets from the servers closest to them instead of your webhost server. This decreases the latency or lag between visitor requests and response.

Services like Incapsula have free plans that provide website owners with a basic CDN service. Signing up does not require any payment details so you need not worry about being charged. They even have a video tutorial on setting your site up, since it requires changing your site’s DNS records.

Here’s what happened after putting our test site on Incapsula’s free CDN:

Before applying the CDN, response time was marked “Should Fix” where server response was 1.23 seconds. After applying the CDN, server response was cut to 0.49 seconds. PageSpeed Insights is still saying we should consider fixing it, but the quarter of a second gain makes a big difference, especially for websites that encounter significant amounts of traffic.

Leverage Browser Caching

Interestingly, putting the site on Incapsula’s CDN may have also fixed another issue – that of browser caching. While it wasn’t part of our initial problem, some sites may experience this. Alternatively, you can use WordPress caching plugins such as W3 Total Cache.

Minify JavaScript and CSS

Under “Consider Fixing” the more common entries are minifying JavaScript and CSS. A great plugin that aims to solve these pesky PageSpeed Insights issues is Autoptimize. You can install it directly through the plugins menu in WordPress. Within the plugin page’s settings, you can simply check the basic options involving HTML, CSS, and JavaScript.

Click “Save Changes and Empty Cache” at the bottom of the page. You may also notice that it also has a CDN option, although services like Incapsula’s maybe preferred since it also comes with additional optimization measures, like bot mitigation protection, aside from CDN.

Now, check with PageSpeed Insights again if we were able to resolve minifying JavaScript and CSS issues.

Eliminate render-blocking JavaScript and CSS above-the-fold content

So the next critical item to fix is the tricky “render-blocking JavaScript and CSS above-the-fold content” issue. Check the PageSpeed Insights results to see which elements on your page is causing this message to pop up. Having implemented the basic Autoptimize features, you might get these results:

We have 3 elements causing the issue:

  • jQuery JavaScript file
  • A PHP file (which handles the minified CSS created by Autoptimize)
  • Google Font

To address these, we will dig deeper into Autoptimize’s settings. At the top of the plugin settings page, click on “Show advanced settings.” This will reveal more options that we can set to further optimize the site.

Let’s address the issues one by one starting with the CSS files. Check the “Inline all CSS?” option.

Next, let’s solve the Google Fonts issues. If you’re not too particular about using Google Fonts anyway, you can check the “Remove Google Fonts?” option.

Lastly, resolving the jQuery render-blocking issue can be tricky. By default, Autoptimize excludes jQuery JavaScript files from being optimized. Try deleting the line “js/jquery/jquery.js” from the field. Before you do this, read the Autoptimize FAQs since it depending on your site’s use of JavaScript, this might break some things.

Click “Save Changes and Empty Cache” at the bottom of the page. Check PageSpeed Insights again. By doing this, we’re able to resolve the render-blocking elements.

Enable compression

One of our remaining items is compression. There are several ways to fix this. You can contact your web host to enable compression for you. You can also edit your .htaccess file. Perhaps the easiest way is to install and activate Check and Enable Gzip Compression plugin. However, checking PageSpeed insights, it was actually WordPress emoji that was causing this issue. Installing Compressed Emoji may solve this.

Optimize images

The test site still does not have too many images but putting up large and uncompressed images will slow down any site. For visual sites, you may consider using plugins like WP Smush or ShortPixel Image Optimizer to help you trim down on the excess bytes on your images. CDNs may also have advanced image optimization services, but these usually come with the paid options.

End Result

By applying these fixes, we were able to achieve a 27-point increase in the PageSpeed Insight score. The site is happily in the green. Our last remaining major issue is still server response time.

At this point, migrating to a faster web host may be the only option left to fix it. However, just by applying free and available solutions, we were able to up the score to something very acceptable.

%d bloggers like this: