Profitez des fonctionnalités modernes du navigateur telles que le préchargement, la prélecture, la préconnexion pour rendre le site Web WordPress plus rapide.
En tant que propriétaire de site, qui n'aime pas faire tout ce qui est possible pour charger la page Web plus rapidement?
Assurer le site se charge plus rapidement partout dans le monde est un défi. Il existe plusieurs choses que vous pouvez faire pour charger rapidement les ressources du site, notamment l'activation des éléments suivants conseils du navigateur. Ils sont également connus comme techniques de pré-navigation.
Notez les: les techniques des conseils de navigateur n'aident pas beaucoup lorsque vous accédez au site Web pour la première fois, mais les demandes suivantes sont plus rapides.
Preload
Vous pouvez utiliser preload balise pour dire au navigateur de récupérer certaines des ressources statiques tôt. Ils peuvent être une image, une police, du JavaScript, du CSS, des scripts, une vidéo, etc. Cela permet de prioriser le chargement des ressources; par conséquent, les performances sont améliorées.
Le préchargement serait une bonne idée à mettre en œuvre si vous vous attendez à ce que vos utilisateurs visitent plusieurs pages par la suite. Comme le magasin de commerce électronique où l'utilisateur visite la page du produit, puis vérifie les informations, compare avec un autre produit, ajoute au panier, paie, etc.
Vous pouvez utiliser les plugins suivants pour configurer la fonction de préchargement.
De meilleurs conseils sur les ressources - un plugin gratuit pour configurer les fichiers CSS et JS.
WP Rocket - un plugin premium pour booster les performances du site Web avec de nombreuses techniques essentielles, y compris la mise en cache de préchargement et le plan du site.
Comment savoir si la précharge est activée?
Le moyen le plus rapide de le savoir est de consulter la source de la page. Vous devriez voir quelque chose comme ci-dessous.
<link rel="preload" as="style" href="IMPORTANT.css">
<link rel="preload" as="script" href="CRITICAL.js">Tous les navigateurs ne prennent pas en charge le préchargement lors de l'écriture. Alors, consultez le matrice de compatibilité avant la mise en œuvre.
Preconnect
Chargez-vous des ressources d'autres domaines? Peut-être CDN?
Si ce n'est pas le cas, et que chaque ressource est chargée à partir de votre domaine unique, cela peut ne pas être utile.
La préconnexion du navigateur d'indices pour établir une connexion à d'autres domaines en arrière-plan pour gagner du temps Recherche DNS, redirection, prise de contact TCP, négociation TLS, etc. L'idée est de réduire la latence pour permettre un chargement rapide des ressources depuis un autre domaine.
Encore une fois, vous pouvez utiliser le plugin de meilleures astuces de ressources mentionné ci-dessus ou le plugin premium comme les performances.
Une fois configurées les ressources requises, vous devriez les voir dans la source de la page comme ci-dessous.
<link rel="preconnect" href="https://ANOTHERSITE.com">Remarque: si vous chargez les ressources d'un domaine nécessitant CORS, vous devez le spécifier comme crossorigin et la sortie devrait ressembler à.
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>Preconnect est compatible avec la dernière version de Chrome, Edge, Firefox, Safari.
Prefetch
Laissez le navigateur chercher la page suivante, dont vous pensez qu'elle sera nécessaire lorsque l'utilisateur navigue. Prefetch téléchargera les ressources nécessaires et les stockera dans le cache local et les servira rapidement en cas de besoin. Il existe deux types de prélecture.
Prérécupération DNS - expliqué ci-dessous
Pré-extraction de lien - configuré en utilisant . Utilisé pour pré-extraire les ressources HTML ou statiques. Vous pouvez pré-extraire des ressources en utilisant as un attribut.
<link rel="prefetch" href="https://somesite.com/articles/page/2/" as="document">
as L'attribut prend en charge diverses ressources telles que l'audio, la vidéo, le script, la piste, le style, la police, l'objet, le document, etc. La prélecture de lien peut être configurée à l'aide de Plug-in d'indices de ressources de pré-fête.
DNS Prefetch
Vous chargez des ressources de nombreux domaines et souhaitez les résoudre en arrière-plan?
Cette configuration rapide peut aider à résoudre tous les domaines potentiels plus tôt, de sorte que lorsque des ressources sont demandées, il se charge plus rapidement. Cela permet de réduire la latence globale.
Disons que vous chargez des ressources à partir de 3 domaines et que chaque domaine prend environ 100 ms pour effectuer une recherche DNS, vous économiserez alors une latence de 300 ms.
N'est-ce pas cool?
Vous pouvez implémenter en utilisant le plugin perfmatters ou ajouter ce qui suit dans functions.php fichier de votre thème si vous êtes à l'aise dans l'édition des fichiers de thème.
//* DNS Prefetching
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);Vous pouvez en lire plus à Documents Web Mozilla.
Prerender
Vous attendez-vous à ce que les utilisateurs de votre site parcourent la page potentielle?
Pré-rendu peut aider à charger ces ressources en arrière-plan, et lorsque l'utilisateur clique dessus, il l'obtient très rapidement. Vous pouvez y parvenir avec le plugin Pre Party Resource Hints.
Le prérendu convient à une page ou à un actif léger, mais soyez prudent avec l'ensemble du site ou de grandes ressources car cela peut augmenter l'utilisation du processeur et la bande passante et ralentir le site. Alors, essayez avec la plus petite ressource et testez-la pour vous assurer qu'elle n'a pas d'effets secondaires.
Comme vous pouvez le voir, quatre plugins principaux sont impliqués pour implémenter des conseils de navigateur dans WordPress. Choisissez celui que vous aimez et répondez aux exigences.
Plug-in d'indices de ressources de pré-fête - un plugin gratuit offre une prélecture DNS, une prélecture de lien, un prérendu, une préconnexion et un préchargement.
De meilleurs conseils sur les ressources - une alternative à celle ci-dessus.
Le plugin gratuit est bon tant qu'il est maintenu et pris en charge. Malheureusement, cela ne se produit pas pour de nombreux plugins, et c'est pourquoi il est parfois préférable d'opter pour la version payante. Les plugins de version commerciale sont pris en charge de manière professionnelle et à jour avec les correctifs standard et de sécurité WordPress. Si vous êtes prêt à dépenser quelques dollars pour optimiser les performances de votre site, vous pouvez consulter les suivants.
WP Rocket - réputé, approuvé par plus de 800,000 49 sites. Il en coûte XNUMX $ pour un site Web.
Perfmatters - un poids léger et facile à suivre coûte 24.95 $ pour un site. Au moment où j'écris, il offre les fonctionnalités suivantes.
C'est beaucoup d'optimisation.
Conclusion
Le noyau de WordPress est léger, mais il devient volumineux dépend du thème et des plugins que vous utilisez. Et, il est essentiel d'optimiser les performances de votre site pour un meilleur classement de recherche et une meilleure conversion. Les techniques ci-dessus sont faciles à suivre, mais il ne faut pas s'arrêter là.
Vous devez également envisager d'utiliser un CDN pour mettre en cache et fournir du contenu plus rapidement à vos utilisateurs, dans le monde entier. Il y en a beaucoup, mais je recommanderais d'essayer SUCURI qui offre CDN et sécurité, les deux.
