How to Optimize the Performance of a Website?

Website optimization is an important aspect for any site owner in order to provide a smooth experience to their site visitors. Users visiting slow loading sites tend to quit faster and also never return again. This will directly impact the revenue and reputation of the site. In this article, we will explain various factors affecting the performance of a website and how to optimize them to rank better in Google and other search engines.

Performance Impact

The impact on site performance happens mostly during the following points:

• When the web browser gets the HTML code
• Running JavaScript elements
• Reading CSS and
• Loading image files

This article explains the best practices to be followed to optimize your webpages in the front end.

1. Reduce Size of Page Rendered

The first and foremost thing is that the webpage should be as light as possible and it should be of less size. There are two things involved in cleaning up the site.

• Cleaning up the content such as images and files.
• Identifying and cleaning up unwanted or obsolete code or rewriting a code in a more efficient way.

Cleaning up the front and back ends will not only load your site faster but also offer better user experience.

2. Minimizing and Compressing Static Files

The webpage needs static files to be included such as JavaScript, CSS and images. The concept of minifying the static files such as JS and CSS files is actually removing any unwanted comments, spaces between codes, etc. generally these comments and indentation are needed from a development and maintenance perspective. But each of these comments and spaces will increase the file size. Since it does not affect the frontend function, they will be an overhead as far as a webpage is concerned.

Hence, it is a best practice to minify the JavaScript and CSS files when used on live sites. This will help in reducing the size of the static files being downloaded while accessing a webpage. Less weight and smaller files will definitely improve the performance of a webpage. There are many minification tools available on the web for minification of JS and CSS files.

3. Reduce HTTP Requests

Remember each CSS, JS and images files on your site send a separate HTTP request to the web server for loading. When a webpage has lot of files, most of the time while rendering a webpage is spent on downloading these files. So it is important to reduce the number of components which in turn will reduce the number of http requests sent from the page. This ensures that the webpage loads faster.

But reducing HTTP requests usually won’t be possible as we may require rich applications to run in the webpage. You can consider the suitable methods explained in the below sections to reduce number of http requests.

4. Combining Static Files

Usually there may be multiple JavaScript and stylesheet files included in a single webpage. All the JS files that are required while rendering a webpage can be combined together to a single file and included in the page. Implementing this will reduce the multiple http requests to a single request to the server and hence will ultimately achieve the same result with improved performance.

Similarly all the CSS files loaded in a page can also be combined to a single CSS file. Minification of the generated combined files as explained earlier will also help in the faster download of the static file. Note that combining JS files may break the webpage since the functions may not work as intended. Hence, test the features thoroughly before deploying the combined and minified JS files in live environment.

5. Load Files from Different Domains

When a static file is loaded, all the subsequent components wait till the download to get completed before even attempting to download the next one. This behavior of the browsers will definitely increase the time needed by a webpage to load.

Parallel download of the components is possible when the components needed are evenly distributed across multiple domains. Especially images can be loaded from the subdomain of a site so that they can be loaded in parallel to other content.

6. Loading Static Files Dynamically

In most of the cases all the components which are downloaded while accessing a webpage is not needed on page load itself. There are components which are needed only on certain actions carried on the page like clicking a link, hovering over particular text or image. Such components can be loaded at a later point of time.

Once such components are identified, we should be able to delay the download of these components. These event driven components can be made dynamically loaded which will reduce the number of components getting loaded at page load and instead will be downloaded only when that particular event is triggered. Similarly the image components that are needed only on any particular actions or events can also be downloaded dynamically.

7. Lazy Loading

Lazy loading is a concept by which the objects or components are deferred until the point where it is actually needed.

Usually when a page loads, the whole contents of the page are loaded. This will make the size & weight of the page heavy, not to mention the number of http request. On analyzing further on this, there will be some portion of the page which will be below the user viewable area and hence remains unused or not needed on page load. Identifying such area will help in implementing lazy loading concept.

This can be easily implemented using JavaScript where the dimension for the user viewable area is calculated. Then the content can be appended to the body of the html as soon as any action is invoked like a scroll. This can be also done by mentioning a time frame for loading of content or portion of the page later.

8. Image Sprite

Usually a webpage with multiple images will take longer time to load as the images is the heaviest component and downloading them will take lot of time and generates multiple http requests. These images may be as small as icons, buttons background images etc. And each time such images are needed a new http request will be triggered. Using image sprites is a best way to improve performance of a webpage.

An image sprite is a collection of images put into a single image. The individual image can be displayed by specifying the background position in CSS. This will reduce the page loading times, bandwidth usage and server loads.

9. Externalization Of JavaScript And Styles

Inline scripts and styles are not a way of best coding and also it is hard to get a good overview. There are lots of disadvantages in using inline scripts and styles.

• The size of the HTML rendered increases and it becomes heavier.
• Another thing is that since the HTML code will never be cached, all the inline JavaScript and CSS content are also not cached.

The caching can be improved by using scripts and stylesheets externally to improve the loading speed of a webpage.

10. CSS at Top and Scripts at Bottom

Putting style sheets or CSS files at the top of a page and that too in the head tag makes a page appear to load faster as it allows the page to render progressively. Progressive rendering usually gives the user an experience that the page is getting loaded much faster.

Moving the JS files to the bottom of the page improves the performance of the page. But the limitation in such cases is that any script which does the document writing or DOM manipulation during the page load time itself will be affected. There are another solutions where deferred and asynchronous scripts can be used. Deferring a JS file is similar to loading the JS file at the bottom of the page.

11. Remove Duplicate Scripts and CSS

Duplicated JavaScript and CSS usually increase the http request and also waste time on evaluating the JavaScript functions and styles unnecessarily. If an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page. You can use critical CSS method for generating common styles for all your pages and load them as a single stylesheet or inline the code.

12. Use Cookie Free Domains for Static Files

Make sure that all static components are requested with cookie free requests. Thus creating a cookie less domain and hosting all the cookie independent components (like images) in that domain will increase the performance of the webpage. Mostly the image components do not require cookie information and hence all the images can be loaded from a cookie less domain.

13. Container Binding For Event Handlers

On a webpage there will be several events binded for a particular functionality. For example, triggering a popup when clicking on a link. These events may be bound individually on the page load. This will prove more expensive if there are multiple events like this are binded to the DOM elements.

On a performance aspect all the event handlers can be contained together in a single container. The binding can be done at the container html element level and invoked on performing any event on any html element within this container. This will reduce the individual binding for each event and hence will improve the performance of the webpage on page load.