Hi all,

I am running a website using Umbraco 7.3.1. My client is not happy with the preview in the back end when they save content and preview the page.

The main problem that I've discovered within the current way that Umbraco is implementing the preview that causing the slow performance is:

1/ I have reviewed the preview workflow at: https://github.com/umbraco/Umbraco-CMS/blob/release-7.3.1/src/Umbraco.Web/umbraco.presentation/umbraco/dialogs/Preview.aspx.cs

The current code does 2 main things:

• Build the preview set. This will save an XML snapshot per user.
• Activate the preview cookie. This will store the preview set GUID to the preview cookie value.

I don't think building the preview set at anytime that a user clicks Preview is a good approach. I still haven't dived deeply to see what actually the preview set XML is used for. However, I did the hack by removing the build preview set action. I change the code to build the preview set only IF the preview cookie is not set. After this change I still see everything works well.

In the end, my change in this logic is: at the first time that the user clicks preview, I build the preview set - store guid to the cookie. Then, at the second time - I just make the redirection to the url: [id].aspx - user can still see the changes.

2/ In the canvasdesigner.panel.js (inside the folder: umbraco\Js after installing Umbraco), I see that Umbraco is implementing the waiting mechanism when loading the iframe. The final result is: the page needs to be loaded completely to be visible. In my case, the page contains many image assets to be loaded - it causes the user has the feeling that preview is running very slow.

I hacked this by set the iframeIsLoaded by true (I know it's stupid). However, it helps to make the page can be rendered even without the waiting status, but the user can see the progress.

3/ Also, I have figured out that the preview makes the iframe load the same URL twice when you click the Preview button. This is caused by the code in: umbraco\Js\umbraco.controllers.js where:

var previewWindow = $window.open('preview/?id=' + content.id, 'umbpreview');
        $scope.save().then(function (data) {
            // Build the correct path so both /#/ and #/ work.
            var redirect = Umbraco.Sys.ServerVariables.umbracoSettings.umbracoPath + '/preview/?id=' + data.id;
            previewWindow.location.href = redirect;
        });

If the save function runs slowly, then you will have the second refresh of the iframe. To fix this, I move the logic of redirection out of the save.then. This is another second stupid thing. If I don't do that the page will do reloading twice and take nearly double time for loading.

After all of the above hacks, the preview feature runs really faster. It takes me around 7 seconds to preview the page (at the first time when preview set hasn't been built yet). Later, it can render faster (3-5 seconds) in my case. The user can see the page loads and not getting stuck in waiting the whole page inside the iframe loaded completely.

However, I know that I changed these logics in a hack way and really wants to hear any other better approaches.

Thanks