website is too slow

[shayan0v0n]

I was waiting for website for load whole document about 2m

[MicLieg]

I solved this issue by only loading the actual images from shields.io on hover of the <li> element and displaying a tiny gif as placeholder:

each icon in icons
          li.grid-item(
            style=`--order-color: ${icon.indexByColor}`,
            data-brand=`${icon.normalizedName}`,
            data-title=`${icon.title}`,
            data-encoded_title=`${icon.badgeEncodedTitle}`,
            data-color=`${icon.shortHex}`,
            data-logo_color=`${icon.superLight ? '000' : 'fff'}`,
            data-slug=`${icon.slug}`
          )
            .grid-item__row.mv-2.fg-2
              button.grid-item__preview.copy-button.copy-svg(
                title=`${icon.title} SVG`,
                data-style='for-the-badge',
                disabled
              )
                img.icon-preview(
                  src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
                  data-src=`https://img.shields.io/badge/${icon.badgeEncodedTitle}-${icon.shortHex}?logo=${icon.slug}&logoColor=${icon.superLight ? '000' : 'fff'}&style=for-the-badge`,
                  loading='lazy',
                  alt=`${icon.title} badge`
                )
            .grid-item__row
              if icon.guidelines
                a.grid-item__link.link-button(
                  title=`${icon.title} guidelines`,
                  href=icon.guidelines,
                  rel='noopener',
                  target='_blank'
                ) Brand Guidelines
              if icon.license
                a.grid-item__link.link-button.icon-legal(
                  title=`${icon.title} icon license`,
                  href=icon.license.url,
                  rel='noopener',
                  target='_blank'
                ) #{ icon.license.type }
              h2.grid-item__title #{ icon.title }
            .grid-item__footer
              button.grid-item__color.copy-button.copy-color(
                title=`${icon.title} Flat Badge`,
                data-style='flat',
                disabled
              ) Flat
              button.grid-item__color.copy-button.copy-color(
                title=`${icon.title} Square Badge`,
                data-style='flat-square',
                disabled
              ) Square
              button.grid-item__color.copy-button.copy-color(
                title=`${icon.title} Plastic Badge`,
                data-style='plastic',
                disabled
              ) Plastic

Of course, commenting out the <img> works too:

each icon in icons
          li.grid-item(
            style=`--order-color: ${icon.indexByColor}`,
            data-brand=`${icon.normalizedName}`,
            data-title=`${icon.title}`,
            data-encoded_title=`${icon.badgeEncodedTitle}`,
            data-color=`${icon.shortHex}`,
            data-logo_color=`${icon.superLight ? '000' : 'fff'}`,
            data-slug=`${icon.slug}`
          )
            .grid-item__row.mv-2.fg-2
              button.grid-item__preview.copy-button.copy-svg(
                title=`${icon.title} SVG`,
                data-style='for-the-badge',
                disabled
              )
                //img.icon-preview(
                //  src=`https://img.shields.io/badge/${icon.badgeEncodedTitle}-${icon.shortHex}?logo=${icon.slug}&logoColor=${icon.superLight ? '000' : 'fff'}&style=for-the-badge`,
                //  loading='eager',
                //  alt=`${icon.title} badge`
                //)
            .grid-item__row
              if icon.guidelines
                a.grid-item__link.link-button(
                  title=`${icon.title} guidelines`,
                  href=icon.guidelines,
                  rel='noopener',
                  target='_blank'
                ) Brand Guidelines
              if icon.license
                a.grid-item__link.link-button.icon-legal(
                  title=`${icon.title} icon license`,
                  href=icon.license.url,
                  rel='noopener',
                  target='_blank'
                ) #{ icon.license.type }
              h2.grid-item__title #{ icon.title }
            .grid-item__footer
              button.grid-item__color.copy-button.copy-color(
                title=`${icon.title} Flat Badge`,
                data-style='flat',
                disabled
              ) Flat
              button.grid-item__color.copy-button.copy-color(
                title=`${icon.title} Square Badge`,
                data-style='flat-square',
                disabled
              ) Square
              button.grid-item__color.copy-button.copy-color(
                title=`${icon.title} Plastic Badge`,
                data-style='plastic',
                disabled
              ) Plastic