A lot of developers jump to add another JavaScript Library to their page that does some fancy thing. What many fail to think about, is how this increases their page load time. It’s even easier to fall into this trap when you aren’t the only one maintaining a site and the performance impact of your code is more obscure. I think reaching for another JavaScript library is often the wrong approach.
Let’s say your site needs a navigation bar that sticks to the top of the screen when the page is scrolled. Not only that but when the page is scrolled on mobile devices, it needs to switch places with another element and stick in that different spot. As a developer, you have a couple choices. Code this yourself or find a library that does it for you. I will argue for the latter. Let’s say you find a library that’s three kilobytes and is perfect for fixing navigation bars to the top of the page. It’s likely that it will also have some other fancy functionality that you may or may not choose to use to impress your client. For example, this library may have some cool animation that slides it into place before it sticks at the top of the screen. Great!
Is it really that great?
It’s fast, easy, and it looks great, but consider these potential downsides:
- Maybe the user’s browser hasn’t cached the library on their computer. Then it’s going to have to load it on page load. While three kilobytes isn’t that much, the problem is that you’re making another request over the network. If this is not a render blocking script, it’s not really going to impact your page load time. If it is, then it can slow your page load time quite a bit depending on how good the network connection is.
- Before you add another script tag in the page, consider that having a bunch of script tags in your HTML will slow down the browser’s rendering of the page.
- If you’re using a Content Delivery Network (CDN), you have another dependency on that CDN to be up at all times. You may or may not decide to create a fallback script if the CDN fails. If you do, you will likely just download the file yourself and keep it with the other static files your site uses. Doing this frequently will result in a bunch of libraries laying around that will eventually need to be updated.
OR
You can try coding it yourself. I always do this first. Check out this game I made with HTML5 Canvas and Vanilla JavaScript. If your JavaScript is minified, you can add exactly what you need with just bytes of code. It won’t have all the bells and whistles the library had either. If you really want that sliding effect, just add it yourself. It’s not that hard. Consider these upsides:
- You’re only adding a few lines of code to an existing JavaScript file (I assume you’re using at least one).
- You’re only adding exactly what you need.
- You’re not increasing requests over the network (this is big), nor are you adding any script tags to the page.
- You have no more dependencies than you had before.
- You wrote it, and you’re familiar with the code. If there’s a bug, it will be easy for you to fix.
- You probably learned something new while you were doing it!
Next time you want some cool effect that requires JavaScript, try coding it yourself before you reach for a library. It may take a little longer, but you will thank yourself later.