Installing the Minifier and Image Optimizer Site Extensions on an Azure Web App

Azure Website Extensions are tools and app add-ons that you can add as an extension to your Azure web app.  There’s a lot of nifty ones out there, definitely worth exploring.  There’s a gallery of available extensions over at http://www.siteextensions.net/.  In this article I’ll show you how to install two extensions that should help the overall performance of your Azure web app.  They are the Azure Image Optimizer and Azure Minifier extensions written by Sayed Ibrahim Hashimi and Mads Kristensen.   I’ve met Mads a couple of times at Build, he’s an awesome guy.  He’s built a ton of cool things for Visual Studio, ASP.NET and so forth.  Head on over to his site and check out everything he’s got going on there.

To start, navigate to your web app in the Azure portal then click the Advanced Tools menu item, then select ‘Go’ in the main panel.  This launches the Kudu site associated with your web app.

 

If you’ve never seen this before, you’re in for a treat.  Although its main function is defined as “the engine behind git deployments in Azure App Service” it also can display information about your site environment, the processes running, and give you access to a Powershell and command prompt.  This is also the place to install and use site extensions.  Click the ‘Site Extensions’ top menu item and search for the two aforementioned extensions.  In the screenshot below, I already have it installed so it displays a play button icon that launches the extension.  Otherwise you see the plus icon to add it.   Go ahead and add the extensions.  From what I’ve seen you have to restart your web app after installation, as you might receive a ‘no route defined’ error when launching them for the first time.

 

After they’re installed you can launch them and view the results for each extension.  Here you can see the minifier minifying my css and javascript files as well as shrinking the site images.