AMA: Let's Talk AMP & Page Speed 🚀

amp
page-speed

#1

Alright, page speed, here we go! :rocket:

We’ve shared data that conversions fall by 12% for every second a page takes to load and that 53% of smartphone users will abandon a page entirely if it takes more than 3 seconds to load. Those are pretty scary numbers. For paid advertisers, those stats could mean a good chunk of budget wasted on ad clicks that never get to your pages in the first place.

In the past year and a bit, Google’s made a few moves showing us that they aren’t joking around anymore when it comes to page speed. In fact, looking at the way they’re moving, we predict that 2019 is going to be the year of page speed and most marketers are going to struggle to keep up. But we’ve got your back.

In this post, we’ll address some of your questions from our page speed AMA, and share a few nuggets on how Unbounce is optimizing your landing pages for speed to get you faster pages, a better end user experience, more conversions and less budget wasted on bounced clicks.

First up, let’s address the elephant in the room…

The AMP private beta has launched! :amp:

We’ve been testing AMP with a small-ish cohort of customers but will be opening it up to all Premium & Enterprise customers in the not-too-distant future. If you want to convert more with lightning fast landing pages, drop us your email on this landing page and you’ll be the first to know when we open it up.

And now, to your questions!

I roped in our product manager, @Cole_Derochie, two of our software developers working on our page speed assignments, @Mark_Wainwright and @Noah as well as @Rob, one of our technical support coaches to help answer some of your questions.

1. Is there a checklist I can follow to optimize my pages for speed?

There sure is! There are a number of page speed tools that will provide you with a score as well as “optimization suggestions” that you can implement to improve your page’s performance.

  • Google PageSpeed Insights is our go-to as it gives concrete tips to improve your page speed. PageSpeed Insights isn’t actually testing the load time of your page – it’s crawling it to look for potential improvements. Some of these improvements are easy for marketers to implement (like compressing images) and others that you need a dev or your landing page platform to handle cause it’s super technical. Great news! Unbounce now handles this stuff for you automatically. Check out the Speed Boost feature below.
  • For straight up speed, Webpagetest is fantastic since it runs three separate tests and takes the average. It gives the best information imho.
  • The Unbounce Support team uses Pingdom pretty frequently as it’s a bit more user friendly.

-@Rob

PS. Stay tuned in the community where we’ll be sharing a checklist of speed optimization tips so you can see what Unbounce handles on your behalf, and what you need to do to keep your pages loading lickity splt.

2. What’s the best way to optimize JavaScript that’s been added to an Unbounce page?

  • When using inline JavaScript, you want to ensure that it’s minified – Unbounce now does this for you automatically where possible
  • Use native functionality whenever you can as this reduces extra scripts.
  • Where possible, add scripts ‘Before Body End Tag’. Scripts in the head of your document will slow down the rendering of your page
  • If using scripts with an external src, use the async version if you can. This stops render blocking and makes your page appear to load faster. (<-- Fun fact, “speed” according to Google is measured by time to render and interactivity which is why this is so important).
  • Avoid importing external libraries or multiple versions of external libraries where possible.

-@Noah

3. Can I apply JavaScript to the Unbounce page itself, instead of the domain?

Absolutely. While you can add JavaScript automatically across all standard landing pages on a domain using Script Manager (super handy for codes and tracking scripts and you want automatically installed so you don’t forget to set them up), you can also add it per page too.

Checkout this article to see how to add JavaScript to an Unbounce page within the Unbounce content builder.

-@Cole_Derochie

4. What are your recommendations for compressing/optimizing images? Any favorite tools?

Soon we’re going to roll out Auto Image Optimizer which will automatically compress the images on your landing pages (you can still decide how much or little compression you want) so that you don’t have to compress your images outside of Unbounce.

