CODEWITHSUNDEEP
javascriptjquerykendo-ui
JReam
JReam

Reputation: 898

How to load Kendo UI widgets faster

I'm using Kendo UI widgets such as the line chart, grid and date pickers. I love the product however I'm noticing a latency issue when the page loads.

For example with the grid; I first see a standard HTML table load, then a second later or so it's redrawn with the kendo grid.

The same goes for my datetime pickers, radio buttons etc. This is an example of all the css and scripts I'm using in the order in a layout page for a dashboard I'm working on... I'm not a big fan of bundling, therefore I leave the scripts as is in the page. I know that if you bundle (if it works...) you gain a slight performance with the threading(?) but I always seem to have issues with the bundler so I leave them in the page. Is there a sequence to loading these scripts so that you don't see the redrawing of the elements as a user?

Top of Page

<link href="~/Content/css/bootstrap.css" rel="stylesheet" />
<link href="~/Content/css/style.css" rel="stylesheet" />

<link href="~/Content/css/animate.css" rel="stylesheet" />
<link href="~/Content/css/animations.css" rel="stylesheet" />
<link href="~/Content/css/kendo/kendo.common.min.css" rel="stylesheet" />

<link href="~/Content/css/kendo/kendo.custom.css" rel="stylesheet" />
<link href="~/Content/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/fonts/fontello/css/fontello.css" rel="stylesheet" />

<link href="~/plugins/magnific-popup/magnific-popup.css" rel="stylesheet"/>
<link href="~/plugins/owl-carousel/owl.carousel.css" rel="stylesheet"/>
<link href="~/plugins/iCheck-1.x/skins/square/square.css" rel="stylesheet" />


@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

Bottom of Page

@Scripts.Render("~/bundles/bootstrap")

<!-- Isotope javascript -->
<script type="text/javascript" src="~/plugins/isotope/isotope.pkgd.min.js"></script>

<!-- Owl carousel javascript -->
<script type="text/javascript" src="~/plugins/owl-carousel/owl.carousel.js"></script>

<!-- Magnific Popup javascript -->
<script type="text/javascript" src="~/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>

<!-- Appear javascript -->
<script type="text/javascript" src="~/plugins/jquery.appear.js"></script>

<!-- Sharrre javascript -->
<script type="text/javascript" src="~/plugins/jquery.sharrre.js"></script>

<!-- Count To javascript -->
<script type="text/javascript" src="~/plugins/jquery.countTo.js"></script>

<!-- Parallax javascript -->
<script src="~/plugins/jquery.parallax-1.1.3.js"></script>

<!-- Knob -->
<script src="~/plugins/jquery.knob.min.js"></script>

<!-- Contact form -->
<script src="~/plugins/jquery.validate.js"></script>

<!-- SmoothScroll javascript -->
<script type="text/javascript" src="~/plugins/jquery.browser.js"></script>
<script type="text/javascript" src="~/plugins/SmoothScroll.js"></script>

<!-- Initialization of Plugins -->
<script type="text/javascript" src="~/Scripts/template.js"></script>

<script src="~/plugins/iCheck-1.x/icheck.min.js"></script>
<script src="~/Scripts/kendo/jszip.min.js"></script>

<script src="~/Scripts/kendo/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/kendo.aspnetmvc.min.js"></script>

Upvotes: 4

Views: 2960

Answers (1)

Jarosław Kończak
Jarosław Kończak

Reputation: 3407

Script optimization is one thing. Use css minification and bundling like you do with your Javascript using @Styles.Render(). It is mandatory in production environment (if you don't use external minification).

The other thing is Kendo always works this way; first create element and then convert it to the widget.

If you creating widgets in the document.ready event all content of the site has to be loaded (including html and elements) before a widget will be created. Reducing the size of the page content will improve it's load time but you will still have this effect if the user has a slow network connection.

So the first thing you should do is to hide element which you will convert to the widget by setting its display to none. Kendo should show widget like it always does. In asp version it may be a little it harder but you can try hide element container and show it after some widget event.

Second thing is that you can include the code of the widgets that you are using in your project instead of whole kendo.all.min.js. You can find more information here: http://docs.telerik.com/kendo-ui/intro/installation/what-you-need (and here: http://docs.telerik.com/kendo-ui/using-kendo-with-requirejs).

And the last thing: You can also consider to use CDN (http://docs.telerik.com/kendo-ui/intro/installation/cdn-service) especially if you creating site available via internet or your own "intranet CDN" if you are using the same javascripts in few of your projects.

Upvotes: 1

Related Questions