WordPress Tutorial – Optimizing Your WordPress Website

Featured Tips-And-Tricks

WordPress was “invented” in May 27, 2003. The founders of this software are Matt Mullenweg and Mike Little. WordPress is a content management system (CMS) written in PHP paired with MySql database and it is well-famous as an online open source website building tool. WordPress features Plugin architecture, a template system, and a huge number of quality plugin of all kinds available to provide enormous scalability options to the website developers. This enables the WordPress developers to create a wide range of website niches; blogs, personal portfolios, discussion forums, online stores, job portals, marketing resources, to name a few.

Today, WordPress is powering more than 75 million websites. A recently carried out research reveals that WordPress has been used by more than 26% of 10 million best-ranking websites. The journey which started from a blogging tool to a CMS to a comprehensive full-blown web application technology has made it one of the top most popular tools of choice of millions of the software development companies as well as the individuals.


Optimizing WordPress Performance

For a seasoned WordPress developer or a website owner who is fully dependent on the website’s performance for their business’ success – it is very crucial for the website to be fully optimized and responsive all the time. You can’t afford to waste a second on the internet. Speed matters a lot, particularly when its about the website rendering time on client’s browser. In fact, if your WordPress website is slow and keeps users on waiting for even a few seconds – you’re likely to feel the negative impact forthwith. You might observe rising bounce rates, decreased conversions, and poor search rankings. As a matter of fact, making sure your website fast and performs well is the first of Google’s four Web Fundamentals, and it’s quite understandable to know why.

Fortunately, there are plenty of measures you can adopt to prevent from speed and performance bottlenecks. In fact, even if you’re not an expert in website optimization, you can, with the help of a number of plugins and other tools, improve your site’s loading time quickly.

In this guide, we’ll explain what you can do to boost website performance and optimize for speed. We’ll also look at how you can diagnose problems that slow down your website and, more significantly, how to prevent them from happening. There’s a lot to cover in this regards, so let’s get started to bid adieu to bad performance.

How to Check Your Website’s Speed and Performance

First and foremost – it’s time to inspect your own website and see how “cool” it’s currently performing. The best way to figure out if your site is suffering from slow rendering speed is to test it thoroughly and regularly. Fortunately, there are some nice free tools on the net which you can use to not only quickly gather this invaluable information but also gain some insight into some KPIs attributed to the performance.

We’re going to introduce two free tools you can use to test your website’s performance and speed. We recommend that you repeat these tests multiple times to get a more accurate result. It’s highly recommended to run these tests regularly. New factors can affect your website and slow it down unexpectedly, so you’ll always need to keep up-to-date with its performance.

Pingdom (tools.pingdom.com/)

The first option we’ll be looking at is Pingdom Tools. The Pingdom website accesses your pages from a specific location and displays report about how quickly they are loaded. This process enables you to test your website’s loading speed. In addition, Pingdom evaluates your website based on several metrics. For instance, it shows how many requests were required to completly load the page, how many redirects were performed, and how much time it took to load.

To perform a test, simply enter your site’s URL into the field on the main page, select the location you want to check your website for, and click on Start Test. You may have to wait just for a few seconds and here you go! The page will be loaded with the data portraying your website’s performance with several Key Performance Indicators, for instance, page size, load time, number of http requests the browser has to make, gzip compressions, content size etc. This will enormously help you to identify the weak areas of your website which need to be improved.

GTMetrix

Pingdom is a paramount resource for getting useful information about your website’s performance, but we also recommend that you give GTMetrix a whirl. This is another incredibly useful speed-checking tool. GTMetrix works pretty much the same way as the Pingdom tool, but it also provides much more in-depth information and even offers optimization suggestions based on your results.

Visit https://gtmetrix.com/ and start a test by entering your site’s URL on the home page and selecting Analyze. Since this test is pretty much in details, it may take a little more time to complete. While it’s being performed, you can see how many sites are ahead of you in the queue. Scroll down the page and you’ll find tabs with even more detailed test results, such as resource usage. However, you’ll need to get registered in order to access detailed information.

What follow are several methods you can employ to make sure your website loads faster and performs better than before. The more in-depth you get acquainted with these techniques to employ effectively, the better your results will be. So lets move forward to seize the chance to get your website ready to rock!

1- Choose a Quality Web host and the Hosting Plan

Picking the right web hosting provider and the hosting plan should be your most important point to consider about your website. Since your web host is where your website lives and performs, it will contribute a lot to determine your website’s speed, performance, and how gracefully it can handle high traffic. When a user accesses your website, your host’s server will determine how to efficiently manipulate the web resources, that is, the database, disk space, memory, CPU, email service and other inherent resources, and pass on to the users. Some servers are simply not up to the expectations. Alternately, your plan might limit your maximum speed or allowed server resources. In short, your website’s performance will be limited by the web server and adjuvant resources. Remember, the website performance tools like GTMatrix and Pingdom also consider the DNS lookup which is an attribute of the hosting provider.

