Is ERB faster than plain HTML?

Photo by Valery Sysoev on Unsplash

When it comes to web development, squeezing out every bit of performance matters, especially in scenarios where resources are limited or milliseconds count. In Rails, developers have the flexibility to use ERB (Embedded Ruby), HAML, Slim, among other syntaxes, for building templates. While there are comprehensive articles discussing performance differences among these syntaxes, like the one by Diogo Souza, which is definitely worth checking out, my curiosity was piqued specifically about the execution speed disparities between ERB and plain HTML.

ERB allows embedding Ruby code within HTML, providing a dynamic way to generate HTML content by executing Ruby code. On the contrary, standard HTML involves crafting HTML without embedded Ruby code, which presumably incurs less overhead than converting ERB into plain HTML.

To gauge the performance variance, I conducted a benchmark test, inspired by Diogo Souza’s article. Using Ruby 3.1.2 and Rails 7.0.7.2, I set up a test file utilizing both HTML and ERB examples with similar content structures:

require 'erb'
require 'benchmark'
require 'ostruct'
include ActionView::Helpers::TagHelper

notes = OpenStruct.new title: 'Write an essay', description: 'My essay is about...', randomList: (0..50).to_a.sort{ rand() - 0.5 }[0..10000]

html_example = <<-HTML_EXAMPLE
<span><%= notes.title %></span>
<span><%= notes.description %></span>
<% notes.randomList.each do |note| %>
  <p><%= note %></p>
<% end %>
HTML_EXAMPLE

erb_example = <<-ERB_EXAMPLE
<%= content_tag :span, notes.title %>
<%= content_tag :span, notes.description %>
<% notes.randomList.each do |note| %>
  <%= content_tag :div, note %>
<% end %>
ERB_EXAMPLE

context = OpenStruct.new(notes:)

Benchmark.bmbm(20) do |bcmk|
  bcmk.report("html_test") { (1..2000).each { ERB.new(html_example, trim_mode: '-', eoutvar: '__result').result(context.instance_eval { binding }) } }
  bcmk.report("erb_test") { (1..2000).each { ERB.new(erb_example, trim_mode: '-', eoutvar: '__result').result(context.instance_eval { binding }) } }
end

The benchmark results displayed a noticeable difference:

Rehearsal --------------------------------------------------------
html_test              0.290454   0.002466   0.292920 (  0.293045)
erb_test               0.659927   0.005048   0.664975 (  0.665158)
----------------------------------------------- total: 0.957895sec

                           user     system      total        real
html_test              0.272787   0.000173   0.272960 (  0.272977)
erb_test               0.664616   0.001741   0.666357 (  0.666432)

From these results, it’s evident that plain HTML outperforms ERB by more than two times in Rails view pages.

The discrepancy in execution speed is comprehensible considering that ERB content demands parsing and interpretation during rendering, leading to a higher compilation overhead compared to standard HTML.

While ERB allows for more complex Ruby logic within the view, potentially increasing processing time, it offers improved maintainability due to its dynamic nature.

One way to strike a balance between performance and functionality can be utilizing view components. These components enable segregating Ruby logic into a component controller while incorporating as much plain HTML into the component template as possible.

It’s worth to note that choosing between plain HTML and ERB hinges on the specific context of your application and development environment. While plain HTML boasts faster load and render times, ERB’s versatility allows for the creation of intricate and efficient templates. Considering performance optimization, developers should align their approach with project requirements for maintainability, readability, and performance, employing best practices to ensure an efficient rendering process and an optimal user experience.