UserGuide

Difference between revisions of "Web App Optimization"

From Xojo Documentation

(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...")
 
m (Added images)
Line 2: Line 2:
 
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.
 
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 ==
+
== Graphics ==
 +
 
 +
=== 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.
 
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 ==
+
=== 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.
 
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 ==
+
=== Use the Style Editor ===
 +
[[File:StyleCircle.png|thumb]]
 
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.
 
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 ==
+
=== Use Rectangles ===
 +
[[File:RectangleCircle.png|thumb]]
 
Rather than creating and loading pictures for simple backgrounds, use [[WebRectangles|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.
 
Rather than creating and loading pictures for simple backgrounds, use [[WebRectangles|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.
 
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 ==
+
=== 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.
 
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.
 
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.

Revision as of 14:26, 17 September 2018

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.

Graphics

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

StyleCircle.png

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

RectangleCircle.png

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.