How to Make Your Website Load Super Fast

How To Make Your Website Load Super Fast

Website performance is often overlooked during the design and development process. The amount of time it takes for a website to “load” impacts most everything from a user’s experience on desktop and mobile devices to search engine crawl rates and can also affect its rank on search engines.

Generally, websites that load fast get longer-lasting visits which, in turn, leads to more conversions and to potentially increased sales. So it is important to take necessary steps to make your web presence – whether it is a website, a web application, an e-commerce site or a blog – load as fast as possible.

Here are some tips that can help your website load super fast:

Measure Loading Speed

Start by measuring the loading speed of your site. There are several tools available that will help you to measure and establish performance benchmarks.

Yahoo’s YSlow

The venerable YSlow Tool  still shines and has been around for several years. It also offers extensions for Firefox, Safari, Opera and Chrome and suggests ways to improve website performance.

YSlow! Speed Test for www.yahoo.com

Above: Yahoo’s YSlow Screenshot

Google’s Page Speed

Google Page Speed is an open-source set of performance tools that can analyze your website for loading speed issues. Not only does Google’s Page Speed include tools that measure website performance, it also includes extensions for Firefox and Chrome. And what’s even better is that you can also do an analysis for mobile performance as well.

Google Page Speed Desktop Test for www.yahoo.com

Above: Google Page Speed Screenshot for Desktop Performance

Google Page Speed Mobile Test for www.yahoo.com

Above: Google Page Speed Screenshot for Mobile Device Performance

ShowSlow

ShowSlow is another open source tool that monitors website performance by capturing multiple website performance metrics from Yahoo’s YSlow, Google’s Page Speed and dynaTrace AJAX rankings and graphics to help website developers understand how performance is affected by design and development changes.

Show Slow Speed Test for www.yahoo.com

Above: Slow Speed Screenshot

WebPageTest.org

WebPageTest.org provides a waterfall view of a website’s load performance and provides suggestions for improvements along with an optimization checklist

WebPageTest.org Speed Test for www.yahoo.com

Above: Web Page Test Screenshot

Pingdom Website Speed Test

Pingdom Website Speed Test provides a snapshot of issues and along with a detailed list of issues and also offers suggestions for how to improve performance.

Pingdom-Load-Test

Above: Pingdom Website Speed Test Screenshot

Please note that many website designers and developers may not offer detailed website load time optimization during the design & development part of the project, rather, they may offer this as an add-on or additional service at a later date.

Recommended Performance Updates

After you measure page load speed, look at what changes can be made to improve performance. Start by focusing on the following areas – you can work with you website designers and developers on these improvements pretty much immediately.

Reduce the number of HTTP requests

Minimize the number of HTTP requests made to the web server. A lot of time is spent downloading components from the web server (images, graphics, style sheets & scripts) and simplifying the design of the website can reduce the number of these HTTP requests.

Implement Server Side Caching

By implementing server-side caching, you can speed up your website by dynamically storing generated data for re-use on your web server so it is served immediately rather than being read from the disk and database every time it is accessed.

Expires Headers

If your website is not being continually updated, you can make the non-changing components such as images, style sheets and scripts cacheable. This can also serve to reduce the number of HTTP requests. Try to add a far futures expires header with an expiration date in the future to see if this improves load time

CSS Sprites

CSS sprites allow you to combine background images into a single image by using the CSS properties such as “background-image” and “background-position”. By doing this, you can adjust how images displays on your site. You can also use image maps to reduce the number of HTTP requests that are made to load multiple images. Here is what Google has to say about CSS Sprites.

Multiple Style Sheets

If there are multiple style sheets attached to your website, you can reduce the number of HTTP requests by combining them into a single CSS file to speed up loading times.

Compress Site Components

In addition to reducing the number of HTTP requests, you can also compress certain components to reduce the amount of data transmitted over the network. By compressing resources such as scripts and CSS style sheets, you can improve loading times. The most popular and effective compression method is gzip.

Use Content Delivery Networks (CDNs)

Wikipedia defines CDNs as “A content delivery network or content distribution network (CDN) is a globally distributed network of proxy servers deployed in multiple data centers. The goal of a CDN is to serve content to end-users with high availability and high performance”.

When properly implemented, CDNs deliver content faster and are optimized to deliver this content without cookies.

Let us consider an example. Cloudflare, a popular CDN, has servers in 74 locations across the world. So, when someone that is accessing your site from, say, Madagascar, they will probably get content served from Johannesburg. Similarly, when someone from the Caribbean accesses your site, they will probably get content served from Miami.

HTTP Keep Alive Response Headers

HTTP keep-alive works by keeping a single connection open to send and receive multiple HTTP requests & responses instead of opening a new connection for every single request & subsequent response.  The advantage is that larger amounts of data are transferred during an open connection and this, in turn, speeds up website performance.

Code Minification

Code minification removes all unnecessary “white space” such as spaces, new lines, and tabs and reduces load time because the amount of time to download the file is decreased thereby improving website performance. Popular tools to minify JavsScript files include JSmin and YUI compressor.

HTTP Redirects

Keep HTTP redirects to a minimum and use then only when necessary. There are times when one or more redirects are required (for example, when you move a website or are in the processing of restructuring pages) but know that redirects will cause a website to load slower as the browser will go through the process of loading the original page and then go through the process of loading the re-directed page.

Website load time optimization can be a complex subject and it is best to test and the improve performance incrementally and then to repeat the process as needed. Website optimization takes time and patience; and if you do invest the time to optimize your website, the results can be gratifying.

Other suggestions include the reduction of the number of DNS lookups, elimination of CSS expressions, moving JavaScript and CSS to external locations and more.

Summing Up

The above tips will get you started with the process of optimizing your site; if you want to delve deeper into the process, consider approaching each of the following as an independent project as part of the website load process. Remember, web pages are typically loaded in sequence and some of the steps can repeat multiple times.

You could tackle each of the above steps of the loading process as a single smaller project. Remember to continue to test your site performance and to make incremental updates to improve the performance.

Regardless of what approach you take, at the very least, we recommend that you get started with the steps outlined in this article.

Remember, the results you get may vary but if you can shave off even couple of seconds from the load time, you will have a faster website.

What has been your experience after you optimized the performance of your (or a client’s) website? Have you been able to make your (or your client’s) website load super fast?