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
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 http://sass-lang.com/documentation/file.SASS_REFERENCE.html first.
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.
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.
Enable Browser Caching
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.