html css angularjs kendo-ui kendo-mobile

CSS rules applied after HTML content is loaded

I have a web app for mobile devices.

It is a single page application, so it uses a pretty big index file along with 3 huge CSS files.

In some pages the CSS rules are applied after the content is loaded, meaning I can see my form fields for a brief moment while they are still unstyled.

What can I do to solve this issue? Let me know if I should provide some code. I am using Kendo Mobile UI and AngularJS.

Solution

You need to speed up your page load time.

CSS Files:

try to avoid having 3 CSS files. 3 CSS files means 3 HTTP requests. If you ever need to keep it this way to organize your files, fine.
avoid using "@import" in your CSS files
minify your CSS files. You can do that online using an Online Minify Tool or programmatically using several libraries.
load your CSS styles in <link> tags at the top of your document.

JS Files:

load your JS files at the bottom of the document
minify your JS files. You can do that online using an Online Minify Tool or programmatically using several libraries.

Images:

try to use PNG8 instead of GIF images
try to use JPEG with High Quality (60%) whenever you can
try to use CSS Sprites by combining several graphics in one image file. This will reduce the number of HTTP requests.
preload images using JavaScript if you want them to show up before calling a JavaScript function or processing something.

If you're willing to pay some bucks to improve drastically the load time, then consider using a CDN (Content Delivery Network). I've used Amazon Web Services CloudFront and it's pretty easy to setup. You put your CSS, JS and images files there and they are replicated all over the world (on all Amazon servers) and it'll improve the page load time. It's a "Pay Per Use" system, so you can decide to stop using this service whenever you want.