[GH-ISSUE #747] How to optimize initial loading? #386

New issue

Closed

opened 2026-03-03 14:38:01 +03:00 by kerem · 2 comments

kerem commented

2026-03-03 14:38:01 +03:00

Owner

Originally created by @z31fbras on GitHub (Aug 31, 2020).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/747

Context

I use this library in my Angular 8+ app.
I ran my application with a throttled connection: fast and slow 3G in the network tab from Google Chrome developer tools.

Implementation

Flags are added this way into my project:
Angular.json

{
  "projects": {
    "exchange-front": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/flag-icon-css/css/flag-icon.min.css"
            ]
          }
        }
      }
    }
  }
}

Issue

Initial loading is long when throttling the connection.
Due to the important number of files, the initial loading of my app is long.
The problem is, my app can be used only if all the flags have been downloaded.

Is there a way to optimize the loading of these files?
Having a single download for all these files would be perfect actually.

Additional information

I noticed that files seem to be downloaded twice.
For example, there is a download for aw.29aeb3f91f4da71e6766.svg and aw.f159ec168ea083c41505.svg
Is it a normal behaviour?

Thanks for your help!

Originally created by @z31fbras on GitHub (Aug 31, 2020). Original GitHub issue: https://github.com/lipis/flag-icons/issues/747 # Context I use this library in my Angular 8+ app. I ran my application with a throttled connection: fast and slow 3G in the network tab from Google Chrome developer tools. # Implementation Flags are added this way into my project: Angular.json ```json { "projects": { "exchange-front": { "architect": { "build": { "options": { "styles": [ "node_modules/flag-icon-css/css/flag-icon.min.css" ] } } } } } } ``` # Issue Initial loading is long when throttling the connection. Due to the important number of files, the initial loading of my app is long. The problem is, my app can be used only if all the flags have been downloaded. Is there a way to optimize the loading of these files? Having a single download for all these files would be perfect actually. ## Additional information I noticed that files seem to be downloaded twice. For example, there is a download for aw.29aeb3f91f4da71e6766.svg and aw.f159ec168ea083c41505.svg Is it a normal behaviour? Thanks for your help!

kerem closed this issue

2026-03-03 14:38:01 +03:00

kerem commented

2026-03-03 14:38:02 +03:00

Author

Owner

@KingDarBoja commented on GitHub (Sep 3, 2020):

The duplicated flags maybe be caused by how Angular is dealing with both 1x1 and 4x3 source files on local serve. See #706

@KingDarBoja commented on GitHub (Sep 3, 2020): The duplicated flags maybe be caused by how Angular is dealing with both `1x1` and `4x3` source files on local serve. See #706

kerem commented

2026-03-03 14:38:02 +03:00

Author

Owner

@lipis commented on GitHub (Nov 6, 2020):

Not sure

@lipis commented on GitHub (Nov 6, 2020): Not sure