How to Get Best Speed Performance with WordPress

Understanding the speed performance of your website is fundamental in assessing its usability. Website users as well as Google and other search engines love fast speed These statistics should be disturbing but it underscores the need for a good website speed:

A one-second delay in page load time leads to:

    11% fewer page views
    16% decrease in customer satisfaction
    7% loss in conversions

You will also want to read:

Email Marketing - Optimizing Your Email Sending Time

How to Get Best Speed Performance with WordPress

Joomla Security - The Complete Guide

Common Problems with WordPress Websites and How to Fix Them

Running page speed tests with tools like Google PageSpeed Insights or WebPageTest are always a good way to help gauge your website’s performance. While these metrics can be very helpful it is also important to interpret the data in perspective. While they can provide valuable information to help optimize websites, don’t forget about perceived performance and the user’s experience to be specific. Speed performance will vary with different websites just as the tools for implementing faster loading pages are not exactly available for all applications.

Let's take WordPress for example and show you how speed performance can be enhanced perfectly - that is, getting the best speed possible with a WordPress website - test performance evaluated with Google PageSpeed Insights. But before we go into that, let's look at some background information to further justify our interest in age speed.

Also read:

Website Builders - An Easy Way to Launch Your Website

A Detailed Guide to Choosing the Right Web Hosting Plan

Tips and Tricks to Help You Run a Professional Joomla Website

Best Comment Plugin for WordPress Websites

Why Does Your Page Speed Matter?

There are a numerous reasons for which you should care about page speed. Two of these which will always stand out is how it affect your user experience and the second is that Google loves it and has further made it a website ranking factor. It implies that speed is important because its influence on a lot of things including ranking higher in Google search results and providing your visitors with a better user experience, thus increasing conversions.

We should find it worth reiterating that as web page load times increase, so does the likelihood of your visitors bouncing. Take these statistics from Google’s industry benchmarks for mobile page speed guide:

That same guide also goes into details regarding the page speed, page weight, and more of sites within particular industries According to Google, the best practice for a website’s speed is to keep it under 3 seconds load time. This best practice is far from being met for sites all over.

Furthermore, as the growth of web page size continues, Google’s recommended best practice of keeping a website under 500Kb in size is also nowhere near being met, on average.

The constant growth in web page size is likely a contributing factor to why static sites have been increasing in popularity as of late. Static sites don’t require a backend or database and are much more simple to manage. They’re also, on average, much smaller in size. Therefore if your site doesn’t require dynamic content, moving to a completely static site may drastically help improve your overall page speed and page weight.

Page speed as we have already noted affects many areas of a website that can change (for better or worse) how much success you can make with your online business.. However, understanding how much traffic and potential revenue you loose to poor page speed provides a much greater incentive to then make a change.

Google has helped us with a tool that gives us an insight into how much money can be made with increasing page speed. The Google performance revenue calculator estimates how much additional revenue you could be making if your site was faster. Take the example below for instance. A site which loads in 2.6 seconds, has 200,000 monthly visitors, collects an average order value of $20 and has a conversion rate of 2%. If the site owner were to improve the speed the speed of that site by just 1 second, they could potentially increase their annual revenue by almost $44,000 USD. Unbelievable isn't it? But that gives the reality in the power of page speed.

That’s a fair amount of revenue and a good incentive for doing something to make your site load faster. Interestingly, page speed boost may not take too much effort. But there are a lot of different optimization suggestions out there and knowing how to implement each one can take some time. However, as mentioned in the section below, don’t base your efforts solely off of the PageSpeed Insights metrics. Your goal isn’t just to score 100/100 just for the sake of having 100/100, the goal is to improve your site’s overall performance and conversion.

Web Hosting Features Every Businesses Should Take Seriously

A Guide on How to Design Your Website By Yourself

Recommended Tips to Keep in Mind When Using WordPress Plugins

Don't Be Crazy Over a 100 percent Speed Performance

A lot of people try and strive for that 100/100 score on Google PageSpeed Insights. Some do it because they are trying to speed up their site and others because a client is demanding they meet this metric. It is important to take some time though and think about why we are trying to achieve that 100/100 score. Don’t think of it solely from a metrics point of view. The whole reason Google developed PageSpeed Insights was as a guideline on best web performance practices to provide recommendations to optimize your site. And by following the guidelines hopefully, you will achieve a faster website.

It is also important to remember that achieving that 100/100 might not always be possible depending upon how your environment is setup.

The WordPress Website and Google PageSpeed Insights

Achieving a great speed for WordPress can sometimes be very tricky. We all know WordPress is not the fastest platform out there, especially from a developers point of view. And the way scripts and 3rd party plugins operate can make this somewhat of a very difficult task, especially when compared to standalone frameworks. But with some tricks, we can achieve a great seed performance on PageSpeed Insights.

Here are the recommendations which produces the an excellent seed performance with WordPress

1. Optimize Images

Google PageSpeed Insights says we need to optimize our images. If you have this warning with your test, you can fix it by installing the Optimus Image Optimizer plugin. This plugin focuses on smart compression, which means it uses a combination of both lossless and lossy compression techniques. It has a bulk-optimization feature so after you first install it you can compress your entire media library with one click. And from there on out it will auto-compress your images upon upload. The plugin also converts images to .webp. This allows for even faster download times.

