Ottimizzazione (riduzione) delle richieste di caratteri web

La mia homepage al momento utilizza 5 caratteri web: mi piacerebbe che fossero 6 a causa del supporto impreciso per Helvetica Neue. Uno dei caratteri è icone 'FontAwesome', gli altri 4 sono usati solo per una parola o due (cioè ho un'intestazione che legge "Ottimizzazione" scritta in lettere che sembrano un vecchio computer).

2 di questi caratteri sono disponibili tramite Google e richiedo solo le lettere necessarie (e funziona benissimo). Tuttavia, gli altri 2 provengono da openfontlibrary.org e sono disponibili solo in un unico formato. Il che non è un grosso problema (ne avrò comunque bisogno in modo sicuro, quindi le copie locali sono migliori), una sveltina con il generatore Fontsquirrel.com @ font-face e li ho in più formati e il CSS per l'avvio.

E poi collaudo il tempo di caricamento della mia pagina ... ugh. Presumo che sarebbe possibile sottoporre a sottoinsiemi le mie copie locali, qualcuno ha esperienza in questo settore?

optimization fonts

— adam-asdf
fonte

Risposte:

L'uso di caratteri Web non standard ha un impatto significativo sulle prestazioni sui tempi di caricamento della pagina rispetto al semplice utilizzo di caratteri di sistema standard sicuri per il Web. Questo è il caso indipendentemente dal fatto che tu stia utilizzando JavaScript o @ font-face .

Bisogna sempre analizzare attentamente se utilizzare o meno caratteri web non standard.

Alcune domande da porsi quando si considera l'utilizzo di caratteri Web non standard:

Li stai usando solo per dimostrare che puoi e sai come fare?
Serve uno scopo nell'esecuzione di un design migliore e offre un'esperienza utente migliore?
Il metodo utilizzato per implementare i caratteri è compatibile con più browser?
Un'immagine potrebbe bastare, soprattutto se si tratta solo di poche parole su una singola pagina o di poche pagine?
Il carattere è abbastanza diverso dai caratteri sicuri per il Web per renderlo utile da usare?
Se il carattere viene utilizzato come testo del corpo, è facilmente leggibile o è progettato per le intestazioni?

Assicurati di comprendere almeno i fondamenti della tipografia e come influenza il tuo design e utilizzalo a tuo vantaggio.

— tacotuesday
fonte

Grazie per la risposta dettagliata, ma ho intenzione di ammettere un po 'di frustrazione per le risposte finora. Mi rendo conto che sta influenzando il tempo di caricamento; Conosco tipografia e caratteri sicuri per il web. Mi rendo conto che potrei usare un'immagine (o sprite di immagine) e il testo alternativo. Tuttavia, queste sono le ultime risorse per me. Potrei usare uno stack di font molto sicuro, ma questo vanifica lo scopo di avere font web (e anche i sostituti richiedono una connessione HTTP). Quindi si entra in SEO, problemi di accessibilità della regolazione della dimensione del carattere, traduzioni, impostazioni per i non vedenti, ecc. Se ragionevole , preferisco ottimizzare i miei caratteri web.

— adam-asdf,

Se avessi letto il primo articolo a cui mi sono collegato, avresti trovato informazioni su come migliorare i tempi di caricamento della pagina durante l'utilizzo di caratteri web non standard.

— tacotuesday,

Mi dispiace, sono stato sopraffatto dal numero di link, lo farò ora.

— adam-asdf,

Avevi ragione, scusa per la mia impazienza (in realtà è il secondo link che dà). Dettagli self-hosting, TypeKit, Google, font-squirrel (in qualche modo mi è mancato pensare di provare l'opzione avanzata del generatore @ font-face) e persino un'analisi di metodi diversi in diversi browser. Per coloro che si imbattono in questo lungo la strada, ha risposto a tutte le mie domande.

— adam-asdf,

Grazie per avermi fatto sapere che era il secondo link. Li ho confusi nel post. Ora è stato risolto, quindi è il primo link. Potresti anche voler esaminare Cufon e sIFR, se non l'hai già fatto. Inoltre, gran parte della mia risposta è stata pensata per i futuri lettori, in modo che pensino un po 'prima di seguire la folla per quanto riguarda l'uso dei caratteri web.

— tacotuesday,

gli altri 4 sono usati solo per una parola o due

È una dichiarazione letterale?
In tal caso, perché ti preoccupi di incorporare questi caratteri, sottoinsiemi o no? In questo caso non dovresti nemmeno essere ottimizzato, ma semplicemente rimuoverlo . Crea immagini del testo di cui hai bisogno e usa la tua tecnica di sostituzione del testo preferita. Stai aggiungendo richieste HTTP e tempo di download al tuo sito per poche parole .

— su'
fonte

Mi è venuto in mente, mi sento come se dicessi che posso codificare con CSS3 un paio di font Web e un design reattivo tramite query multimediali è probabilmente saggio.

— Adam-asdf,

Ho notato che hai molto rispetto in questa comunità (e apparentemente esperienza pratica). Che cosa sto guardando? So che le richieste http (s) richiedono tempo, ma dammi qualcosa per prendere una decisione informata ... stiamo parlando di 2 secondi o 2 microsecondi? Sono pratico ma con un background nel design sono esteticamente orientato. Dammi un modo per prendere una decisione informata, per favore.

— adam-asdf,

@Su 'è del tutto corretto. Ogni sito è diverso per quanto riguarda le richieste HTTP, tutto dipende in realtà dal percorso tra il client e il server. Qualcuno che utilizza la connessione remota (ancora) o una connessione satellitare sperimenterà tempi di caricamento più lunghi rispetto a qualcuno su DSL o T1. Una buona estetica è incredibilmente importante, ma una buona struttura e ottimizzazione sono altrettanto importanti. Ridurre al minimo il margine dei tempi di caricamento è una pratica comune, limitando così il numero di richieste HTTP al tuo sito. Fare un'immagine delle parole ridurrà il tempo di caricamento e i tuoi utenti non sapranno nulla. Guarda anche negli Sprites CSS.

— Christopher,

@Christopher Sono contento che tu abbia menzionato gli sprite, immagino che potresti dire che sto cercando un modo per creare una versione personalizzata e disponibile localmente degli sprite nei webfonts.

— adam-asdf,

@ user1332729 Facile, fai come suggerito da Su (crea immagini delle parole) e applica i principi CSS Sprite. Bang, c'è l'ottimizzazione che puoi davvero ottenere senza passare attraverso i formati di immagine. Cosa intendi per localmente disponibile? A te o al tuo cliente?

— Christopher,

Per seguire, ho finito per usare le opzioni avanzate del generatore @ font-face per sottoinsieme i miei caratteri, quindi ho caricato solo i caratteri necessari.

Una delle opzioni era di Base64 codificare i caratteri (che mi ha permesso di incorporarli nel mio file CSS). Se la memoria serve, Base64 codifica .woffil .ttfcarattere e.

Mentre mi piace supportare il maggior numero possibile di utenti con il maggior numero di browser, ho deciso che non valeva la pena rallentare gli utenti dei browser moderni con dati extra, probabilmente ridondanti, quindi ho usato Modernizr (che utilizza yep / nope.js) per caricare in modo asincrono un CSSfile separato con riferimenti a tutti i formati di carattere secondo la sintassi della faccia del carattere a prova di proiettile rinforzata .

Sono andato avanti e indietro tra Base64 codificando il .woffcarattere e includendo il resto delle dichiarazioni dei caratteri nel CSSfile primario o includendo solo Base64 codificato .woffnel primario CSSe quindi includendo gli altri formati in un CSSfile che ho caricato in modo asincrono tramite Modernizr.load.

Preferisco i tempi di caricamento rapidi all'estetica, quindi la FOUC non è stata una grande preoccupazione, ma noterò che la maggior parte dei browser ha "sbattuto le palpebre" sui caratteri quando sono stati caricati (che era dopo che i caratteri codificati in Base64 CSSerano stati caricati) asincroni.

Tra i lati positivi, una volta caricati e archiviati i caratteri nella cache (le intestazioni a lunga scadenza impostate sul server) il "battito di ciglia" è stato eliminato e sono stato in grado di caricare set estesi di caratteri in modo che gli utenti che parlavano altre lingue (e usavano il Il widget di traduzione di Google che è stato incluso) vedrebbe comunque il testo stilizzato.

Dato che questo era il mio sito, sono stato in grado di sperimentare, ma lo facevo in gran parte per "mettermi in mostra", sono più conservatore con i siti dei clienti.

Un'altra tecnica che ho implementato è stata quella di mettere tutti i .svgfont in un singolo file e identificandoli ciascuno con il proprio ID invece di averli ciascuno in un file separato come produce il generatore @ font-face.

— adam-asdf
fonte