KWFinder - find long tail keywords with low SEO difficulty

Increase Your Landing Page Speed (By Stealing Our Homework)

By Garrett Hughes

Increase Landing Page Speed

If you’ve read Unbounce’s 2019 Page Speed Report (and you really should), then you already know why speed is so important this year. Slow-loading landing pages have always been an obstacle to higher conversions, and now Google is punishing poor mobile load times in its search rankings. To be successful in 2019, we—marketers—need to be thinking fast. But are we?

To find out, we polled almost 400 marketers on their attitudes around page speed and asked what (if anything) they were doing to get faster.

Unbounce 2019 Page Speed Report - Graph 1

Just 56% of marketers are happy with their mobile load times, according to the 2019 Page Speed Report.

Almost three of every four respondents said they had taken steps to improve their page speeds over the last year, and that’s pretty good. Alarmingly, though, only half of marketers we surveyed are satisfied with their load times on mobile.

So most marketers are trying to get faster, but many aren’t where they want to be. Which begs the question: what are people doing to speed up their landing page load times?

Computer, enhance!
Unbounce 2019 Page Speed Report - Graph 2

Only 39% of marketers have bothered to find out how fast their pages are actually loading. Not great.

Here, we start to see why marketers are somewhat pessimistic about their page speed progress. Just over half have optimized their landing page images—ostensibly one of the simplest ways to speed up your load times—and even fewer have done any of the real technical-sounding things they need to get faster. (I mean, fair, they sound pretty boring to us, too.)

Here’s a doozy, though: just one in three marketers have run a website speed test to find out whether their load times are impacting their conversions. That’s the easiest one!

And hey, we get it. Marketers are being asked to do more than ever before, often with fewer resources. If you’re a small team (or a single person, the smallest of the teams), you might feel you don’t have the time or expertise to meaningfully improve your page speed.

But I’ve gone and done the hard work for you—me, a film school graduate who, until recently, believed that his Apple computer was impervious to viruses. (Hoo boy, it is not.) I’ve spent hours talking to Unbounce developers, reading how-to guides, and generally just bombarding my brain with the most dull, technical page speed information I could get ahold of. (Apologies to said developers.) And if I can get my head around it, there’s no excuse for the rest of you.

Below, I’ve simplified some of the most effective ways to increase your landing page loading times in a guide. For each fix, I’ve indicated the technical difficulty and the estimated time it’ll take, so you know exactly what you’re getting yourself in to. Use the table of contents below to jump to what’s relevant to you, or go ahead and do it all in order.

Jump to a Landing Page Speed Fix

How to Check Your Landing Page Speed

  • Run a Google Speed Test (5 Minutes)
  • Try the Unbounce Landing Page Analyzer (5 Minutes)

Improve Your Landing Page Speed: Easy Fixes

  • Reduce Your Page Content (15 Minutes)
  • Optimize Your Images (30 Minutes)
  • Host Your Videos Elsewhere (30 Minutes)
  • Audit Your Hosting Solution (30 Minutes)
  • Implement a CDN (30 Minutes)

Improve Your Landing Page Speed: Intermediate Fixes

  • Minify HTML, JS, and CSS (15 Minutes)
  • Enable Browser Caching (15 Minutes)
  • Set Up GZIP Compression (15 Minutes)
  • Kill Needless Scripts and Plugins (30 Minutes)
  • Convert Images to Sprites (30 Minutes)

Improve Your Landing Page Speed: Hard Fixes

  • Remove Render-Blocking JS and CSS (45 Minutes)
  • Start Hand-Coding with AMP

Final note: If you’ve built your page with Unbounce, you can skip a lot of this stuff—we make many speed fixes on the back-end automatically. In this post, look for the ‘Building Pages in Unbounce?‘ callout boxes to see if a given fix is something you need to implement.

Look for these callout boxes throughout this post to get Unbounce-specific tips and learn how we automatically optimize your landing pages to make them load super fast.

