Design interactif

Comment augmenter la vitesse de votre site avec AJAX et JQuery

Dans ce tutoriel, nous allons voir comment accélérer l'expérience utilisateur sur de petits sites statiques en utilisant différentes méthodes. (Un site statique est un site qui n’a pas de contenu renouvelé, donc pas de blog ou de flux de photos, etc.)

La façon dont nous allons procéder est de supprimer les rechargements de page. En termes simples, lorsque l'utilisateur utilise des liens de navigation, seul le contenu principal de la page change et le navigateur ne recharge pas la page.

Nous atteindrons cet effet de deux manières différentes, la première n’utilisant que jQuery et l’autre utilisant AJAX et certains PHP. Ils ont tous deux leurs avantages et leurs inconvénients, ce que nous examinerons également. Jeter un coup d'œil à la démo pour voir ce que nous essayons de réaliser et commençons par la première (et plus simple) méthode jQuery.

Réaliser l'effet avec jQuery

Nous allons d'abord examiner la configuration de la page. Le HTML est très simple mais comporte quelques parties importantes, "l'essentiel" pour ainsi dire. Nous avons besoin de liens de navigation qui ont un hash href spécifique (que nous allons expliquer en une minute) et une zone de contenu spécifiée que vous auriez déjà sur n'importe quel autre site. Voyons donc d'abord ce que contient notre fichier index.html: 

Speed Up Static Sites with jQuery
  Titre de la première page 
  Contenu de la première page. 
  Regardez, pas de chargement de page! 
  Contenu de la deuxième page. 
  Ooh se fanent! 
  Contenu de la troisième page. 
  Titre de la quatrième page 
  Quatrième page.

Donc, pour récapituler les parties importantes de ce qui doit aller dans le balisage: nous avons notre navigation dans laquelle chaque lien a un href de la DIV correspondante. Donc, le lien vers "Page 2" a un href = "# page2" (qui est l'id de la

élément plus bas). Donc, avec cette première méthode, comme vous pouvez le voir, nous avons une div de # main-content qui entoure nos sections, puis chaque contenu de page les unes après les autres dans leur propre élément 'section' distinct. Nous appelons également jQuery et notre propre fichier javascript custom.js dans lequel les fonctionnalités réelles du site seront créées.

Mais avant d'en arriver là, nous devons ajouter une ligne à notre CSS, il n'est pas nécessaire de parcourir l'intégralité du fichier CSS pour cet exemple car il ne concerne que les looks, qui changeront avec le projet sur lequel vous travaillez. Cependant, avec cette première méthode, il y a une ligne qui est essentielle et qui: 

#page2, #page3, #page4 {display: none;}

Cela cache toutes les "pages" sauf la première. La page apparaît donc normalement au premier chargement.

Le JavaScript

Alors maintenant, expliquons ce que nous devons réaliser via jQuery. Dans notre fichier custom.js, nous devons cibler lorsque l'utilisateur clique sur un lien de navigation. Récupère le lien href et trouve la 'section' avec le même ID, puis cache tout dans le div # main-content et fade dans la nouvelle section. Voici à quoi ça ressemble: 

