IE laadt alles al op terwijl FF pas laadt als het een font nodig heeft (dacht ik).
Dat zou je (na een "schone start", met een lege cache) moeten kunnen zien als je de pagina oproept, en daarna in de betreffende cache-map van IE of FF gaat kijken wat er in staat.
Als je het grote css-bestand met ttf's/eot's (van, laat me raden, 7MB
) rechtstreeks in de <head> van een voorafgaande pagina plaatst (op een andere plaats mag het niet!), verschuift het probleem van het langzaam inladen naar die vorige pagina. - Dat werkt dus niet.
Als je bezoeker een vaste route van x pagina's vooraf heeft om naar de pagina met al die nodige css te komen, ligt het wat anders dan als je er vanuit het menu met 1 stap kunt komen. Bij x pagina's vooraf zou je het grote css-bestand in x kleinere bestanden kunnen splitsen, en op elke passerende pagina er eentje extra bij nemen.
Maar dan nog vertraagt het de voorafgaande pagina's.
Ik zou kiezen voor opsplitsen in een aantal kleinere bestanden, en die dan (allemaal) met een "postloader" aan alle voorafgaande pagina's hangen. Wat al binnen is, wordt niet nog eens binnengehaald; wat halverwege was en wat erna komt, komt in de volgende ronde aan de beurt. Dan heb je steeds zo veel mogelijk alvast in voorraad, onafhankelijk of een bezoeker nu 3 seconden op pagina 1 en 20 seconden op pagina 2 verblijft (of omgekeerd), enz.
Onder het motto "The art and craft of postload preloads" (na een Google op
preload css file) kwam ik
deze post tegen. Zit daar wellicht wat bij?
Met vriendelijke groet,
CSShunter
O - een hele andere invallende gedachte!
We laten de tijdrovende "brute force"-methode van alle 92 font-bestanden zitten, en proberen slim te zijn. Als je nu eens niet het hele CSS-bestand met alle fonts binnenhaalt, maar alleen wat de bezoeker nodig heeft? Dan zou moeten kunnen met:
- De eerste pagina, waarin de bezoeker zijn keuze van lettertype maakt.
- Na de klik op het lettertype wordt het type-van-keuze als variabele genoteerd, en opgeslagen in een cookie. Ook alle andere (eventueel) al ingevulde keuzes gaan in een cookie.
- Bij de mouse-up van de lettertype-keuze wordt als de wiedeweerga omgeschakeld naar:
- De tweede pagina, die volstrekt identiek is aan de eerste pagina, maar nu (via de uit het cookie opgehaalde fonttype-variabele) met de voor dat lettertype nodige font-ttf in de css van de <head>.
- Ook alle andere al ingevulde variabelen worden dankzij de cookies weer "voor-ingevuld".
- Het aangevraagde font toont zich, en de bezoeker kan gewoon doorklikken.
- Mocht het lettertype niet bevallen, dan herhaalt zich dit met een nieuwe versie van de tweede pagina.
Zou dat de snelheid bevorderen?