How to Check Your Landing Page Speed

First things first.

Before you throw on your hard hat and start hitting things with a hammer (both figuratively and literally), it’s important to have some idea of what’s working—and what’s not—on your landing page. That means running a speed audit.

It’s important to point out that, regardless of which speed test you use, you don’t want to get too hung up on your score. Achieving a perfect score is not always technically possible (and it might not even be desirable). Instead, use your results as a general guideline to improve page speed and implement the fixes that make sense for you.

Okay—let’s test them pages.

Run a Google Speed Test

Difficulty: Easy / Estimated Time: 5 Minutes

There are a bunch of great tools for testing your page speed, but why not start with the big dog itself? Google’s PageSpeed Insights is an awesome way to do a quick performance check-up with at-a-glance recommendations. (Ryan Engley, Unbounce’s VP of Product Marketing, explains how to interpret and act on your PageSpeed Insights results in this must-read blog post.) Then there’s Lighthouse, a newer tool from Google that provides a comprehensive analysis of your how your page presents to end users.

You’ll also want to run your page through Google’s Test My Site tool, which will check your speed from a mobile perspective.

Google PageSpeed Insights - Results

Clicking on individual results in PageSpeed Insights will reveal your problematic page elements.

Running a Google speed test should only take a couple of minutes, and the results will help you identify some of the top opportunities to boost your landing page load times.

Try the Unbounce Landing Page Analyzer

Difficulty: Easy / Estimated Time: 5 Minutes

Running a speed test with Google should be your top priority, but PageSpeed Insights doesn’t give results tailored to landing pages. For that, you’ll want to run your page through the Unbounce Landing Page Analyzer, which not only provides feedback on page performance but includes a bunch of advice on creating more effective campaigns and kicking your conversions into overdrive.

Unbounce Landing Page Analyzer - Results

Unbounce’s Landing Page Analyzer provides feedback on page speed, but also actionable advice on things like SEO, message match, and mobile-friendliness.
Building Pages in Unbounce? Then you’ll definitely want to give our Landing Page Analyzer a shot. Get best-practice recommendations for conversion optimization and see how your landing pages stack up against others in your industry.

Increase Landing Page Speed - Easy Fixes

Improve Your Landing Page Speed: Easy Fixes

With your results from both Google and Unbounce, you’ll be well-equipped to move onto the actual work of making your page perform better. It’s time to pick up that hammer.

These fixes should be simple enough for anyone to tackle, regardless of their technical expertise.

Reduce Your Page Content

Difficulty: Easy / Estimated Time: 15 Minutes

We’ve marked this as an easy opportunity to increase your page speed, but it probably won’t feel like that when you start thinking about which elements on your page you can junk. Marketers love big hero shots, beautiful supporting imagery, and fun, animated explainer videos. But how much of that content is actually helping you drive conversions?

Visual content accounts for a huge portion of the size of an average web page—images account for over 20% of web page weight, as pointed out by Kinsta—and each element creates an HTTP request. That’s when your visitor’s browser pings your web server to request the files that make up the elements of your page. Too many calls can be a serious drag on your load time, so one of the simplest ways to improve your page speed is cutting down the number of elements you include.

Look at each piece of content on your page critically, then ask yourself: “Does this spark joy?” “Does this increase conversions?” If you don’t think there are pieces you can toss, try running an A/B test with a slimmed-down version of the page. The results might surprise you.

Bottom line: stick to the fundamentals of good landing page design and try to keep the number of elements (and thus HTTP requests) to a minimum.

Building Pages in Unbounce? We recommend that you keep things pretty lean, but we’d never remove content from your landing page. (Must resist… desire… to do best practices…) This is one optimization that you’ll have to tackle on your own.

Optimize Your Images

Difficulty: Easy / Estimated Time: 30 Minutes

Once you’ve trimmed some elements from your page, you’ll want to optimize the content that made the cut. Poor image optimization is the most common reason for slow page loads, especially for mobile visitors. Fortunately, it’s also one of the easiest issues to fix.

