Typically, when developers are faced with performance improvements, a natural first area to look at is optimising the backend code. In recent years, a lot of research has been done in this area and according to ‘High-performance websites’ in most cases, the big quick wins are usually found in the frontend.
According to the research done in ‘High-performance websites’ on average only 10-20% of the page load is the actual HTML and the rest are frontend requests. Take Google for instance, even though the landing page is pretty simple, the HTML is one of the quicker things to render. For the majority of people reading this, your website should fall into this bracket and if you follow the advice in this post, you should be able to get some good quick wins. Obviously, every project is different and sometimes getting the HTML to render quickly isn’t as quick and easy as some of the tips contained here. If you find yourself in that situation, then I suggest you start looking at profiling tools. Umbraco comes with mini-profiler installer installed and I suggest you start your search there.
- Try To Combine your images into sprites. The fewer HTTP requests your page makes, the quicker it will load. In most instances, you can’t get rid of images from your website.. otherwise, it would be very dull.. you can, however, combine things like icons into a single image file to reduce the number of HTTP requests
- Put your CSS into a separate file, linked in the head section of your webpage. This trick won’t improve performance, but it will make your users think your website is loading faster. If your CSS is at the bottom of the page, then your website won’t render correctly until everything has loaded and it will seem to the user it has taken longer. When people can see elements of the page loading, they get less frustrated.
- Combine all your CSS into a single file
- Put your JS at the bottom of the page. If you don’t have scripts at the bottom, any content below the script could be blocked from rendering until the script has downloaded. The content below the script can also be blocked from downloading.
- Minify your CSS files
- Don’t just cache your HTML files, cache your CSS and JS files too
- If you had to email a friend a file, it is likely you will zip it up. How your web server commutes to your visitors’ browsers should be the same, make sure GZip compression is enabled. In your web.config, add this:
<urlCompression doStaticCompression="true" doDynamicCompression="true">
- Use a CDN, like Cloud flare, to distribute your website’s files all over the world. The nearer your web site’s files are to the end user, the quicker your page will load
- Make sure your “Expires” headers are set. Using expire-headers will reduce the amount of time your website’s visitors will need to make additional requests to your web browser.
- Enable your Umbraco Macro cache. In the Umbraco backend, go to the ‘Developer’ section, ‘Macros’. From here select, a macro on the ‘Marco Properties’ tab, you will find caching options. Add a caching duration and Umbraco will start caching it
- Enable output caching. Getting Umbraco to figure out what needs to be displayed on a page is expensive. When you enable output caching, Umbraco will add your pages into a cache. The next time that page is requested, instead of having to try and figure out what to render all over again, it will return the page from cache.
- If certain parts of your web pages should never be cached and some bits can consider donut caching.
- Disable ETags if you are working in a load balanced environment.
Performance can be a very difficult beast to tackle. When you start to think about performance, the majority of the quick-wins can be made by reducing the number of HTTP requests your templates make, as well as caching and compressing your data. Most of the tips listed above can be done pretty quickly and can dramatically improve performance. If you are still stuck after implementing these tips, then I would hazard a guess that you have bigger underlying issues with your website and you probably need some help.