• Passer à la navigation principale
  • Passer au contenu principal
  • Passer à la barre latérale principale
Wpcours

Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact
Accueil » Tutoriels » Utiliser le CDN Fonte Awesome pour accélérer le chargement de votre site

Utiliser le CDN Fonte Awesome pour accélérer le chargement de votre site

Màj le 15 février 2019

Font Awesome est une police de caractères qui permet d’afficher des icônes, des pictogrammes sur un site Web. Toutes les icônes sont gratuites, personnalisables. IL existe plusieurs façons pour intégrer Font-awsome dans votre site, la plus simple est d’utiliser le Cdn Font Awesome pour que le chargement de votre site ne soit pas lent.

La solution consistait à desservir Font Awesome à partir d’un réseau de diffusion de contenu (CDN), réseau de serveurs à travers le monde disposant des fichiers Font Awesome prêts à être utilisés par les utilisateurs proches de leur emplacement.

FONT AWSOME

L’utilisation d’un CDN diminue non seulement le temps de chargement de Font Awesome, mais augmente également la probabilité qu’un utilisateur ait déjà la police mise en cache sur son ordinateur, même s’il n’a pas visité votre site – s’il a déjà visité un autre site utilisant le même CDN. alors Font Awesome devrait déjà être sur leur ordinateur.

Il existe plusieurs CDN gratuits qui servent Font Awesome. Dans le passé, nous utilisions le propre CDN de Font Awesome, mais nous l’avions trouvé peu fiable (il baissait régulièrement pendant plusieurs heures). Cette fois, nous avons opté pour le CDN Bootstrap.

Nous sommes allés à https://www.bootstrapcdn.com/fontawesome/ et avons copié le lien dans la tête de nos pages Web.

Si vous voulez utiliser la nouvelle version v 5.0.8 de Font Awsome ajouter ce lien à l’entete de votre thème :

<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">

Avec l’utilisation du CDN, pas besoin de mettre à jour la version téléchargée des icônes. Quand une nouvelle police d’icône est ajoutée, elle est automatiquement disponible. La rapidité d’affichage des icônes est optimisée via le CDN.

Et pour intégrer des icônes dans votre projet web, c’est exactement comme au-dessus avec l’utilisation de la feuille de style css. On copie/colle le code html de la police d’icône et on la personnalise.

Voilà comment intégrer des icônes dans vos projets. J’ai pris l’exemple de Font Awesome, parce que cela fonctionne très bien et que le choix d’icônes est très important. C’est celui que j’utilise personnellement dans mes projets Web.

Remarque :

Font Awesome ajoutera deux demandes supplémentaires (une feuille de style et la police Font Awesome) à votre page et 90 à 200 Ko. Le montant exact dépend du navigateur de l’utilisateur, car différentes versions de Font Awesome sont chargées en fonction de la prise en charge de ce dernier. Indépendamment du nombre d’icônes que vous utilisez, le nombre de demandes et la taille du fichier ne changent pas. Vous pouvez afficher un millier d’icônes et vous n’auriez toujours besoin que de ces deux demandes. Les deux demandes représentent un coût unique, car le navigateur de l’utilisateur mettra en cache la feuille de style et la police Font Awesome.

Avec la plupart des fournisseurs d’hébergement, Font Aweomse aura un impact négligeable sur les performances; vous n’aurez donc plus à vous soucier de l’utilisation de Font Awesome, à moins que votre site Web ne se trouve sur un serveur insuffisamment alimenté ou que votre site Web soit déjà très lent (dans ce cas, il est préférable de ne pas les ajouter). Google verra que vous utilisez Font Awesome, mais à moins que votre site Web soit déjà lent, cela n’aura pas d’impact notable.


Plus de cours et exercices corrigés :

  • Créer des pdf pour vos articles sans plugin sur Wordpress
  • Comment corriger l’erreur 401 dans WordPress
  • Comment envoyer tous les types de fichier dans les médias WordPress
  • Comment désactiver l’accès aux dossiers et répertoires Wordpress
  • Comment faire pour désactiver la sélection de texte dans Blogger

Interactions du lecteur

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Barre latérale principale

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des cours et exercices corrigés Gratuitement.

Articles récents

  • Limiter la longueur minimale et maximale ‎de vos commentaires sous Wordpress
  • Antispam Bee : meilleure configuration à faire
  • 7 outils numériques pour organiser votre travail
  • Top 4 meilleurs plugins RSVP gratuits pour WordPress
  • Comment utiliser des images WebP sur WordPress pour accélérer votre site

© 2022 ·Wpcours.com · Mentions · Contact