These are some quick tips for shrinking your images and improving your page speed. The goal here should be getting images at least under 800kb, but the smaller we can make them, the better.

Resize your images

It’s easy to chuck a larger image onto your page and rely on your content management system (CMS) to compress it to the appropriate size, but it’ll still be loading at least some of those extra pixels on the back end, and your visitors are going to feel it in the load. When you add an image, make sure it’s the same dimensions that your page will be rendering it.*

*This doesn’t necessarily apply to Unbounce’s retina image support—read up on that here.

Choose the right file type

Most people don’t think too much about the format of the image they’re uploading, but it can have a dramatic effect on page performance. The file types you’re probably most familiar with are JPEG and PNG—and, yes, there are differences.

JPEG is a ‘lossy’ format, which means it’ll lose some data during compression. That typically gives you a smaller file, but it can come at the expense of visual fidelity. Generally, images with significant color variation (say, photographs) perform better as JPEGs, and any dip in quality can usually go undetected.

PNG is ‘lossless,’ so the image’s appearance won’t change when resized, but it tends to make for larger files if there’s significant color variation. PNG is ideal for simple images with defined shapes, like those with text. Saving PNGs in 8-bit (rather than 24-bit, which has a broader color palette) can help shave off some extra bites.

Here are some optimization tips for JPEG and PNG (and GIF, that villain) from Google itself.

Use compression tools

Before your weigh-in, it’s good to run images through a final round of compression. There are plenty of image compression tools on WordPress, as well as some free, standalone ones like TinyPNG. These shrinky gizmos offer a simple way to cut down your image sizes without braving the cursed labyrinth that is Adobe’s export settings. (Hey, I’m a words guy.)

