Tips On Improving your Umbraco Websites Performance Issues
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. You can find more information about that here, How To Debug Your Umbraco 7 Website. Fewer HTTP Requests
- 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:
<system.webServer> <urlCompression doStaticCompression="true" doDynamicCompression="true"> </system.webServer>
- 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.