How to boost EpiServer site performance and reduce visitor drop out rate
Before showing you HOW you can improve your Episever site performance, first I’d like to tell you WHY you should optimize it.
In today’s world, people don’t want to wait for things. They want them instantly.
Research shows that you have no more than 3 seconds to load your page. After this time, you can lose a lot of customers. If you want to be reckoned with these days, you have to match up to these expectations.
That’s why the performance of your site is one of the key features to make your site successful. Nowadays most traffic comes from 3G mobile networks, which is not super fast. Google knows that and if your site is slow, that may impact your position on the popular search engine result page (SERP).
Fortunately, there is a very handy tool which will help you to keep good practice on your site. This tool comes from Google and it is called Lighthouse.
What is Lighthouse?
Lighthouse is a ‘ready to use automated tool’ which helps you to maintain the quality of your webpage. It checks performance, good practices or even SEO. After running it against your site you will get helpful metrics together with some nice tips about how to improve.
Lighthouse is really easy to use. The easiest way is to open the Chrome browser and go to the “Audit” tab in DevTools. After running an audit you will see general numbers about how well your site is performing with a list of passed audits. You will also see what you should fix and how to fix the issues. For more advanced usage you can read the Lighthouse official documentation or since it is an open source project – you can even write your own metrics.
One of the most important factors is called first contentful paint. It is the time needed by the browser to render the first bit. I don’t have to tell you how important it is to keep it low, so users will see that your page is actually loading. Lighthouse shows you a few tips and one of them is that you will need to improve your server response time.
How can you speed up EpiServer site performance?
Before you start optimizing your website be sure to run an audit and save your results. It will be really inspiring to see how well the optimization went and you will have a reference to see actual improvement. This can be your bargain card for a raise. Apart from profiling your EpiServer application, there are some universal tips.
Avoid dynamic properties
DynamicProperty class is a really nice API to play with EpiServer objects in a flexible way without using tons of code. There is a strong temptation for developers to use it. Unfortunately, you can read in the EpiServer docs that:
“EPiServer.DataAbstraction.DynamicProperty is a non-cached API for administrative purposes and should not be used on normal templates that are not for administrative purposes. Using this API on your templates will significantly impact performance.”
Switch to Entity Framework
The second big step is to migrate from the default EpiServer Object-Relational Mapper called Dynamic Data Store to Entity Framework. There is a really nice blog post about how to make migration in EpiServer. After reading it you will know about some additional benefits coming from this change.
Configure your server properly
I would like to focus on the lighthouse performance audit. It is divided into four parts: metrics, opportunities, diagnostics and passed audits. The first one will give you the gist about the general condition of your page. Then comes opportunities and diagnostics which can help you upgrade your page. After you introduce all fixes to your page hopefully you will extend the list of passed audits.
Enable Text Compression
There is a strong correlation between page size and site speed. Fewer bytes to download means faster page loads. The average page size in 2018 was around 1.88 MB. To keep the size of your site small you can compress its source.
Lighthouse automatically detects if you are using any compression on the server. Enabling GZIP is often just one flag on your server, which can improve your metrics significantly.
Thanks to GZIP compression on the front page of alt.dk for our main HTML, CSS and JS files were compressed to 86 KB from the original 380 KB which is only 22.63%.
Deliver your page in an efficient way
Besides the size of your page, it is important to deliver it in an efficient way. This is why you should use the content distribution network (CDN) for your static resources.
The general idea is to keep the resources closer to the end user. Your scripts, styles and images are distributed to multiple servers and then users will download them from the closer server. Thankfully it is quite easy to configure CDN for EpiServer.
Upgrade Protocol
The next thing you can improve is the protocol. To send a package with data to your client using Hyper Text Transfer Protocol (HTTP), for every resource, the server needs first to build a connection, send the actual data and then close the connection. However, according to Google research, the average number of resources for one site is around 115.
It would be nice to use the same connection for multiple data packages. Switching to HTTP/2 will do the trick. It allows you to send your resources faster to the client. If your site is already running HTTPS the change for HTTP/2 will be easy and painless.
Finally, Lighthouse will help you to set a proper browser cache time for your assets, which is helpful for returning users. There is no need to fetch resources again and again if they have not changed.
How can you speed up your frontend?
When you open Chrome devtools you can easily check what is the heaviest part of your website. In most cases images are. Thanks to Lighthouse here are a few hints on how you can decrease the size of graphics on your site.
Optimize images
Your site will be displayed on many different devices with different screen sizes and resolutions. Small images will be not readable on big screens or could be stretched in a weird way. On the other hand, big images can corrupt page layout and exhaust mobile network capacity. This is why you should use responsive images on your website.
Different images for different devices
All modern browsers have a special mechanism for serving different versions of an image for different screen sizes. Thanks to this you can display wide picture on desktops and the same picture cropped to show only the most important part on phones.
Here is an HTML markup for it:
<img srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, (max-width: 800px) 800px" src="image-800w">
You can define different image sources inside srcset attribute for different sizes. There is a nice article about responsive images, which will help you to better understand the whole idea.
For example, the main image in the article on alt.dk is 1960px wide and its size is about 2 MB, however on mobile devices with small screens it is 420px with its size only about 154 KB.
Compress images
The next obligatory thing to do is to compress your images. There are various algorithms which will help you to save the network capability. Fortunately, there are a few ready to work solutions which can help you. Lighthouse apart from pointing out your uncompressed images also provides you already compressed images for downloading. All you need to do is just copy them to your site.
Load only images that are needed
When a user enters your page, especially on mobile devices, he will only see the very top of it. Probably the logo of your site, header, title of an article or maybe the few first lines. To see the next part he will need to scroll down. But the decision if he will stay or not may be based on the page load time.
To save that time and also your server resources you can postpone loading images from a further part of the site. This technique is called deferring offscreen images and Lighthouse is really looking for it.
When you enter the alt.dk homepage on an iPhone 5, you will get only 13 images at the beginning. After scrolling down another 22 images will be loaded. That is an improvement which saves 2.1 MB for the first page load (more than 60% of all images are not loaded if they are not needed).
How to defer offscreen images
The next opportunity to speed up the loading time of your site is to defer offscreen images. The general idea pointed out by Lighthouse is that users need to see only images displayed currently in the viewport. All other images, which are mostly below, can be loaded later or even never if the user decides to leave your site. To make it happen you need to change your HTML displayed for every image:
<!-- An image that eventually gets lazy loaded by JavaScript → <img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load.jpg" alt="I'm an image!"> <!-- An image that is shown if JavaScript is turned off → <noscript> <img src="image-to-lazy-load.jpg" alt="I'm an image!"> </noscript>
And add some Javascript for switching data-src with src when the image is near the viewport. For detecting that moment you can use IntersectionObserver . I strongly recommend to read an awesome article about that.
Optimize parts of the layout
On every modern design, you can find some small graphics displayed all over the site. It could be the logo, a fancy button, arrows or lines which are really hard to display using only HTML with CSS.
The first idea is to draw them using PNG files. Unfortunately, there are a few disadvantages in this approach. Let’s say you need to display 4 different ornaments in 3 different colors on your site. Then you need to include 12 additional files. That will make 12 additional requests to your CDN server. It is time and resource consuming. You can combine all these images to one sprite, but it is still hard to add new colors or elements and it is hard to scale.
A Better approach is to use inline SVG. You can change the color of them from code and since it is a vector-based image, you can easily scale them. This approach is recommended by Lighthouse, but on the other hand, you can easily fall into another issue. When your SVG element is complicated, you can make your DOM tree too large. Lighthouse recommends:
- keep less than 1500 nodes in total,
- with a maximum depth size of 32 nodes
- without a parent node with more than 60 child nodes.
So there is an even better solution: you can convert all your SVG elements into font with a really simple tool called Icomoon. Now your ornaments will be scalable, you can change colors using CSS and you can download it using one request for the custom font. For example, to display your clock icon, all you need to do is add this to the HTML code:
<i class="icon-">clock</i>
As you can see now your ornaments will be optimized and easy to maintain.
Summary
Website speed & performance is critical to any business success. A slow loading page can put off a huge chunk of visitors from visiting your website and knowing more about your business. Luckily with the help of Google Lighthouse, you can analyze how your site performs. It can point you towards the pertaining issues on your site as well as recommending practical solutions.
And if you’re site is running on EpiServer, then the steps I laid down above can boost your website performance drastically. So try them out and if you have any further questions, feel free to leave them in the comments below or just email me and I’ll be happy to answer them.
