DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Spécificités WEBDEV / Optimisation et référencement d'un site
  • Présentation
  • Optimiser vos sites
  • Conseil N°1 : Remplacez les codes de recherche par des requêtes.
  • Conseil N°2 : Utilisez des champs Zone répétée fichier pour afficher vos données.
  • Conseil N°3 : Supprimez les fonctions HCréationSiInexistant de votre code.
  • Conseil N°4 : Réduisez le code d'initialisation du projet (et déplacez-le vers le code d'initialisation de la page).
  • Conseil N°5 : Limitez les variables globales au projet et les variables de contexte (dans les sites AWP).
  • Conseil N°6 : Remplacez les champs cachés par des variables globales de page.
  • Conseil N°7 : Si une page n'utilise pas de code serveur, transformez-la en page statique.
  • Conseil N°8 : Utilisez la fonction PageActualise plutôt que la fonction PageAffiche.
  • Conseil N°9 : Evitez les procédures et les fonctions Navigateur inutiles.
  • Conseil N°10 : Utilisez les modèles de pages pour harmoniser les pages de votre site.
  • Conseil N°11 : Evitez les framesets.
  • Conseil N°12 : Utilisez le champ Cellule pour les couleurs de fond et vos bordures.
  • Conseil N°13 : Préférez le mode "Automatique" des champs.
  • Conseil N°14 : Evitez la multiplication des styles CSS.
  • Conseil N°15 : Evitez les styles locaux.
  • Conseil N°16 : Remplacez les champs Libellé par un champ Libellé HTML.
  • Conseil N°17 : Utilisez les optimisations de génération de page proposées par WEBDEV.
  • Conseil N°18 : Vérifiez la taille des images
  • Conseil N°19 : Réalisez les images directement au format GIF ou JPEG et enregistrez-les dans le répertoire "_WEB"
  • Conseil N°20 : Vérifiez la taille de la page générée (cette taille devrait être inférieure à 50 Ko).
  • Conseil N°21 : Pensez à la réglette.
  • Conseil N°22 : Réglez le timeout de vos sites dynamiques lors du déploiement.
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
22 conseils pour optimiser la vitesse d'un site
Présentation
Lorsqu'un site est en exploitation, une des premières attentes des internautes est que ce site soit rapide.
Côté développement du site, cette rapidité passe particulièrement par :
  • une optimisation de la taille des pages HTML affichées sur le navigateur. En effet, plus la taille du fichier HTML est petite, plus la page sera chargée rapidement dans le navigateur.
    Rappel : Par modem, un fichier de 4 ko s'affiche en 1 seconde, une image de 40 ko s'affiche donc en 10 secondes (pour une utilisation optimale du modem à vitesse constante).
  • une optimisation des traitements réalisés sur le serveur (pour un site dynamique). En effet, le simple fait de choisir des requêtes pour effectuer des recherches multi-critères accélère le temps d'exécution du code serveur, et donc diminue l'attente de l'internaute.
  • et également une optimisation des traitements réalisés sur le navigateur.
Optimiser vos sites

Conseil N°1 : Remplacez les codes de recherche par des requêtes.

Vous aviez l'habitude d'utiliser des fonctions telles que HLitRecherche, HLitSuivant pour effectuer des recherches dans vos fichiers de données, pour effectuer des traitements complexes, ... Les traitements nécessaires à la recherche et à l'affichage du résultat de la recherche pouvaient facilement prendre des dizaines de lignes de codes.
Utilisez les requêtes ! Vous créez votre requête sous l'éditeur de requêtes et vous associez cette requête directement à la page ou au type de champ voulu (zone répétée, table, liste, ...).
Utilisez les requêtes pour optimiser vos recherches. Sur les rechargements, les requêtes sont plus performantes.

Conseil N°2 : Utilisez des champs Zone répétée fichier pour afficher vos données.

