Hello Test Saving Issue’s

📧 Email Template Optimization Plan

Reducing Clipping Issues and Email Size for Improved Deliverability

---

Overview

Our current email template is in a stable state and has served us well through the initial stages of development. However, as our newsletter products and features continue to expand, the cumulative impact on email size has become a significant concern. In particular, some of our newsletters — especially The Daily Update (TDU) — are being clipped in Gmail due to exceeding the ~132KB size limit in our case (the official benchmark is 102KB).

While MJML was an ideal choice for our initial templating needs due to its flexibility and abstraction, we are now hitting the boundaries of what it can offer in terms of low-level control and optimization. This proposal outlines the steps we can take to address clipping, reduce email size, and future-proof our templates for scalability.

---

Why Clipping Happens & How We’ve Managed It So Far

Clipping causes:

• Occurs mostly in TDU newsletters
• Caused by a combination of block variety and block quantity
• Gmail clips emails larger than ~132KB of HTML

Current workarounds:

• Manual removal of entire sections prior to launch
• Tradeoffs between content and deliverability

While effective short-term, these approaches are not scalable or sustainable as we continue to grow our content and offerings.

---

Template Structure

Our current template is composed of three main parts, each wrapped using MJML syntax:

• Header (full-width wrapper)
• Body (center-aligned wrapper)
• Footer (full-width wrapper)
  

Each content block is rendered inside its own MJML wrapper, which adds multiple nested elements and Outlook-specific fixes by default. This creates a bloated DOM and contributes significantly to the overall size.

---

Optimization Strategies

We estimate we can reduce email size by up to 30KB by applying the following strategies:

---

1. Context-Based Rendering

Instead of rendering each block with a full MJML wrapper, we can render them based on context-aware logic. This allows us to:

• Consolidate wrapper usage to just three main sections
• Remove redundant markup and Outlook fixes
• Optimized dividers and spacers
  

Simpilified Example:

$mjml[ $context ] .= $this->process_single_block( $block, $inner_block = false, $context = ”, $design_variant );

$mjml = $mjml[‘header’] . $mjml[‘body’] . $mjml[‘footer’];

Benefits:

• Clean, minimal HTML output
• Better control over layout flow
• Lighter and more maintainable code

---

2. Replace MJML with Raw HTML

We can migrate away from MJML entirely and adopt a custom rendering system using table, tr, and td tags. This unlocks more granular control and deeper optimizations.

Benefits:

• Eliminate MJML’s nested div/span structure
• Avoid unnecessary Outlook-specific conditionals
• Render html markup dynamically independent of MJML (for testing and previews)
• Better send wizard performance

---

3. Eliminate SCSS Compilation Overhead

Currently, we compile a single SCSS file that includes styles for all blocks — even those not present in the final email. Current implementation optimizes it by searching, removing and combining styles.

Proposed improvements:

• Dynamically compile only the styles for blocks in use
• Minify and inline CSS selectively
• Use a shared design token system to manage consistency without duplication
  

Potential gain: several kilobytes per email, depending on block usage.

---

Additional Opportunities

• Inline Critical Styles Only: Move toward a hybrid inline style system, applying only what’s necessary at the block level.
• Compress Output HTML: Strip comments, whitespace, and unused attributes during the final render phase.
• Minifying: Minifying classnames, remove quotes/double quotes from specific html attributes.

---

Next Steps

1. Prototype a context-based rendering system.
2. Build a parallel version of one existing newsletter using raw HTML for benchmarking.
3. Replace MJML gradually, starting with the most size-heavy blocks.
4. Review CSS inclusion logic and introduce dynamic SCSS compilation.