28172 sujets

CSS et mise en forme, CSS3

Img devant texte

Bonjour,
je suis en train d'essayer d'améliorer la vitesse de mon site et avec dareboost, je me suis aperçu que les font awesome prenait un certain temps pour être afficher. Or, j'en ai très peu et je souhaite les remplacer par des svg.
1. Ma première question serait de savoir si c'est vrai et si le fait de faire des appels de svg ne sera pas identique en rapidité.
2. Dans le bas de ma page, je les utilise pour faire une sorte de menu sans déroulement.
<em class="fa fa-chevron-circle-right fa-lg fa_custom"></em><a href="#">Mécanique analytique</a><em class="fa fa-chevron-circle-right fa-lg fa_custom"></em><a href="#">Moments en mécanique quantique</a>...

J'ai des flèches à droite et de flèches à gauche.
Serait-il plus rapide de remplacer par un style css et si oui que me conseillez vous sachant que j'ai 1500 pages à changer.
Merci d'avance
Modérateur
Salut,

J'ai peur que de faire un appel à un ficher svg externe à chaque fois sera plus coûteux en perf qu'une font d'icone chargée en une fois dès le début...
Tu as une idée de ce qui bloque exactement avec Font Awesome ? Ca m'interesse.
Niveau CSS tu peux prendre la version minifié ça doit pas prendre énormément de place (tu peux même la déplacer dans le CSS de ta page pour pas faire un appel de plus i tu veux). Après il reste le téléchargement de la font (tu peux toujours regarder cet article : https://www.alsacreations.com/article/lire/1741-Optimisez-vos-polices-web.html il est vraiment intéressant, par contre je ne sais pas si ça s'applique de façon identique aux font d'icone, si Raphael passe par là il pourra nous le dire...).
Re,
Voilà ce que me dit dareboost :
Par ailleurs, voici les ressources les plus lourdes qui sont téléchargées lors du chargement de votre page :
www.google.com/uds/api/search/1.0/01[...]c/default+fr.I.js (88 ko)
www.vetopsy.fr/fonts/fontawesome-web[...]ont.woff2?v=4.7.0 (77 ko)
http://cse.google.com/adsense/search/async-ads.js (75 ko)
pagead2.googlesyndication.com/pagead[...]/show_ads_impl.js (72 ko)
cdnjs.cloudflare.com/ajax/libs/mathj[...]CHTML.js?V=2.7.1 (63 ko)
cdnjs.cloudflare.com/ajax/libs/mathj[...]ain-Regular.woff (34 ko)
js/jquery-3.2.1.min.js (30 ko)
tpc.googlesyndication.com/daca_image[...]9540568001445274 (29 ko)

Mais je ne sais pas si c'est beaucoup de temps ou peu Smiley lol
Comme quoi aussi la recherche google prend du temps.
Administrateur
_laurent a écrit :
Après il reste le téléchargement de la font (tu peux toujours regarder cet article : https://www.alsacreations.com/article/lire/1741-Optimisez-vos-polices-web.html il est vraiment intéressant, par contre je ne sais pas si ça s'applique de façon identique aux font d'icone, si Raphael passe par là il pourra nous le dire...).
Oui tout à fait, c'est d'ailleurs un argument en défaveur des font-icon : certains icônes peuvent être remplacées par des caractères complètement incohérents durant le temps où la fonte est chargée Smiley ohwell

Il y a des illustrations à ce propos dans l'article, en partie "Que font les navigateurs ?".
Modifié par Raphael (15 Sep 2017 - 12:19)
Merci pour vos réponses
1. Bon, si j'ai bien compris, j'essaie donc de garder les svg que j'ai fabriquées.
2. Par contre, pouvait répondre à ma deuxième question sur le css ?
Merci d'avance
Modérateur
1 - Moi je garderai la font icone plutôt que des SVG séparés. Quitte a supprimer les icônes inutilisée comme le suggère Olivier et d'avoir une font a 2 icones (mais bon, j'aime bien les icônes du coup j'en met un peu plus et j'aime bien les avoir sous le coude sans a avoir a mettre à jour la font à chaque fois).
Après la Dareboost te dit que ce sont les plus lourdes, pas qu'elles sont trop lourde. Tu auras toujours des ressources plus lourdes que les autres normalement Smiley biggol Tu as un problème de perf ? Dareboost te dit que ca pose pb ? Que ça ralenti trop le chargement ?
Tu peux toujours tenter avec les SVG tu verras bien les résultats de dareboost.

@OlivierC le SVG inline je trouve ça ni patrique ni maintenable... Smiley ohwell (quand on en a plusieurs à beaucoup d'endroit)

2 - [EDIT] Ha si je crois que je viens de comprendre. Pour faire des chevrons en CSS pure tu peux reprendre la meme class que l'icone et changer juste le before pour en faire un rond avec un chevron en texte dedans. Ca sera certainement plus léger que de se taper une font ou un svg effectivement.
Modifié par _laurent (15 Sep 2017 - 13:54)
Si je garde le font awesome, cette question n'est plus d'actualité.
C'est seulement si je la remplace par mes svg ce qui donnerait quelque chose comme :
<img src="/images/flechemenu_d.svg" width="23px" height="23px" class="flechestabot"><a href="#">Relativité avant Eintein</a><img src="/images/flechemenu_d.svg" width="23px" height="23px" class="flechestabot"><a href="#">Relativité restreinte<em class="fa fa-chevron-circle-right fa-lg fa_custom"></a>…

Peut-on le remplacer par du css où je n'appelerais qu'une fois la flechemenu_d.svg sachant qu'il y en a 10 par page et 1500 pages à changer et qu'effectivement dans ce cas awesome est plus simple.
Merci
_laurent peux-tu expliciter s'il te plaît ?
Mes "a" se suivent et des fois la flèche est à droite et d'autres fois à gauche.
Le code précédent était celui que j'avais utilisé dans l'ancien monde comme diraient certains Smiley cligne .
C'est sûr que remplacer cela par une awesome se fera en 2 minutes dans dreamweaver, mais, j'essaie de le faire correctement.
Mon p a une class="fleches" et le reste du texte est comme au-dessus.
J'ai essayé de cibler sur .fleches a:before mais .... Smiley lol
Modérateur
mmmm j'ai du mal a comprendre toute l'architecture que tu as mais le principe c'était d'utiliser des icones "maison" plutot que de se taper une font : https://jsfiddle.net/cz291xje/
Si tu veux rajoute ton code dans le fiddle qu'on voit a quoi ca ressemble.

Tu peux même réutiliser les classes de Font Awesome si elles sont déjà en place et que tu ne veux pas modifier tes 15000 fichiers x 10 occurences. Tu vire juste la font et le css et tu réutilise les classes.
Question idiote comme je suis en train de tout remplacer.
Doit-on mettre :
<link href="/act_styles/gen.css" rel="stylesheet" type="text/css" />

ou
<link href="/act_styles/gen.css" rel="stylesheet" type="text/css"/>

i. e. l'espace entre le " et le / a de l'importance ou pas ?
osiris67 a écrit :
i. e. l'espace entre le " et le / a de l'importance ou pas ?

Non. Il est même possible d'omettre le slash.
Sujet clos
Aller à