Article first published in November 2014, updated June 2019
When designing and coding email newsletters from scratch, a good part of the battle is finding ways to reduce your email payload, thus reducing email load times. Writing less and cleaner HTML and CSS code in the process is an upside to this too.
To help us find out ways to meet both of these goals, we asked pro email marketer Becs Rivett to share her tips for speeding up your emails and the workflow that goes into coding them. Becs has worked for several large e-commerce retailers and agencies and, like the trooper she is, confesses to “eat, sleep, and dream about every aspect of email marketing.”
Alongside our tips, we’ll list some of the tools that can help you along the way, as well as the custom settings you can use to produce your best email campaigns yet.
Send faster emails
First of all, I’d like to start with some of the techniques that you need to embrace in order to create and send email campaigns that load speedily in the inbox. Small payloads and fast load times are especially important on cellular data connections, which are, quite frequently, spotty and, on some carriers, are charged by the megabyte. Here’s a few tips to get your newsletter loading in a snap.
Shrink down image sizes.
It’s very easy for image file sizes to spiral out of control. In the age of HDPI and Retina screens, we’re having to make the images much bigger, pushing file sizes up considerably.
For high-speed internet connections this is usually acceptable, and you won’t notice any difference, but, when your internet is slow, your pictures are going to load really slowly. Some email recipients may even ignore the email completely if they can’t see what the email is about in a reasonable amount of time.
Selecting the right file type is really important to ensuring that images remain high quality, even when you’re keeping file sizes to a minimum. To help you decide which file type is right for your image, check out this Litmus post (hint: JPEG and PNG are great, in most instances).
The second step is to squeeze the file size down with image-shrinking tools, without compromising the quality of the images.
For JPEGs, JPEGmini offers both a web-based and desktop app which allow you to compress 20 images/day for free. Purchasing a license will allow you to go beyond this and is very affordable.
For PNGs, I find TinyPNG very useful, especially as it supports image transparency. It has both an online compression tool and a plugin for Photoshop.
If you’re using GIFs, there are online tools that’ll shrink the file, but at the expense of the number of colors used. Reducing GIF file sizes can be more successfully achieved when exporting files from an image editor such as Adobe Fireworks, which provides a variety of export options.
Use fewer images.
This might sound a little obvious, but what many people don’t think about is that each individual image in an email campaign requires a separate request to the server where the image is hosted. These requests can add to load times, and be easily reduced by using images only where necessary (e.g., not for heading text).
Minify your HTML file.
Minifiying code is a common practice when working for the web, so why aren’t we doing the same for our email files?
This strategy is particularly useful if you have long, complex emails with lots of nesting—every indent, every line break, in fact, every bit of code increases your document’s file size. Gmail and Yahoo clip emails over 100kb (not including image file sizes), so keeping your files lean is useful.
Once you’ve got your final version of your email ready, create a minified copy. If you do need to make any changes, do so in the original file, minify, and overwrite the old minified copy on your server, or on your email service of choice.
To minify both whole HTML documents or just snippets of code, I recommend the HTML Minifier.
Send faster emails…faster!
Perhaps just as important as the time it takes for your subscribers to open their email is how long it takes for you to code them. After all, it’s Friday afternoon here and, at times like this, it’s that one email job that comes between a hard-working email coder and a friendly drink with colleagues.
So let’s get moving.
Sort and tidy your HTML and CSS.
This may seem a little pedantic, but there’s nothing nicer than an email developer handing over beautiful code—that is, HTML and CSS that’s indented properly and uses styles and attributes in a clear and concise manner.
The ultimate aim of sorting and tidying code is to create consistency. It helps others troubleshoot code and apply changes. It’s so important to make it easy for someone else to read your code if you regularly have to collaborate with others, but it also makes it much easier to read and comprehend, should you need to return to it at a later date.
The HTML Tidy project set out to help us all with HTML formatting; you put your file in and it spits it out, tidied and sorted. The project seems to have gone quiet over the past few years, but it remains incredibly useful, nonetheless.
I like to sort my HTML attributes for the consistency I mentioned earlier. However, I’ve been unable to find an online tool that allows you to do this. If you’re not bothered about that, then try HTML Tidy, but try changing the following settings from the default for a nicer layout:
Under "Pretty printing" Indent: Yes Wrap: 200
HTML tidy will only format your HTML file, so, to format your CSS code, you might want to try CleanCSS. I’ve noticed that it breaks any media queries (i.e., it removes colons and brackets), so best to process everything within the media query separately, rather than the whole stylesheet at once. We would recommend the following settings for HTML email (listed as they differ from the defaults):
Code Layout: Compression: High Options: Compress colors: No Compress font-weight: No Lowercase selectors: No Case properties: Lowercase Remove unnecessary backslashes: Yes Remove last ; : Yes
If you don’t want to use online tools, you can try GUI TIDY (Windows and Linux), Sublime 2’s Sublime Linter, Coda’s PHP & Web Toolkit, or Beautify for Brackets.
Use shortcuts in your editor
How many times I’ve started to type out <table width=”100%” cellpadding=”0″ cellspacing=”0″… when it’s already in the document. Then, there’s the basics—like meta tags—which I’ve had to ultimately copy and paste from elsewhere. It’s simply much easier to take your most-used code sections and create keyboard shortcuts or snippets from them, and it usually results in much less human error in the long run too.
Thankfully, there are a few tutorials out there about how to set up email-specific shortcuts in your code editor of choice:
- Coda 2
If you’re a Campaign Monitor customer, there’s the Coda 2 Clip for Campaign Monitor Email Templates. Check it out, if you code templates for use in the email editor.
Use templates and frameworks.
When you’re creating emails from scratch, it’s good to start them from a solid foundation, featuring some of the defaults that you use every time. Using templates and frameworks, you can get up and running quickly, without having to know all the email client-specific workarounds by heart.
If you’re coding in an editor, try:
- HTML Email Boilerplate
- ZURB Ink
- Alex Ilhan’s Crowder template
While you might not need all the tricks that each template has pre-loaded, it’s a good starting point and you can always delete what you don’t need.
Don’t forget that you can create your own responsive email templates using the Canvas template builder in Campaign Monitor. While it’s super easy to use these templates in your account directly, it’s also possible to export ready-to-use templates for use on practically any platform.
Choose the right email service provider.
If you’ve exhausted all the “DIY” solutions above and your emails still aren’t sending as quickly as you’d like, then it may be time to look at your email service provider (ESP).
ESPs aren’t the one-trick ponies they used to be. Most ESPs now do more than simply allow a business to send emails. Instead, ESPs now offer all sorts of “extras,” such as the ability to:
- Create email templates
- Upload/maintain an email list
- See analytics/insights of each email or campaign sent
Source: Campaign Monitor
While having all the bells and whistles can be helpful, you need to choose an ESP that suits your individual needs. Not all ESPs are created equally, and that’s why, when you notice a lag in your email productivity, you need to look into your provider. If you’re considering a new one, then you’ll want to make sure you consider the following tips:
- Shoot for an ESP with an average delivery rate of 98% or higher
- Find an ESP that has solid relationships with the internet giants, such as Google
- Choose an ESP that works with their clients to maximize delivery rates high
- See how long it takes to get through to customer service via email or on the phone, in case you have a problem
Bonus Tips: How can I improve my email performance?
Email campaign tips are aplenty, and, while we’ve touched on how to speed up your email sending process, careful attention should be paid to the creation of your campaigns. After all, as important as fast sending is, it means nothing if you’re sending out poor email campaigns to begin with.
What’s the best way to do email marketing?
Here’s the thing: There really is no “best way” to do email marketing. We can give you all the email campaign tips under the moon and they’ll always remain just that—tips. However, one tip will always apply, and that’s to have a solid email marketing strategy.
To improve your email performance, you need to have a plan in place. Your email marketing strategy is what’ll help move your marketing team through the email marketing processes efficiently and effectively, so take the time to create or improve on your email marketing strategy if you’re noticing a lack in productivity and results.
How do you write a successful email campaign?
Once your email marketing strategy is in place, it’s time to sit down and plan out your email campaign. We’ve compiled a short list of email campaign tips to help you write your most successful campaign yet, and they include:
- Implement list segmentation
- Monitoring and understanding your analytics/insights
- Engaging with your existing subscribers
- Always testing before you send
When it comes to speeding up your email campaigns, there are several areas that you’ll want to consider, such as:
- Your ESP—how well is it performing for you?
- Having a quality email marketing strategy in place for guidance
- Cleaning up your campaigns for deliverability