3

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.

hermann
  • 6,237
  • 11
  • 46
  • 66
  • Load the CSS files first? – Paulie_D Jan 21 '15 at 15:25
  • what about displaying a "loading" icon and hiding the main content until the site finished loading your stuff? – Ben Win Jan 21 '15 at 15:30
  • I thought about this. I consider this my last option as I don't want to introduce a "Loading" animation - it would feel like the app is slow. – hermann Jan 21 '15 at 15:33
  • If it's a "single page app"....how can it have "some pages"? – Paulie_D Jan 21 '15 at 15:34
  • The browser doesn't reload/redirect to different html views, so it's a single page app. "Pages" refers to what the user views as a page at a given moment. It could be a login screen, or a FAQ screen, but it's an SPA. – hermann Jan 21 '15 at 15:37

1 Answers1

5

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.

Read more: https://developer.yahoo.com/performance/rules.html

Wissam El-Kik
  • 2,469
  • 1
  • 17
  • 21
  • May I ask - how does loading my JS files at the bottom of the document help? – hermann Jan 29 '15 at 10:26
  • When the browser loads the page, it reads the HTML document from the top to the bottom, from the left to the right. When reading the HTML document, the browser would have read the whole DOM before reaching your JS scripts and executing them. The page will load faster. In case you're putting the scripts at the top of the page, the browser will read the scripts in the head first and initiate callbacks (`document.ready', 'window.load' etc.) and your DOM isn't ready yet. The browser will go back-and-forth from the top of the document to the bottom of the document. – Wissam El-Kik Jan 29 '15 at 11:27
  • That's why you should put all the scripts at the bottom of the page to make sure the DOM was loaded and to avoid bloating the browser with extra loops and callbacks when the page loads. – Wissam El-Kik Jan 29 '15 at 11:27
  • [Yahoo! Performance Rules](https://developer.yahoo.com/performance/rules.html): check this part "Put Scripts at the Bottom". Also: http://stackoverflow.com/a/5329895/1337185 – Wissam El-Kik Jan 29 '15 at 11:31