Pour afficher des données provenant de requêtes ou de fichiers dans des champs de type Zone répétée, utilisez directement les champs Zone répétée fichier (Ne programmez plus "à la main" vos champs Zone répétée !). Il suffit d'indiquer sous l'éditeur de pages le fichier ou la requête de base associé au champ, les rubriques à afficher, ... et le tour est joué.
Le code de remplissage du champ Zone répétée pendant le parcours du fichier est inutile. WEBDEV s'occupe de tout et l'affichage des champs Zone répétée est plus rapide.

Conseil N°3 : Supprimez les fonctions HCréationSiInexistant de votre code.

La fonction HCréationSiInexistant est une fonction très gourmande en temps car elle effectue de nombreuses vérifications.
Mais cette fonction est-elle vraiment utile dans un site dynamique WEBDEV ? Non, car la plupart du temps, les fichiers sont déjà créés et installés sur le serveur Web lors de l'utilisation du site.
Cette fonction peut donc être supprimée sans problème de votre code.

Conseil N°4 : Réduisez le code d'initialisation du projet (et déplacez-le vers le code d'initialisation de la page).

Plus le code d'initialisation du projet sera réduit, plus le temps d'affichage de la première page dynamique de votre site sera rapide.

Conseil N°5 : Limitez les variables globales au projet et les variables de contexte (dans les sites AWP).

Les variables globales au projet sont déclarées et chargées en mémoire dès le lancement du site. A chaque manipulation d'une variable globale, le temps de traitement du serveur n'est pas négligeable.
De plus, les variables globales utilisent les ressources mémoires du serveur.
Dans les sites AWP, l'utilisation de DéclareContexteAWP pour conserver des données entre plusieurs requêtes successives est un facteur de ralentissement. En effet, les données doivent être relues à chaque requête. De plus, si le mode de conservation du contexte AWP (choisi dans la fonction ConfigureContexteAWP) est une gestion par cookie, le contenu du contexte est renvoyé du navigateur vers le serveur d'application à chaque requête ce qui ralentit encore plus le site.

Conseil N°6 : Remplacez les champs cachés par des variables globales de page.

Si une page utilise des champs cachés pour manipuler certaines informations, il est conseillé de supprimer ces champs et de les remplacer par exemple par des variables globales de page. En effet, le code HTML correspondant à un champ (même caché) est plus important que celui des globales de page.

Conseil N°7 : Si une page n'utilise pas de code serveur, transformez-la en page statique.

Si vous n'utilisez pas de code serveur dans une page, ni de champs spécifiques aux pages dynamiques, faites une page statique. La taille du fichier HTML correspondant sera réduite.

Conseil N°8 : Utilisez la fonction PageActualise plutôt que la fonction PageAffiche.

Les fonctions PageActualise et PageAffiche ouvrent toutes les deux une page dans une fenêtre du navigateur :
  • La fonction PageAffiche re-crée à chaque fois le contexte de page sur le serveur et exécute le code d'initialisation de la page.
  • La fonction PageActualise crée le contexte de page et exécute le code d'initialisation de la page uniquement si nécessaire. Cette fonction est donc plus rapide.
Remplacez la fonction PageAffiche par la fonction PageActualise lorsque c'est possible.
Attention : La fonction PageActualise ne permet pas d'ouvrir une page paramétrée.

Conseil N°9 : Evitez les procédures et les fonctions Navigateur inutiles.

