diff --git a/web/src/emoji_picker.js b/web/src/emoji_picker.js
index c7fe6591ac..70bd877dda 100644
--- a/web/src/emoji_picker.js
+++ b/web/src/emoji_picker.js
@@ -4,6 +4,7 @@ import emoji_codes from "../../static/generated/emoji/emoji_codes.json";
 import * as typeahead from "../shared/src/typeahead";
 import render_emoji_popover from "../templates/emoji_popover.hbs";
 import render_emoji_popover_content from "../templates/emoji_popover_content.hbs";
+import render_emoji_popover_emoji_map from "../templates/emoji_popover_emoji_map.hbs";
 import render_emoji_popover_search_results from "../templates/emoji_popover_search_results.hbs";
 import render_emoji_showcase from "../templates/emoji_showcase.hbs";
 
@@ -662,9 +663,18 @@ function get_default_emoji_popover_options() {
         },
         onMount(instance) {
             const $popover = $(instance.popper);
+            // Render the emojis after simplebar has been initialized which
+            // saves us ~30% time rendering them.
+            $popover.find(".emoji-popover-emoji-map .simplebar-content").html(
+                render_emoji_popover_emoji_map({
+                    message_id: current_message_id,
+                    emoji_categories: complete_emoji_catalog,
+                    is_status_emoji_popover: user_status_ui.user_status_picker_open(),
+                }),
+            );
             refill_section_head_offsets($popover);
-            register_popover_events($popover);
             show_emoji_catalog();
+            register_popover_events($popover);
             change_focus_to_filter();
         },
         onHidden() {
diff --git a/web/templates/emoji_popover_content.hbs b/web/templates/emoji_popover_content.hbs
index ec6ffc27ad..7ec8a49530 100644
--- a/web/templates/emoji_popover_content.hbs
+++ b/web/templates/emoji_popover_content.hbs
@@ -9,14 +9,6 @@
         {{/each}}
     </div>
     <div class="emoji-popover-emoji-map" data-simplebar data-simplebar-auto-hide="false" data-message-id="{{message_id}}">
-        {{#each emoji_categories }}
-            <div class="emoji-popover-subheading" data-section="{{name}}">{{name}}</div>
-            <div class="emoji-collection" data-section="{{name}}">
-                {{#each this.emojis }}
-                    {{> emoji_popover_emoji type="emoji_picker_emoji" section=@../index index=@index message_id=../../message_id is_status_emoji_popover=../../is_status_emoji_popover emoji_dict=this}}
-                {{/each}}
-            </div>
-        {{/each}}
     </div>
     <div class="emoji-search-results-container" data-simplebar data-simplebar-auto-hide="false" data-message-id="{{message_id}}">
         <div class="emoji-popover-results-heading">{{t "Search results" }}</div>
diff --git a/web/templates/emoji_popover_emoji_map.hbs b/web/templates/emoji_popover_emoji_map.hbs
new file mode 100644
index 0000000000..87dc5f20f1
--- /dev/null
+++ b/web/templates/emoji_popover_emoji_map.hbs
@@ -0,0 +1,8 @@
+{{#each emoji_categories }}
+    <div class="emoji-popover-subheading" data-section="{{name}}">{{name}}</div>
+    <div class="emoji-collection" data-section="{{name}}">
+        {{#each this.emojis }}
+            {{> emoji_popover_emoji type="emoji_picker_emoji" section=@../index index=@index message_id=../../message_id is_status_emoji_popover=../../is_status_emoji_popover emoji_dict=this}}
+        {{/each}}
+    </div>
+{{/each}}