Keeping our products fast will always be one of our primary goals. We love fast apps, and keep a lookout for ways to make them even faster. That goes for initial load times as well as usage while inside the app.
Due to those problems, and how much we value speed, we sought out a way to minimize load times. Enter HTML 5’s async script attribute coupled with a simple preloading technique.
Another way to combat that is to leverage HTML 5’s async script attribute, and preloading.
The Changes, and Before/After Results
The opportunity we saw was to load TimePanel’s
Edit: Thanks to Silvenga for correcting my use of the async attribute for CSS. He correctly noted that async attributes only apply to script nodes, not link nodes. I’ve since edited my post above to strike-through CSS references, and updated the following screen shot.
Again, the download times of TimePanel’s JS using async on the login page isn’t faster than if it were downloaded otherwise. But, since we’re doing it behind the scenes while the user is logging in it increases perceived performance of the app after login by being able to serve TimePanel’s JS from the browser cache instead of over the network.
And the results are noticeable. Before and after results, taken from Chrome’s network waterfall, show the onload time went from 926ms to 646ms, a decrease of 283ms!
Speed is important, and HTML 5 and other modern techniques offer opportunities to speed up modern applications, despite growing feature sets and file sizes.