Les fonctions WLangage utilisées en code Navigateur comme les procédures locales navigateur sont converties en code Javascript et intégrées dans les pages au format HTML.
Le code HTML est donc d'autant plus important que vous utilisez des fonctions et procédures navigateur. Chaque fonction utilisée ralentit le temps de chargement de votre page.
Il est donc conseillé :
  • soit de supprimer les fonctions WLangage navigateur inutile (par exemple limitez l'utilisation de fonctions telles que Val(ExtraitChaîne(MaChaîne)).
  • soit de regrouper ces traitements dans des collections de procédures navigateur. Le code correspondant est alors enregistré dans un fichier Javascript unique différent de la page.

Conseil N°10 : Utilisez les modèles de pages pour harmoniser les pages de votre site.

Les modèles de pages permettent aussi bien d'optimiser le temps de chargement de la page que d'optimiser le maintient du site lors du développement. En effet, l'utilisation de modèles de pages dans vos sites permet de :
  • optimiser la vitesse d'affichage des pages du site.
  • limiter le nombre de fichiers HTML générés (et donc le nombre de fichiers HTML à charger sur le poste de l'internaute).
  • simplifier la création des pages du site.
  • simplifier la mise en page des pages du site.
  • mettre à jour de la charte graphique du site.
  • simplifier la gestion des destinations des pages du site.
  • ...

Conseil N°11 : Evitez les framesets.

De nos jours, très peu de sites utilisent des framesets sur le Web. Pourquoi ? Essentiellement pour des raisons de temps de chargement. En effet, le chargement d'un frameset est équivalent au chargement de toutes les pages qui composent le frameset l'une après l'autre.
De plus, même si WEBDEV propose une interface conviviale pour manipuler les framesets, le résultat chez l'internaute dépend beaucoup de la taille de son navigateur. Des ascenseurs peuvent apparaître, le redimensionnement du navigateur peut provoquer des effets d'affichage, ...
Réservez plutôt les framesets aux sites Intranets !

Conseil N°12 : Utilisez le champ Cellule pour les couleurs de fond et vos bordures.

Pour faire des bordures, ou pour définir la couleur de fond d'une zone, vous pouvez être tenté d'utiliser une image ou un libellé superposable.
Utilisez le nouveau champ cellule. Ce champ est plus vite chargé qu'une image et vous permet d'obtenir facilement tous les effets voulus. De plus pour manipuler un champ et une cellule, il n'est pas nécessaire d'utiliser l'option "Superposable" des champs.
Le champ cellule permet de générer moins de code HTML et donc d'optimiser le temps de chargement de votre page.

Conseil N°13 : Préférez le mode "Automatique" des champs.

Pour chaque type de champ, WEBDEV propose 3 modes différents :
  • mode statique : si le champ n'est pas modifié par programmation.
  • mode dynamique : si le champ doit être modifié par programmation.
  • mode automatique : WEBDEV détecte automatiquement si vous manipulez le champ par programmation et génère le code HTML correspondant. Cette dernière option est conseillée car le code HTML généré est optimisé selon les manipulations effectuées dans votre site WEBDEV.

Conseil N°14 : Evitez la multiplication des styles CSS.

Définissez avec soin la feuille de styles de votre projet et réduisez le nombre total de styles utilisés. En effet, plus le nombre de styles utilisé est important, plus le temps de chargement de la page augmente (il faut en effet charger les caractéristiques de styles du fichier .CSS).
Notre conseil : Utilisez entre 5 et 10 styles différents dans un site.

Conseil N°15 : Evitez les styles locaux.

Lors de la modification du style du champ, il est possible de définir le style du champ en "Local". Ainsi les modifications effectuées sur le style ne s'appliqueront qu'à ce champ (et non à tous les champs qui utilisent le style CSS).
Un style local est directement défini dans la page HTML. Un style local augmente donc légèrement la taille de la page (et donc son temps de chargement).
Une vingtaine de styles locaux dans une page augmentent la taille de la page d'environ 1 Ko.

Conseil N°16 : Remplacez les champs Libellé par un champ Libellé HTML.

Vous utilisez plusieurs champs libellé pour que l'internaute voit un texte avec des mises en forme différentes (partie de texte en gras, partie de texte en couleur, ...).
Supprimez tous vos champs libellés et remplacez-les par un seul champ de type "Libellé HTML".
Un seul champ remplace ainsi 3 ou 4 champs : le fichier HTML correspondant à votre page est immédiatement diminué et donc son temps de chargement est plus rapide.

Conseil N°17 : Utilisez les optimisations de génération de page proposées par WEBDEV.

Pour optimiser la taille des pages générées, WEBDEV propose un ensemble d'options d'optimisation à utiliser sur les pages de votre projet.
Par défaut, les optimisations les plus courantes sont effectuées pour toutes les pages du projet. Il est toutefois possible de personnaliser les options d'optimisation :
  • pour l'ensemble des pages du projet (option "Description du projet", bouton "Avancé" de l'onglet "Général").
  • pour une page du projet (option "Avancé ..." de l'onglet "Style" dans la fenêtre de description de la page).

Conseil N°18 : Vérifiez la taille des images

Tous les sites affichent des images. Ces images interviennent pour une part importante dans le temps de chargement de la page. Sur Internet, les formats PNG et JPEG sont conseillés. Ces formats sont des formats d'images compressés.
Pour optimiser la taille de vos images, utilisez des images en 100%. Evitez les images qui vont être réduites à l'affichage.
Voici quelques exemples de taille habituelle selon la résolution de l'image :
Résolution
(en pixels)
Taille conseillée
(estimation en Ko)
20 x 300,29
50 x 802
100 x 2009,8

Pour vérifier la taille de toutes les images associées à l'une des pages du site :
  1. Exécutez le projet et affichez la page sous l'explorateur Internet.
  2. Sous le volet "Accueil", dans le groupe "Général", cliquez sur "Enregistrer" et sélectionnez "Enregistrer sous".
  3. Enregistrez la page dans un nouveau répertoire. La page au format HTML ainsi que tous les fichiers image utilisés par la page sont enregistrés dans ce répertoire.
  4. Ajoutez la taille des images présentes dans ce répertoire.
Rappel : Par modem, un fichier de 4 ko s'affiche en 1 seconde, une image de 40 ko s'affiche donc en 10 secondes (pour une utilisation optimale du modem à vitesse constante).

Conseil N°19 : Réalisez les images directement au format GIF ou JPEG et enregistrez-les dans le répertoire "_WEB"

Pour optimiser le code HTML correspondant à la gestion des images, il est conseillé de :
  • créer directement les images au format et à la taille voulue sous un logiciel de retouche d'images.
  • enregistrer directement ces images dans le sous-répertoire _WEB du projet.
  • associer le champ Image à l'image voulue dans la fenêtre de description du champ.
Remarque : Evitez les images redimensionnées, réduites, ... sous l'éditeur. Utilisez des images à 100%. La taille de vos images sera ainsi optimisée pour votre site.

Conseil N°20 : Vérifiez la taille de la page générée (cette taille devrait être inférieure à 50 Ko).

La taille de la page générée correspond à la taille de la page affichée sur le navigateur de l'internaute (et non du fichier HTM généré par WEBDEV).
Pour connaître la taille de la page affichée sur le navigateur :
  1. Exécutez le projet et affichez la page sous l'explorateur Internet.
  2. Affichez le source de la page HTML.
  3. Enregistrez le source dans un fichier texte (sous NotePad par exemple).
  4. Vérifiez la taille du fichier.
Remarque : Il est déconseillé d'utiliser l'option "Enregistrer sous" car les navigateurs Internet (Internet Explorer par exemple) ajoutent du code HTML spécifique lors de l'enregistrement de la page.

Conseil N°21 : Pensez à la réglette.

Une page contenant un champ Table ou un champ Zone répétée affiche tous les enregistrements du champ. Pour limiter le nombre d'enregistrements affichés dans la page (et donc limiter la taille du fichier HTML renvoyé par le serveur), utilisez une réglette.
La réglette permet aux internautes de visualiser les différents éléments du champ Table ou du champ Zone répétée.
Aucune programmation n'est nécessaire. Il suffit d'ajouter un champ Réglette et de l'associer au champ Table ou au champ Zone répétée voulu.
Il est conseillé d'utiliser un maximum de 10 lignes par page.

Conseil N°22 : Réglez le timeout de vos sites dynamiques lors du déploiement.

Le timeout correspond au délai à partir duquel la connexion est automatiquement interrompue si l'internaute n'a pas utilisé le site.
Cette information doit être réglée en fonction de l'importance de votre site. En effet, chaque connexion utilise l'espace mémoire du serveur. Pour optimiser la mémoire du serveur, il est donc nécessaire de refermer rapidement une connexion non utilisée. Un timeout de 10 minutes est en général largement suffisant.
Version minimum requise
  • Version 9
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 25/05/2022

Signaler une erreur ou faire une suggestion | Aide en ligne locale