diff --git a/app/helpers/page_layout_helper.rb b/app/helpers/page_layout_helper.rb
index 5038dcf9746..ec1d8577f36 100644
--- a/app/helpers/page_layout_helper.rb
+++ b/app/helpers/page_layout_helper.rb
@@ -1,3 +1,4 @@
+# coding: utf-8
 # frozen_string_literal: true
 
 module PageLayoutHelper
@@ -36,7 +37,7 @@ module PageLayoutHelper
     if description.present?
       @page_description = description.squish
     elsif @page_description.present?
-      sanitize(@page_description, tags: []).truncate_words(30)
+      sanitize(@page_description.truncate_words(30), tags: [])
     end
   end
 
diff --git a/changelogs/unreleased/62116-performance-issue-502-errors-on-rendering-of-issues-with-heavy-markdown-contents.yml b/changelogs/unreleased/62116-performance-issue-502-errors-on-rendering-of-issues-with-heavy-markdown-contents.yml
new file mode 100644
index 00000000000..9596f487116
--- /dev/null
+++ b/changelogs/unreleased/62116-performance-issue-502-errors-on-rendering-of-issues-with-heavy-markdown-contents.yml
@@ -0,0 +1,6 @@
+---
+title: Fix performance issue with large Markdown content in issue or merge request
+  description
+merge_request: 28597
+author:
+type: performance
diff --git a/spec/helpers/page_layout_helper_spec.rb b/spec/helpers/page_layout_helper_spec.rb
index cf98eed27f1..bf50763d06f 100644
--- a/spec/helpers/page_layout_helper_spec.rb
+++ b/spec/helpers/page_layout_helper_spec.rb
@@ -38,6 +38,14 @@ describe PageLayoutHelper do
 
       expect(helper.page_description).to eq 'Bold Header'
     end
+
+    it 'truncates before sanitizing' do
+      helper.page_description('<b>Bold</b> <img> <img> <img> <h1>Header</h1> ' * 10)
+
+      # 12 words because <img> was counted as a word
+      expect(helper.page_description)
+        .to eq('Bold    Header Bold    Header Bold    Header Bold    Header Bold    Header Bold    Header...')
+    end
   end
 
   describe 'page_image' do