ICT: How to Make Your Website Load Faster

No matter how beautiful your site is, your website page speed is critical to success. Not only do faster load times help boost search engine rankings, but 40% of people will abandon a site if it takes longer than three seconds to load. To make matters worse, every extra second your site takes to load will cause a 7% decrease in your conversion rate.

So, how do you minimize your load times to maximize your revenue?

Well, I’ve used the techniques below to optimize Quick Sprout, and I’ve improved my load time by five seconds. Results, of course, vary, but if you follow the techniques below, you can expect anywhere from four to six seconds in time savings.

The basics

For starters, the key to faster pages is reducing the front-end load time. For the end-user, 80% of the response time is tied up in HTTP requests. This is the performance golden rule. That means you have to minimize those requests.

Here’s how to do that:

•     Simplicity – Make the page design simple. One or two images and text. But you probably want richer components on your site.
•     Combination – Taking all the scripts and piling them into a single script and, similarly, combining all CSS into a single stylesheet.

The rest of the performance techniques I’ll share with you will also render HTTP requests lower.
Combine images with CSS sprites

If you have many images on your page, you are forcing multiple roundtrips of the server to get all the resources secured. This slows down page speed.

Sprites combine all background images on a page into one single image. The proper image segment will be displayed because of the CSS background-image and background-position properties.

CSS sprites reduce:

•     Delays caused by roundtrips made as the server is downloading other resources.
•     Request overhead.
•     Total number of bytes a page downloads.

You can use a service like SpriteMe to make this process easy. Otherwise, you can follow the sprite recommendations made by Google.
Enable compression

 

You can compress resources by using deflate or gzip to actually lower the number of bytes a page is sending over a network. Using the GZIP compression algorithm, popular web servers like Apache and IIS do this automatically on HTML, CSS and javascript.

You still need to optimize your content for compression. There are two things you need to do to make sure your web content compresses effectively:

•     Create consistency across your HTML and CSS code. This happens when you:
•         Order the CSS key-value pairs in a common sense way, e.g., alphabetically.
•         Do the same with your HTML attributes.
•         Be consistent with your casing and use lowercase as often as possible.
•         Make sure you are consistent with your HTML tag attribute quotes.
•     Minify JavaScript and CSS. By getting rid of unnecessary line breaks, extra space, etc, you will speed up parsing, downloading and executing.

I recommend using one of these tools to minify JavaScript: JSMin, Closure Compiler or Yahoo’s Compressor.
Spread your static content with CDNs

Because the location of the user impacts page load speed, spreading your content across servers will speed up this process. You can use a content delivery network (CDN) to make this happen.

What exactly is a CDN? It’s just a collection of servers that exist at different places in the world. CDNs do two things:

•     Send files faster – Cached files are sent from locations that are closer to the specified user.
•     Shrink file size – CDNs deliver content that is without cookies. No bloated files.

For example, a CDN service provider could have servers in California, New York, Sweden and Hong Kong. When a user accesses your site, the server with the fastest network hops or quickest response time delivers the content. Someone in the Philippines might get served from Hong Kong. Someone in Mexico might get served content from California.

Using a CDN is a pretty simple code change, but it can be expensive. And while some large Internet providers have their own CDN, it’s best to use a service provider devoted to CDNs.
Leverage browsing caching by using “expires” headers

 

Any time someone visits your website, his or her browser will store a ton of files like stylesheets, scripts and images onto that persons’ hard drive. That will reduce the number of HTTP requests and speed things up next time that person visits your site.

Those files have an expiration date in the header. This is known as “expires” headers. By default, that expiration date could be set to 24 hours, meaning it will update every day. Very few, if any, websites need that short of an expiration date.

There are two things about this rule you have to keep in mind:

•     Static components – Set a “Never expire” policy far into the future. These components become cachable, avoiding time-consuming and unnecessary HTTP requests. “Expires” headers should be used for images, Flash, scripts and stylesheets.
•     Dynamic component – Use a cache-control header to help the browser with conditional requests.

The “expires” headers will tell a server for how long to cache an item. Most static files should be set to one year into the future.

    |      Expires: Thu, 20 September 2013 20:00:00 GMT

Apache servers should use the ExpiresDefault command to set the date in the future compared to absolute time. Using the example above, the command would look like this:

    |      ExpiresDefault “access plus 1 year”

You will have to change the component’s filename when you change that component in the future. From Google, you can see what cache response headers HTTP/1.1 provides.
Enable HTTP keep-alive response headers

HTTP requests are simple: they grab and send a single file and then close. That may be simple, but it isn’t very fast.

Keep-alive is a trick that basically says the web browser and server agree to use the same connection to grab and send multiple files. In other words, the server holds the connection open while you are on the site instead of opening a new connection with every request. This way your processor, network and memory don’t have to work too hard.

Here are two common ways of enabling keep-alive:

•     Enable HTTP keep-alive on Window servers
•     Apache optimization: KeepAlive On or Off?

Three performance testing tools

Besides the tools that I shared throughout this article to help you with each performance-improving technique, here are three basic tools that will evaluate your site and then give you recommendations for improving it.
Pingdom Website Speed Test

 

This free page test tool from Pingdom will test the speed of your website. The results will match what real users experience because the test is done with real web browsers, including Chrome, where Pingdom tests load speed, records the performance data and so on. The results will show you what about a particular page is fast, slow or too big.

YSlow

This Yahoo tool grades a web page based on rules for high performance pages, gives you a summary of a page’s components, shows you stats on a page, offers performance analysis tools like Smush.it and JSLint, and then gives you a summary of what you need to do to improve your page performance.

There is also a Chrome extension, which allows you to test the page speed of any website:

 

Page Speed Insights

This is Google’s slick tool for web developers to help improve your website performance. With a simple drop of a URL into the text box and a click of a button, you’ll get your report:

 

Suggestions for performance are broken down into high, medium, low and experimental priority. This is the tool I used to come up with the recommendations above.

Conclusion

While websites get richer and cooler, page speed slows down. So, each time you are getting ready to implement a new plug-in, code or rich media, you have to ask yourself:

    |      What is going to be the impact on page and site speed?

Sacrificing site speed to have the newest tool is probably not worth the money you may lose because of latency issues. So, until a tool proves itself as a money maker, it’s probably best to hold off.

What other ways or tools have you used to improve your site performance?

REVIEW OUR BRAND

Review our website Here!

Follow us on twitter @iReporterng
Like our facebook fan page
BBM Channel Pin: C00224051
Report News as its UNFOLDS via: ireporterng@gmail.com