Utiliser JavaScript pour améliorer visuellement votre site Web ?

Dans cet article, vous découvrirez diverses techniques qui peuvent rendre votre site Web attractif et rapide. Cela augmentera l’engagement des utilisateurs et rendra votre site Web plus productif.

Commençons par comprendre JavaScript.

Qu'est-ce que JavaScript ?

JavaScript est l'un des langages de développement Web utilisés pour ajouter des fonctionnalités aux sites Web. Il rend les sites Web interactifs, robustes, plus rapides et plus beaux. Il s'agit d'un langage de script interprété qui se compile directement dans un navigateur Web comme C ou CPP et ne nécessite pas de compilateur pour le compiler. C’est pourquoi il est devenu le langage le plus populaire dans l’industrie moderne du logiciel.

Pour développer un site Web, nous avons besoin de trois langages de base HTML, CSS et JavaScript.

• HTML est utilisé pour ajouter du contenu à un site Web tel que des images, du texte, des boutons, etc.

• CSS joue un rôle important dans la section de style, ce qui signifie appliquer des styles à tout le contenu du site Web.

• JavaScript est utilisé pour rendre le site Web interactif, ce qui signifie rendre les éléments réactifs, comme lorsque vous appuyez sur un bouton, la couleur du site Web change. HTML et CSS fournissent simplement la structure du site Web, ils n'effectuent aucune action sur le site Web, tandis que JavaScript effectue des activités dynamiques sur le site Web.

Le rôle de l'optimisation dans le site web

Lors du développement d'applications Web modernes, il est très important d'analyser les performances du site Web, telles que la réactivité du site Web. Les performances d'un site Web sont l'un des facteurs les plus importants dans le succès d'un site Web, car les utilisateurs sont plus susceptibles d'interagir et de visiter un site Web très performant qu'un site Web peu performant.

Points à retenir :

• Plus la vitesse de votre site Web est faible, plus l'engagement et le trafic sont faibles, et selon les rapports, les sites peu performants comptent 15 % d'utilisateurs en moins que les sites très performants.

• Une interface utilisateur moins attrayante peut également avoir un impact sur l'engagement. Un site Web offrant un design attrayant et des temps de chargement rapides attirera les utilisateurs et les chances de leur retour augmenteront.

• Un contenu Flash excessif n'est pas non plus bon en termes d'attrait. Les utilisateurs aiment surtout les designs simples.

Pour mesurer les performances d'un site Web, Google propose le modèle RAIL -

La maquette fournit la structure de l'apparence du site Web et de la manière dont elle affectera l'attention de l'utilisateur. Ici, RAIL signifie réactif, animé, inactif et chargé.

Un signe d'un site Web non optimisé est que lorsque la page se charge, vous pouvez voir un écran blanc pendant quelques secondes, puis soudainement, la page entière se charge. Bien qu'un site Web optimisé ne fasse rien de tel, il restitue le contenu étape par étape où vous verrez certains contenus apparaître, puis d'autres éléments/contenus apparaîtront.

Comprenons comment la latence des performances affecte l'attention des utilisateurs à partir du modèle RAIL.

• 0 à 16 ms - Les utilisateurs n'aiment pas le site lorsqu'une seule image se produit à 16 ms.

• 0 à 100 ms - Les utilisateurs seront satisfaits des performances lorsque les résultats souhaités apparaîtront dans ce laps de temps.

• 100 à 100 ms - Dans cette plage, les utilisateurs connaîtront un léger retard, mais cela est acceptable.

• 1 000 ms ou plus - Lorsque les temps se situent dans cette plage (1 seconde), les utilisateurs perdent leur concentration sur la tâche qu'ils effectuent.

• 10 000 ms ou plus - Cette période correspond au moment où les utilisateurs deviennent frustrés par les performances du site et il est possible qu'ils ne reviennent pas sur le site.

De plus, en raison de la vitesse du réseau et du matériel, il existe également un certain retard. Comme pour les sites Web, les vitesses rapides sur une machine puissante seront plus rapides qu’une connexion lente sur un appareil lent.

Comment améliorer les performances d'un site Web ?

Utilisez les facteurs suivants pour améliorer les performances de votre site Web, tout en tenant compte de ces facteurs lors des étapes de développement ou de maintenance de votre site Web.

1. Réduisez le code JavaScript inutilisé

Écrire du code plus long prend plus de temps pour charger la page Web, il est donc important d'optimiser le code lors du développement d'applications Web. Vous pouvez vous aider de Google Closure Compiler ou d'Uglify JS Code Optimizer qui vous montrera les fonctionnalités inutilisées, le code ou les fonctionnalités qui ne sont plus utilisées.

Exemple

Avant de supprimer le code inutilisé :

function test(){ 
   var p=10, s="stringName";
   console.log("Output here");
   alert("This is sample alert");
   return;
   console.log("This is an unused message");
   for(var i=0;i<10;i++){
      console.log(i);
   }
}
test();

Après avoir supprimé le code inutilisé :

function test(){
   console.log("Output here"); 
   alert("This is sample alert") 
} 
test();

Ici, vous pouvez observer qu'avant de supprimer le code inutilisé, nous écrivons des instructions de console et exécutons une boucle après l'instruction return qui ne sert à rien car elles ne feront rien et nous n'utilisons pas de variable, elle peut donc également être supprimée.

2. Réduisez la taille du code

La minification peut être effectuée en JavaScript pour réduire la taille du code, cela permet de réduire la taille du fichier de code et donc le temps de chargement du site Web.

Exemple : les sauts, les espaces supplémentaires, les commentaires, etc. peuvent augmenter la taille de votre fichier de code. Même si l'utilisateur aura peu de difficultés à lire le code, l'ordinateur aura des vitesses de traitement efficaces.

