Web page performance is literally a death by a thousand tiny little cuts. Usually, the biggest issue for most is the number of requests a page makes. Keep the requests down and your web page performance increases. No magic just common sense. The mobile world we currently live in makes issuing fewer requests that much more important. While it’s true that mobile and tablet devices are getting more powerful each day, they are still no match for the desktop. Moreover, desktops are connected to broadband. Mobile devices are mostly utilizing 3G and 4G.
Yes there are more, but some page “cuts” include (in no particular order):
- not using image sprites
- not using a cookieless domain for images and other static content
- not using a CDN
- not optimizing caching policies
- not gzipping your content - most if not all popular web servers support some type of compression
Take a breath. Prepare yourself. You do not know everything. Your code isn’t perfect all the time.
Putting on my manager’s hat for a minute it’s hard to justify spending eight developer hours to shave 50 milliseconds. As focused developers, we sometimes get too sucked in. Over doing it by burning hours to shave a few milliseconds may not be worth it unless it’s a focus area or important feature on your site. Utilizing business owners can help drive your focus by guiding you towards these important areas and features.
What about other areas and under-the-covers code that just needs a rework? Just do what I do, and work on it on your own time. Personally, I sometimes dream about a problem, bug, or performance issue that I am grappling. Sometimes I lay awake at 3 AM thinking about it. I just cannot put it down. It eats away at me. Other developers must experience something similar, right?
Bottom line. Try not to overdo it (on company time). At the end of the day, you need to ship it.
- anonymous, inline, or unnamed functions vs. named functions (see more below)
jQuery.each(), looping, iteration, or recursion
- coercion (see more below)
- making the garbage collector work hard or collect more often
- causing excessive layout calculation, rendering, or invalidation - jankfree or die!
Most browsers have optimizations in place to deal with coercion. It’s not really a performance benefit to using
==. It’s more to help with readability and understanding for the next guy. Function expressions are sometimes called anonymous, inline, or unnamed functions. They can make debugging a little more difficult because you might see an error (weeks later in a log) that doesn’t explicitly include a name (it does not have one) or appear missing in the call stack (most browser F12 Dev Tools just display “anonymous function”).
Performance Testing & Code Review
Remember when looking at another developer’s code you usually do not know the context when it was written.
Was there a hard deadline? Was there an emergency bug fix or issue? Was it a show stopper? Was it a junior developer or new hire? Or worse a manager or marketing person? Just kidding. Sorry. I just could not resist.
Code under review:
Code suggested change:
outerHeight call (we can discuss another time). The self-invoking anonymous function might be overkill. Although ideally it should be a named function organized within a namespace. The