Your website code needs to be faster
Firstly, I know you’re going into this thinking “I know, I know, my website needs to be fast” and you’re absolutely right, so thankfully we’re on the same page.
There’s many a reason why your website should load fast, however some brief facts show that it’s no surprise that the human attention span is becoming shorter and shorter as technology evolves and access quickens with the touch of a finger. Some studies show that a 1 second loading time doesn’t interrupt our thought process, however anything longer than 6 barely keeps our attention. Not only is our attention span diminishing, but this also has an impact on the engagement with the user.
We as developers need to code our websites to ensure we meet these benchmarks. How we do it:
- Optimising image sizes
- Caching data
- Minimise request/response round trip times
- Optimising for mobile
One surprising fact I discovered on a recent project is code and jQuery related which involves the time it takes to look up an element either by ID, class name or element name. Say you had the following elements:
<div id="test1"></div>
<div class="test1"></div>
<footer></footer>
With the following jQuery variables:
var test1 = $("#test1");
var test2 = $(".test2");
var test3 = $("footer");
Which do you think would be the fastest? Well the results are in and are quite surprising:
- ID lookup is fastest with 1,367,867 operations/sec
- Class name lookup is second fastest with 836,901 operations/sec
- Element name is the slowest with 267,399 operations/sec
So surprisingly an element lookup is 80% slower than an ID lookup, obviously because of the explicit nature of an ID in HTML being unique. A lookup by class name isn’t too far behind being 38% slower, but keeping this in mind when building your next site is another way to ensure your code is optimized best for the quickest of page loads.
Get cracking!