It should be pondered that poor-quality hosting plan can effectively nullify all your other speed-enhancement efforts. Even if you optimize your website for speed, it wouldn’t make much difference if your server is relatively slow or your hosting plan is meager.

There are thousands of web hosting providers which provide quality service to the hosted websites. Still wondering where to look for? Consider what WordPress itself recommends for you.

2- Always Keep Your Plugins, Themes, and WordPress Software Updated

Bear in mind, when it comes to WordPress, you should never be hesitant to update every aspect of your website; WordPress, themes and plugins, as soon as possible. The most important reason in support of this is security, as new updates will ensure that your site is safe and secured against the latest threats of all sorts.

However, keeping your website up-to-date will also ensure that it remains fast, efficient and secured. The guys at WordPress are always striving to improve the core software to be faster and better optimized. By updating, you are ensuring that every aspect of WordPress and the installed software (themes and plugins) is running at its peak performance.

For instance, each core update brings about improvements about how your website handles code and delivers content. The same holds true when it comes to updating installed theme and plugins. This ensures that they are compatible with your version of WordPress, and are functioning as efficiently as possible.

You should also make sure your website uses the latest version of PHP. Again this will ensure speed, efficiency and security of your website considerably and also ensure full compatibility with WordPress.

3- Use WordPress Caching Plugins

Setting up a WordPress caching plugin is crucial to your website’s performance. In essence, a cache is a temporary data storage. In most cases, active data is cached which results in reduced loading time. For example, when you access a frequently visited site, your browser will have a portion of the site’s static content located in its cache. As a result, the browser needs to request fewer files and information from the server which ultimately leads to quicker page rendering. WordPress caching plugins work by creating a static version of your website and delivering it, instead of loading all PHP scripts every time when someone refreshes or re-enters your site. Hence caching significantly minimizes the resources required to run your website, which enormously helps to optimize the speed of your website.

There are several plugins you can use to do caching:

WP Super Cache
W3 Total Cache
WP Fastest Cache

4- Optimizing WordPress Images

Image optimization is another imperative task that should be done in order to make your website fast and furious. In general, there are 2 major issues that cause images to load slowly:

Using too large images. For example, you upload an image having 600 x 600 dimension but your website resizes it to 150 x 150. As a result, the users’ browser will have to download the larger file first, resize it appropriately and then display it. The adequate way would be to simply upload a 150 x 150 dimension image so that the extra task of scaling down the image could be gotten rid of. This way, the image would also take up less space, and hence, would result in an overall boost of speed.

Images are usually not fully compressed. You can save a myriad of space and bandwidth by employing proper compression techniques on your images. Luckily, WordPress has a marvelous plugin in its arsenal that can help you with that, it is called WP Smush. The benefits of this optimization task are directly proportional to the number of images in your website, so fear not, if your website is image-rich.

5- The Quality of Installed Theme and Plugins Do Matter

We’ve already pointed out above the importance of keeping your themes and plugins updated. However, it’s equally important to make sure you use the right piece of software to begin with.

The quality themes and plugins work hand in glove with the core WordPress code. There’s a common misconception that having scores of plugins installed can slow down your website. The fact of the matter is that It’s not necessarily the number of plugins that matters, but their quality. Moreover, plugins meant for security, SEO, and e-commerce tend to require more resources; RAM, CPU etc. as they add more code and functionality to your website. For this reason, it’s important to research the plugins you’re using and make sure they don’t tend to over-utilize resources than they actually need.

Even WordPress themes can affect your website’s speed. Many themes include functionality which may not be required, or require more files than usual to function, which can also cause your website’s performance to slow down or use more resources.

Choosing a well-built theme and high-quality plugins is accomplished through careful research. Make sure to check out users’ reviews and ratings, look at the developer’s update history, and make sure that each tool is tested enough to work with your version of WordPress. Compliance with these simple criteria will help ensure that you don’t install anything on your website that might adversely affect its speed and performance.

6- Minify and Compress Your Website’s Files

Minification is actually a process of making your website’s code somewhat more efficient. In short, it strips away all unnecessary characters, e.g, spaces, newline, carriage return etc. from your code to not only conserve space and bandwidth but also make it run faster.

When humans write code, we tend to make it as readable and clear as possible. For instance, check out the following CSS snippet:

green {
font-size: 1em;
color: green;
font-family: verdana;
}

Do you see how it uses spacing and newline to make the purpose and functionality clear? This is helpful to a human, but the computers that process the code don’t need it to look that way. If we had to minify this code, it would appear pretty much like this:

green{font-size:1em;color:green;font-family: verdana;}

This code is functionally same as the previous example, but a computer will read and process it much efficiently because there are fewer characters involved to read and process. It doesn’t seem to be a big change. However, imagine how much such code your entire website contains, and you’ll see how removing all these unnecessary content can help to optimize it.

