Front End Performance Enhancements
I've recently made a load of changes to a site to improve the page loading times. Now that I'm happy it's worked I thought I'd share some of the moves. Broadly, we're looking to load up fewer files and to make each file as small as possible.
I came across a few instances where these are using some server side binding, something like this:
<script> // lots of code user.companyName = '@CompanyName'; // lots of code </script>
Here, @CompanyName is coming from the server. This doesn't mean that the whole script block has to stay in the HTML. It's easy to just pull out any server data and stick it in a variable and then move everything else to an external file. Like this:
<script> var companyName = '@CompanyName'; </script> <script src="lots-of-code.js"></script>
Now the bulk of the code can be cached.
MinificationAs well as reducing the number of files we can also reduce the size of files. Minification removes whitespace and comments and often optimises repeated code like variable names to make the file as small as possible. This can be done in a task runner too. In ASP.NET it's an option within bundling - BundlesTable.EnableOptimizations = true.
PrefetchingPrefetching is basically going and getting resources and putting them in the cache ready for future use. You just tell your page which resources to get and when it's idle it gets them asynchronously. This means you're shifting the load from your second page onto your first page but without ever affecting the user's experience. The trick is knowing what page he/she will go to next and loading the appropriate resources and trying to avoid loading things which will not be needed. It's particularly effective on stepped processes or wizards.
<link rel="prefetch" href="~/bundles/GlobalJS">
The site structure was a series of list pages which each have their own details page to view a record in more detail. I made the assumption that if a user navigated to a list page he/she had the intention of viewing a record. So, from the list page I prefetched the resources needed for the details page.