Be aware that PageSpeed insights can show two different recommendations for image optimization, these include:

    Optimize Images: “Compressing … could save 4.7 KiB (30% reduction).”
    Optimize Images: “Compressing and resizing … could save 5.8 KiB (51% reduction).”

The first recommendation is focused solely towards compressing your image whereas the second recommendation is focused on compression and resizing. If your image is too large and should be scaled down for the browser, this recommendation will be triggered. You can find some ore information about PageSpeed Insights image optimization suggestions.

2. Minify Javascript and CSS

Google PageSpeed Insights will always want you to minify your JavaScript, CSS, and HTML. To fix this problem, install the free Autoptimize plugin. In the plugin’s settings you will want to check the following:

    Optimize HTML Code
    Optimize JavaScript Code
    Optimize CSS Code

We may also want to enhance this feature with the free WordPress Cache Enabler plugin to deliver the .webp images converted earlier to visitors in Chrome browsers for faster download times. In the settings make sure to check “Create an additional cached version for WebP image support.”

3. Render-Blocking Resources Above the Fold

Now Google PageSpeed Insights recommends we have JavaScript and CSS above the fold. There are three commons scenarios most people run into here, and that is your JavaScript/CSS files, Font Awesome, and Google Fonts. Fonts are render-blocking.

The first issue we have to deal with is all of our Javascript and CSS files that are above the fold, making them render-blocking. To fix this simply go back into the Autoptimize plugin we installed earlier and save the following settings.

    Under JavaScript Options uncheck “Force JavaScript in <head>?”
    Under CSS Options check “Inline all CSS?”

Many people who use Font Awesome take the CSS file and place it in their header. The problem is that if you put this into your header, it becomes render-blocking as CSS is render-blocking. So we take the following code and we move it down to our footer, right before the </body> tag.

<link href="https://yourdomain/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

Note: Doing this will result in FOUT, which is a flash of unstyled text.

The third issue is with our Google Fonts. By default, WordPress uses a hook called wp_enqueue_scripts which loads the font in your header. This automatically results in it becoming render-blocking. To fix this, install a free plugin called Disable Google Fonts. If you are using a custom theme this might vary slightly, or you can ask your theme developer how to disable Google fonts.

The next thing will be to include your Google font with the following code in the footer, right before the </body> tag.

<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

Note: Doing this will result in FOIT, which is a flash of invisible text.

You could also load your Google fonts asynchronously by using Google’s Web Font Loader. Simply place the following code below in your footer.

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

4. Leverage Browser Caching

Files

Google pageInsights will recommend about leveraging browser caching. You can address this the free WordPress CDN Enabler plugin, and this means that any assets delivered from the CDN already have cache-control headers. Now, there could be a problem with this. Where a file may not be getting delivered with the CDN. To fix this, you will simply add cache-control headers to the origin server by adding the following code to the .htaccess file.

 <filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
 Header set Cache-Control "max-age=84600, public"
 </filesMatch>

And here is the code if you are on a Nginx server.

location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ {
    expires 2d;
    add_header Cache-Control "public, no-transform";
}

Google Analytics Can also Be a Problem

Google Analytics can be a problem because the analytic script has a cache lifetime of only 2 hours. Google has already said that they won’t fix this. Which leaves almost everyone running analytics with a warning that they cannot fix.

You can use a free WordPress plugin called Complete Analytics Optimization Suite which sets up a cron job to sync across periodically the latest version of analytics.js. This then also allows you to serve it from your own CDN. This will get rid of the “leverage browser caching” warning with Google Analytics.

5. Enable Compression

We already had Gzip enabled on our origin server. You may want to contact your web hosti if this is not enabled on your server. Below are further instructions if you need to enable it on your origin server.

Apache

You can enable compression by adding the following to your .htaccess file.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Nginx

You can enable compression by adding the following to your nginx.conf file.

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

6. Reduce server response time

You can actually do something to reduce your server response time. The best recommendations would be to carefully select your web host and also implement a CDN,.

7. Remove Query Strings – An Optional Step

Although has been suggested as an optional step, it is recommended to remove query strings from your static resources. Resources with a “?” in the URL because they are not cached by some proxy caching servers or CDNS, which could result in a large missed opportunity for increased speeds. One way to do this would be to add the following to your functions.php file.

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 );

Another option would be to install a free plugin like Remove Query Strings From Static Resources.

This plugin removes query strings from your static resources like CSS and JavaScript files. It will improve your cache performance and overall score in Google PageSpeed Insights, YSlow, Pingdom and GTmetrix. Just install and forget everything, as there is no configuration needed.

Final Words

If you havebeen able to follow these instructions as outlined aboue, then you should have achieved a super-fast WordPress website. Though we have focused on WordPress in this post, these recommendations can also help you with other software and web building tools and content management systems. You will need some more research on your specif CMS to understand the changes need ed to make it really fast and rewarding.

Share this post

Comments (0)

Leave a comment


Powered by Simple Blog