Website Optimization for Load Time [Code]

Google announced earlier last year that site speed will affect page ranking. With this announcement, it is more important than ever to tune up the performance of your web site. But also as internet connection speeds increase, users simply become more impatient and demand faster browsing.

The load time of websites is one of the most important factors affecting its usability, try going to a location that has slow connections or browse on a phone or portable device and you can quickly get impatient. Most Internet users will just leave your site if it fails to load within a couple of seconds.

To start with, where and how you host your web site can contribute to a speed boost. If you are having thousands of hits per month, you need to choose a hosting provider who can deliver. The different options for web hosting can be found in this article: How to Choose Your Type of Webhosting.

Bad code can contribute to the majority of performance problems. Writing valide and clean HTML, JavaScript, and CSS code will speed up a web site. Using CSS for design instead of tables will give you cleaner HTML and smaller pages, because tables create more HTML markup. You can save up to 50% on file size by switching to pure CSS design instead of tables.

Below, I’ve gathered some simple (and easy) ways to speed up your site, this are tips to change your source code to speed up your web site loading time:

Remove Redundant (Bloated) Code

Redundant code in CSS or JavaScript can make the files larger and take longer to download. Use CSS shorthand properties whenever possible. Properties in CSS cascade so you can create nested styles.

Most META tags are pretty much unnecessary and don’t achieve very much. If you’re interested, you can see a list of META tags that are available. The most important tags for search engine optimisation are the keywords and description tags, although due to mass abuse they’ve lost a lot of importance in recent times.

When using these META tags try to keep the content for each under 160-180 characters – anything more increases the size of your pages. Lengthy META tags are not good for search engines anyway because they dilute your keywords.

Reduce the HTTP Requests

When opening a web page every object (images, scripts, CSS-files and other files) will require a HTTP request (e.g. download it from the server). This latency can add several seconds to the load time of your site. Make sure to reduce the number of objects and to combine CSS files and scripts together. The basic idea is: if you want a faster website you have to use fewer http requests. Just remember, not just http requests influence your rendering time.

Combine Javascripts and minimize them, you could use JSMin or JS Compressor to minify your javascript(s). For your CSS files, try to combine them and use a csscompressor or CleanCSS to load fewer bytes .

Move JavaScript and CSS to External Files

By moving JavaScript and CSS code to an external file, it will make the page load faster by making the HTML file smaller and because the JavaScript and CSS files are cached by the browser (BTW this is not the case when you first visit the website).

If you have inline coding in your source code (HTML document) this means that the code is downloaded every time the HTML document is requested. And also you are increasing the HTML document size.

For front pages that are typically the first of many page views, there are techniques that leverage the reduction of HTTP requests. One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages would reference the external files that should already be in the browser’s cache.

Place your stylesheets higher in the header

When you have many tags in your head section it is best to place your stylesheets at the top of the head section. The first line in the head section should be the “title tag”. This also helps with search engines. After that you should have your css files placed. Here is an example :

<head>
<title> Tutorial example </title>
<link rel="stylesheet" type="text/css" href="yourcss.css" >
<meta name="description" content="description goes here" >

Place your JavaScript code at the bottom of the page

When you have scripts inside the <Body> section of your page, they block parallel downloads.  Most current browsers can download a maximum of two components in parallel for each host name, accordingly to the HTTP/1.1 specification. So when downloading a script, no other downloads can occur, that download must finish before moving forward.

If you host your images on different servers, you can have multiple downloads in parallel. But when a script is downloading, the browser won’t start any other downloads, even on different hostnames.

So, when feasible, it makes perfect sense to move these files to the bottom of your document in order to allow the other components (images, css, etc) to load first. In some situations it’s not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page’s content, it can’t be moved lower in the page.

Use “/” at the end of directory links

Don’t do this:

<a href="http://www.URL.com/directoryname">

Do this instead:

<a href="http://www.URL.com/directoryname/">

When a user opens a link on the form “http://www.domain.com/about” the server will need to figure what kind of file or page is contained on that address. If you include a slash (/) at the end of the link the server will already know that this is a directory page, reducing the load time of the site.

Choose <link> over @import

One of the previous best practices states that CSS should be external and at the top in order to allow for progressive rendering.

In IE @import behaves the same as using <link> at the bottom of the page, so it’s best not to use it.

Conclusion

There are simple ways to fasten your load time of your website, above some tips for your source code, CSS and scripts. It will not hurt you to learn how to code a website manually instead of using all the online webtools to create your CSS, wireframe (gridsystem), etc. These online webtools are good to examine but most of the time they generate just extra bloated codes (that you probably even don’t need), .. not good for your load time!

Next week, we’ll take a look how we can optimize our pictures/graphics we use in a web site design. If you have other code tricks to fasten the load time of your web site, please feel free to let us know about it.