Comment garantir un chargement instantané de vos liens pour vos visiteurs ? Grâce à la technologie de préchargement automatique des liens. Vos liens s’affichent automatiquement dès qu’un visiteur clique dessus, permettant ainsi de visualiser le contenu. Cet article explique comment ajouter des liens préchargés à votre blog WordPress.
L'objectif de cet article est de fournir une explication détaillée de la manière de précharger les liens dans WordPress.
Pourquoi précharger les liens dans WordPress ?
Il est possible de configurer le navigateur pour qu'il précharge le lien en arrière-plan afin d'accélérer le chargement. Le visiteur trouvera ainsi le lien déjà chargé lorsqu'il cliquera dessus. Si un visiteur trouve rapidement tout ce dont il a besoin sur votre site web, il est probable qu'il y reste. Par conséquent, vous bénéficierez d'avantages considérables en matière de référencement (SEO).
Si vos pages internes sont préchargées, vos visiteurs seront plus enclins à rester plus longtemps sur votre site et à consulter davantage de pages, car votre site sera plus rapide. Par conséquent, vous pouvez améliorer le référencement (SEO) de votre site WordPress en optimisant sa vitesse.
Bien qu'il existe de nombreuses choses que vous puissiez faire pour rendre votre site WordPress plus rapide, le préchargement des liens est l'une des plus simples et peut grandement améliorer la vitesse de votre site.
Toutefois, pour configurer correctement le préchargement, il est essentiel d'éviter certaines erreurs courantes. Par exemple, des paramètres trop restrictifs, comme le préchargement de tous vos liens internes, pourraient avoir l'effet inverse et même provoquer le plantage de votre serveur.
Comment précharger les liens dans WordPress : Utilisation du plugin Flying Pages
La première chose à faire est de télécharger l'extension Flying Pages et de l'installer dans votre tableau de bord WordPress.
Depuis votre tableau de bord WordPress, accédez à Réglages > Flying Pages et sélectionnez l'option Flying Pages. Veuillez vérifier la configuration du plugin dans l'onglet Réglages et, si nécessaire, effectuez les modifications.
La première option proposée est « Délai avant le préchargement ». Par défaut, cette option a la valeur 0, mais vous pouvez la modifier. Nous vous conseillons toutefois de la conserver. Augmenter cette valeur retardera le démarrage du processus.
Par conséquent, vous devez choisir le nombre maximal de requêtes par seconde, car plus ce nombre est faible, moins cela aura d'impact sur votre serveur. La valeur par défaut est acceptable tant que votre site web n'est pas très volumineux et ne reçoit pas un grand nombre de visiteurs simultanément.
Vous pouvez conserver les autres paramètres tels quels ou les modifier selon vos besoins. N'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » à la fin de la procédure pour sauvegarder vos modifications.
Comment précharger les requêtes clés: polices, JS et CSS
Le préchargement des ressources est une technique permettant d'améliorer les performances de votre page web. En préchargeant les requêtes clés, vous vous assurez que les ressources nécessaires sont disponibles lorsque l'utilisateur en a besoin. Les fichiers CSS, JS et les polices sont des exemples de ressources préchargées. Pour précharger le CSS, vous pouvez utiliser la règle `@font-face`. Pour le JavaScript, vous pouvez utiliser la bibliothèque PreloadJS. Enfin, pour les polices, vous pouvez utiliser Font Awesome ou Google Fonts.
Comment préchargerunCSS
Voici une syntaxe pour précharger les requêtes clés des fichiers CSS :
<link rel=”preload” href=”style.css” as=”style”>
Précharger JS
Voici une syntaxe pour précharger les requêtes clés des fichiers JavaScript :
<link rel=”preload” href=”main.js” as=”script”>
Précharger les polices
La syntaxe pour précharger les requêtes clés des fichiers de polices sera la suivante :
<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>
Polices Google
Voici la syntaxe permettant de précharger les requêtes clés de polices Google :
<link rel=”preload” href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap” as=”style” crossorigin>
Font Awesome
Voici la syntaxe pour précharger les requêtes de touches de Font Awesome :
<link rel=”preload” href=”/wp-content/theme/fonts/fontawesome-Webfont.woff2” as=”font” crossorigin>
Voici les types de fichiers les plus courants que vous remarquerez dans l'avertissement relatif aux requêtes de clés de préchargement de Google PageSpeed Insights.
Les méthodes décrites ci-dessus permettent de corriger l'avertissement relatif aux requêtes de préchargement de clés de Google PageSpeed Insights. Elles sont applicables à n'importe quel site web.
Résumé : Préchargement des polices
<link rel=’preload’ href=’/image.png’ as=’image’>
<link rel=’preload’ href=’/style.css’ as=’style’>
<link rel=’preload’ href=’/script.js’ as=’script’>
<link rel=’preload’ href=’/font.woff2′ as=’font’ crossorigin>
Préchargement des requêtes clés à l'aide de plugins WordPress
Vous pouvez précharger les requêtes de clés dans WordPress en utilisant des plugins WordPress dédiés, tels que Pre* Party Resource Hints, Autoptimize, WP Rocket et Asset CleanUp . Ces plugins permettent de corriger l'avertissement relatif aux requêtes de clés dans WordPress.
Voici les plugins les plus populaires dotés de la fonctionnalité de préchargement des demandes de clés.
Conseils pour préparer votre fête
Pre* Party Resource Hints est l'un des meilleurs plugins qui vous offre de nombreux contrôles et la possibilité d'ajouter des ressources essentielles que vous souhaitez précharger visuellement.
Installez et activez cette extension sur votre site WordPress, puis accédez au menu Pré-fête depuis votre tableau de bord WordPress. Vous y trouverez l'écran suivant.
Vous trouverez la case « Ajouter une nouvelle suggestion de ressource » dans l’onglet « Insérer des suggestions » des paramètres du plugin. Pour précharger une ressource, consultez le rapport PageSpeed Insights afin de trouver l’avertissement relatif aux requêtes de clé de préchargement.
WP Rocket
Précharger les requêtes clés est un excellent moyen d'améliorer les performances de votre site WordPress. WP Rocket est une extension populaire qui peut vous y aider. Facile à utiliser, elle offre de nombreuses fonctionnalités pour optimiser les performances de votre site.
Accédez à Réglages > WP Rocket > Préchargement depuis votre tableau de bord WordPress pour précharger les requêtes clés dans WordPress à l'aide de l'extension WP Rocket. Faites défiler la page jusqu'en bas, où vous trouverez la section Précharger les polices.
Autooptimize
Si vous souhaitez améliorer les performances de votre site WordPress, l'une des premières choses à faire est d'installer l'extension Autoptimize. Autoptimize accélère votre site web en optimisant vos fichiers CSS et JavaScript. Elle minifie également le HTML et met vos pages en cache, ce qui permet un chargement plus rapide pour les visiteurs réguliers. L'une de ses fonctionnalités les plus appréciées est l'option de préchargement des requêtes clés pour les sites WordPress.
Depuis votre tableau de bord WordPress, accédez à Réglages > Autoptimize > Extra pour précharger les requêtes clés avec Autoptimize. Il vous suffit ensuite de saisir les liens dans le champ prévu à cet effet, liens qui s'affichent suite à l'avertissement de PageSpeed Insights concernant le préchargement des requêtes clés. Veillez à séparer les liens par des virgules.
Performances
Ce plugin premium propose des options de préchargement, de préconnexion et de prérécupération. Vous pouvez les consulter dans les paramètres de Perfmatters → Extras → Préchargement.
Le préchargement des liens et des requêtes sur votre site web est désormais activé.
Vous trouverez d'autres articles de ce type sur Seahawk Media.
