7 javascript optimization tips for developers
the foundation of any successful seo campaign is having a sound technical code base. in most situations i have encountered, the development team is not aware of the accessibility nor usability concerns related to javascript. in order to stay at the top of your game, you will need to learn new skills and best practices.
i have put together a list of my favorite javascript resources to help you adapt in this ever-changing field. these links will discuss javascript techniques that improve rendering of on-page content, speed up load time, and limit crawl issues. if you know of other great resources, feel free to share them in the comments.
how javascript loading works – domcontentloaded and onload
if domcontentloaded and onload are foreign to your vocabulary, i recommend reading through this post about how loading javascript works. if you want to optimize javascript then knowing the details of the data you are looking at is important. the definitions outlined here have painted a clearer picture to me of what a user would expect at different loading stages. i wouldn’t begin referring to the rest of the posts until you had a chance to read this over.
why loading third party scripts async is not good enough
the most mentioned element to javascript optimization is asynchronous loading. aaron peters on the other-hand thinks that asynchronous loading is only the beginning to better performance. for 3rd party scripts that may hang up your site, the best option is to combine asynchronous loading with lazy loading. by delaying the time to load 3rd party scripts, you can achieve better performance.
steve souders, an industry leader in site speed optimization, highlights how inline and external scripts can fail when executing due to race conditions. in situations like that, it’s important to set rules for when javascript should be executed. that way, inline javascript can fire once an external script has finished loading or vice versa.
the truth about non-blocking javascript
we all know that javascript blocks other resources from downloading or causes the page to become unresponsive. what we may not know is how to write non-blocking javascript. in this short write-up, we can learn 3 different ways to write javascript that won’t impede on downloading other resources. as an additional measure, the concept of using time to dictate when javascript fires is introduced for less often used features or functions.
coordinating multiple ajax requests with jquery.when
one of the problems associated with ajax is that multiple calls to the server can be sent in a short amount of time. each additional call may increase the delay in response from the server as well as not guarantee the order in which each call will be returned. for applications that require multiple calls, you can increase performance by bundling each call together and send as one package instead of three to the server. bundling each call together also allows you to process them before they are returned.
the art and craft of postload preloads
don’t let your site sit on its heels once it has finished loading. you can anticipate user’s needs and start fetching resources before they are requested by the user. it can be a gamble to load resources that may not actually be used but if your data paints a clear picture of user activity, you can increase the responsiveness of a site and cut down on load times. no right way is absolutely perfect nor will each browser react the same so consider this an experimental/advanced technique.
speeding up javascript: working with the dom
what better resource than one coming from the search giant google. a company who is obsessed with speed, this handy guide details four techniques to improve the performance of dom manipulation and generation. this in turn improves how quickly a browser can render your site’s content.