$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$('#main-content section').hide();$($linkClicked).fadeIn();return false;}  else {return false;}}); var hash = window.location.hash; hash = hash.replace (/ ^ # /, ''); switch (hash) {case 'page2': $ ("#" + hash + "-link"). trigger ("click"); break; case 'page3': $ ("#" + hash + "-link"). trigger ("click"); break; case 'page4': $ ("#" + hash + "-link"). trigger ("click"); break;}});

Ce code est divisé en deux sections, la première réalise ce dont nous venons de parler. Il a une fonction de clic sur les liens de navigation en-tête. Il place ensuite le '# page1, # page2' etc dans une variable nommée $ linkClicked. Nous mettons ensuite à jour l'URL du navigateur pour avoir le même nom de hachage. Ensuite, nous avons une instruction if qui vérifie que le lien sur lequel nous cliquons n’est pas l’onglet actuel, si ce n’est rien, mais si ce n’est pas le cas, masquez le contenu avec un identifiant de $ linkClicked. Aussi simple que cela!

La deuxième section vérifie si l'URL a un lien de hachage à la fin, si c'est le cas, elle trouve un lien correspondant sur la page avec la même valeur (c'est pourquoi les liens ont des identifiants spécifiques dans le balisage) lien (clique dessus). Cela signifie que l'utilisateur peut recharger une page après avoir accédé à une "page" et que l'actualisation renverra l'utilisateur au lieu de simplement revenir à la première page, ce qui peut souvent poser problème avec ce type de système.

Alors que la fin de la première méthode, il en résulte un site statique qui fonctionne avec un échange de contenu instantané et aucun rechargement de page. Le seul inconvénient de cette méthode est le fait que tout le contenu est appelé sur le chargement initial, car il est tout dans le fichier d'index. Cela peut commencer à poser problème avec les photos et le contenu supplémentaire, rendant la première visite du site un peu plus longue. Alors regardons une autre façon de faire le même effet, ce qui peut éliminer ce problème.

Utiliser AJAX et PHP

Pour obtenir le même effet mais de manière légèrement différente, de sorte que le chargement initial ne va pas charger tout notre contenu et donc le ralentir (vaincre le point si le site a beaucoup de contenu), nous utiliserons un peu PHP et AJAX. Cela signifie que la structure de fichier de notre projet changera et ressemblera à ceci:

structure

Donc, si vous regardez, le fichier d'index est maintenant un .php et non un .html. Nous avons également un fichier supplémentaire nommé "load.php" ainsi qu'un nouveau dossier / répertoire appelé pages dans lequel il y a quatre pages HTML. Maintenant, cela signifie que si vous travaillez localement, vous devez configurer un environnement de développement local en utilisant quelque chose comme: MAMP (pour Mac) ou WAMP Server (Pour les fenêtres). Ou vous pouvez télécharger l'intégralité du dossier sur un serveur Web si vous y avez accès et que vous le modifiez. En gros, vous aurez besoin d'un environnement dans lequel PHP fonctionnera.

L'index.php n'a changé qu'une chose, mais il est important de ne pas y charger tout le contenu et d'appeler simplement le contenu initial avec PHP include. Il va maintenant ressembler à ceci: 

AJAX a Static Site

Donc, le début de la ligne appelle le premier fichier HTML de notre dossier de pages et l'insère entièrement dans notre DIV # main-content. Le fichier appelé peut contenir le contenu que vous souhaitez voir apparaître sur la page.

Utiliser $ .ajax dans le JavaScript

Passons maintenant au nouveau JavaScript, il semble maintenant légèrement différent, principalement nous utilisons AJAX pour récupérer le nouveau contenu de chaque fichier HTML lorsque l'utilisateur clique sur une navigation correspondante. Voici la première fonction du code (la seconde reste la même): 

$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;var $pageRoot = $linkClicked.replace('#page', '');if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$.ajax({type: "POST",url: "load.php",data: 'page='+$pageRoot,dataType: "html",success: function(msg){if(parseInt(msg)!=0){$('#main-content').html(msg);$('#main-content section').hide().fadeIn();}  }});} else {event.preventDefault ();}});

Alors, expliquons ce qui se passe. Nous ajoutons une autre variable, c'est $ pageRoot. Il s'agit essentiellement du nombre réel cliqué (prenant ainsi la partie '#page' du lien de hachage et laissant le numéro individuel). Ensuite, dans la même instruction "if" que précédemment, nous appelons ajax et utilisons l’autre fichier PHP mentionné précédemment pour analyser les informations fournies (quel lien a été cliqué) et trouver la page correspondante. Ensuite, si elle revient sans erreur, nous insérons le nouveau code HTML du fichier reçu dans notre DIV # main-content. Alors, juste pour que ça ne change pas soudainement, nous cachons tout et ensuite nous le fondons.

load.php

Le contenu du nouveau fichier PHP est court et agréable, il prend le numéro de page que jQuery lui a envoyé et vérifie si le fichier HTML correspondant existe. Si c'est le cas, il récupère tout le contenu et le renvoie à la fonction AJAX (que nous avons montré il y a un instant que nous insérons ce contenu dans le DIV principal).

Suite à cela, le site devrait avoir l’impression que vous le souhaitez, mais surtout fonctionner correctement.

C'est tout! Le site appelle maintenant dans le bon fichier HTML correspondant chaque fois que l'utilisateur clique sur un lien de navigation. Il échange le contenu sans recharger la page. Et de cette façon, il n'a toujours pas besoin d'appeler tout le contenu sur le chargement de la page initiale! J'espère que vous avez réussi à apprendre une méthode utile à partir de ce tutoriel et que vous pouvez l'utiliser pour améliorer certains projets.

Vous pouvez voir le démo jQuery ici, la Démo PHP ici, ou télécharger la source et regarder de plus près.

Avez-vous utilisé AJAX pour charger du contenu? Avez-vous utilisé une technique similaire pour accélérer votre site? Faites-nous savoir vos pensées dans les commentaires ci-dessous.

Image / vignette en vedette, image suralimentée via Shutterstock.

vitesse du site jquery ajax techniques de chargement php accélérer votre site