- Inscription
- 5 Juin 2012
- Messages
- 8 792
- Réactions
- 6 913
- Points
- 25 465
Bonjour à tous, 
Aujourd'hui on se retrouve pour un nouveau tutoriel, je vais vous expliquer comment optimiser le pré-chargement de vos pages web.
Qu'est-ce qu'un pré-chargement ?
En effet, lorsque vous effectuez une requête le navigateur va "deviner" par avance quelles sont les pages les plus pertinentes à pré-charger, avec plus ou moins de justesse.
Voici quelques inconvénients lorsque vous faites des requêtes "normales" :
Attention à utiliser ces techniques correctement !
Si elles sont mal utilisées, cela peut vous causer des problèmes, pour vous et pour vos visiteurs. (cf: la liste ci-dessus)
Comment optimiser le pré-chargement de mes pages ?
Pour cela, il existe 3 techniques :
Une relation prefetch va lancer le pré-chargement du de l'image ou du fichier mentionné par le lien, situé dans l'attribut href, afin de placer celui-ci en cache.
Exemple :
Vous ne pouvez pas spécifier d'adresses globales de vos dossiers et sous dossiers, le signe * n'est pas autorisé, les fichiers à télécharger ou à enregistrer ne sont pas pris en compte.
Prefetch est disponible avec Google Chrome, Mozilla Firefox, et Internet Explorer 9+ (IE ne tolère que 10 ressources pré-chargées).
Cette méthode est a utilisée avec parcimonie, car vous avez sûrement des visiteurs qui ont un bas débit.
Par exemple, lorsqu'un visiteur consulte une suite de pages (présentation, slides, résultats de recherche paginées) et qu'il y a beaucoup de chance qu'il aille voir les pages suivantes.
Ou bien même pour charger des images ou du CSS qui aura toutes les chances de s'afficher sur les pages principales du site, c'est-à-dire le style maître de votre page d'accueil, les images de votre page d'accueil, etc.
Dans ce cas, le pré-chargement de votre fichier/image/CSS sera une requête DNS menée par anticipation. Ces requêtes peuvent parfois nécessiter de quelques dizaines de millisecondes.
Cette fonction est uniquement reconnue par Google Chrome, Mozilla Firefox et IE 10+.
Exemple :
Nous pouvons utiliser cet attribut, avec ou sans protocole.
Si vous savez que votre site fera ultérieurement appel à des pages, images, CSS, JavaScript .. d'un autre domaine, vous pourrez tenter de deviner ce comportement et de gagner du temps sur vos requêtes DNS. (conversion de ses différents domaines/sous-domaines en adresses IP)
Google Chrome utilise cette fonctionnalité sans déclaration de Dns-prefetch dans votre code HTML. Selon votre historique, Google Chrome va tenter de deviner ce qu'il va taper dans la barre d'adresse, vous pouvez observez les statistiques DNS sur cette adresse : chrome://dns/
C'est encore un mot clé, que l'on utilise dans l'attribut rel (relation) de votre balise <link>.
Exemple :
Le pré-rendu (prerender) de vos pages va utiliser le moteur d'interprétation pour mettre en cache par avance une page afin de l'afficher presque instantanément si le visiteur y accède, en ayant déjà un rendu visuel.
Cette fonction est uniquement reconnue par Google Chrome et IE 11+.
Note : Internet Explorer 11+ ne "pré-calcule" qu'une seule page à la fois.
Il effectue cette requête que si le document y faisant appel est sur l'onglet actif et visible.
La page de destination est effacée de la mémoire, dans les cas suivants :
Vous pouvez également utiliser le pré-chargement dans les balises <a> et <area>. Vous avez par ailleurs la possibilité d'injecter ce type de balise avec JavaScript, de préférence dans la section <head> de votre site, c'est alors la dernière balise présente qui prendra le dessus sur les autres.
Fin du tutoriel
C'est tout pour l'optimisation de vos pré-chargements, si vous avez des questions, n'hésitez pas. 
Aujourd'hui on se retrouve pour un nouveau tutoriel, je vais vous expliquer comment optimiser le pré-chargement de vos pages web.
Qu'est-ce qu'un pré-chargement ?
En effet, lorsque vous effectuez une requête le navigateur va "deviner" par avance quelles sont les pages les plus pertinentes à pré-charger, avec plus ou moins de justesse.
Voici quelques inconvénients lorsque vous faites des requêtes "normales" :
- Cela consomme de la bande passante inutilement si le visiteur décide de ne pas continuer sa navigation dans le sens de l'anticipation ;
- Cela consomme des ressources locales, c'est-à-dire de la mémoire vive, de l'espace sur votre disque ;
- Cela peut fausser l'historique de votre serveur s'il n'ignore pas ces requêtes.
Attention à utiliser ces techniques correctement !
Si elles sont mal utilisées, cela peut vous causer des problèmes, pour vous et pour vos visiteurs. (cf: la liste ci-dessus)
Comment optimiser le pré-chargement de mes pages ?
- Prefetch ;
- Dns-prefetch ;
- Prerender.
Prefetch
Prefetch est un mot clé à placer dans l’attribut rel (relation) de votre balise <link>.
Une relation prefetch va lancer le pré-chargement du de l'image ou du fichier mentionné par le lien, situé dans l'attribut href, afin de placer celui-ci en cache.
Exemple :
HTML:
<link rel="prefetch" href="https://reality-gaming.fr/page.html">
<link rel="prefetch" href="https://reality-gaming.fr/styles.css">Vous ne pouvez pas spécifier d'adresses globales de vos dossiers et sous dossiers, le signe * n'est pas autorisé, les fichiers à télécharger ou à enregistrer ne sont pas pris en compte.
Prefetch est disponible avec Google Chrome, Mozilla Firefox, et Internet Explorer 9+ (IE ne tolère que 10 ressources pré-chargées).
Cette méthode est a utilisée avec parcimonie, car vous avez sûrement des visiteurs qui ont un bas débit.
Il est préférable d'utiliser prefetch, lorsque vous savez que le visiteur aboutira à coup sûr sur un lien précis.
Par exemple, lorsqu'un visiteur consulte une suite de pages (présentation, slides, résultats de recherche paginées) et qu'il y a beaucoup de chance qu'il aille voir les pages suivantes.
Ou bien même pour charger des images ou du CSS qui aura toutes les chances de s'afficher sur les pages principales du site, c'est-à-dire le style maître de votre page d'accueil, les images de votre page d'accueil, etc.
Dns-prefetch
Dns-prefetch est un autre mot clé à placer dans l’attribut rel (relation) de votre balise <link>.
Dans ce cas, le pré-chargement de votre fichier/image/CSS sera une requête DNS menée par anticipation. Ces requêtes peuvent parfois nécessiter de quelques dizaines de millisecondes.
Cette fonction est uniquement reconnue par Google Chrome, Mozilla Firefox et IE 10+.
Exemple :
HTML:
<link rel="dns-prefetch" href="https://reality-gaming.fr/">Nous pouvons utiliser cet attribut, avec ou sans protocole.
HTML:
<link rel="dns-prefetch" href="//reality-gaming.fr/">Si vous savez que votre site fera ultérieurement appel à des pages, images, CSS, JavaScript .. d'un autre domaine, vous pourrez tenter de deviner ce comportement et de gagner du temps sur vos requêtes DNS. (conversion de ses différents domaines/sous-domaines en adresses IP)
Google Chrome utilise cette fonctionnalité sans déclaration de Dns-prefetch dans votre code HTML. Selon votre historique, Google Chrome va tenter de deviner ce qu'il va taper dans la barre d'adresse, vous pouvez observez les statistiques DNS sur cette adresse : chrome://dns/
Prerender
Prerender est la troisième technique pour optimiser vos pré-chargements.
C'est encore un mot clé, que l'on utilise dans l'attribut rel (relation) de votre balise <link>.
Exemple :
Code:
<link rel="prerender" href="https://reality-gaming.fr/page.html">Le pré-rendu (prerender) de vos pages va utiliser le moteur d'interprétation pour mettre en cache par avance une page afin de l'afficher presque instantanément si le visiteur y accède, en ayant déjà un rendu visuel.
Cette fonction est uniquement reconnue par Google Chrome et IE 11+.
Note : Internet Explorer 11+ ne "pré-calcule" qu'une seule page à la fois.
Il effectue cette requête que si le document y faisant appel est sur l'onglet actif et visible.
La page de destination est effacée de la mémoire, dans les cas suivants :
- Si le visiteur décide de se diriger vers un autre lien ;
- Si le temps d'attente est supérieur à 5 minutes ;
- Si la page actuelle n'est plus sur l'onglet actif ;
- Si le visiteur rencontre une erreur ;
- Si votre page utilise des balises audio, ou des balises video.
- Si le serveur demande une identification HTTP/HTTPS ;
- Si votre page contient des pop-ups ;
- Si vous utilisez des requêtes AJAX avec méthode PUT/POST/DELETE ;
- Si vous êtes en navigation privée.
Vous pouvez également utiliser le pré-chargement dans les balises <a> et <area>. Vous avez par ailleurs la possibilité d'injecter ce type de balise avec JavaScript, de préférence dans la section <head> de votre site, c'est alors la dernière balise présente qui prendra le dessus sur les autres.
Fin du tutoriel
RealityGaming Technologies