Your takeaways here are:

  • Ensure your image dimensions match how they’ll actually be displayed
  • Use JPEG when a slight dip in visual fidelity isn’t the end of the world (like photography), but PNG when it is (images with text and sharp lines)
  • Compress images to keep the file size as tiny as possible
  • If you want to take a deeper dive into image optimization, we recommend that you check out this post from Search Engine Land, which goes into detail on making images smaller while keeping them beautiful.

    Building Pages in Unbounce? We’ve got you covered. Unbounce’s Auto Image Optimizer shrinks your images as soon as they’re uploaded so you can focus on making the best landing page possible.

    Host Your Videos Elsewhere

    Difficulty: Easy / Estimated Time: 30 Minutes

    Why carry something yourself when you can make someone else carry it for you? That’s my motto for landing pages and life, and it’s why I’m no longer welcome on Unbounce’s company hiking trips.

    Hosting videos on your own domain can be great for SEO purposes, but that’s not usually our goal with landing pages. We want everything to load in a flash and give our visitors the best chance to convert. Depending on your hosting solution, though, your videos might be slowing down your page speed, suffering from playback issues, and taking up an uncomfortable amount of server space.

    Done properly, transferring videos to a third-party platform can shed some extra load time and help your pages render faster. Consider moving video content to Wistia, YouTube, or Vimeo, then using a light embed technique so that your videos only load heavier playback elements when your visitors actually click on them.

    Building Pages in Unbounce? As a disclaimer: Using light embed codes with Unbounce (or any custom code, for that matter) will require some technical knowledge to implement and could, in rare cases, cause issues. Check out this Unbounce community post for more information.

    Audit Your Hosting Solution

    Difficulty: Easy / Estimated Time: 30 Minutes

    Loading speed isn’t just determined by what’s on your landing page. Your web host also has a major influence in how quickly your page rolls out to potential customers.

    There are three common models for web hosting:

    • Shared hosting
      Generally the most affordable solution, shared hosting is when your website is hosted alongside other sites on a single web server. Everyone draws from common resources (like storage space and processing power), which means—you guessed it—you need to share.
    • Virtual private server (VPS) hosting
      This is essentially a mix of both shared and dedicated hosting. With VPS, your website still shares server space with others, but you’ll have dedicated resources that no one else can dip into. The result is more power and flexibility, but it tends to come with a higher price tag.
    • Dedicated hosting
      For those who’ve had a traumatic roommate experience (who hasn’t?), dedicated hosting means your website has the server all to itself. More resources, no sharing. That’s great if you’re heavy on digital content and get a ton of traffic, but dedicated hosting is also the most expensive option and requires the technical know-how to set up and maintain your server.

    Low-volume websites can generally get by with the cost-effective shared solution, but once your traffic starts to rise, you might not be getting enough juice from your web host to deliver content quickly—and that’s when load times start to suffer. (Give this post from Search Engine Journal a read for a more comprehensive explanation.)

    It’s also important to note that the whereabouts of your web server can have a significant impact on your page speed. If you’re not using a content delivery network (CDN; more on this below), you’ll want to make sure that traffic from foreign countries isn’t encountering too much latency.

    Think your hosting solution might be impacting your page speed? Run your site through a server speed test like this one from Bitcatcha, and use WebPageTest or Pingdom to see how your quickly your landing page loads in other countries. Depending on the results, you might decide it’s time to upgrade your hosting plan (or change web hosts altogether).

    Building Pages in Unbounce? You don’t have to worry about this one—Unbounce’s global hosting solution boasts 99.95% uptime and ensures that your landing pages always have the necessary resources to load super fast.

    Implement a CDN

    Difficulty: Easy / Estimated Time: 30 Minutes

    When your landing page gets a visitor, their web browser pings your server to get the content necessary to build out the page. Simple, right? Everyone downloads your website information from the same place, regardless of their location around the world. Well, that’s usually fine if the visitor is in or close to the country that your web server is located, but when they’re halfway around the globe, chances are they’re going to encounter some latency.

    To avoid that, you should look into deploying a CDN, which caches your website across a network of data centers and proxy servers all over the planet. Say your own server is in the United States and someone from Lithuania is trying to visit your landing page. Instead of downloading your content from across the Atlantic, that visitor can pull a cached version from a server nearby.

    Setting your website up with a CDN is pretty straightforward and—depending on your traffic—generally affordable. Here’s a list of some popular CDN providers from Mashable.

    Building Pages in Unbounce? We’ve got five global data centers supporting the Unbounce CDN, which means your landing pages will load in a flash regardless of where they’re being accessed from.

    Increase Landing Page Speed - Intermediate Fixes

    Improve Your Landing Page Speed: Intermediate Fixes

    These next speed fixes are a little trickier, but they should be manageable for marketers with a little technical know-how. Still, a mistake here could mean actual damage to your landing page.

    Our recommendation? Do some research, make a backup, and—if you can—consult briefly with a developer on your team. It never hurts to have an experienced colleague to turn to if you get in over your head.

    Building Pages in Unbounce? We talk a lot about WordPress through this next section. If you’re using our plugin to publish Unbounce landing pages to a WordPress domain, some of these recommended speed fixes can actually cause technical issues. Don’t hesitate to reach out to us for clarification if you’re ever unsure.

    Minify HTML, CSS, and JS

    Difficulty: Intermediate / Estimated Time: 15 Minutes

    All those lines of HTML, CSS, and JS code that make up your landing page? They’re packed with spaces, line breaks, and other bits of formatting that make it more legible and easier for us to interpret, but each makes your load time just an eensy bit slower—and the web browsers your visitors are using to render your page don’t particularly need them.

    With minification, the goal is to cut out all of that extra junk and condense your code so that browsers can read it faster. Here’s an example snippet of Javascript code from Wikipedia:

    var array = [];
    for (var i = 0; i < 20; i++) {
    array[i] = i;
    }

    After minifying, that code would look something like this:

    for(var a=[i=0];++i

    Source:: https://unbounce.com/landing-pages/increase-landing-page-speed/