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
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
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"/>
Make fewer HTTP requests
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.
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.