CSS and JavaScript Performance Tips


Published on

There are many ways to improve your site speed CSS and Java Scripts are one of them. In this document you will get some basic but effective CSS and Java Scripts improvement tips. Read it and share it.

Published in: Self Improvement
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

CSS and JavaScript Performance Tips

  1. 1. TOP CSS AND JAVASCRIPT PERFORMANCE TIPSThere are many risks that come with having a site that’s slow to load. You could risk losingpotential customers, have a lower engagement level and eventually end up with no trafficwhatsoever. The speed of a website is much more than just the size of files. Browsers need tohave the adequate capabilities to understand and process the code written.Sometimes making edits to your code during the website development stage can be worthwhileas they save the end-user time when trying to access your webpage, as browsers will be able todigest and translate it quicker. Below are some key tips that web developmentagency professionals should consider for speeding up the performance of their developmentsthrough code.Never RepeatMake use of the cascade and never repeat code, unless absolutely necessary. It extends furtherthan simply using common classes; you should also make use of the heritance. In the same veinyou can use the same set of properties for multiple elements of your development ensuring youseparate multiple selectors using commas as usual.JavaScript also allows you to make use of objects, functions and plugins which gives you evenless need to repeat code.Utilise IDsIDs are really fast and wherever possible you should make use of them. They are faster in bothCSS and JavaScript and when using JavaScript you can even use alternatives to jQuery to selecttags such as document.body.Right to LeftBrowsers translate and process jQuery and CSS from right to left. Therefore, where possiblywrite in this way to speed things up for the browser. The only answer is to write your code asspecifically as possible and where possible write backwards, so the browser can digest andtranslate what you’re trying to say in its natural way as quickly as possible.
  2. 2. Short SelectorsIn some instances an extra item in your selector can completely ruin your code. For example ifyou’re writing a “ul li a” selector in most instances it’s more than possible to simply use the “ula” 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 youdevelopment time, user performance results and maintenance, as well as causing issues withsome browser compatibility.Redefine Vars LocallyMany website developers simply skip the var declaration step altogether. It’s not ideal as youend up creating a lot of global variables which can break other functionality and when thebrowser 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 savesome time.One Less JPGThe One Less JPG movement suggests a solution to the JaveScript library / framework sizeproblem. It simply states you should remove one .jpg file from your site to compensate for addedJavaScript. The removal of a single image can create the additional speed and space for yourJavaScript.These tips will help ensure all your website development projects are completed with allbrowsers in mind and with performance speed as a key focus.