ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / WEBDEV specific features / Website Search Engine Optimization (SEO)
  • Overview
  • Optimizing your sites
  • Tip #1: Replace the search codes by queries.
  • Tip #2: Use Looper controls to display your data.
  • Tip #3: Remove HCreationIfNotFound from your code.
  • Tip #4: Reduce the initialization code of the project (and move it to the initialization code of the page).
  • Tip #5: Limit the global variables to the project and the context variables (in the AWP sites).
  • Tip #6: Replace the hidden controls by global page variables.
  • Tip #7: If a page does not use server code, change it into a static page.
  • Tip #8: Use PageRefresh instead of PageDisplay.
  • Tip #9: Avoid using useless browser procedures and functions.
  • Tip #10: Use the page templates to standardize the pages of your site.
  • Tip #11: Avoid using the framesets.
  • Tip #12: Use the Cell control for the background colors and for the borders.
  • Tip #13: Use the "Automatic" mode of controls.
  • Tip #14: Avoid using too many CSS styles.
  • Tip #15: Avoid using the local styles.
  • Tip #16: Replace the Static controls by the HTML Static controls.
  • Tip #17: Use the optimization options proposed by WEBDEV.
  • Tip #18: Check the size of images
  • Tip #19: Directly create the images in GIF or JPEG format and save them in the "_WEB" directory
  • Tip #20: Check the size of the generated page (this size should be smaller than 50 KB).
  • Tip #21: Don't forget to use the pager.
  • Tip #22: Define the timeout of your dynamic sites
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
22 tips for optimizing the speed of a site
Overview
When a site is on-lined, one of the main expectations of Web users is speed.
On the development side, speed means:
  • optimizing the size of HTML pages displayed on the browser. Indeed, the smaller the HTML file is, the faster the page will be loaded in the browser.
    Reminder: Via modem, a 4 KB file is displayed in 1 second while a 40 KB image is displayed in 10 seconds (assuming an optimal use of the modem at constant speed).
  • optimizing the processes performed on the server (for a dynamic site). Indeed, the simple fact of choosing queries to perform multi-criteria searches speeds up the execution time of the server code, and therefore reduces lag time for the Web user.
  • as well as optimizing the processes performed on the browser.
Optimizing your sites

Tip #1: Replace the search codes by queries.

You were used to call functions such as HReadSeek, HReadNext to perform searches in your data files, to perform complex processes, ... The processes required to perform a search and to display the result could easily take dozens of code lines.
Use the queries! Create your query in the query editor and associate this query with the page or with the type of control (Looper, Table, List Box, etc.).
Use the queries to optimize your searches. When performing reload operations, the queries are much faster.

Tip #2: Use Looper controls to display your data.

