How to Speed Up Your Website and Increase Traffic

What makes a website popular? Is this the content, SEO, attractive design, speed it runs at? Well, it is to be a perfect combination of all. If any of these breaks the entire chain breaks and site starts losing popularity considerably. In this article I will focus on Speed, which plays a major role in bringing more traffic towards your site. The following brief but very effective statistics shows how much a site depends on speed. It has been observed that even just an One second delay in page loading time will result a massive downfall:

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

And here is another statistics which tells us how people want sites to behave like in terms of speed:

  • About 47% of people expect a web page to load in two seconds or less!
  • About 40% will abandon a webpage which takes more than 3 seconds to load!
  • About 52% inline shoppers say quick page load is very important in order for them to stay loyal to that site!

From the above statics you can easily understand that speed is something which you must take into consideration in order to make your site a success! So, lets begin…

Minimize HTTP Requests

When you load a webpage, it first looks for the components to be loaded. Components can be CSS, JavaScripts, Images, Flash, Video, Audio and may be something else. For each single such component the webpage send requests to the server over HTTP. So more components you have on a page, more HTTP request the page has to send to the server. With all these requests going back and forth, the page ultimately suffers from a delayed load time. So, to make a page to load faster make sure you have the minimum server requests.

To achieve above goal you should follow some basic principles:

  • Streamline the number of elements on your page:It is very important that you decide exactly what you require on a webpage to display upfront. Many developers have a habit of experimenting different things but afterwards they comment out these section and just forget to remove them from HTML code when it is no longer necessary. Well, a few commented out lines may not affect page loading considerably, but a large number of such lines can. It is always recommended that you keep removing unwanted comments and lines from your HTML markup. This also makes sure that your HTML stays clean and easy for you to manage it.
  • Use CSS instead of images whenever possible: Comparing to old day website layouts today we have a lot more out-of-the box utilities to design a page more effectively. Like in old day practice, if we had to create a box with rounded corners, we needed to have at least one image (if not four) consisting of the corner images which we had to use in our CSS to make that rounded corner box. Today we have a simple CSS solution for this: border-radius: xpx; which in turn renders a box with nice rounded corners. There are many such small areas where you can easily avoid using images, whatever size they are of and use CSS instead.
  • Combine multiple style sheets into one: Many of us use to write separate CSS files to keep things easily distinguishable and manageable. For example, there could be style sheet called home.css which is specific for some elements to be used and styled for homepage only, or a style sheet called footer.css, which holds CSS properties for website’s footer elements only. This is really a good practice to have such organized way of keeping and maintaining our CSS. But the problem starts when the website loads and requests all these separate CSS files one after another. Longer your CSS files, increased load time your visitors would experience! So we need to avoid this situation and let our site load only a single CSS file but combining all rules from separate CSS files. Sounds awkward, right? But the solution is not so critical.
    We have SASS compilers available to do this job us! SASS is a utility which takes multiple SCSS files (which you want to be compiled) and create a single CSS file which you refer in our webpage.
    So, no more separate CSS files like above, rather name them as home.scss or footer.scss. Create another file called main.scss (you can name it whatever you like, there is no restriction for naming, but good to have a meaningful name). In this file you refer your separate SCSS files using @import like @import ‘footer’ or @import ‘home’. Important thing to remember that I haven’t used file extensions while @import-ing them. Now when you compile this main.scss file, the compiler takes the @import-ed SCSS files into it and creates a single main.css file which now consists of all your CSS rules you defined in separate SCSS files. You now simply refer this main.css file in your webpage. To know more about how SASS compiler works I would recommend you to read first.
  • Reduce scripts and put them at the bottom of the page:A webpage can have multiple JavaScript files to refer in order to work properly, like jQuery, your own custom script files or may be others as well. Generally you put them insidesection of the webpage, which is perfectly OK. But you have to understand that when a page loads it loads sequentially, i.e. first it reads the head section and whatever is in there will be loaded first, then to your body, where you have your content. Now if the head section is too heavy with a lot of CSS and JavaScript files references, it can easily understood that the loading time will increase as it will take more take time to reach to the actual content area and render it on page. You already have an idea about how you can minimize the number of CSS file references. Now with all JavaScript file references,
    it is a good practice to move them fromto the bottom of the page, i.e. just above . There may be a few script references that need to be in thesection and if you move them to the bottom page page might not work. In such situations, identify those scripts which have no effect at the time if loading your page and move them to the bottom – in short, move all your JavaScript references to the bottom of your webpage which have no significant task to do on page loading process.

