One of the main things that are key to keep the user experience on your website as higher as possible is the amount of time that your server takes to sent pages to the clients. There’re a number of good practices that can be done to keep this waiting time low. You can find on the internet or in books many but these are the main ones you can take advantage of:
- Minify and compress this single file produced as the result of the previous process
- Combine all the icons and images in a single sprite image
To do the steps 2 and 3 there’re libraries for most of the in-demand programming languages in the market. For instance, in a project I’ve worked on, developed in .NET Framework 4.5.1 together with the C#, it’s rather simple to set up and use. From MVC 5 bundling and minification of CSS and JS are included out of the box. You only need to declare your bundles and which files come of each of them. After that, just include the Bundles you want to use in each page of your app. This can be done in this way:
In the current class three different bundles are created, one of those for the CSS and the other one for the JS:
In the project I’ve talked about before I’ve been including the two of them in the Layout page:
One of the most interesting things is that the libraries that .NET is using behind the scenes, are capable of detecting under what configuration is the site building in. In case it’s built in Debug Mode, the Bundling and Minification are not applied; on the other hand, if the Mode is Released, which should be the one used in your Production Server (such as AppHb), an unique CSS and JS file will show up and used by your site.
This setting can be changed in your Web.config file:
Finally, to compose a sprite quickly, you can use one of the many services available online. For instance, I’ve successfully tested the following: Instant Sprite (http://instantsprite.com/). In this kind of services you are usually given an image file with all the images you have uploaded included, and all the CSS rules you need to paste in your CSS file in order to render each image of the sprite.
All the markup you usually need is a div with some CSS classes that reference the background image that is picked up from the sprite using the proper coordinates where it is located. For example, here you can see two divs to render a Facebook and Twitter icons:
And the CSS rules contain the coordinates where these two icons are situated in the App Sprite:
By doing this, the performance improvements you can achieve involve an important reduction of the size of the page, and the decrement of the number of calls done from client to server-side. As a consequence of these two factors, the amount of time needed to load the page in a client browser fell down from around 3 seconds to slightly above just one second.
Fortunately for you, there are many different tools on the Internet that can help you analyze the speed with which a webpage loads. To measure your improvements some of the tools out there one can use are (that I have used successfully in the project developed):
- VisualStudio Performance Test (if you’re using this IDE)
- Google’s PageSpeed Website
- Plugins and add-ons like YSlow for Firefox