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.
There are a few common strategies to help with this:
- 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.
- 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.
- Limit The Amount Of Social Buttons: Plugins like ‘Share This’ produce an HTTP request for each social site that you use on your site.
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:
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.
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
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.
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.
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.