The role of websites has evolved greatly over the last few years. Websites were initially a novel way of presenting information. Over the last few years websites have grown greatly in importance. Websites now may be regarded as the public image of all types of organizations. A well developed informative company website is a great asset for the company. Several technologies related to websites have been developed over the years, such as website performance testing, search engine optimization, email marketting etc.
The most commonly used tool for measuring website performance is the browsers developer tool bar. All major web browsers such as Google Chrome, FireFox and Internet Explorer have a built in developers tool box which provides detailed information on web page content. Several online services such as GTmetrix and Google PageSpeed are available for measuring website performance. These services not only measure various performance metrics but also provide suggestions on how to improve the website performance. It is the job of the website developer to implement these suggestions and ensure good website performance. In this article I will focus on the suggestions for improving website performance.
Common recommendations given by the tools
Some of the recommendations given by these tools are:
This involves reducing the use of redirect Urls. Redirect urls are those urls that redirect to other urls. This increases page load times.
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. Use of a content delivery network (CDN) can also help in this regard
Leverage browser caching
To make use of browser caching you need to configure your web server so it instructs the web browser to cache files for certain duration. For the Apache web server this can be achieved by entering commands in htaccess file. WordPress provides caching plugins such as W3 Total Cache, which have several caching features, including browser caching
Use a Content Delivery Network
Cloudinary is a CDN service provider that has a very useful free plan. They also have a plugin for WordPress that allows content hosted on their servers to be accessed from WordPress websites.
Put scripts at the bottom.
Choose <link> 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.
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. The W3 Total Cache WordPress plugin has support for compressing content. In Apache web server it can be achieved using the mod_gzip module. Once this module has been activated it can be configured using htaccess file.
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
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.
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]".
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 websites that are not based on WordPress. Best WordPress Hosting: Top 10 Comparison & Reviews is another useful article which reviews the best WordPress Hosting services.