Optimising your .NET site for Google PageSpeed Insights

I was recently tasked with looking to optimise and improve upon a website’s performance as it was seen by Google’s search engine and reported by PageSpeed Insights. Optimising your site is one thing, and the suggestions I’ve listed below can be considered ‘best practice’ anyway, but these were the specific suggestions that, once adhered to, took the site’s PageSpeed ranking from an average 65 up to an excellent 89.

PageSpeed splits its report into two categories – Should Fix, and Consider Fixing.

Should Fix:

Reduce server response time

This can be the hardest and most time consuming part of any optimising process. Server response time can degrade due to a variety of factors; hosting bandwidth, hosting location, web server power, database performance, locking queries, or code that simply needs optimising. You could also consider implementing some form of caching on your site to decrease the all-important time to first byte report – that is, the time it takes for the server to start responding with the rendered HTML after it has done all processing. This particular suggestion is not black or white. You may need to add system monitoring to your website to gather information to aid in any fixes. One great tool for .NET websites is NewRelic as it can pinpoint specific methods that need to be optimised.

Leverage browser caching

Browsers are able to cache frequently accessed parts of your website. They will, to some degree of success, do this automatically but you can and should tell the browser specifically what it can cache and for how long. The first thing to do is to add the Cache-Control meta tag to the header of your pages:

<meta http-equiv="Cache-Control" content="Public" />

The second thing to do is instruct IIS to cache static files such as images, style sheets and JavaScript (known as Output Caching). This can be done through the GUI or simply added to your web.config (which is what the GUI does anyway):

<staticContent>
<clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" />
</staticContent>
<caching>
<profiles>
<add extension=".js" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".css" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".png" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".gif" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".jpg" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
</profiles>
</caching>

These simple changes will greatly assist your website performance, leaving much of your static files with the end user after the initial download.

Enable compression

The simplest win for any website performance is to enable HTTP compression. There are two types of HTTP compression for IIS – static and dynamic. Static compression applies to static files such as images and scripts. Dynamic compression applies to files generated by your code. Enabling both will provide the best speed gains, but keep in mind that enabling dynamic compression will use more CPU cycles.

<system.webServer>
    <urlCompression doStaticCompression="true" doDynamicCompression="true" />
</system.webServer>

Eliminate render-blocking JavaScript and CSS in above-the-fold content

HTML pages are loaded top-down, and by default the browser will wait for each additional request to process before proceeding. If you have many JavaScript files this can noticeably slow down your page load. In most cases simply allowing your script files to load async will provide a speed boost without affecting their ability to process:

<script type="text/javascript" async src="/js/jquery-1.4.2.min.js"></script>

This approach is not applicable to style sheets, as their control over layout must be asserted – otherwise your page will load text only. There are however other means of optimizing CSS delivery.

Consider Fixing:

Minify JavaScript

This falls squarely into the ‘you should do be doing this already’ basket. Most popular JavaScript libraries (e.g. jQuery) will offer a minified version that drastically cuts back on the file size. It is also quite straightforward to minify files yourself using an online tool.

PageSpeed Insights also suggests minifying your CSS and HTML. Whilst CSS may be possible for many websites, any dynamic website will not be able to minify HTML as it is forever changing.

Optimize images

Another in the ‘who would upload a 1200kb PNG to their website anyway?’ school of obviousness, ensure that your images have been optimised for the web. If your site is CMS controlled, provide training to your customers on how to do this themselves.

 

All of the above changes took only a few hours to research and implement. The speed gains were immediately noticeable and the increase in PageSpeed ranking by 24 points put the overall result into the green.