Reduce Server Response Time

  • Database Optimization:If your database is delivering content from database, the first thing you should be sure about that your database is normalized and configured for output data with its optimum performance. A few things can easily make your database close to its optimum:
    (1) Tables are indexed, (2) Complex queries are using JOIN instead of Sub-queries, (3) Checking out execution plans of your queries and optimize them, (4) Use of pagination for large data sets, (5) Use Key constraints in Parent-Child relationships, (5) If your database is capable of handling Cascade operations, such as Delete, use it so that you don’t have to tell your code to delete records form different tables one by one.
  • Traffic and Hosting:You need to be very specific and clear about how you want your site to perform. If you are expecting a high traffic towards your site you need to check first whether your hosting provider is providing sufficient resource to handle that much of traffic. Because more traffic your site brings in, it makes itself slower. In such a situation you need to upgrade your hosting to a higher plan with more resources. In addition to that, you have to also consider the amount of resources required per user. If one user requires 50 odd resources to render,
    then at any given point, with at least one user visiting your site would make at least 50 calls to your server at one given instance. If 20 visitors are visiting your site one given moment, number of calls for resources will be multiplied by 20, i.e the site will now make 20 x 50 calls to the server.
  • Always Keep Server Software Up-to-date:Keeping your software up-to-date on the server is very important for your site to perform perfectly. Like in Windows server it Auto-updates itself, so are Linux server. But if you are on a dedicated server, you have to do this manually by going into the server, as most hosting providers do not give such support for free. Software updates come with bugs fixed, improved architecture, security patches and many more. Keeping software updated ensure your server is running with latest versions and security updates.

Used Minified CSS and JavaScripts

When a page is renderd, web browsers are not concerned about the readability of code. Minification makes sure that all unwanted or non-functional data in a code file is stripped that is not required by the file to execute. Unlike traditional compression techniques, minified files don’t need to be decompressed before they can be read, modified or executed.
Minification is performed after the code is written, but before the application is deployed. When a user requests a webpage, the minified version is sent instead of its larger sized original version. This allows the server to server the HTTP request with a much faster response time (reduced latency) and lower bandwidth costs. Use of minification techniques has become a general practice in present days’ web applications and should be used ranging from personal blogs to multi-million user services. I recommend you to read first about What is Minification and Why Minify JavaScript for a better understanding before you actually implement them in your websites.

Enable Browser Caching

Browser Caching reduces the site load time considerably. Caching can be done for static resources of your site like CSS, Images, JavaScripts etc, or even you can use this technique for database driven data as per your requirement. For static resources you can have longer cache expiry while for data it could be smaller. For example your site homepage content does loads fresh database once weekly, so you can use a caching for 7 days on this page. But if you have a product page which changes list of products randomly in every 3 hours, then the cache expiry could be set for 3 hours for this page. Any request of this page by the same user within 3 hours’ time will load the cached page, which will be way faster than the original page load time. There are different way of using caching in different development platforms like WordPress has a couple of nice plugins W3 Total Cache and W3 Super Cache. A WordPress plugin with more advanced techniques is WP Rocket but it is not free. In Drupal you can follow this resource. ASP.NET also has its own caching techniques. To know about how caching is done in ASP.NET, follow this article. If you are developing an ASP.NET MVC solution this article will tell you more about how to implement and enable caching in an ASP.NET MVC application.

Install Google PageSpeed on your Server

The PageSpeed module is an open source server module from Google that automatically optimizes your website speed; it makes modifications to your server and files, following website performance best practices, without requiring you to do anything else. Installing GooglePageSpeed will ensure that you are one step ahead already for maintaining a better speed of your website.

Optimize and Reduce Image Size

Un-optimized images in your application will have a serious pay load for your server. When a page is accessed on the browser and content is served, there are many HTTP requests the server has to deal with, which include images as well. If your images are not optimized and bigger in sizes, the load time will go considerably higher and there could always be a chance that your visitor ends up with a white screen of death! To avoid this situation, you much have your images optimized before they are served. There are two good plugins for WordPress out there: WP Smush and EWWW Image Optimizer. There is also a API based tool, Kraken which optimizes images well. You can use it for Drupal and Joomla. You may be interested to to know about Kraken’s Integration Libraries and Official SDKs, which covers a wide range of application development platforms.

Enable HTTP Keep-Alive

Do you know when a user opens a page of your website on your browsers how the server actually serves its content? It is a pretty heavy task load the server deals with! The server grabs each file individually by opening a new connection. In other words, for each file server opens a connection, grabs it, closes the connection and then reopens it for the next file, which in turn asks the server to use more CPU and memory and network resources. Enabling HTTP keep-alive ensures that all file requests to your server will be made via a single open connection, leading to a much faster website for your users by limiting the number of connections to your server. I recommend you to read about how to use Keep-Alive in Apache and IIS servers.

Regularly Optimize Your Database

Most developers do not pay attention to the database which is one of the most important building blocks of the websites they are building. But this is one of the powerful ways to boost up website speed and performance. If you are building a CMS driven solution like WordPress or Drupal, which depend heavily on database usage, optimizing database is one of the must-do items you have in your hand. A site can be made to run much faster by cleaning up database.
You can use WP-Optimize plugin for WordPress which automate the process for you without any additional headache or even you can do it manually if you like.