3. Utilisation du protocole HTTP/2

Le protocole HTTP est conçu pour exécuter des fonctions avancées de communication de données entre les clients et les serveurs. En 2015, la deuxième version majeure du protocole d'application a été développée. L'objectif de cette version est d'améliorer l'expérience Internet en offrant simplicité, performances à haut débit et robustesse.

Ce protocole améliore le code JavaScript afin qu'il puisse gérer plusieurs requêtes à la fois, ce qui contribue à améliorer les temps de chargement des sites Web.

4. Utilisation du CDN JavaScript

CDN signifie Content Delivery Network. Nous lions notre site Web au contenu statique à un réseau étendu de services dans le monde entier. Il stocke le contenu du site Web et le diffuse aux visiteurs à partir du serveur le plus proche. Grâce au CDN, les fichiers seront automatiquement compressés et optimisés, de sorte que le taux de consommation des ressources devienne faible, ce qui est bénéfique pour améliorer la vitesse du site Web.

5. Fuite de mémoire

Une fuite de mémoire se produit lorsqu'une fonction ou une application utilise de la mémoire pour terminer son exécution, mais ne libère pas la mémoire et d'autres applications peuvent donc attendre la mémoire. Pour chaque nouvel objet, vous consommez de la mémoire mais ne la libérez pas, alors JavaScript pensera que le programme peut avoir besoin de mémoire. Pour éviter les fuites de mémoire, les développeurs doivent en tenir compte et gérer correctement la portée de leurs programmes.

Et procédez comme suit :

• Attribuez null à une variable globale et réattribuez-la après utilisation.

• Évitez de capturer des variables de fonction externes dans des fermetures.

• Manipulez les références DOM avec soin.

Comment améliorer les visuels d'un site Web pour une meilleure interface utilisateur ?

1. Couleur

Lorsqu’un utilisateur visite un site Web, la première chose qu’il remarque est sa couleur. Lors du développement d’un site Web, un concepteur choisit une palette de couleurs, qui est un ensemble de couleurs qui seront utilisées dans toute l’interface. Lorsque vous ne décidez pas d’une palette de couleurs, votre site Web semblera très incohérent, ce qui entraînera une perte de concentration des utilisateurs et leur permettra de quitter votre site. Il définit également l'identité de la marque, en prenant comme exemple le site tutorielspoint, vous pouvez observer que le vert et le noir sont inclus dans la plupart des couleurs.

2. Fichiers compressés

Vous avez peut-être remarqué que les sites Web comportant de nombreuses pages, des animations et des conceptions complexes prennent plus de temps à charger. Pour améliorer la vitesse et la réactivité du site Web, des méthodes de compression des fichiers et des images volumineux doivent être envisagées.

3. Utilisez des images réactives

Les images constituent une partie importante du site Web. Les images occupent plus de 50 % du site Web et peuvent entraîner un ralentissement du site Web. Ainsi, pour améliorer la vitesse, utilisez des images de type Web 30 % plus petites que JPEG ou PNG.

4. Regroupez les fichiers CSS et les sélecteurs

Comme vous le savez, CSS. Il applique des effets et est responsable des propriétés visibles du site Web. La création de nombreuses pages de feuilles de style peut également entraîner un ralentissement des performances du site Web. Fusionnez donc tous les fichiers CSS en une seule page XHTML et vous remarquerez une amélioration de la vitesse et des performances du site Web avant et après la fusion.

5. Mise en cache

La mise en cache est une technique permettant de stocker des sous-ensembles de données. Il est utilisé pour augmenter l'accès aux données car il stocke une copie des données demandées par l'utilisateur et renvoie une copie en cache lorsque l'utilisateur la demande à nouveau au lieu de rechercher et de renvoyer le fichier d'origine.

Il existe de nombreux types de mise en cache qui peuvent contribuer à améliorer la vitesse de diffusion du contenu.

• Cache mémoire - Dans ces types de caches, les données mises en cache sont stockées dans la RAM, ce qui augmente la vitesse du processus de transfert de données au sein de l'application.

• Web Caching - Il existe deux termes pour cette technologie de mise en cache.

  Cache client Web : ce type de cache est également appelé cache de navigateur Web. Il est stocké côté client. Lorsqu'une page Web est chargée dans le navigateur pour la première fois, elle stocke les ressources de la page telles que le texte, les scripts, les images et autres médias afin que lors du prochain accès à la même page, le navigateur ne les charge pas à partir du serveur. mais à la place, chargez-les. Affichez les magasins de cache et récupérez-les à partir des ordinateurs clients.

  Cache du serveur Web - Dans ce mécanisme, nous visons à stocker les ressources sur le serveur, pas sur la machine client. Ce mécanisme permet de générer dynamiquement des données sur le site Web et de les charger après un certain temps. Cette méthode n'est pas utile dans le cas de contenu statique, une telle mise en cache permet de réduire la surcharge sur le serveur.

• CDN Caching- CDN signifie Content Delivery Network. Ce cache stocke des ressources telles que des pages Web, des scripts, des fichiers multimédias et des feuilles de style dans le serveur proxy. Lorsqu'un utilisateur demande une ressource, le serveur proxy vérifie si une copie de la ressource est disponible. Si la réplique est disponible, elle délivre la ressource à l'utilisateur demandeur, sinon la demande est transmise au serveur concerné. Cela permet de réduire la latence du réseau si l'utilisateur demandeur est acheminé vers le serveur disponible le plus proche.

• Cache disque- C'est un mécanisme similaire à la mise en cache mémoire. Le cache disque stocke les données afin qu'elles soient accessibles plus rapidement dans les applications.

Ainsi, ces techniques rendront le site internet très optimisé en termes de visibilité et de performances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!