Pak Jiddat - Innovative Software Services

Read: In the name of thy Lord Who createth, Createth man from a clot. Read: And thy Lord is the Most Bounteous, Who teacheth by the pen, Teacheth man that which he knew not. Nay, but verily man is rebellious That he thinketh himself independent!. Lo! unto thy Lord is the return. (Sura Alalaq 96:8)

Improving WordPress Performance

Created On: 23 Jun, 2018: 09:25:36 - Tags : content management systems | website testing

Introduction

Recently I had the opportunity of working on improving the performance of a WordPress website for a customer. I will describe my experience in this blog post. Slow website loading times can distract your website visitors and discourage them from visiting your website again. If the website takes too long to load it can give the impression of a web site that is not well designed. It can also create a bad impression of the company. It is best to conduct a thorough performance tuning of your website before it is launched to the public. You can create a development version of your website and test it for performance. After it has been tested you can make the website live.

The popularity of WordPress

WordPress is a very popular platform for hosting different types of websites. According to the article, What Code You Should Learn, over 19% of all websites are based on WordPress. WordPress has over 25,000 plugins and themes that perform just about any task you can expect of a website. 14 Surprising Statistics About WordPress Usage has some interesting statistics about WordPress.

Improving WordPress performance

There are many factors that can slow down your WordPress website. Knowing exactly what is slowing down your website can be difficult. Fortunately there are several free on-line tools that can help you troubleshoot website performance problems. The level of information provided by these tools is amazing.

Process for tuning WordPress performance

The process I used for tuning the performance of a WordPress website is very simple and can be described as follows. You need to run one or more on-line tools that analyse the performance of your website. These tools provide recommendations on how to improve your website. Implement these recommendations and run the tools again. Then implement the recommendations of these tools again. Continue doing this until the tool gives a good performance figure for your website. These tools can be used to analyse the performance of any website in general including WordPress based websites.

Tools for performance tuning

Some of the tools used for performance tuning are:
  1. Dotcom monitor

    This is a useful service that checks your website in real web browsers in over 20 locations. It gives average load time and waterfall of your website for each location as well as an overall average loading time and waterfall for your website. A waterfall is chart that provides detailed information about the resources on your website. For example it gives the size and loading time of each CSS, JavaScript and image file. It helps you too pinpoint the exact resource that is slowing down your website. With this tool you can also find out how much time your website takes to load for visitors from certain countries. The tool allows you to select the type of browser to be used for testing. Currently it supports Google Chrome, Firefox, Internet Explorer versions 7 and above, Iphone, Ipad, Ipod, IpadMini.
  2. Google Webmasters Mobile-Friendly Test

    This is a useful service that gives a measure of mobile friendliness of your website. The tool also provides reasons why your website is not mobile friendly. For example "Text is too small to read", "Links too close together", "Mobile view port not set". Mobile friendliness is now an important criterion in Google search rankings. This was recently announced by Google and is describes in the article "Get Ready For Google's New Mobile Ranking Signal"
  3. Google PageSpeed

    This is a useful service that runs Google Pagespeed tool on your website. The tool describes how your website runs on mobile devices and desktops. For mobile devices, the tool provides a score out of 100 for User Experience and Speed. It also highlights the areas in which your website is lacking and gives recommendations. The tool also gives an overall Pagespeed score out of 100 for Desktop devices.
  4. GTmetrix

    This is a very useful service that provides a Performance Report of your website. It gives following information: Page Speed Grade, Y Slow Grade, Page load time, Total page size, Total number of requests and a Breakdown. The Breakdown gives recommendations on how to improve the page load time. It basically just gives the recommendation of the Google Page Speed and YSlow tools. You can also export the performance report as PDF.
  5. Pingdom Website Speed Test

    This is an excellent tool that gives a detailed description on the requests done to load a webpage. For each request made for downloading a resource such as a CSS file, the tool gives detailed information such as time taken to load the resource including breakdown of the time taken and the size of the resource. The breakdown of the time taken includes time taken for DNS, Connect, Send, Wait and Receive and Total. The main features of the tool are a performance grade out of 100, number of requests made by the browser, page load time and page size. The tool also gives detailed information about the Waterfall, Performance grade, Page analysis and History.
The level of information provided by all these tools is amazing. Although all tools provide similar information, it is good to run your website on all the tools so you get an overall measure of your website performance. Implementing the recommendations of these tools is not difficult.

Common recommendations given by the tools

