simple-icons/simple-icons-website

Improve website performance

Andre601 opened this issue · 12 comments

Andre601 commented

Kind of issue

  • Feature
  • Bug
  • Design
  • Other, namely: Improving performance

Description

This is more or less a repost of simple-icons/simple-icons#7125

The issue is basically, that the website has extremely long loading times. While the browser tab itself is showing to have loaded the website does it often take up to 2 minutes, if not even more, for the site to respond to any input from the user.

This makes the general experience of the website worse, which is not good.

I do not have any real frontend or backend web dev knowledge so I can't really say what the main issue is. My biggest guess is, that the site loads all 2k+ SVGs pretty much simultaneously, including those not visible to the visitor, which takes the website some time and causes it to freeze.

My idea is to make the Site only load SVGs that are visible to the visitor and otherwise load them when they are scrolled into view.
Another idea could be to split the list up into sections (maybe by alphabet) and have the content paginated so that the amount of SVGs loaded is effectively reduced.
And maybe consider how SVGs are served? If they are served by a simple, direct URL, maybe consider a setup that Base64-encodes them and uses that to display? I've heard that is often better than a live URL, but not sure.

For the sake of clarity, here are my current stats, as already mentioned in the above-linked discussion:

  • OS: Windows 10 Pro
  • Browser: Microsoft Edge v97.0.1072.76 (Official Build, 64-Bit)
  • Speedtest.net Results (Link)
    • Ping: 7ms
    • Download: 99.24 Mbps
    • Upload: 103.21 Mbps
mondeja commented

This should has been fixed by #165. Maybe you need to clear the cache for simpleicons.org to load the new files.

My idea is to make the Site only load SVGs that are visible to the visitor and otherwise load them when they are scrolled into view.

Is the current behaviour, using loading="lazy" attribute.

Andre601 commented

I did clear the cache, but the site still freezes for a long time before it reacts to any input.

Also, yes, the lazy loading is applied to the SVGs, but I still believe that they do load way before they are actually visible, because while I scroll down are they already loaded. Only when I scroll quite fast do they take their time.

So maybe a different approach like the base64 encoding could be an idea? I heard from a few people that this is a bit faster than using relative or absolute URLs since the browser can simply decode the stuff or smth...

mondeja commented

I'm not getting this problem in Firefox and Chrome-based browsers under Ubuntu. I'll take a look with Edge on Windows but seems that lazy loading is supported by it.

So maybe a different approach like the base64 encoding could be an idea? I heard from a few people that this is a bit faster than using relative or absolute URLs since the browser can simply decode the stuff or smth...

The browsers doesn't apply lazy loading to images whose data uris are encoded in base64. That was the approach used before #165 but was freezing the whole page as was reported in #143 and #161.

mondeja commented

Tested in two versions of Microsoft Edge under Windows 10:

  • 44.17763.831.0 (default in my Windows 10 distribution) -> doesn't work
  • 98.0.1108.43 -> it works as expected

This is in line with caniuse, seems that Microsoft Edge added support for lazy loading in v79. Note that we are only supporting last two versions of browsers. So you probably need to update your Microsoft Edge version.

Andre601 commented

Tested in two versions of Microsoft Edge under Windows 10:

  • 44.17763.831.0 (default in my Windows 10 distribution) -> doesn't work
  • 98.0.1108.43 -> it works as expected

This is in line with caniuse, seems that Microsoft Edge added support for lazy loading in v79. Note that we are only supporting last two versions of browsers. So you probably need to update your Microsoft Edge version.

Well.... I do use the latest one, at least according to the browser's own update-check

Andre601 commented

Also, I quickly switched to the beta version of Edge to see if that fixes it, but same results, so I doubt it actually works fine.

mondeja commented

What is the exact number of the version that you're using?

Andre601 commented

v98.0.1108.42

And according to the update check, the latest available for beta

Andre601 commented

I do have this error in the browser console:

Refused to execute script from 'https://cdn.carbonads.com/carbon.js?serve=CKYIPK7M&placement=simpleiconsorg' because its MIME type ('image/gif') is not executable.

Also, this warning which seems to be related:

[Intervention]Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113
mondeja commented

Also, this warning which seems to be related:

I'm also seeing the same warning, but works for me in patch 43 instead of 42. Could you share a minimal video with Network tab of DevTools opened while loading the page? That tab show those assets that are being loaded.

Andre601 commented

Hmmm... From looking at it, it could be that my anti-virus Kaspersky is doing some weird stuff here, but I can't say for sure... The JS seems to take a while to load for sure.

2022-02-04.20-57-14.mp4
mondeja commented

Only the first icons, those displayed in the screen, load at start, so it looks good.