Explore performance improvements (with icon helper)

[igorkasyanchuk]

First of all, I really like the gem, and I use it and recommend it.

I want to share an interesting observation, I have a page and I have maybe lets say 100-500 icons on edit (edit, delete, etc).
And I decided to work on improvements how to make page load faster.
One of the unexpected observations is that poor page performance was because of the icons embedded into HTML page.

So, when I did this (moved some of the icons to CSS)

.ellipsis-vertical-icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBjbGFzcz0ic2l6ZS02Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xMiA2Ljc1YS43NS43NSAwIDEgMSAwLTEuNS43NS43NSAwIDAgMSAwIDEuNVpNMTIgMTIuNzVhLjc1Ljc1IDAgMSAxIDAtMS41Ljc1Ljc1IDAgMCAxIDAgMS41Wk0xMiAxOC43NWEuNzUuNzUgMCAxIDEgMC0xLjUuNzUuNzUgMCAwIDEgMCAxLjVaIiAvPgo8L3N2Zz4K");
background-size: cover;
background-repeat: no-repeat;
}

I got maybe 20-30% page speed improvement.

So I want to share an idea for the feature. What if we can automate this CSS generation, based on some yaml, it will create CSS for all icons or specific.

PS: maybe I'll try to find time to implement it, if it makes sense. It can actually also be a standalone gem.

[eelcoj]

Appreciate you taking the time for this @igorkasyanchuk. 🙌

I'm all for improving performance; it's been on my list already as well.

Unless my knowledge is heavily out-of-date, base64-encoded icons loose a lot of the flexibility inline SVG give you (similar to how font icons work; I am not a fan of those). I'm also not sure how this would be implemented unless with a static list of icons/pre-defined CSS. Adding lots of maintenance burden when any of the libraries gets updated (which I tried to remove with the current Rails Icons). What do you think?

There are some (semi) low-hanging fruit options that I noted are worth exploring:

Caching:

# https://github.com/Rails-Designer/rails_icons/blob/main/lib/rails_icons/helpers/icon_helper.rb#L8
def icon(name, library: RailsIcons.configuration.default_library, variant: nil, **arguments)
  cache_key = "icon/#{library}/#{name}/#{variant}"
        
  Rails.cache.fetch(cache_key) do
  # rest of method
  end
end

Optimize parsing:

# https://github.com/Rails-Designer/rails_icons/blob/main/lib/rails_icons/icon.rb#L12
def svg
  raise RailsIcons::IconNotFound, error_message unless File.exist?(file_path)
  
  @svg_document ||= begin
    doc = Nokogiri::HTML::DocumentFragment.parse(File.read(file_path))
    doc.at_css("svg")
  end
  
  svg_clone = @svg_document.clone
  attach_attributes(to: svg_clone)
  svg_clone.to_html.html_safe
end

Replace/remove nokogiri:

# https://github.com/Rails-Designer/rails_icons/blob/main/lib/rails_icons/icon.rb#L12
def svg
  raise RailsIcons::IconNotFound, error_message unless File.exist?(file_path)
  
  File.read(file_path).sub(/<svg/, "<svg #{attributes_string}")
end

private

def attributes_string
  # …
end

And then there are things the developer can do, e.g. caching the view.

These are all just some ideas and not sure if they would make any difference or work at all. The first step before any performance tweaks are explored is to find the (biggest) culprit in the code first.