Too many requests for older versions of Font Awesome #15167
Comments
hdodov
changed the title
|
Hi! Thanks for being part of the Font Awesome Community and for reporting this. I can confirm, there is definitely an issue with kits and webfonts |
|
I have reported this when the Kits were released and still have not got any response. It is a major issue, as it makes loading the website and icons slower and also a website making too many request is a bad practice, so I will hold on from using the Kits until the issue is fixed. |
|
We'll be looking at kit performance for the free kits soon. @hdodov @nortonandreev can you confirm that HTTP/2 is being used? This should be the case but if not there could be some network-related stuff going on. |
|
@robmadole the protocol in the fiddle is h2
|
|
@robmadole yep. I use the kit here. You can see for yourself. |
|
Facing the same issue with my kit. Has a huge effect on icon loading time |
|
Any updates on this? Can confirm the same issue, also using HTTP/2. |
|
Still not fixed in version 5.10. |
|
I'm disappointed, it's a big waste of time for me because the kit was supposed to help me improve the loading time of my website and make FA automatically up to date. Hope this will be patched quickly. |
Yes, especially as they increased the price and also ditched the student pricing lol. |
|
Happening here too. We will not be using the kits until this is resolved as well. Does anybody know if this is this a problem with the Pro license as well? |
|
Any updates? It's been 3 months. |
|
Still nothing about this issue? It's absolutely unusable in this state |
|
I've noticed the same problem when I updated my website to use the Kit. What workaround do you use? I cannot find any documentation mentioning the FA CDN I used before. |
Can confirm it is still happening with the Pro license |
|
It's a bit alarming how such a serious issue is taken so lightly and hasn't been looked at for over 4 months. @lumistu that's what you call Premium Service, I guess. |
|
Alright, let me post an update here to address some of the issues. We are still working on two different fixes that will improve the performance of free (and Pro) kits using the "latest" version. We'll release these as soon as they are ready. Regarding Pro kits, they only load the webfont files that they need in order to show an icon. @lumistu if you are seeing a different behavior please provide some details. @hdodov we haven't posted an update but we have been working on Kits behind the scene since we've released them. We'll continue to work on them and make them better. @livthomas the CDN is still available at https://fontawesome.com/account/cdn |
|
@robmadole Thanks. I've already switched back to the CDN since I modified my website to use AMP and the Kit doesn't work with it anyway. I just want to say that I've encountered the problem with loading older versions of Font Awesome not only when using the |
|
I just noticed this too. Is this fixed? |
|
@robmadole said
I disagree. Well I can confirm that Im loading a pro kit, but yet the page loads multiple old versions of fonts, both free and pro fonts, and is slow as hell. Exact same as the initial openers issues.
|
|
The funny thing is..... this is insanly bottlenecking the fonteawesome.com page too. It is loading an ridiculous amount of old webfont versions 👯♂ I stopped counting at 80 :D:D The Google Webfonts is going red when you add more than 3 to your Kit. And FA loads more than 80 OMG. In my Opinion this trend to create Kits and tryinig to force people in cdn is the beginning of the end of every good Product. |
|
yup - thats a perfect example of whats happening - live on fontawesome.com
|
|
I suspect this is actually the intended behaviour - i.e. it is loading the version of the font when the icon was introduced for every icon you are using. It does have a noticeable perf impact - I had one of my devs switch from CDN to a kit without telling me thinking it was a quick performance win. I noticed the perf drop immediately and went looking for the source. We've decided to build our own font from the font awesome svgs using a tool like icomoon. |
|
Like the others, I've switched back to the CDN version for my non-sage sites. Fortunately, Sage has the ability to "tree shake" specific svgs I need from FA. |
|
This is crazy ... why is this a thing? |
I can confirm a "Font Awesome Pro, Latest Version, Web Fonts" kit that was made 22 days ago still shows this behavior, making ~700 requests on page load in my case. Switching to This is an example of a bug which can in theory be fixed promptly, now that there are kits managed by the FontAwesome service. The silence on this issue is pretty surprising, given it is a pro feature, and one affecting the FontAwesome Domain. @tagliala Any update from the FortAwesome team? |
|
@yofreke well, yes: #15167 (comment) 😅 |
|
Oh wow, I somehow scrolled past that the first time.
Is there somewhere to track the progress of the availability of the deployed fix?
Will it be possible for pro kits to opt in to this new behavior? |
|
Crazy this is still a thing after so long. Experiencing the same issue. |
|
@robmadole Since you mentioned that you need metrics, will Google PageSpeed Insights reports help? You can see from my site's report that about 2 seconds are spent loading FA woff2 files -- see the Avoid chaining critical requests section. |
|
@robmadole Please revert the overengineering you did here... Plain old CDN with a single font file was working extremely well... |
|
Was anyone asking for versioned font awesome files? Like I get the technical showmanship aspect: it’s impressive using HTTP2 to do that many requests in that short a time - only loading 1 or 2 icons as you go. It’s clever, and @robmadole’s implied point is that it might not be affecting performance as much as you think. But ... it makes my Developer Web Console completely unusable, trying to find the AJAX request that fired at the same time as 5000 GET requests to FontAwesome. It makes first page load slow, and I’m sure there’s a CPU impact for that many HTTP requests (even if they are multi-plexed over HTTP2). These things simply aren’t fixable, and they are not a trade off I want to make. I just want the latest version of the font awesome icons. That’s what I bought pro for. Can we get a timeline on when pro kits with “latest” selected will be fixed? Going back to the CDN version is not an option as we have too many subdomains. |
|
Anyone still having these issues? It's really messing up my work. I guess I'll just revert to the OG CDN?? |
|
@yofreke as that might be a case pagespeed insights is not the tool while measuring performance issues. You can have a freaking bad score there and the real performance might still be good. |
Agreed, but still this is clearly an issue and nothing is been done about it for months. |
Totally agreed. I am following this post since it was started, hoping that somebody at FA will give it some more attention. |
|
Alright time for a quick update: Summary
Details
Understood, thanks for sharing this. I'm assuming you are using a Pro kit? Is it SVG or Webfonts? About how many icons are you using on the laggy pages? Do you have "Disable Cache" checked in the dev console? (I normally do; just collecting info).
No, not yet. We have other plans for Pro. The issue is that the Pro version is so much larger than free. We'll come back to Pro Kit performance at a later date.
What we'll do is continue to improve this service as we learn.
Is this literally unusable or is it just hard to sift through the requests? Regarding CPU impact; we haven't seen this in our testing (it was statistically insignificant). Please share if you find out we are mistaken as we missed something or browser behavior has changed.
There is always the option to self-host and soon we hope to have the desktop subsetter available. However, I think we'll continue to make Kits better as much as we can. I don't agree that "things are simply [not] fixable". Just need some additional thought and a willingness to work hard at the problem with a good team of people. @PoeHaH @basticodes
We've been actively working on it since I wrote the last "State of the Issue" |
|
@robmadole what are the benefits of this approach though? I just want one fontawesome request to get all the latest icons ... why do I need thousands of requests? For what benefit are we jumping through all these hoops? |
I think that if you use just a few icons, and maybe that's the average use case, getting those icons in individual http2 requests is better than getting all 7000 of them in a single one |
|
@tagliala The point that @aidanlister is trying to make is that, overall, it takes less time to fetch a single file with 7000 icons than making hundreds of requests for icon files containing a few icons. Aside from the download time, you have to keep in mind that a fetch request takes time to:
No matter how much of http2 and multiplexing you're doing, you still need to make hundreds of requests versus a single request for a bigger chunk of data. |
|
Even if I understand the needs of having a single request and I agree on having an option to choose which method use, I do not get the "hundreds of requests" for the average use case. I've built a test page with 17 icons in all 4 styles using both Pro SVG Kit and CDN. With fast 3G simulation, I get the following results: https://tagliala.github.io/fa15167-cdn https://tagliala.github.io/fa15167-kit |
|
@tagliala What about the scenario where you're loading webfonts instead of svgs? |
|
@robmadole please can we get an update on this? We're a paying customer, and this is such a clusterfuck ... I have a dozen developers complaining every day that they can't use Chrome Devtools to debug stuff any more because Font Awesome fires off 4000 requests each time we do an AJAX call. I don't want this ... I can't use the CDN version because we have too many subdomains. Please tell me there's a light at the end of the tunnel. |
|
Here's a video showing how ridiculous it is:
After a few interactions on the page FontAwesome has done over 5000 requests ... and WHY ... who even asked for this feature of preserving icon backwards compatibility? What was the rationale behind this change?? |
|
@chiefGui thanks for those details. Developer experience is certainly a metric we look at. I will put this on the work list as something we need to look at. @aidanlister the behavior you are showing looks like there might be some other issue going on. I'd be happy to take a look if you have a URL but I suspect this is an internal site? (Is this site PJAX/Turbolinks? It almost looks like the Kit is being reloaded at every PJAX load to the server. Do you have the kit embed code at the end of the body tag?) We will continue working on the developer experience but I think at this point you need to host Font Awesome yourself. Head to fontawesome.com/download and grab the download package. Those files are not split up by version delta (they are one large file). If you are hosting yourself it will also get you past the limitations of our Pro CDN service regarding your number of domains. |
|
@aidanlister I'm not a fan of this either but about the debugging... Can't you filter which request are shown in chrome dev tools? I know you can in firefox. |
|
It's not pjax or turbolinks or anything fancy, each one of those clicks is |
|
@aidanlister the Kit JS simply adds |
|
Seems like this has finally been resolved in 5.12.1, as promised. |
|
Yep, we just released 5.12.1 and it's generally available to everyone now. Anyone who was using an evergreen kit (version "latest") will already get this update on their site. We still have follow-up work to do on Kits but the main issue with free kits should be solved. (We'll follow up with the other work) |
|
I'm going to go ahead and close this and if there are follow-ups we can address that in new issues. |
|
Here is a blog post talking a little more about the issue we had with our Free Kits and what we were trying to do: https://blog.fontawesome.com/free-kits-a-retrospective/ |
and others
Describe the bug
I created a new FA kit and put it in my site. However, when I look at the Network tab of DevTools (with cache disabled), I get bombarded with requests for font files. In my kit, I've set the version to "Latest" but I tried with a specific version too. I get the same results. Aside from slowing down the site, I think it's pointless. At least it could load the specified version first.
Test case
Fiddle. Inside, I've used my own icon kit. If you open DevTools with disabled cache and run the fiddle, you'll see that it loads all versions above 5.0.0 of the brands font.
The second screenshot is from the Network tab in the fiddle I linked. As you can see, it takes about 1.5 seconds to load all fonts and the actual icon appears when it loads the last one...
Expected behavior
FA should load just the font version I've specified.
Screenshots
This happens in my site:
This is a waterfall from the fiddle I linked:
Version and implementation
Version: 5.9.0
Browser and version: Chrome 75.0.3770.90 (Official Build) (64-bit)
Bug report checklist
The text was updated successfully, but these errors were encountered: