TOP CSS AND JAVASCRIPT PERFORMANCE TIPS

There are many risks that come with having a site that’s slow to load. You could risk losing

potential customers, have a lower engagement level and eventually end up with no traffic

whatsoever. The speed of a website is much more than just the size of files. Browsers need to

have the adequate capabilities to understand and process the code written.

Sometimes making edits to your code during the website development stage can be worthwhile

as they save the end-user time when trying to access your webpage, as browsers will be able to

digest and translate it quicker. Below are some key tips that web development

agency professionals should consider for speeding up the performance of their developments

through code.

Never Repeat

Make use of the cascade and never repeat code, unless absolutely necessary. It extends further

than simply using common classes; you should also make use of the heritance. In the same vein

you can use the same set of properties for multiple elements of your development ensuring you

separate multiple selectors using commas as usual.

JavaScript also allows you to make use of objects, functions and plugins which gives you even

less need to repeat code.

Utilise IDs

IDs are really fast and wherever possible you should make use of them. They are faster in both

CSS and JavaScript and when using JavaScript you can even use alternatives to jQuery to select

tags such as document.body.

Right to Left

Browsers translate and process jQuery and CSS from right to left. Therefore, where possibly

write in this way to speed things up for the browser. The only answer is to write your code as

specifically as possible and where possible write backwards, so the browser can digest and

translate what you’re trying to say in its natural way as quickly as possible.

Short Selectors

In some instances an extra item in your selector can completely ruin your code. For example if

you’re writing a “ul li a” selector in most instances it’s more than possible to simply use the “ul

a” for the same effect.

When it comes to JavaScript we’d recommend you simply don’t use it as all it will do is cost you

development time, user performance results and maintenance, as well as causing issues with

some browser compatibility.

Redefine Vars Locally

Many website developers simply skip the var declaration step altogether. It’s not ideal as you

end up creating a lot of global variables which can break other functionality and when the

browser tries to recover it will search locally then globally.

Even if you choose to use global scope vars you should consider redefining them locally to save

some time.

One Less JPG

The One Less JPG movement suggests a solution to the JaveScript library / framework size

problem. It simply states you should remove one .jpg file from your site to compensate for added

JavaScript. The removal of a single image can create the additional speed and space for your

JavaScript.

These tips will help ensure all your website development projects are completed with all

browsers in mind and with performance speed as a key focus.