10 Common Issues That Will Kill Your Episerver Website’s Load Time

If your website loads slowly then you will experience higher bounce rates, you’ll get fewer return visitors, customers will moan, you’ll lose lost revenue and potentially damage your company’s reputation beyond repair… so having a good optimization strategy before you launch your website should be at the top of your priority list.

Google now uses site speed as a rating factor in where your pages appear in its search results.

In one study, it is estimated one in four people will leave your site if its page takes longer than four seconds to load.

For these reasons, I would advise everyone planning a web project to schedule in a minimum of at least a week to think about performance, before they launch their new website. Having a good optimization plan should be a vital part of any new build and below lists the 10 most common errors that will cripple your pages load speed.

Too Many HTTP Requests

Each file that your web page needs, unsurprisingly, will require an HTTP request to fetch it. The maths behind this is easy.. the more files you link to in your web page the longer it will take to load. The more links your page contains the more bandwidth will be burnt processing it. In order to make your web page to load as quickly as possible you will want to try and minimise the number of HTTP requests it makes.

You can use the Giftofspeeds HTTP requests checker to see how many requests your pages make.

HTTP Requests Checker

There are a few common strategies to help with this:

  1. Combing Image Files: If your web page has a lot of images it will generates multiple server requests. To get around this, some images can be combined into a CSS/image sprite. An image sprite is a collection of images put into a single image. Using sprites will reduce the number of server requests and save bandwidth.
  2. Enable Keep Alive connections: usually by default, a browser will only be allowed to perform one HTTP request per connection request . If you enable KeepAlive connections the browser will be able to send multiple HTTP requests over the same TCP connection.
  3. Limit The Amount Of Social Buttons: Plugins like ‘Share This’ produce an HTTP request for each social site that you use on your site.
  4. Combine All Javascript files

Not Using Gzip Compression

Based on the findings from this video not enabling Gzip may mean your static html and css files may take up to an extra 70% in size!

Enabling Gzip compression in your .Net application means IIS will compress your websites files when they are being returned to the browser. Compressed files will reduce file size minimising the time it takes to load a page.

Adding Gzip is pretty easy. In your IIS site you should see a compression tab, click on it and enable it:

gzip

Too Many Redirects

Sometimes redirects are very useful, probably the most common use of a redirect is a 301. When you upgrade a site, or when a key pages Url changes using a 301 can save your ass SEO wise, however, each redirect triggers an HTTP request-response cycle. So if you have a lot of multi redirects on your site your performance will take a hit.

When you perform a redirect, the browser automatically takes the user to the URL specified in the Location field. All the information necessary for a redirect is in the headers. The body of the response is typically empty. Despite their names, neither a 301 nor a 302 response is cached in practice unless additional headers, such as Expires or Cache-Control, indicate it should be. The meta refresh tag and JavaScript are other ways to direct users to a different URL, but if you must do a redirect, the preferred technique is to use the standard 3xx HTTP status codes, primarily to ensure the back button works correctly.

Google suggests avoiding the following redirects in your site:

  • Redirects to pages that redirect to other pages
  • Do not use multiple redirect to more than source
  • Redirects from domains that don’t really serve content, such as redirects from mispelled versions of your domain
  • Plus, webmasters are recommended to use HTTP (server-side) redirects over JavaScript/meta (client-side) redirects whenever possible. That’s because browsers generally handle the former more efficiently, which minimizes page loading time.

404s

As a web developer I’m hoping we all known what a 404 is. When a browser loads your web page, each web request will require an HTTP request.  For every link in the page, like style-sheet, the server will make a call to the server.  Each unneeded request will waste your bandwidth and mean the server will be able to deal with less simultaneous requests.

I personally like to use Xenu’s Link Sleuth . Xenu is a free widows desktop app. You point it at your domain and it will spider the entire site and create a report based on all the 404’s it comes across. For an alternative online source you can also use W3C’s link checker W3C’s link checker

Not Using Browser Caching

Again, I’m hoping everyone know what caching is… one thing that is very easy to forget to do, however, is update your web.config to enable browser caching on your static web files.  All websites are composed from a certain amount of static components, such as images, style-sheets, scripts etc… that rarely change.  Instead of having your visitors continually download these files on each page request, you can cache them on the user side.  This caching means less bandwidth on your server and the page load time will also improve. If you are using IIS7 & and you want to cache static content,  add the following in the web.config:

<staticContent>
<clientCache httpExpires="Sun, 27 Sep 2015 00:00:00 GMT" cacheControlMode="UseExpires" />
</staticContent>

Not Keeping the CMS Updated

Now Episerver has moved over to a bi-weekly release cycle via Nuget, upgrading is a lot easier that it used to be. Episerver is continually making performance improvements, so by having a frequent update process, you should get some of the performance benefits without having to do any of the work.

Oversized Images

According to the Radware research 45% of top 100 e-commerce sites do not compress their images.

Over the years, the amount of times I’ve seen a 10MB+ image being uploaded on the homepage by content editor is baffling. Historically, Yahoo used to provide a service called smush.it to compress images which worked in conjunction with an Episerver, scheduled tasks that would automatically smush your images at regular time intervals.

As of this writing, however, you will have to create a custom implementation yourself as Smush.it is no longer supported.

Not Setting Image Dimensions

It is recommended as best practice, to explicitly specify image dimensions on all images in your website.  By specifying the image dimension, the browser can layout the page while still downloading the images themselves instead of waiting for the image to load.  If you don’t use an image dimension, the browser will not be able to allocate a box for the image on the page until it knows its dimensions.

Put Scripts at the Bottom of the Page

On a normal page request, when the page is loaded, the HTML is streamed to the browser. When the browser encounters an external image, CSS or script tag it will start downloading that file simultaneously.

By placing your JavaScript files scripts at the bottom of your page, they will be loaded last.  This means in 99% of situations, the things your web site visitor cares about is rendered first, e.g. Html, image, styling.  By putting your JavaScript last, your users don’t have to wait for all your scripts to load before they see anything.

Conclusion

In today’s guide we’ve talked about the importance of having your web pages load time being as fast as possible, not only for good user experience but also for SEO purposes.

In order to make sure your web pages load as quick as possible, I’ve covered the top 10 mistakes web developers make when building a website, in the hope you don’t follow the same mistakes.

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

2 replies
  1. Deepali
    Deepali says:

    Hi I m working on one Episerver Cms5 website and our website migrated from one server to another server but we have observed page could not load issue sometime in Chrome. Any idea about this issue? Thank you

    Reply

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 *