Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

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.


Vous aimerez également...

  • Corriger erreur 403 dans Wordpress
  • Ajouter des fichiers Javascript et CSS à l’en-tête et au pied de page dans WordPress
  • Comment corriger l’erreur «Failed To Load Resource» dans WordPress
  • Désindexer les sous-pages de pagination et d’archives sous Wordpress
  • Comment intégrer une vidéo Facebook dans WordPress
  • 7 meilleures astuces pour personnaliser le thème GeneratePress
Accueil / Tutoriels / Utiliser le CDN Fonte Awesome pour accélérer le chargement de votre site

Laisser un commentaire

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

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • GeneratePress VS Genesis : Quel est le meilleur thème?
  • Est-ce que le contenu d’IA aide ou nuit à votre site web ?
  • Comment créer des boutons de partage social flottants dans GeneratePress sans plugin ?
  • Google Analytics 4 vs Universal Analytics : Comparaison complète 2023
  • Est ce que Google accepte le contenu généré par l’IA et ChatGPT ?