Some of the recommendations given by these tools are:
  1. Combine external JavaScript and CSS

    This implies combining several JavaScript files into one file and several CSS files into one file. This reduces the number of requests sent by the browser and reduces the page loading time. On WordPress based websites this recommendation can be implemented using a plugin such as JS & CSS Script Optimizer. This plugin supports combining and minifying JavaScript and CSS files.
  2. Minimize redirects

    This involves reducing the use of redirect Urls. Redirect urls are those urls that redirect to other urls. This increases page load times.
  3. Minimize DNS lookups

    This implies reducing the number of host names that need to be looked up by the browser. This can be implemented by hosting all your web resources under a single host name.
  4. Leverage browser caching

    This is a common recommendation given by most of the tools. It implies making use of web browser caching. Web browsers can place resources such as CSS, JavaScript and image files in their local cache. By using resources in its local cache, the web browser has to make fewer requests to the web server. To make use of browser caching you need to configure your web server so it instructs the web browser to cache certain files for certain duration. In Apache web server this can be achieved by entering certain commands in htaccess file. In WordPress this can be achieved by using a plugin such as W3 Total Cache.
  5. Use a Content Delivery Network

    This means using a Content Delivery Network (CDN) for hosting static resources such as JavaScript, HTML, CSS and images. The benefit of this is that the content is delivered more reliable and quickly. CDN services such as Akamai, Cloudflare and Cloudinary can be used to host your static resources. Cloudinary is a useful free CDN service provider. They also have a plugin for WordPress that allows content hosted on their servers to be accessed from WordPress websites.
  6. Put scripts at the bottom.

    This implies placing your JavaScript and CSS files at the bottom of your html page. It makes sense to delay loading CSS and JavaScript files that are not needed for rendering the page. These files may even be loaded asynchronously. Loading asynchronously means the file is downloaded and processed while other operations are being carried out. This allows the web page to render more quickly. Delaying the loading of scripts may not always be desirable. For example CSS and JavaScript files needed for rendering a page should be placed inside the head tag so they can be downloaded and processed quickly.
  7. Choose over @import

    This implies linking your CSS files using links tags instead off CSS @import statements. Using link tags is preferable because certain web browsers load css files that are linked using @import statement at the bottom of the page.
  8. Gzip and compress components

    This implies compressing web page content before it is sent by the browser. Content that is compressed takes less time to be transmitted and also reduces the network bandwidth usage. This can be implemented in WordPress using plugins such as W3 Total Cache. In Apache server it can be achieved using the mod_gzip module. Once this module has been activated it can be configured using htaccess file.
  9. Optimize and correctly display images

    This implies ensuring that your images are compressed and are not larger than the required size. Images tend to be large in size and are one of the main bottlenecks of website performance. It is important to compress an image and resize it before serving it on your website. In WordPress this can be achieved using plugins such as EWWW Image Optimizer or Smush.it. Both these are excellent plugins that can resize and compress the files in WordPress media library. Alternately you can use a free online image compression tool
  10. Minify HTML, CSS, and Javascript

    This implies compressing HTML, CSS and JavaScript files before serving them. This makes the file size small and reduces the time needed to download the file. In WordPress this can be achieved using plugins such as W3 Total Cache.
  11. Use CSS Sprites

    A CSS Sprite is one large image that contains smaller images. CSS code is used to display images within a CSS sprite. CSS Sprites are specially useful for combining background images into a single image. The benefit of this is that it reduces the number of requests for individual images. The Spriteme website provides a useful on-line tool for creating CSS Sprites.
  12. Monitor plugin performance

    Remove the plugins you dont need. Having too many plugins on your site greatly reduces performance. You can also use the P3 performance profiler plugin to check which plugins are slowing down your website. This tip was suggested in a useful blog post titled "Speeding up WordPress load from 4.23s to 1.33s [Case Study]".
  13. Use online validation tools

    The World Wide Web Consortium (W3C) is an organization that manages HTML standards. It has an excellent on-line tool that can be used to validate html documents. In WordPress you can validate each page and post of your website using the validated plugin. WordPress also has a useful plugin called Broken Link Checker, that can be used to check your website for broken page links.
Ensuring that the html of your website complies with web standards is an important consideration for any website. A website that is standards compliant will not only receive a higher ranking in Google search results but will also render more reliably across different web browsers.

Performance Unleashed: How To Speed Up WordPress Load Times is a useful article that describes how to improve WordPress load times. The optimization tips given in the article can also be applied to Non WordPress based websites. Best WordPress Hosting: Top 10 Comparison & Reviews is another useful article which reviews the best WordPress Hosting services.

Conclusion

Ensuring good performance of your website is very important, especially if your website is the public image of a company and is visited by many visitors. Ensuring good performance of a website requires thorough research into tools and techniques of website development. Website Development is a useful skill to learn that is well worth the effort.

Related Articles

  1. Creating custom themes for October CMS
  2. Developing WordPress plugins using Pak Php framework - Part 2
  3. Developing WordPress plugins using Pak Php framework - Part 1
  4. Validate your WordPress blog using WordPress XML-RPC API, Php Tidy and Nu HTML Checker
  5. WordPress Deployment with Jenkins and Redmine
  6. Tuning WordPress performance using Varnish
  7. Creating your own WordPress themes and plugins
  8. WordPress for small and medium businesses
  9. Some excellant Wordpress Plugins