How I Saved 5GB of Storage Per Year for UMB.FYI

7 min read

As the editor of UMB.FYI — the weekly newsletter for the Umbraco community — I try to deliver the news in a clean, easy-to-digest format without any unnecessary fluff. So last year, when I noticed Gmail starting to clip my emails with that dreaded “[Message Clipped] View entire message” footer, I knew something wasn’t quite right.

Gmail clipping message

I dug in and discovered that the HTML for my email was weighing in at 215KB. That’s 215KB for a simple, text-only newsletter — no images, minimal styling, no fluff. Just text. That file size felt wildly excessive.

The Problem: HTML Bloat from Overzealous Styling

Originally, I built the newsletter using Maizzle, which is a great framework for building HTML emails. However, I didn’t think much about how my styles were handled — especially global selectors like:

* { margin: 0; padding: 0; }
p { font-family: sans-serif; line-height: 1.5; }

What I didn’t realize was that my email platform — Mailcoach — was inlining all of these styles onto every single matching HTML element. And when you use broad selectors like * or p, that means everywhere. This massively ballooned the size of the final markup.

That’s a problem because Gmail clips any email with more than ~102 KB of HTML, hiding the rest behind a “[Message clipped] View entire message” link. Even tiny inefficiencies get amplified once CSS gets inlined across hundreds or thousands of elements.

The Fix: Strip It Down and Be Precise

To fix it, I rolled up my sleeves and started rewriting the HTML by hand. I focused on:

  • Using the absolute minimum markup necessary
  • Avoiding unnecessary wrappers or divs
  • Removing global selectors entirely
  • Only applying styles where strictly needed

So what previously came out looking like:

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 18px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; table-layout: fixed; margin: 0 auto; background-color: #fefefe !important; color: #010101 !important;">
    <tbody style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 18px;">
        <tr style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 18px; background-color: #fefefe !important; color: #010101 !important;">
            <td class="container" style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 18px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fefefe !important; color: #010101 !important; padding: 15px 15px;">
                <div class="text-block" style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 18px; background-color: #fefefe !important; color: #010101 !important;">
                    <span style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 18px; background-color: #fefefe !important; color: #010101 !important;">
                        📰 <a href="https://umbraco.com/blog/uprofile-october-2023-laura-weatherhead/" style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: inherit !important; text-decoration: underline !important;"><span style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 18px; background-color: #fefefe !important; color: #010101 !important;"><strong style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 18px;">uProfile October 2023 - Laura Weatherhead</strong></span></a>
                            <br style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 18px;">
                            <br style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 18px;">
                            <span style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 18px; background-color: #fefefe !important; color: #010101 !important; font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;">Meet Laura Weatherhead, a 5x Umbraco MVP and Full-stack .NET Developer with a decade of experience. She contributes actively to the Umbraco community, speaks at events, and co-hosts a podcast. Laura values Umbraco's openness and honesty. Currently, she's working on an Umbraco headless solution and enjoys circus training and unique experiences. </span>
                    </span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Now came out looking much cleaner and more targeted.

<table id="umbfyi-item-e4cfbad3-3be8-4f72-b189-b774d4b72956" border="0" cellpadding="0" cellspacing="15" width="100%" class="h-entry" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed; margin: 0 auto;">
    <tbody>
        <tr>
            <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                <h3 class="prose" style="mso-line-height-rule: exactly; padding: 0; margin: 0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #010101 !important;">
<span aria-hidden="true">📰 </span><a class="u-url" href="https://umbraco.com/blog/web-hacking-101/?utm_source=umbfyi&amp;utm_medium=email" target="_blank" rel="noopener" style="color: inherit !important; text-decoration: underline !important;"><span class="p-name" style="overflow-wrap: break-word;">Web Hacking 101: Hands-On Security Workshop at Codegarden</span></a>
</h3>
                    <p class="prose" style="padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #010101 !important; margin: 15px 0 0 0; overflow-wrap: break-word;">In his workshop held on June 17, 2025, Steven Harland introduced developers to web security testing using Burp Suite, emphasizing the importance of security knowledge for application developers. Participants engaged in hands-on exercises with a vulnerable Umbraco application, enhancing their skills in identifying and mitigating security vulnerabilities.</p>
                    <p class="prose" style="padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #010101 !important; margin: 5px 0 0 0;">
                            <span style="white-space: nowrap;" class="p-author h-card">
                                [ <a href="https://umb.fyi/@umbraco" title="View articles by Umbraco" target="_blank" class="u-url p-name" rel="author" style="color: inherit !important; text-decoration: underline !important;">@Umbraco</a> ]
                            </span>
                            <span style="white-space: nowrap;">
                                [ <a href="https://umb.fyi/tag/security" title="View articles tagged #security" target="_blank" style="color: inherit !important; text-decoration: underline !important;">#security</a> ]
                            </span>
                    </p>
            </td>
        </tr>
    </tbody>
</table>

By avoiding styles that apply to every element, I drastically reduced how much inlining Mailcoach needed to do. And once I ditched the global rules, the difference was staggering.

The Result: From 215KB to 57KB

After optimization, the final size of the newsletter HTML came in at just 57KB — well under Gmail’s clipping threshold and much more in line with what you’d expect for a text-based email.

File size before optimization
File size before optimization.
File size after optimization
File size after optimization.

Why That Matters: 5GB Saved Over a Year

That 158KB reduction might not seem like much in isolation. But UMB.FYI goes out to just over 680 subscribers every week. Multiply that over a year:

  • 158KB saved per email
  • × 680 subscribers
  • × 52 weeks

That’s a total of 5.6GB of saved email storage annually — just by tightening up some HTML and CSS.

And that’s 5.6GB of data that, let’s face it, would likely just sit in people’s inboxes forever — unread, untouched, and slowly piling up.

Over time, that kind of digital clutter becomes what’s known as “dark data” — information that’s stored but never actually used. And it’s surprisingly common: around 68% of corporate data is never accessed again after it’s created.

That unused data still consumes electricity though — constantly. It sits on servers that require energy for power and cooling. According to Mike Berners-Lee, a single email can emit anywhere from 0.2g to 17g of CO₂, depending on size and attachments.

And with data centers already accounting for around 2% of global emissions, and projected to use up to 6% of the UK’s total electricity by 2030, trimming your newsletter’s size isn’t just good practice — it’s a step toward more sustainable digital habits.

Takeaways

  • Watch out for global styles in your email templates — especially when using a platform that inlines them
  • Inline styles are great for compatibility, but they can bloat your markup fast if not used carefully
  • You probably don’t need as much HTML as you think
  • Small efficiencies, when scaled, can lead to huge savings

If you’re building emails at any scale, it’s worth taking the time to optimize. Your subscribers (and their inboxes) will thank you — and you’ll avoid annoying Gmail clipping too.

Until next time 👋