CourtesyFlush for web optimisation

At Wiliam we love web performance almost as much as we love a somewhat lowbrow double entendre, which is why we love CourtesyFlush. We all know that in order to build the best websites we have to ensure that we simply don’t have any slow pages on the site, but what do you do if it’s unavoidable? Sometimes no matter how hard you work to ensure your page loads quickly you will be hamstrung but a third party interaction or a large data operation that MUST be done in real time. It’s then that your page could use a CourtesyFlush.

So what is it and what does it do? Simply put CourtesyFlush will flush the head of your html page. Now what good does that do, you may be asking? Usually if there is a lot of work to be done on a page it will be done in the body, whereas most of the external references will be in the head. By flushing the head early the client browser can get to work downloading css and script files while your page is working away crunching data. This way the time until first byte is drastically lower and overall page load time is reduced by simply ensuring that you aren’t making the end user wait until you’ve done all the heavy lifting before it starts loading resources.

So how do you implement it? Firstly just grab the nuget package, then for every slow action on your site add the attribute [FlushHead]. That way once the head has been completely written to the output buffer it will flushed to the client. This is good in theory, however even the most basic of SEO optimised sites will require a custom title tag in the head. Thankfully CourtesyFlush gives you this option with the extension method FlushHead(). That way you can call this.FlushHead() in your action to allow you to set ViewBag.Title before it gets flushed.