If you’re not experienced in working directly with code, then don’t worry. Minification can be done easily without needing to touch already-tested code. For example, you can use an online tool to minify code right in your browser. You can keep both original and minified versions but publish only the minified one. We recommend using CSS (https://csscompressor.com/) and JS Compressor (https://www.minifier.org/), as they both feature user-friendly interfaces and produce results quickly.

7- Enable Gzip And DEFLATE Compression

Compression allows your web server to provide smaller file sizes which result in remarkably faster load of your website pages.

It is interesting to know that compression can reduce the size of HTML, JS, CSS and other client-side files upto 60% to 80%.?

By compressing the files before rendering to the user’s browser a lot of bandwidth is saved and the page load time of your website is enormously improved. When a user visits your website, the compressed files are uncompressed automatically by the browser in order to reveal the original content.

Both compression algorithms (Gzip and DEFLATE) are different and used for different servers. Gzip compression is used on Apache and Nginx servers, while DEFLATE is only used on Apache servers.

To accomplish this, add the code below in your .htaccess file to Enable Gzip and DEFLATE Compression.

For Gzip Compression on Apache

Gzip compression works by finding similar string patterns in a text file and replacing it temporarily, resulting in a smaller file size. HTML, CSS and Javascript files have plenty of repetitive text and spaces, making gzip compression very effective. On the whole, it can reduce the size of a WordPress page by up to 50-70%. Here’s what you have to copy/paste in your .hteaccess file to accomplish Gzip compression:

<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.
</IfModul

For DEFLATE Compression on Apache
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/x-font
</IfModule>

8- Deferring parsing of JavaScript in WordPress

While accessing a website, many of the WordPress themes and plugins use a lot of JavaScript which is by default loaded first. This will make the HTML and other visual content to wait for their appearance until the JS, JQuery and related script files are loaded. Fortunately, for the sake of speed optimization you can defer parsing of JavaScript so that the visual elements load and appear faster, while various social media content and other DOM objects that use Javascript would be loaded afterwards. This is one of a must-do techniques recommended by Google Developers for speed optimization. In WordPress, you can do that simply by using plugins such as WP Deferred Javascripts or Speed Booster Pack.

9- Using a Content Delivery Network

Implementing a content delivery network (CDN for short) will speed up WordPress Website by caching content in multiple data centers around the world. After a visitor enters your website, the content will be delivered by the nearest available data center, resulting in a better user experience. Content Delivery Networks provide amazing performance boost while working with WordPress caching plugins – and there are free of cost solutions available to get you started. For example, CloudFlare has a free plan which provides both benefits of a CDN while protecting your website from DDoS attacks. Amazon CloudFront, as they claim, is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer rate, all within a developer-friendly environment.

10- Enabling Lazy Loading

By and large, when a web page is opened in a browser, all the content is loaded instantly, which is called “Eager loading”. Alternatively, it is possible to delay the initialization of some DOM objects (like media content such as images and videos) until they are needed. This phenomenon is called “Lazy loading”. The most common practice is to display images only when they are visible from the visitor’s viewpoint on the screen. In order to take advantage of this technique all you need to do is install and enable a plugin such as Lazy Load. Lazy load technique helps loading the page quickly because it defers the execution of a substantial amount of script until the time it is really required to kick in.

11- Clean Up Your Media Library and Posts’ Revisions

It’s not just plugins and themes that can build up over time and overindulge your website. Over a period of time your site grows and your media library will get snowed under with images, documents, video clips and other files. It’s quite usual for the websites, which are live and functional for many years, to contain hundreds, or may be thousands of such media files.

Even if you use image optimization and compression techniques, these too many files can start to obstruct your server resources. A fair amount of these files might no more be of any use but they are causing mere congestion. Identifying and deleting unused media files can be a panic-stricken job if manually done. Fortunately, there are plugins that can help you out to get it done quickly.

For this purpose, we recommend that you use the Media Cleaner plugin. Media Cleaner cleans your Media Library from the media files; images, videos, documents etc. – which are no longer used in your website. An internal trash allows you to make sure everything works properly before purging these media files from your website.

Remember, you can’t expect your website to consistently provide you great results if you don’t constantly care about, to improve it!

Optimizing your website for better performance is a recurring process. You have to keep refining the things and removing the barriers which you might come across en route your efforts to achieve the top-notch performance of your website. In fact, there is always a room for improvement for your website and that should be kept in your mind.

8 thoughts on “WordPress Tutorial – Optimizing Your WordPress Website

  1. Every weekend i used to pay a quick visit this website,
    for the reason that i wish for enjoyment, since this this site conations in fact nice funny material too.

  2. Wow that was odd. I just wrote an very long comment but after I clicked submit my comment didn’t
    show up. Grrrr… well I’m not writing all that over
    again. Anyway, just wanted to say superb blog!

  3. whoah this weblog is wonderful i love studying your posts.
    Stay up the great work! You know, a lot of people are hunting around for this info, you
    can help them greatly.

  4. I am not sure where you are getting your info, but great topic.
    I needs to spend some time learning more or understanding more.
    Thanks for wonderful info I was looking for this info
    for my mission.

Leave a Reply

Your email address will not be published. Required fields are marked *