How To Improve Your Episerver Website’s Performance Using Yahoo Yslow Score

Building a website that loads quickly is a critical step nowadays in order to create a successful website. To ensure your Episerver site has a blisteringly fast load speed, it’s a good idea to run a few speed tests against it. There are many tools available on the market to test the loading speed of your Episerver website. One of those (and it’s FREE) is Yahoo’s Yslow.

What is Yslow?

Yslow is a tool that analyses your Episerver web pages and suggests ways that you can improve your pages’ responsiveness.  The suggestions are based on Yahoo’s rules for high-performance websites. YSlow will create a report that will grade your page and rank how performant it is. Yslows report will also include:

  • A summary of pages with a grade for each one
  • An analysis of your page, with suggestions on how to fix the problems

YSlow

For each issue you fix, your site will get ranked as more performant. You down user YSlow in a number of ways, I tend to use the Chrome extension, download link here, but there are also other options.

An example site

YSlow_Results

Running Yslow is extremely simple: in chrome click your YSLow button and the ‘Run Test’ button:

Make Sure You Use IIS and not Cassini

When you are doing your testing, make sure you are running the site via IIS and Casinni.  Cassini is much slower than IIS, and it doesn’t support all features like Gzip compression, etc.

Setting Up Your Web.Config

Add Expires Headers

The first time someone visits your website, they need to download everything from the server. By default, each time someone visits your site, they will keep downloading everything on each request. One thing you can do to reduce those requests is to make the components cacheable by adding expire headers.

<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
<!-- Image types -->
<remove fileExtension=".jpg"/>
<mimeMap fileExtension=".jpg" mimeType="image/jpeg"/>
<remove fileExtension=".png"/>
<mimeMap fileExtension=".png" mimeType="image/png"/>

You can also add expire headers in Episerver like so:

<configuration>
<configSections>
...
<section name="staticFile" type="EPiServer.Framework.Configuration.StaticFileSection" />
</configSections>
<staticFile expirationTime="365.0:0:0"/>

Minify JavaScript and CSS

Minimising the amount of data required to render a page will not only reduce the amount of bandwidth on your server but also increase the page load time. Minifying javascript and css means removing all unnecessary characters from the code that the website doesn’t need. When you’re developing the site, having your files nicely spaced out and padding is vital in order to build and maintain a site.  A browser doesn’t care about this, so on your production version removing them improves the loading time because the file size is reduced. Nowdays there are a ton of minimisers, I quite likeYUICompressor – .NET Port that can compress on the fly or at build time. Also on NuGet but feel free to investigate.

Make fewer HTTP requests

When someone tries to access one of your webpages, the majority of the page load time is spent downloading components such as images, styles, JavaScript, etc. One easy option to improve your YSlow score is to reduce the number of components the page needs to load.

I’ve already talked about minifying your files, but you can also go one step further…  combine your files.  Instead of call 2 or 3 CSS files, you use a CSS build tool to combine them into a single file. so your web page only makes 1 HHTP request, instead of 3.

SASS is pretty much a standard on most projects I work on now. Using the @import Attribute you can combine multiple files into a single CSS file. As SASS uses a Ruby complier, it allows the front-end developers to break up our style-sheets to prove the nice separation and then we compile it into a single file when we compile it at the end. I’ve seen style-sheets broken up by things like pages, grids, mixins, responsive breakpoints style-sheets.

Conclusion

Today I’ve introduced YSlow and how you can use it to find out how responsive your web site is.  Performance and optimization is a very specialised process and there’s hardly ever a one shop fit for all websites. In this guide, I’ve covered some of the basics that will help you improve your site’s score.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *