Alright, page speed, here we go!
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!
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.
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.
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!
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.
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:
- 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.
- From the template picker, select the โAMPโ content type to view AMP templates and make a selection.
- 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.
- 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.
- 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 redirected and served the AMP version, resulting in a near-instant loading experience.
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.
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!