UserGuide

Web App Optimization

From Xojo Documentation

Revision as of 14:22, 17 September 2018 by PLefebvre (talk | contribs) (Created page with "= Web App Optimization = Unlike a desktop app that is on the same computer as the user, a web app could be on a server thousands of miles away from the user. Also, different u...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Web App Optimization

Unlike a desktop app that is on the same computer as the user, a web app could be on a server thousands of miles away from the user. Also, different users are connecting with varying degrees of speed in between. Some may truly be using a state-of-the-art broadband service, while others are making do with less than an optimal mobile connection. The web app running on the server has to send commands to the browser to communicate with the user interface so it is important that you take into consideration how to build your app to optimize for performance on the internet. Here are a few techniques you can use to optimize your web app’s performance.

Use PNG

Although pictures in JPEG format can be smaller than those in PNG format, JPEG tends to be fuzzy for text and smooth color, does not support transparency and has possible licensing issues.

Store Pictures In Properties

Pictures stored in properties of a web app are cached by the web browser so they are sent only once from the app to the browser. As a result, storing pictures as App properties reduces the amount of data that is transmitted between the app on the server and the browser. Storing your pictures in Modules as properties also allows the browser to cache them.

Use the Style Editor

Web Styles are small (in terms of the amount of data sent from the app on the server to the browser) so they are a very efficient way to make visual changes. Add a Web Style to your project by using Insert->Style. The Style Editor lets you change a variety of settings, including Text & Fonts, Borders, Shadows, Padding, Corner Radii, Opacity and Background. After you create a style you can apply it to a control by selecting the Style’s name from the popup menu for the control’s Style property.

Use Rectangles

Rather than creating and loading pictures for simple backgrounds, use Rectangles when possible. They can be dramatically altered using Styles. For example, by setting the corner radii to 50, you can turn a rectangle into a circle.


Rectangles are very small in terms of the amount of data that needs to be sent from your app to the browser making them quick to draw.

Image Locations

Displaying small images (stored in the project) is generally fine. However browsers will cache the images that don't change, so it's important to use a WebPicture whenever possible (as shown above) because they return caching headers.

If you are having issues with image loading speed, you will want to consider moving your images out of your app entirely so that they can be delivered by another web server or content delivery network (CDN). This reduces the load on your Xojo web app and with a CDN it can make the delivery of the image quicker because it is closer to where the user is located.