Ho collegato il CSS minorato di Font Awesome dal CDN di Bootstrap in una pagina web. Il problema è che le icone appaiono in ritardo rispetto al resto del contenuto della pagina dopo un ritardo visibile.Come minimizzare il ritardo nel caricamento delle icone Font Awesome?
Qual è il modo migliore per sbarazzarsi di questo ritardo? (FYI, ho già incluso questo file CSS sopra ogni altro collegamento CSS e JS nella testa.)
Il css minificato non farebbe molta differenza nel tempo di caricamento. Quel fantastico file css dei font fa riferimento ai percorsi dei file di font esterni che verranno caricati dopo il caricamento della pagina. Si può vedere il ritardo sul sito del carattere di impressionante: https://fortawesome.github.io/Font-Awesome/icons/
@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.5.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }
Si potrebbe base64 codificare i caratteri e includerli nel css del tuo sito. Ciò aumenterebbe sostanzialmente il tempo di caricamento del css del tuo sito, ma eliminerebbe il flash. Anche se potrebbe non funzionare in tutti i browser e non lo consiglierei.
Si potrebbe provare ad ospitare il font fantastico css e font direttamente sul proprio server. Il CDN potrebbe essere la causa della latenza.
Hosting font-awesome ha fatto il trucco per me – Nowdeen
tenta di modificare url() per i dati-uri()
MENO:
data-uri('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),
Sono testimone questo comportamento, ma solo su Chrome. Quindi forse qui c'è qualcosa di specifico del browser. –
Sì, solo Chrome, Firefox e Safari vanno bene. – Suge