Otherwise, I personally have always used TinyPNG (https://tinypng.com/) or TinyJPG (https://tinyjpg.com/) but there are many out there.

We’ll let you know as soon as Auto Image Optimizer is released!

-@Cole_Derochie

5. How does Unbounce manage image size / compression with the new 2x and 3x resolution feature? Will screens with lower resolution be sent a smaller resolution so they load faster?

Yes, they sure will. We send each visitor the smallest possible image for their screen resolution, i.e. only higher-resolution displays will be sent the larger versions of images. This goes for image elements and background images.

-@Mark_Wainwright

6. How do I get into Unbounce’s AMP beta?

AMP is a new framework that helps you engage mobile users and increase conversions with near-instant, Google-approved landing pages that load up to 85% faster than non-AMP pages. They’re lightning fast mobile landing pages but since it’s a new framework, it can be a bit of a pain for developers to learn from scratch (not to mention the validation required to keep ‘em running properly).

We’re currently testing AMP with a closed group of customers but will be opening it up to all Premium & Enterprise customers soon. If you want to convert more with lightning fast landing pages, drop us your email on this landing page for an invite when we move into AMP open beta.

7. How do I set up an AMP page with Unbounce?

First, you need to be in the beta (see the previous question) and then:

  1. Once you are logged into Unbounce, click the “Create New” button in the top-left corner. This will take you to Unbounce’s template picker.
  2. From the template picker, select the “AMP” content type to view AMP templates and make a selection.
  3. After you’ve made a selection and named your AMP, click “Start with this template"; and you’ll be brought into the Content Builder where you can build your page to match your brand.
  4. When you are satisfied with your design, click “Save” and then “Overview” to be brought to your AMP’s overview screen. This is where you will be able to set the URL of your AMP, track it’s performance, and manage your leads.
  5. You’ll also see an option to “Link AMP Page to a Separate Canonical Page”. Follow the instructions provided, and embed the HTML snippet into the [head] of your regular “canonical” landing page.

Once everything is set up, be sure to publish your AMP and as long as the redirect link is embedded on your canonical page, mobile visitors coming through AMP supported channels (listed here: https://www.ampproject.org/support/faqs/supported-platforms) will be automagically :star2: redirected and served the AMP version, resulting in a near-instant loading experience.

-@Cole_Derochie

8. Can I add custom JavaScript to AMP pages?

Yes and no. But mostly yes. Though also no. It depends.

The AMP framework doesn’t support author-written JavaScript – that restriction is part of what makes their pages blazingly fast. Instead, interactive page features are handled with custom AMP components. These AMP components may have JavaScript under the hood, but they’re carefully designed to make sure they don’t cause performance degradation.

The great news is that unlike other platforms, Unbounce lets you add any AMP compatible custom JavaScript to your AMP pages.

See https://ampbyexample.com/#components and https://www.ampproject.org/docs/reference/components

AMP pages allow third-party JavaScript but only in sandboxed iframes. By restricting them to iframes, they can’t block the execution of the main page. Even if they trigger multiple style re-calculations, their tiny iframes have very little DOM.

-@Cole_Derochie

9. AMP is great for mobile, but how does Unbounce improve page speed overall?

AMP isn’t for everyone. And besides, page speed matters on desktop and mobile. AMP is one solution for page speed, but it is not the solution.

We’re constantly working behind the scenes to make Unbounce the highest performing landing page and conversion platform on the market. Here are a couple recent improvements we’ve made and other key features that help deliver superfast pages – and therefore, better user experience and higher conversions.

Speed Boost [NEW]

We’ve made a ton of changes to how your pages are structured and served based on recommendations from Google’s PageSpeed Insights. You won’t see any difference since it’s all behind the scenes, but you will see an improvement to your Google PageSpeed Insights Score and ultimately, your page speed. Just republish your pages to take advantage of this update.

SVG Images [NEW]

You can use SVG images on your landing pages to keep your image files size super-small and super-high quality, while optimizing your pages for speed.

Background Image Optimization [NEW]

Late in the summer we made some improvements to the way your background images are handled. If you have existing pages with big background images, all you’ll need to do to benefit from the optimization is republish your page. There shouldn’t be any visual differences, but the served images will be smaller and your page will load faster.

Auto Image Optimizer [COMING SOON]

Our soon-to-be-released Auto Image Optimizer will automatically compress your images while balancing image quality and size for high quality images and fast loading pages.

5 Worldwide Data Centers

Unbounce has data centers in California, Northern Virginia, Ireland, Singapore and Frankfurt. We keep your Unbounce content loading fast across the world by directing requests from your page visitors to the server closest to them.

CDN Acceleration

Leveraging AWS Cloudfront, Unbounce distributes your content from servers all around the world, which allows your landing pages, popups, and sticky bars to load quickly from any location.

…and while we’ve got you, here are some other recent improvements we’ve released

Drag + Drop images into the builder [NEW]

This isn’t a page speed improvement itself, but now, you can select multiple images and drag them directly to the canvas in the content builder without having to open the Image Library. With the upcoming Auto Image Optimizer it’ ll make your life a lot easier when adding and automatically optimizing images.

Free Unsplash Integration [NEW]

Unbounce is the only platform that gives you access to Unsplash’s free library of 600,000+ photos for your campaigns! You can easily pull these Unsplash photos onto your landing pages from your image library in the content builder. And with the way Unbounce handles your page images, you can rest assured we’ll optimize them for speed and quality for you, automatically!


That’s a wrap!

We’re making big investments to ensure that you can build landing pages that offer better user experiences for your visitors, getting more visitors to stay on your page and ultimately convert. Nobody wants to waste ad budget on bounced clicks. 2019 is the year for page speed, and with all the improvements listed above, we’re making sure you’re ahead of the game.

As always, I encourage more questions regarding page speed. I’ll make sure our team is at the ready to handle any further discussion topics.

Hit reply and let’s talk page speed!


#2

Yeessssss! I feel the need (for speed). :rocket:


#3

Just tried to fill out the AMP waitlist form and got errors over and over again!


#4

Hey @Ben.hicks,

That’s strange. Could you let us know what browser you were using and maybe provide a screenshot of the errors please?

Thanks
Brian


#5

Hey Ben!

I’ve looped in @Brian_Burns to help investigate why that might be happening, we’re not seeing any errors on our side here so hopefully his expertise will be helpful :slight_smile: Stay tuned!


#6

#7

Screenshot below. This time I got a thank you with error messages. Before it was just error messages. No big deal to get it fixed on my end. I had my coworker fill it out, and it worked fine for him.
Browser: Chrome 69.03… Windows 10


#8

Thanks for that @Ben.hicks. I’ve taken a look and published a fix. The page should be working properly now after a hard refresh. Sorry about that!
Brian


#9

Hi,

Just wanted to share this with you.

Chrome browser.

Error message appeared after successful submit.


#10

Hey @andreasobel,
Thanks. Taking a deeper look into it now.


#11

Sign me up as a beta tester for Auto Image Optimizer!


#12

Hey @Phillip - sounds great! The process with that feature will be pretty quick but our Product Manger @Cole_Derochie will be in touch.