To display the data from queries or files in Looper controls, use browsing Looper controls directly (you don't program your Looper controls "manually" anymore!). To do so, specify in the page editor the base file or the base query associated with the control, the items to display, ... and that's it.
The code for filling the Looper control when browsing the file is not necessary. WEBDEV takes care of everything and the display of Looper controls is much faster.

Tip #3: Remove HCreationIfNotFound from your code.

HCreationIfNotFound is time consuming because it performs a lot of checks.
Is this function really useful in a dynamic WEBDEV site? No, because most of the time, files are already created and installed on the Web server when using the site.
Therefore, this function can be deleted from your code without consequences.

Tip #4: Reduce the initialization code of the project (and move it to the initialization code of the page).

Reduce the project initialization code: the first dynamic page will be displayed much faster.

Tip #5: Limit the global variables to the project and the context variables (in the AWP sites).

The global variables of the project are declared and loaded in memory as soon as the site is started. Whenever a global variable is used, the process time on the server is not insignificant.
Furthermore, the global variables use the memory resources of the server.
In the AWP sites, the use of DeclareAWPContext to store data between several successive queries is slowing down. Indeed, the data must be re-read by each query. Furthermore, if the mode for storing the AWP context (chosen in ConfigureAWPContext) is a management by cookie, the content of the context is returned from the browser to the application server whenever a query is run, so the site is even more slowed down.

Tip #6: Replace the hidden controls by global page variables.

If a page uses hidden controls to handle information, we advise you to delete these controls and to replace them by global page variables for example. Indeed, the HTML code corresponding to a control (even hidden) is larger than the code for the global page variables.

Tip #7: If a page does not use server code, change it into a static page.

If you are using no server code in a page and no controls specific to dynamic pages, create a static page. The size of the corresponding HTML file will be smaller.

Tip #8: Use PageRefresh instead of PageDisplay.

PageRefresh and PageDisplay both open a page in a window of the browser:
  • PageDisplay creates the page context on the server again and runs the initialization code of the page.
  • PageRefresh creates the page context and runs the initialization code of the page if necessary. Therefore, this function is faster.
Replace PageDisplay by PageRefresh when possible.
Caution: PageRefresh cannot be used to open a page with parameters.

Tip #9: Avoid using useless browser procedures and functions.

The WLanguage functions used in browser code as well as the local browser procedures are converted into Javascript code and are included in the pages in HTML format.
Therefore, the HTML code gets bigger as you use browser functions and procedures. Each function used slows down the loading time of your page.
Therefore, we advise you to:
  • delete the useless browser WLanguage functions (for example, limit the use of Val(ExtractString(MyString)).
  • group these processes in sets of browser procedures. Then, the corresponding code is saved in a unique JavaScript file, different from the page.

Tip #10: Use the page templates to standardize the pages of your site.

The page templates are used to optimize the load time of the page as well as site maintenance. Indeed, using page templates in your sites allows you to:
  • optimize the speed when displaying the pages of the site.
  • limit the number of generated HTML files (and therefore the number of HTML files downloaded to the computer of the Web user).
  • easily create the site pages.
  • define the layout of the site pages.
  • refresh the style book of the site.
  • simplify the management of targets for the site pages.
  • ...

Tip #11: Avoid using the framesets.

Today, very few Web sites use the framesets. Why? Mainly because of loading time. Indeed, the load time of a frameset is equivalent to the load time of all the pages that make up the frameset.
Furthermore, even though WEBDEV proposes a user-friendly interface for handling framesets, the result on the computer of the Web user depends on size of his browser. Scrollbars may appear, unexpected display effects may occur when the browser is resized, ...
Reserve the framesets for the Intranet sites!

Tip #12: Use the Cell control for the background colors and for the borders.

You may be tempted to use images or an overlaid caption to draw borders or to define a background color of an area.
Use the new cell control. This control is loaded faster than an image and you can easily get all the required effects. Furthermore, to handle a control and a cell, there is no need to use the "Overlayable" option available for the controls.
The cell control generates less HTML code and therefore it optimizes the load time of your page.

Tip #13: Use the "Automatic" mode of controls.

WEBDEV proposes 3 different modes for each type of control:
  • static mode: if the control is not modified through programming.
  • dynamic mode: if the control must be modified through programming.
  • automatic mode: WEBDEV automatically detects whether the control is handled through programming and it generates the corresponding HTML code. This last option is recommended because the generated HTML code is optimized according to the operations performed in your WEBDEV site.

Tip #14: Avoid using too many CSS styles.

Be careful when designing the style sheet of your project and avoid using too many styles. Indeed, the more styles are used, the more time it takes to load a page (because the style characteristics of the.CSS file must be loaded).
Our advice: Use between 5 and 10 different styles in a site.

Tip #15: Avoid using the local styles.

When modifying the style of a control, it can be defined "locally". The modifications made to the style will only be applied to this control (and not to all the controls that use the CSS style).
A local style is directly defined in the HTML page. Therefore, a local style slightly increases the page size (and its load time).
Twenty local styles in a page increase the size of the page by more than 1 KB.

Tip #16: Replace the Static controls by the HTML Static controls.

You are using several static controls in order for the Web user to see a text with different layouts (part of the text in bold, part of the text in color, etc.).
Delete all your static controls and replace them by a single "HTML static control".
A single control can replace 3 or 4 controls: the size of the HTML file corresponding to your page is immediately reduced and therefore its load time is faster.

Tip #17: Use the optimization options proposed by WEBDEV.

To optimize the size of the generated pages, WEBDEV proposes a set of optimization options to use on the pages of your project.
By default, the most common optimization options are applied to all the pages of the project. However, the optimization options can be customized:
  • for all the project pages ("Project Description", "Advanced" button in the "General" tab).
  • for a single page of the project ("Advanced..." in the "Style" tab of the page description window).

Tip #18: Check the size of images

All the sites display images. These images play an important part in the load time of the page. On the Internet, the JPEG and PNG formats are recommended. These formats are compressed image formats.
To optimize the size of your images, use images in 100%. Avoid using images that will be reduced when displayed.
Let's see some examples of standard sizes according to the image resolution:
Resolution
(in pixels)
Recommended size
(estimate in KB)
20 x 300.29
50 x 802
100 x 2009.8

To check the size of all images associated with one of the site pages:
  1. Run the project and display the page in Internet explorer.
  2. On the "Home" tab, in the "General" group, click "Save" and select "Save as".
  3. Save the page in a new directory. The page in HTML format and all the image files used by the page are saved in this directory.
  4. Resize the images found in this directory.
Reminder: Via modem, a 4 KB file is displayed in 1 second while a 40 KB image is displayed in 10 seconds (assuming an optimal use of the modem at constant speed).

Tip #19: Directly create the images in GIF or JPEG format and save them in the "_WEB" directory

To optimize the HTML code used to manage the images, we advise you to:
  • directly create images in the desired format and size using image editing software.
  • save these images directly in the _WEB subdirectory of the project.
  • associate the Image control with the desired image in the control description window.
Remark: Avoid using resized or reduced images, ... in the editor. Use images in 100%. The size of your images will be optimized for your site.

Tip #20: Check the size of the generated page (this size should be smaller than 50 KB).

The size of the generated page corresponds to the size of the page displayed on the browser of the Web user (and not the size of the HTM file generated by WEBDEV).
To find out the size of the page displayed in the browser:
  1. Run the project and display the page in Internet explorer.
  2. Display the source code of the HTML page.
  3. Save the source code in a text file (in Notepad for example).
  4. Check the size of the file.
Remark: We advise you not to use the "Save as" option because the Internet browsers (Internet Explorer for example) add specific HTML code when saving the page.

Tip #21: Don't forget to use the pager.

A page containing a Table control or a Looper control displays all control records. To limit the number of records displayed in the page (and therefore limit the size of the HTML file returned by the server), use a pager.
The pager allows the Web users to display the different elements found in the Table control or in the Looper control.
No programming is required. Simply add a Pager control and associate it with the desired Table or Looper control.
You should not use more than 10 rows per page.

Tip #22: Define the timeout of your dynamic sites

The timeout corresponds to the amount of time after which the connection is automatically canceled if no action was performed by the Web user
This parameter must be defined according to your site. Indeed, each connection consumes server memory. To optimize the server memory, the unused connections should be closed quickly. In most cases, a timeout set to 10 minutes is enough.
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment

Last update: 06/03/2022

Send a report | Local help