Increasing Marketo Landing Page Conversion Rates by Decreasing Marketo Landing Page Load Time
An idea that has really intrigued me with Marketo is how to make “if-then” tokenized logic in Marketo. “If this is turned on, show this form; if this is on, load this line of Javascript; if this is turned on, load this image.” The solution? Creative use of Marketo text tokens for HTML comments. Not loading heavy elements can mean a significantly smaller page load time, which decreases abandonment rates on your landing pages.
The normal (and easy) solution to this throwing in some CSS {display:none} to hide the resulting load. Hide an image, hide a form, hide a column. The problem with this is that page load time enormously affects conversion rates—as Kyle Rush said in his MozCon 2013 conference talk, every 100 milliseconds of page load could drop the conversion rate by 1%, so decreasing page load time is essential for effective conversion rates on Marketo landing pages.
Just tilt your head sideways.
Welcome to performance-enhancing Marketo token HTML comments. The idea is simple: add an HTML comment, and a line of code loading a 300kb image turns into 30 characters of text.
This is especially useful if you have a large image on most of your landing pages, and you want to clone the same program but don’t want to go back and manually edit the template or landing page itself. The normal way to hide this kind of thing is to throw a .bigPicture{display:none} into your Custom Head HTML and call it good, but browsers load the full size of this image first and then choose not to display it. If you wrap it with a Marketo token that has a default commented value, you can choose when to display it, plan ahead, and not worry about slowing down the user experience with load time—meaning much greater conversion rates on landing pages.
The golden code to decreasing Marketo landing page load times and increasing conversions:
{{my.enablePicture:default=<!–}}<img src=”http://etumos.com/mkto/slide2.jpg”>{{my.enablePicture:default=–>}}
This is commented out by default. If you want to enable it, create an “enablePicture” rich text token with a value of “‌”—this is a “zero width non-joiner” space that has no width when displayed to the user. That means the above code will be rendered as:
<img src=”http://etumos.com/mkto/slide2.jpg”>
Wha-la! Now the resource only loads when you want it to, limiting HTTP requests and page load time/screen-painting time.
If you’re really resourceful, you can use this to create scalable multivariate testing in Marketo templates. Imagine {{my.enableTestingA}} allowing for Javascript, CSS, and image rendering all with one single “if-then” Marketo token.
Make sure to check out this comparison between rich text tokens and text tokens in Marketo to see nuances between the two! This knowledge is incredibly useful for getting the most out of our responsive Marketo landing pate template.
I post interesting little Marketo hacks and workarounds on Twitter all the time. Let’s network.
