0

Right now my compass task is taking > 60sec to run. I have found that removing the five fonts I have defined as base64 (truetype and woff) brings that time down to < 30sec.

Unfortunately, moving to libsass is not an option, as it does not have parity with compass, yet.

Also, it would be best not to burden the client with the requests for font files.

Can anybody think of any way I can optimize this task? It really is becoming a pain point for the dev team.

jerome
  • 4,809
  • 13
  • 53
  • 70
  • Why would you base64 encode fonts? That makes them absolutely huge, and ruins the browser's ability to cache, so you'd burn money on bandwidth for constantly reserving them instead of only to first time visitors. Just serve them up the normal CSS way instead? – Mike 'Pomax' Kamermans May 06 '15 at 04:06
  • "Why would you base64 encode fonts?" For the same reason that you might choose to base64 encode images in CSS: to reduce HTTP requests. – jerome May 06 '15 at 10:33
  • "...ruins the browser's ability to cache" The CSS file with the base64 encodings would still be cached as usual, right? – jerome May 06 '15 at 13:39
  • you reduce http requests when those requests are significant with respect to the size of the data transfered, like .css and .js files. Doing that for huge font files and images is rather optimizing entirely the wrong thing. And then Base6 encoding them makes them about a quarter bigger than they already were, wasting huge amounts of b/w (and thus your money spent on hosting). And no, if you bundle the data as Base64 datauri, then the browser can't cache that as files in the cache folders – Mike 'Pomax' Kamermans May 06 '15 at 14:46
  • err, sorry, one third increase (base64 uses four bytes to encode any three byte triplet of source data). Basically what you've done is taken the thought that http requests impact total load time (which can be true) but are using an approach that vastly increases total load time by requiring way more data that before, at the expense of caching and header control for those resources. Fix all your other problems first, this should be the absolute last thing you try to eek out the last tiny drop of transfer and load speed (and then reject due to perf metrics showing it makes things worse) – Mike 'Pomax' Kamermans May 06 '15 at 14:57
  • many developers think all other developers in this world do the same thing as they are. Creating some web page with nice css and js, including nice looking fonts. Do you think someone will do base64 encoding for their resources without directly using them without any specific reason? which one is hard? using base64 or simply use the link? I think bas64, so why some use it? because they have tried other options and this is the only solution to their problem. So without know their projects it is really unfair to give them instruction like "Fix all your other problems..." – Tekz Jun 17 '15 at 01:26

0 Answers0