Portal performance - why is the same file getting loaded 6 times and taking 12 seconds?

Tom_Hendricks

I have spent some time trying to get my custom add-in code to run more efficiently, but discovered that my pages were still running slow even when I stopped loading my custom code. The culprit seems to be Kendo loading the same Cireson CSS file multiple times, at 12 seconds.  I spent some time in IIS trying to get it to cache, compress, etc. this file, but it takes the same amount of time to load no matter what.  Have a look:



The compression helped shave off about 2 seconds--I am transferring < 700k instead of 8mb.  However, even when the file is loaded from cache, it still sits there for 12+ seconds of wait time.  This is a new phenomenon.  I am running 8.1 in the environment pictured here.

• Is anyone else seeing this?
• Does anyone know what is causing it?
• Does anyone know how to fix it?  30+ seconds is a long time to wait for a ticket to open.

Detail:

john_doyle

@james_kleinschnitz You can see why this is happening if you look at the definition of the editor in the controller.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; targetEle.kendoEditor({<br>...<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; stylesheets: [<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "/Content/Styles/cireson.main.min.css"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });

Seeing as that css file is always loaded by the portal, wouldn't it be better to do what Kendo suggest here

To avoid the default content styles demonstrated in the previous example, remove or override them after the Editor is initialized by executing the following code.

var editor = $("#EditorID").data("kendoEditor");
var styleTag = editor.body.parentNode.getElementsByTagName("style")[0];
styleTag.parentNode.removeChild(styleTag<span>);</span>

john_doyle

@james_kleinschnitz A bit of testing revealed that it did not work. However, what did work was this:

                stylesheets: [<br>                    "/Content/Styles/cireson.main.min.css?v="+session.staticFileVersion<br>                ]

james_kleinschnitz

I will have the engineering team look at this in an upcoming release.
Thanks

james_kleinschnitz

@Tom_Hendricks
Are you sure that you have removed all your customizations?  I ask this because when we reference static assets like js and css files we always append a version number in order to force the browser to recache these files.  The cireson.main.min.css file that is getting loaded multiple times does not have a version number, based on your screenshot. 

Thanks

Tom_Hendricks

No, this screenshot still had my customizations loaded.  I believe I have figured it out.  This is getting loaded for each Kendo Editor control in the form, rather than being loaded once for all.

When I removed customizations, I just commented the custom.js and custom.css, but did not change the ticket form JSON files.  If I rename/replace the whole CustomSpace folder, this no longer occurs.

So I will re-frame my question a bit more appropriately, now:

Is it really necessary to reload the same css file for each Kendo control that uses it?  I realize this might be more of a question for Telerik/Progress, but it also might not be.

Tom_Hendricks

Should have included this in my response yesterday, for clarity: My code is not loading the files.  Using the Kendo Editor control on a custom ticket form is, however.

james_kleinschnitz

Tom_Hendricks said:

Should have included this in my response yesterday, for clarity: My code is not loading the files.  Using the Kendo Editor control on a custom ticket form is, however.

Can you give me a little bit more information about what you mean here?

Tom_Hendricks

I have an "Editor" control for more than one property on a custom form.  The Kendo code is loading that css file an additional time for each Editor control that is present on the form.  If I switch a property to use String or LongString instead, it no longer loads the css file an additional time.

john_doyle

@james_kleinschnitz You can see why this is happening if you look at the definition of the editor in the controller.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; targetEle.kendoEditor({<br>...<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; stylesheets: [<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "/Content/Styles/cireson.main.min.css"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });

Seeing as that css file is always loaded by the portal, wouldn't it be better to do what Kendo suggest here

To avoid the default content styles demonstrated in the previous example, remove or override them after the Editor is initialized by executing the following code.

var editor = $("#EditorID").data("kendoEditor");
var styleTag = editor.body.parentNode.getElementsByTagName("style")[0];
styleTag.parentNode.removeChild(styleTag<span>);</span>

john_doyle

@james_kleinschnitz A bit of testing revealed that it did not work. However, what did work was this:

                stylesheets: [<br>                    "/Content/Styles/cireson.main.min.css?v="+session.staticFileVersion<br>                ]

james_kleinschnitz

I will have the engineering team look at this in an upcoming release.
Thanks