Tag: User eXperience (UX)

What is a landing page? And how does it work?

Willemien Hallebeek

As simple as they sound, landing pages might be a confusing topic for site owners. What qualifies as a landing page and what doesn’t? Is every page you land on a landing page? What about Landing Pages in Google analytics? And, can you optimize them for conversion and search engines? Let’s dive in!

What is a landing page?

In digital marketing, a landing page is a page specifically designed for one purpose: to make a visitor convert. Whether it’s signing up for an event, subscribing to a newsletter, or donating money to a charity; a landing page aims to do just that. Therefore it’s completely focused on a single action. The idea is that this focus and taking away possible distractions increase the chance of a conversion. Marketers typically create these types of pages as part of a marketing campaign.

An example

A nice example of a focused landing page for a campaign is this Red Nose Day landing page of Comic Relief:

The Red Nose Day landing page on the Comic Relief website

The headline immediately conveys the message of this page: Register your school for Red Nose Day 2021. The text on the call-to-action is crystal-clear too. Perhaps a different color would make it stand out a bit more, but still, it’s hard to miss. The page is focused as a result of its clean design and the absence of distractive elements. Moreover, if I’d work at a school the image of the happy little girl would make me want to participate right away.

This screenshot shows what you see above the fold on the desktop version of this site. If you scroll down you’ll find some other elements, like options to donate money or links to explanations where the money goes. You could think of these secondary buttons as distractions, but because they only appear when you scroll down, the first view of the page remains focused on its primary goal: getting schools to register for this event.

How do landing pages work?

Imagine getting an email from a local venue announcing a concert of your favorite band. Woohoo, you’re super excited to get tickets! You click on a link and end up on the homepage of the venue. You start looking for the schedule. When was it again? Maybe better use the search bar? O wait, a banner showing another awesome concert too. Hmmm…Maybe first discuss with your friends which band they’d like to go to?

The internet is full of distractions and landing pages of a marketing campaign try to get rid of all these distractions. In the above example, if you would have ended up on a page purely focused on this concert, providing the necessary details and an eye-catching call-to-action leading to the cart you probably would have purchased the tickets already.

If people click on a campaign link in your newsletter or social media post, you’ve already somehow sparked their interest in your event, charity or, whatever you’re promoting. As they’ve been exposed to the content they’ve clicked on, they probably already have a bit of context on the topic. That’s why they’re likely to be further in a user journey as someone landing on your site from an informational search query in Google. This means chances of conversion (subscribing, getting tickets, or buying something) are higher. So it does make sense to focus on the action of the user. Now you just have to make sure to make this action as easy as possible!

How to optimize them?

When you create a landing page for marketing purposes you first have to decide what you’d want people to do on that page. This shouldn’t be too hard if you have a clear goal for your campaign. In the example above, that would be selling tickets for that concert. If you know your goal, you can start optimizing the page for the target group and add all essential elements that should be on the page.

Essential elements: Inform and convince

Obviously, you should tailor a landing page to give your users what they need and convince them to participate at the same time. Therefore it’s indispensable you know your audience. Nevertheless, some elements are so common you can find them on almost every great landing page. We’ve listed them here for you:

  • a headline that conveys the message: what should the user do here?
  • a call-to-action (CTA) or a short form people can fill in right away
  • some essential details the user would want to know before clicking the CTA
  • visuals: an appealing image or short video (let’s say if you can win a state of the art coffee machine it makes sense to show it)
  • social proof (a quote of a happy user or participant, for instance)
  • in case of a purchase or donation: payment options

Remember: Keep it short and simple! To add more focus to your page you can even get rid of the menu, as it might lead people away from your page. Also, go easy on the links to other pages; they can do the same. If you do need to add links to other pages, consider adding them below the fold. The same counts for any secondary actions, like the donation button on the Red Nose Day page.

Also, don’t forget to test the page. If you build a landing page you’ve likely made some assumptions about what you’re audience needs/wants. Especially with these kinds of pages, focused on conversion, it pays off to A/B test them thoroughly! And, when you’ve built that one awesome landing page, be sure to clone it with the Yoast Duplicate Post plugin and use it as a template for your other landing pages.

Here you’ll find more tips on optimizing your landing pages.

What about Landing Pages in Google Analytics?

Landing pages of a marketing campaign are not to be confused with Landing Pages in Google Analytics. Landing Pages in Google Analytics are just a list of pages on your site that get the most traffic from external sources.

You’ll find Landing Pages in Google Analytics in the Behaviour tab

While a popular marketing landing page as mentioned above could be in this list, it doesn’t necessarily have to be. For instance, in our case, our post on choosing a focus keyword is one of our top Landing Pages in Google Analytics. But it wouldn’t fit the above the description of a landing page. It’s an explainer post helping people with setting the right focus keyphrase on a post they’re writing. It’s an informative post, not aimed at convincing people to sign up for something. People land on this page as they’d like to learn something or need help. Bombarding them with buttons would probably scare them away.

If some of your campaign’s landing pages are in this list, this post on the power of Landing Pages in GA will help you to analyze their performance though!

Landing pages and SEO

Do you want your landing page to rank? I can hear you say: Yes, of course! I want to get as many users as possible on this slick landing page I’ve created and tested! But, don’t forget that a page specifically designed for a campaign which mostly gets visitors from newsletters and social media, might not always be the best fit for searchers in Google.

You’ll have to ask yourself, is this the page people want to find when they’re searching for something? Or, would they like a more extensive article on the topic they’re interested in? Are they ready for subscribing or buying? Or do they have a different search intent? Where are those people in the user journey? As you’ve designed this page to convert, it might not be the best fit, apart from people actually searching for your event, contest, or campaign.

Of course, you can make sure the page is optimized for the exact term of the event. For other terms, it might be harder to rank with a page that is mostly focused on conversion and probably doesn’t have a lot of copy. Placing enough internal links to this page might as well help it rank for the exact term. If you do want to add content to the page, maybe even with links to more information on your site, you can best add it below the fold, as it might prevent people from converting. But again, ask yourself: what exactly is your goal of this page? It might be better to optimize it for one goal only!

Product pages vs. landing pages

One last thing: there’s a lot of overlap between product and landing pages. Some principles definitely apply to both: Both pages should be focused on conversion, with a clear headline, call-to-action, social proof, and probably a nice image or video. But a campaign often has a more temporary character. Also, your product page probably shows more details and maybe even a related products section, making it slightly less focused than a marketing campaign’s landing page. And of course, you’d definitely like your product page (or category page) to rank! If you want to dive into optimizing your product page, go read our post on Product page UX and Product page SEO.

Conclusion

In digital marketing, a landing page is a page designed to trigger a specific action of the user. It’s often created as part of a campaign and aimed at conversion: the page should convince the visitor to subscribe, participate or buy something. Therefore it’s very focused. It’s not to be confused with Landing pages in Google Analytics, which is a list of pages people land on from external sources. Depending on the goal of the page you can try to optimize the page for search engines too, but sometimes it’s better to keep it solely focused on conversion. Whatever you do, think about the goal of your page first!

Good luck with your landing pages. And feel free to drop your questions in the comments.

Read more: How to optimize your landing page »

The post What is a landing page? And how does it work? appeared first on Yoast.

5 ways to boost your Core Web vitals

Edwin Toonen

“If only I could simply wave my wand and have a super fast website!” This has probably crossed your mind as well, right? Optimizing site speed and user experience is a lot of work and gets technical — and complicated — really fast. Most site owners or managers quickly need to talk to their developers to get stuff done. Now, the new Core Web Vitals metrics give you more insights and pointers at what to fix. Let’s go over five things you can do to boost your Core Web Vitals score.

Table of contents

First, a disclaimer

Look, there’s not one thing that’s guaranteed to fix one specific issue. You have to take a broader view of optimizing your site. A lot of little fixes make up big results. So, while I’ll give you five things you can work on here, this is nowhere near definitive. Even Google says many elements work together to come up with scores, so it’s hard to pinpoint if you do this, then that score will go up.

What Google does give you, is insights into what’s slowing stuff down or what’s hurting the user experience. Many tools also give advice on how to fix stuff. Web.de/measure, for instance, doesn’t do in-depth results, but it does give you an idea of what the impact of a particular fix is.

Google’s Web.dev/measure tool gives you an idea of the impact a fix can have

Google’s upcoming page experience update

We’ve published a couple of articles about Google’s page experience update — coming sometime in 2021 —, so you can start here if you need more background information:

Five things you or your developer can do

Over the years, there’s been constant talk about the importance of site speed and user experience. But while there’s a ton of material out there on how to optimize your site, putting that knowledge into practice is hard. These past few months, Google once again put speed front and center with the page experience update happing next year. To help you get ready for that, it developed tools to give you insights and a lot of documentation to read.

For a lot of issues, the advice hasn’t really changed that much. It all boils down to getting the main content to your users as quickly as possible. Run through the test to see how your site performs, try to prioritize the fixes and get started! Below you’ll find a mix of old and new ways of enhancing your site.

Optimize your images

I’ll start off this list with a golden oldie: optimizing images. One of the most important things you can do for your site is properly optimize your images. Yes, we said that a million times but we’re going to say it again: do it. That one big unoptimized image on your homepage or landing page might hurt you. Large images are often the largest contentful paint (LCP) for any given site. Make sure you give your visitors a proper welcome by making that load quick!

We have a popular article on image SEO describing what you can do to get that image to load quickly. But in short, make sure you serve it in the size needed and compress it well. There are loads of tools to help you do this. Personally, I love the results I get with squoosh.app. Don’t think you need to keep that massive resolution for that image to be sharp on the most common screens.

Also try to adopt modern formats like WebP. These formats can deliver high quality images at a lower size. WebP is well-supported and even Apple has jumped on board! The upcoming Safari 14 release — both on MacOS as well as iOS — will support WebP. Yes, the new Chromium powered Microsoft Edge browser also supports WebP.

Your CMS is also a tool that’ll help you improve the loading images. Due in August, WordPress 5.5 will support lazy loading of images. This means it will only load those images that appear on screen and leaves the rest to load when the user interacts with that screen. This tells the browser to load large images only when they are needed.

Another piece of evergreen site speed advice is the use of a CDN, but did you know you can also use a CDN specifically for images? An image CDN gives you more control over how you want to serve and how you want these to appear. An image pushed by an image CDN gets a string of properties in its URL which tells the browser how the image should behave.

Stabilize loading by specifying room for images and the like

One of the new metrics is cumulative layout shift, or CLS for short. An example of this is when a mobile page looks ready and just when you want to hit a button, the content shifts and a slow loading ad appears in that place. This happens often and is one of the main causes of frustration for users. Now, while optimizing your CLS won’t necessarily make your page be faster it sure makes it feel faster.

CLS is caused by images without dimensions in the CSS. It can also be caused by ads and embeds without dimension, or dynamically injected content. When not properly given dimensions, these elements tend to jump just a bit during the loading process, making it appear jerky and unstable. This might also due to new content being inserted above existing content. Don’t do that, except maybe after an explicit interaction by the user.

One of the ways you can prevent CLS is by adding the width and height for images in the CSS. This way, the browser will reserve space for that image that’ll probably appear later than the text. Now, the jerkiness will disappear because the browser knows that something will be added in due time. You could think about adding some sort of low-resolution placeholder if you want sometime to appear quickly.

So, simply make sure that your images have proper width and height attributes set. Of course, you can also do this with regular responsive images. Just make sure that you are using the same aspect ratio for all sizes.

<img src="mountain.jpg" width="640" height="360" alt="Mountain underneath a cloudy sky">

To cope with jumping ads or injected content, please reserve space for these as well. In the end, your CLS might just come down a bit.

Speed up your server to get that loading time down

The faster your server responds to requests, the better. Getting that server to respond quicker directly improves a lot of site speed metrics. On complex sites, the server keeps busy with handling requests and serving files and scripts, so it’s best to optimize those processes.

Optimizing your server consists of several parts. First, upgrade your hosting plan. Don’t skimp on hosting. Pick one that offers good performance at a fair price. Also, there’s the business of how the server was set up — use a recent version of PHP! — and what hardware you picked. Maybe you should upgrade the hardware if you find that lacking. Also, you need to research how your databases work and see if you can make improvements. Use tools like the Query Monitor WordPress plugin to keep analyze queries on your site.

You can also look into how your server pushes files to clients. There are several ways to enhance that process, with link rel=preload for instance, or HTTP/2 server push. These are more advanced solutions that let you fine-tune how your server responds to requests. Here, again, a CDN can do wonders.

Look into critical CSS to load above the fold content quicker

When the browser loads a page, it has to get the HTML, render it, get the CSS, render it, get the JavaScript, render it, et cetera, et cetera. The more files you need to load your site and the bigger these are, the slower your site will load. Often, while the browser is busy doing stuff, it can’t load things in the background. Certain elements block the process. So-called render-blocking JavaScript and CSS influences everything.

Since the CSS loads late, it can often take a while for something to appear on screen. By taking the critical bits of your design — the part that appears above the fold — out of the main CSS file and inlining it in your code, you can get something on screen much faster. Fixing this, once again, doesn’t make your site faster, but it makes it appear faster. All for that ace user experience.

To get a set of critical CSS, you can choose from a number of tools or you can do it by hand. In addition, you can use WordPress caching plugins like WP Rocket. WP Rocket has a simple button called Optimize CSS delivery. Activating this helps eliminate render-blocking CSS and enhance the loading of your site. Of course, WP Rocket also does other cool stuff like minifying CSS and JavaScript and deferring the loading of JavaScript.

Improve loading of third-party scripts

For many sites, slowness also comes from outside. If your site relies on ad scripts, for instance, you are basically in the hands of the ad provider. You can only hope that they make their ads performant. If their ads load really slow, well, maybe it’s time to find another provider.

If you find that third-party scripts slow down your site, you should look into this. Ask yourself, do I really need that particular ad? What’s the value of these scripts? There might be a different option out there that’s a bit more optimized and less stressful for your server. Maybe try that?

If possible, you can experiment with hosting the script yourself. This way, you’re a bit more in control of the loading proces. If you can’t do that, see if you can get it to preload quicker.

At the least, make sure to load the scripts asynchronously or defer it till the last moment. This way, the browser can build the page first before getting and running the external script. Use async if the script you’re loading is important, like an analytics script. You can use defer for less critical resources. There’s loads of documentation on optimizing third-party scripts.

Boost Core Web Vitals: All small improvements count

With the upcoming page experience update, Google put site speed and user experience front and center again. We’ve always looked at SEO holistically — there are many moving parts and you should work on all of them to build the best site out there. Although the tips mentioned above can help you improve those scores, you really should be doing this to offer your visitors a better experience.

The post 5 ways to boost your Core Web vitals appeared first on Yoast.

5 things you need to know about mobile-first indexing

Marieke van de Rakt

As you might know, Google is rolling out mobile-first indexing as we speak. In September 2020, all websites will be ported over to the mobile-first index. But what does that mean for your ranking? Should you be worried? Should you do anything? Google has been pretty vocal on mobile-first indexing. This post serves as a reminder so, I’ll talk you through five things you need to know about mobile-first indexing.

Mobile-first indexing

In March 2018, Google announced that they were going to start with mobile-first indexing. In March 2020, Google announced that it would roll out mobile-first indexing for the whole web. This will happen in September 2020. But what does that entail? It means that from now on, Google will base what it places in the index on the mobile version of your site, whereas they used to index the desktop version of your site first.

This switch is made because more and more searches come from a mobile device and to give those users a better experience, Google decided that it was time to prioritize mobile results. It is important to note that the mobile-first index is not a separate index, Google has only one index from which it serves the results.

1. Do not panic!

From September, the mobile version of every site will be indexed. But that does not mean that anything big is happening. In fact, it probably doesn’t do anything to your rankings. If Google indexes the mobile version of your site, you’ll get a notice in your Google Search Console. This means that Google will determine by the content available on your mobile site how you will rank — both on the desktop as well as on mobile. This sounds pretty big, but for most WordPress sites it’ll have minimal consequences. If you think about it, most WordPress sites have a responsive design. This means that both mobile and desktop display the same content. You’ll have nothing to worry about in this case.

If you have different websites for mobile and desktop and your mobile website has far less content – you do have something to worry about. Everything you are offering on your desktop site should be available on your mobile site — this is called mobile parity. This also includes your structured data and any meta data like titles, descriptions and robots meta tags.

If you’re looking to also improve the speed of your site and the user experience, it might be good to look into the upcoming page experience update by Google as well. Mobile-friendliness is one of the signals that informs the page experience algorithm.

2. Do a mobile-friendliness test

You do not have to have a mobile site to be in the mobile-first index, as Google will index desktop sites as well. But, it’s going to be harder to rank if your site is not mobile-friendly. So there’s work to do for all of you who have not have a mobile-friendly site yet.

Check how Google sees your mobile page

So what do you need to do? Check out Google’s mobile-friendliness test and check whether or not your site is mobile friendly. In our experience, this is a minimum requirement. If your site does not pass this test, your mobile version is not up to scratch. Read our Mobile SEO ultimate guide to learn how to improve your mobile site. Also, be sure to read Google’s documentation on how to get your site ready for mobile-first indexing.

3. Think about UX on mobile

A mobile website needs a different design than a desktop version to appeal to your audience. Your screen is tiny. While it might make sense to discard a lot of content on mobile due to space limitations, that wouldn’t be a good practice.

Of course, you can improve the mobile user experience by following best practices. For instance, Google explained that hamburger or accordion menus are perfectly fine to use. These kinds of menus make sense; they help a mobile user to browse through your website. Putting content behind a tab to make the mobile experience better is also totally fine.

Read more: 10 ways to improve mobile UX »

4. Write mobile-friendly

Reading from a screen is hard. And reading from a mobile screen is even harder than reading from a big screen. To attract a mobile audience, you’ll need to have mobile-friendly copy. This means short sentences and compact paragraphs. You need to make sure your font on your mobile site is large and clear enough, and you need to make sure to use enough whitespaces.

Keep reading: Copywriting for mobile »

5. Check out those mobile snippets

Is your audience mainly mobile? Do they come from the mobile search results to your page? Or does most of your organic traffic come from the desktop SERPs? Make sure to check this in your Google Analytics.

If your search traffic is mostly from mobile search result pages, make sure to optimize your mobile snippet in our Google preview.

Check your mobile snippets in the Yoast SEO Google preview

Conclusion on mobile-first indexing

Don’t panic about the mobile-first index Google will fully roll out in September 2020. If your website has a responsive design, your content will be similar on both desktop and mobile versions. Please check if that’s the case. If so, the mobile-first indexing will have little consequences for your ranking.

Do take some time to evaluate the mobile version of your website. Is your design good enough? Or could you improve? Are the buttons large enough to tap? What about your content? Could you make your text more readable for a mobile audience? Making sure your website has a kick-ass mobile experience is something you need to get started on. This will make a difference in your rankings shortly.

Read on: How to improve your mobile site »

The post 5 things you need to know about mobile-first indexing appeared first on Yoast.

Learn about the three Core Web Vitals: LCP, FID & CLS

Edwin Toonen

Some time ago, Google caused quite a stir by announcing a new ranking factor for 2021: page experience. User experience has always been a essential part of building the best site out there, but now, it will play an even bigger role in helping you build awesome sites for your customers. All this is powered by new metrics, with at the centre: the Core Web Vitals. Time to meet LCP, FID and CLS!

Table of contents

The Google page experience update powered by Web Vitals

We’ve talked about this page experience update before, but in this post, we’d like to take another look at those Core Web Vitals. In general, site speed metrics tend to be hard to understand and confusing. Plus, they tend to change somewhat each time you test your site. You don’t always get the same scores. So, it’s easy to say that you just have to look at some metrics in the hope they turn green. 

Of all the possible metrics, Google now identifies three so-called Core Web Vitals. These are the focal point for Google in the coming year. Every year, Google might add or change these metrics as they evaluate these over a longer period of time. 

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.

web.dev/vitals/

The three pillars of page experience

For now, the three pillars of page experience are:

  • Loading performance (how fast does stuff appear on screen?)
  • Responsiveness (how fast does the page react to user input?)
  • Visual stability (does stuff move around on screen while loading?)

To measure these essential aspects of user experience, Google chose three corresponding metrics — aka the Core Web Vitals:

  • LCP, Largest Contentful Paint: This measures how long it takes for the largest piece of content to appear on the screen. This could be an image or a block of text. A good grade gives users the feeling that the site loads fast. A slow site can lead to frustration.
  • FIS, or First Input Delay: This measure how long it takes for the site to react to the first interaction by a user. This could be a tap on a button, for instance. A good grade here gives the user a sense that a site is quick to react to input and, therefore, responsive. Slow, again, leads to frustration.
  • CLS, or Content Layout Shift: This measure the visual stability of your site. In other words, does stuff move around on screen while it is loading — and how often does that happen? Nothing more frustrating than trying to click a button when a slow-loading ad appears in that spot.

Different tools use different metrics

Every page experience tool uses a number of Web Vitals, gathered from a variety of sources. As every tool has a different purpose, the metrics used differ per tool. The common denominator, however, are the Core Web Vitals as Google uses these in every page experience tool it has.

But what do all these numbers mean? What do you have to look for on your site? And when is your site fast enough? When do I have a good grade? There are a million questions you could ask about this metrics. And while Google is trying to close the gap between understanding and improving, this continues to be a complex topic. Measuring site speed and user experience is hard — there are so many things to factor in.

What are these Core Web Vitals?

The Core Web Vitals don’t work in isolation, as there are a whole lot of other metrics. Some are based on controlled lab tests, while others are metrics that only work with field data. After doing a lot of research, Google determined a new set called Web Vitals. These are a combination of metrics we already know, plus a set of new ones. The three Core Web Vitals are the most important ones and Google is specifically asking site owners to keep an eye on these scores and improve them where you can.

LCP: Largest Contentful Paint

Largest Contentful Paint measures the point at which the largest content element appears on the screen. Keep in mind that it doesn’t measure the time it takes for your page to fully load, but it simply looks at when the most important part loads.

If you have a simple web page with just a piece of text and a large image, that large image will be considered the LCP. Since this is the largest piece of content to load in the browser, it’s destined to make an impression. By getting that to load quicker, your site can appear much faster. So, sometimes, it might just be as simple as optimizing that image itself. 

In the past, there were metrics like First Meaningful Content, which measured time when the first piece of content appeared on screen that meant something to the user. But, unlike the name suggests, the FMC metric often couldn’t figure out what was the most meaningful thing that appeared on screen. Complex metrics lead to useless data.

Largest Contentful Paint is easy to understand: it is simply the time it takes for the largest element to appear on the screen. These elements might include images, videos or other types of content. 

What you need to know

Now you know what the LCP is you can start optimizing for it. According to Google, you should aim for the LCP to happen within the first 2.5 seconds of the page loading. Everything under 4 seconds needs improvement and you can consider everything over that as performing poorly. 

An overview of the scoring for LCP

The LCP is also dynamic, as the first thing that loads might not immediately be that large image. The LCP shifts to that large image when that appears on screen. 

Here’s an image from Google that explains how the works:

This image from Google gives you a good idea of how the LCP is measured

On the left, you first see the logo and ‘Visual stories’ line appear. In the second screen, the large headline appears as a candidate for LCP. In the last screen, however, you see that big image overtakes the header as LCP. If you have just one big piece of content, that might be the LCP the whole time.

If you look at the loading process in the image, you can easily see why this is such a handy metric. You can easily spot what the LCP is and optimize the loading of that element. 

Google offers several tools to help you find all these elements. PageSpeed Insights, for instance, offers a wealth of data on Web Vitals, plus a whole lot of advice to improve your page. If we run yoast.com on PageSpeed Insights, we get a number of scores and below that score, advice. In our case, the LCP was average and that’s due to it being a large image. In the screenshot below, you can see that PageSpeed Insights correctly identified that element. Now you now what to improve!

PageSpeed Insights identifies the large header image as the LCP on on our site

According to Google, the LCP is affected by a number of factors: 

  • slow server response times: so optimize your server, use a CDN, cache assets, et cetera.
  • render-blocking JavaScript and CSS: so minify your CSS, defer non-critical CSS and inline critical CSS.
  • slow-loading resources: so optimize your images, preload resources, compress text files, et cetera.
  • issues on client-side rendering: so minimize critical JavaScript, use server-side rendering and pre-rendering. 

Google has more documentation on the background of LCP and how to optimize for it.

FID: First Input Delay

The First Input Delay measure the time it takes for the browser to respond to the first interaction by the user. The faster the browser reacts, the more responsive the page will appear. If you are looking to offer your users a positive experience — who isn’t? —, then you should work on the responsiveness of your pages. 

Delays happen when the browser is still doing other work in the background. So, it has loaded the page and everything looks dandy. But when you tap that button, nothing happens! That’s a bad experience and it leads to frustration. Even if there’s just a small delay it might make your site feel sluggish and unresponsive.

A browser has to do a lot of work and sometimes it needs to park certain requests, only to come back later to them. It can’t do everything all at once. As we’re building ever more complex sites — often powered by JavaScript — we’re asking a lot from browsers. To speed up the process between getting content on screen and making it interactive, we need to focus on the FID. 

The FID measures all interaction that happen during the loading of the page. These are input actions like taps, clicks and keypresses, but not interactions like zooming and scrolling. Google’s new metrics call for an FID of less than 100ms to appear responsive. Anything between 100ms and 300ms needs improvement and you can view anything above that as performing poorly.

After testing the FID you get a score and you can work from there

What you need to know

One of the things you need to remember is that you cannot measure the FID if there is no user interaction. This means that Google can’t simply predict the FID based on the data they have from the lab — they need data from real users, or so-called field data. This also means that this data is less controllable as lab data as it collects data from users will all kinds of devices and who uses in different ways and environments. This is one of the reasons why you sometimes see data change.

If you are looking to improve your scores, you will often find JavaScript to be the culprit of bad grades. JavaScript helps us build awesome interactions, but it can also lead to slow websites with complex code. Often, the browser cannot respond to input while it is executing JavaScript. If you work on improving your JavaScript code and the handling of it, you are automatically working on improving your page experience scores.

This is the hardest part, though. Most sites can gain a lot by reducing the time it takes to execute JavaScript, breaking up complex tasks or removing unused JavaScript.

For instance, yoast.com has a pretty good score but it’s not perfect. There are still processes that prohibit us from getting perfect scores. Some of these are complicated to fix or we simply need this code for our site to function properly. You should look at your scores and determine what you can do. Try to find the improvements that are easiest to do or result in the biggest performance jumps.

There are always improvements to make, but you have to decide if that’s worth it — or even possible

Read Google’s documentation on FID and how to optimize FID.

CLS: Content Layout Shift

The third Core Web Vital is a brand-new one: Content Layout Shift. This metric tries to determine how ‘stable’ stuff loads onto your screen. It looks at how often stuff jumps around while loading and by how much. You can imagine that sometimes a button loads on the screen, inviting users to click it. In the background, however, there’s still a large content area being loaded. The result? When the content finally fully loads, the button pushes down a bit — just as you want to hit that button. Again, frustration mounts!

These layout shifts happen a lot with ads. Now, ads are a lifeline for many sites, but these are often loaded so poorly that they frustrate users. In addition, many complex sites have so much going on that these are heavy to load and content gets loaded whenever it’s ready. This can also result in content or CTAs that jumps around on screen, making room for slower loading content. 

Take CNN.com, for instance. News websites are typically very complex and slow to load, and CNN is no exception. It scores really badly on a PageSpeed Insights test. If you look at the issues and the corresponding tips further down the page, you’ll notice that no less than five moving elements were found at the time of writing. When loading this page, it leads to a lot of elements jumping around, and it takes a while for it to stabilize and be useful. And because users aren’t always that patient, they try to click a button at the moment it appears on screen — only to miss it because a big ad appears in that spot.

CNN.com doesn’t score too well in PageSpeed Insights. You can see it found five moving elements that contribute to the CLS

What you need to know

The Cumulative Layout Shift compares frames to determine the movement of elements. It takes all the points at which layout shifts happen and calculates the severity of those movements. Google considers anything below 0.1 good, while anything from 0.1 to 0.25 needs work. You can consider everything above 0.25 as poor. 

The scores for CLS

Of course, the score only looks at unexpected shifts. If a user clicks the menu button and a fold-out menu appears, that doesn’t count as a layout shift. But if that button does call a big change in design, you should make sure to keep that clear for the user.

I’ve already mentioned that ads are one of the main culprits of this. They are often in JavaScript and not well-optimized, plus they are served from an external server. Slowness is added in every step and you have to work hard to get your ads to appear in the right spot at a moments notice. But there’s another element that’s responsible for large layout shifts: images.

Developers don’t always specify the width and height of an image in the code and leaving it up to the browser to figure out how the image should appear on screen. On a page with some images and text, the text will appear on screen first, followed by the images. If the developer hasn’t reserved space for these images, the top part of the loading page will be filled with text, prompting the user to start reading. The images, however, load later and appear in the spot where the text was first. This pushes the text down, getting the user agitated. So, always specify the width and height of images in the CSS to reserve a spot for the images to load.

Google has a lot of background documentation on CLS, plus on how to optimize for CLS.

Tools to measure Web Vitals

There are loads of tools to help you monitor Web Vitals and improve the performance of your site. I’ve mentioned a lot of them in the first Page experience post I wrote some time ago. You can see them listed there. Here, I’d like to highlight the most important ones:

  • PageSpeed Insights: PageSpeed Insights has turned into a full-service measuring tool with both field as well as lab data. In addition, you get advice on what to improve.
  • Lighthouse: Google built Lighthouse as a tool to audit PWAs, but now it’s a great tool to monitor performance. It has several audits that PageSpeed Insights doesn’t have and it even has some SEO checks.
  • Search Console Core Web Vitals report: You can now get insights from your site straight from Search Console! Great to get a feel for how your site is performing.

These are the Core Web Vitals

Sometime in 2021, Google will update their algorithms to incorporate a new ranking factor: page experience. To measure page experience, Google developed a new set of metrics called the Web Vitals. Within these Web Vitals, you can find three core metrics: Largest Contentful Paint, First Input Delay and Content Layout Shift. These stand for performance, responsiveness and visual stability — the three pillars of Google’s page experience update.

Keep focusing on your users and build an awesome site!

The post Learn about the three Core Web Vitals: LCP, FID & CLS appeared first on Yoast.

10 years of Yoast and SEO: Webinar recap

Willemien Hallebeek

Last Friday, May 29th, Yoast celebrated its 10th anniversary, and we invited everyone to join us! And what better way to celebrate than with an awesome, interactive webinar? We had multiple talks, Q&As, live site reviews, all with loads of SEO tips, insights and practical advice. Of course, we understand that not everyone could join the live webinar. So, here’s a quick recap of the sessions, plus the links to all the videos, so you don’t have to miss out!

Wondering what you’ll learn from the talks in this webinar? Here’s an example of someone’s takeaway from one of the sessions:

Pretty cool, right? Here are all the videos, so let’s dive right in!

Joost on 10 years of SEO for everyone

Remember what your world looked like in 2010? Joost takes you on a trip down memory lane and shows you some highlights of the past 10 years. What did Google (literally) look like back then? And how did this search engine evolve? But also: what didn’t change? Lots of advice we gave 10 years ago, still stands today. How’s that possible? Joost walks you through 10 years of Google and Yoast!
Plus, if you want to have a peek at Joost’s first official Yoast desk in his attic 10 years ago, you need to watch this video:

Marieke on the importance of readability

In this talk, Marieke explains why we feel readability is important for both your users and your SEO. She gives a few useful tips to improve the readability of your text and gives an insight into the readability analysis of our plugin. So, are you curious about why we would not recommend our plugin to literary heroes such as Dickens and Shakespeare? And what we site owners can all learn from children’s books such as The Very Hungry Caterpillar? Watch the video to find out:

Three parallel live site reviews

Live site review – Technical SEO

Ever wanted to see how experts pick apart websites to offer advice on technical SEO? Here’s your chance! Joost de Valk and Jono Alderson tackle three websites — a horse ranch in the US, a shop making artisan leather bags and a self-help site —, and come up with a boatload of tips to improve these sites. You’ll get insights into international SEO, crawling, site structure, taxonomies, schema improvements and a lot more. Go check it out!

Live site review – User experience (UX)

What do clear call-to-actions, readable fonts, an intuitive design, useful videos, and high-quality copy all have in common? They’re essential for an excellent user experience on your site. In this webinar, Michiel, Thijs, Annelieke, and Judith walk you through a couple of websites and point out some common UX issues that happen on many sites and which you’d want to prevent on yours. Of course, they’ll highlight the great things about these websites too! In need of some examples of what (not) to do when it comes to the usability of your site? Check this out:

Live site review – SEO copywriting

During this review, Marieke, Willemien, Edwin and Fleur, discuss the content of a few different sites. And although the feedback they give is specific to these sites, these can be very helpful for any site owner out there. So watch their review if you want to know why it’s so important to keep a goal in mind while you write, how site structure can help your visitors and what our opinion is on stock photos:

Jono on how to use schema to build your brand and boost authority

Our resident SEO wizard Jono Alderson has been advocating the use of schema structured data for over 10 years. Over the years, structured data has been getting more and more important, but not really easier to implement — although the results of implementing it can get you great rewards. But why is Google pushing this so hard? And how does the Yoast SEO schema structured data framework fit into this story? Listen to Jono explain why this next frontier is now within reach for everyone. You can also learn how Yoast SEO makes implementing structured data a whole lot easier.

That’s it for this webinar – stay tuned!

That’s it for this recap! We hope you enjoyed it and got some great takeaways for your site; we really had an awesome time with all of you! This definitely won’t be our last webinar, so keep an eye on Yoast.com, social media, or just sign up for our newsletter to be the first to know!

The post 10 years of Yoast and SEO: Webinar recap appeared first on Yoast.

Page experience: a new Google ranking factor

Edwin Toonen

A couple of weeks ago, Google announced Web Vitals — a new set of metrics to measure the speed and user experience of websites. Last week, Google announced that these metrics will make its way into a core algorithm update as new ways of judging and ranking sites based on the page experience they offer. This update is due to arrive some time in 2021.

UX matters, for real now

In 2010, Google announced that it would take site speed into account while determining rankings. In 2018, Google followed up with the page speed ranking factor in the mobile search results. Now, Google announces a new update that looks at a variety of new or updated metrics — combined with other user experience factors, to form the page experience update.

Page experience you say? In an ideal world, you’d click a link in the search results and the corresponding page would appear instantly. But we all know that’s a pipe dream. Over the years, pages have only increased in size and the popularity of JavaScript made them ever more complex and harder to load. Even with lightning-fast internet connections and potent devices, loading a web page can be a drag. For users, waiting for pages to load can be stressful as well. Not to mention the maddening on-site performance that some websites offer that lead to miss-clicks and the like.

For years, optimizing the performance of websites mostly meant optimizing for speed. But loading times are only part of the equation and the other part is harder to define and measure. This is about how a user experiences all those optimizations. The site might be fast according to the metrics, but does it feel fast? Thus, it’s high time to take a drastic look at page experience.

According to Google, “Great page experiences enable people to get more done and engage more deeply; in contrast, a bad page experience could stand in the way of a person being able to find the valuable information on a page.”

Enter Web Vitals

Early May 2020, Google announced Web Vitals — a thoroughly researched set of metrics to help anyone determine opportunities to improve the experience of their sites. Within those new metrics, there is a subset of metrics every site owner should focus on, the so-called Core Web Vitals. According to Google, “Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects of the user experience.”

Each Core Web Vital looks at a specific piece of the page experience puzzle and together they help both Google and yourself make sense of the perceived experience of a site. Core Web Vitals are available in all Google tools that measure the page experience.

The Core Web Vitals will evolve over time and new ones might be added in due time. For 2020, Google identified three specific focal points:

  • Loading,
  • Interactivity,
  • Visual stability.

These focal points correspond with three new metrics:

  • LCP, or Largest Contentful Paint: This metric tells how long it takes for the largest content element you see in the viewport to load.
  • FID, or First Input Delay: The FID looks at how long it takes for a browser to respond to an interaction first triggered by the user (clicking a button, for instance)
  • CLS, or Cumulative Layout Shift: This new metric measures the percentage of the screen affected by movement — i.e. does stuff jump around on screen?
The new Core Web Vitals are aimed helping you improve the page experience of your site (image Google)

As you see, these core metrics don’t simply look at how fast something loads. They also look at how long it takes for elements to become ready to use. The Cumulative Layout Shift is the most forward-thinking of the bunch. This has nothing to do with speed, but everything with preventing a bad user experience — like hitting a wrong button, because an ad loaded at the final moment. Think about how you feel when that happens? Pretty infuriating, right?

Combining new metrics with existing ranking factors

The launch of Web Vitals was noteworthy on its own, but Google took it up a notch this week. Google is going to use these new metrics — combined with existing experience ranking factors, to help with ranking a pages. Keep in mind, Google uses an unknown number of factors to judge sites and rank them. Some factors weigh a lot, but most have a smaller impact. Combined, however, they tell the story of a website.

The new Web Vitals join several existing factors to make up the page experience ranking factors:

  • Mobile-friendliness: is your site optimized for mobile?
  • HTTPS: is your site using a secure connection?
  • Interstitial use: does your site stay away from nasty pop-ups?
  • Safe browsing: is your site harmless for visitors?

These are now joined by real-world, user-centred metrics, like the LCP, FID and CLS mentioned earlier. Combined, these factors take into account everything a user experiences on a website to try to come up with a holistic picture of the performance of your site, as Google likes to say.

The Core Web Vitals are combined with existing ranking factors to form the page experience factors (image Google)

Of course, this is just another way for Google to get a sense of how good your site is and it might be easy to overstate the importance of this particular update. It’s still going to be impossible to rank a site with a great user experience but crappy content.

While the quality of your content still rains supreme in getting good rankings, the performance and perceived experience users have now also come into play. With these metrics, Google has found a way to get a whole lot of insights that look at your site from all angles.

Our own Jono Alderson and Joost de Valk talked about the recent news in the latest instalment of SEO News, part of the premium content in our Yoast SEO academy subscription. Sign up and be sure to check that out.

Google page experience update in 2021

Google has often been accused of not communicating with SEOs and site owners. In the past, we have seen many core algorithm update happen without a word from a Googler. Today, however, Google appears more upfront than ever. In the case of the page experience update, Google warns us twice: one with the announcement of the page experience ranking factors and once six months in advance of rolling out the update in 2021.

By announcing this way ahead of time, Google gives site owners, SEOs and developers ample time to prepare for this update. There are loads of new tools to come to grips with how these metrics function and how you can improve your site using these insights. There’s a lot of new documentation to sift through. And you can start right now. Sometime next year, Google will give you a heads up that the update will be rolling out in six months time.

No more AMP requirements for Top Stories

You can find another interesting tidbit regarding the page experience update. Google will no longer require AMP for getting your news pages in the Top Stories section. Now, any well-built, Google News-validated site can aim for that top spot. Page experience will become a ranking factor for Top Stories, so your site better be good.

New page experience tools? You got it!

Google went all out for to get every site owner to adapt to the page experience changes. New or updated tools help you get the insights you need. They also help you to make sense of what it all means.

Start testing, start improving!

In the past, optimizing your site for user experience and speed was a bit like flying blind — you never had truly good insights into what makes a site fast and what makes one feel fast. Over the years, Google saw the need for good metrics and heard the cries of users in need of usable, safe and fast sites. By announcing these metrics — and by announcing them as ranking factors —, Google makes page experience measurable and deems it helpful enough to judge sites by.

Remember, the update won’t roll out until sometime in 2021, but the tools are there, so you can start testing and improving. Good luck!

The post Page experience: a new Google ranking factor appeared first on Yoast.

3 SEO quick wins to implement right now

Michiel Heijmans

We all want to increase our sales, lift engagement, and get the best possible result out of our website. That’s why it only seems right to give you a three-step rocket of SEO quick wins to kick-start your website. In this post, I will show you three things you can do right now to improve your website for your visitors, and for Google in the process. Let’s dive right in with number one.

#1 Optimize speed

It doesn’t matter whether you want to improve your mobile website or your desktop website, speed is something you need to monitor and improve all the time. These are fast times, and speed is definitely what you want to optimize for.

In a simple breakdown of speed optimization, we have images, browser caching, and script optimization. Both PageSpeed Insights and Pingdom will tell you that. Another factor that plays a role in speed optimization is text compression with GZIP. But in my opinion, that should be enabled by default. Let’s have a look at the other three:

Image file size optimization

Optimizing your file size can increase the speed of your site and is also an important part of image SEO. So let’s start there. Here are a few steps you can take to optimize your file size:

  • Optimize the image file size in Photoshop (or any other image editing program you use). Usually, just exporting the image in a lower quality will do the trick. I usually check whether reducing the quality to around 80% of the original still gives me a crisp image.
  • Download an application like ImageOptim or use a web app such as Squoosh and further optimize your file size before uploading.
  • Last but not least, make sure that the image dimensions of your image fit the image ‘space’ that you reserved for it on the page. Don’t display a 1200×400 pixel photo as a 300×100 pixel image by adding CSS or whatever.

Browser caching

Browser caching is the way your browser stores files of a website, so it doesn’t have to load them from the internet every time you visit another page of a site. An example on our own site is the logo you see at the top of the site. Storing these files obviously saves time.

There are many ways to go about this, but if you have a WordPress site the easiest way is probably using a plugin. Most speed optimization plugins support browser caching and set them to the right time for you. Among some of my favorite speed plugins are WP SuperCache, which is free, and WP Rocket, which is a premium plugin and awesome.

Optimize script handling

You can load a gazillion JavaScript (JS) and Cascading Style Sheets (CSS) files to enhance your website, but in the end, all these extra files just slow your website down. Please ask yourself the following questions to optimize your script handling:

  1. Are you sure you need that enhancement? JS and CSS usually target design and user experience. In some cases, you just don’t need that enhancement. Like JS and CSS loaded for sliders, for instance. There are alternatives to sliders that work better and don’t require extra files.
  2. Is there a way to reduce the file size of your scripts/styles? We call this process ‘minifying’ and explain this further in an Ask Yoast video. Google has some great pointers on how to approach this. Simple scripts and handy websites can help you minify your files, for instance by stripping comments. Most platforms have plugins or extensions that help with this. To give an example, Magento has the Fooman Speedster (free and paid) for that.
  3. Is it possible to combine a number of these scripts into one file? That way, there only has to be one call to the server to retrieve all the scripts. Again, there are plugins for that, but if you have small pieces of JS, you might as well combine these yourself. Of course, HTTP/2 changed some of these optimization practices. Make sure to test this!

Read more: Improving site speed: Tools and suggestions »

#2 Mobile optimization

It’s quite tempting to copy our ultimate guide to mobile SEO here, but let’s focus on the quick wins. An important reason to focus on mobile SEO these days is Google’s mobile-first index. Since July 2019, Google determines rankings based on the quality of the mobile version of a site instead of your desktop version. So, let’s get that mobile version up and running, right?

Task-based design

Have a look at your mobile website. Imagine you are a fresh, new user of your website. What would that user want to do here and is your site ready for that? Focus on a task-based design. If someone visits a mobile website, they might need opening hours or an address. Just a while ago, I purchased tickets for the Nederlands Openluchtmuseum on my mobile phone. Saved a buck and didn’t have to get in line for tickets. I did this, walking from my car to the entrance. One needs to be able to complete these basic tasks without any problem. Ask yourself what the four, perhaps five, main goals of a visitor on your site are and make sure these can be achieved on your mobile website.

Performance-based design

Are you loading any huge images on your site? Do people have to scroll for ages to read what you have to offer them? On a mobile website, we want to find what we need and get out as fast as possible – unless it’s, for instance, a news website. Loading time is a factor on mobile sites, especially with mobile connections usually being slower than most desktop connections. Make sure your design and content don’t depend on large images too much. And yes, of course, there are exceptions to that rule. If I visit a photographer’s website, I can assume that I’m in for longer loading times. When visiting this type of website, I want crisp images and that’s the price I pay. So be sure to optimize to an acceptable level for your target audience.

Write great content

This goes for the mobile and desktop version of your site: they need great content. A quick win for mobile content is to add a to-the-point first paragraph on every page. If you tell your visitor what’s on your page, they can decide for themselves if they want to scroll down or not. This is easily done and definitely benefits the experience of your visitor.

And of course, the content that comes after this first paragraph needs to be awesome as well. To tackle that, you’ll need to do keyword research, set up a great site structure and decide on cornerstone content. But you can imagine that this is a slightly lengthier process, and we’re talking quick wins here :)

#3 Serve your content in the right format

There are so many ways to serve your content to Google, Facebook and your visitors. Your task is to investigate which formats you should invest in. Some take a bit more time to implement; others can be added to your website by the push of a button, like with a plugin. Let’s go over a few important ones.

Better social sharing: Open Graph

Forget about Twitter Cards for now, as Twitter has a fallback to Open Graph. So, add Open Graph to your website if you haven’t done this already. It’s like a social summary of your website. To give you an example, for our homepage it reads (among other things):

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="SEO for everyone &bull; Yoast" />
<meta property="og:description" content="Yoast helps you with your website optimization, whether it be through our widely used SEO software or our online SEO courses: we're here to help." />
<meta property="og:url" content="https://yoast.com/" />
<meta property="og:site_name" content="Yoast" />
<meta property="article:publisher" content="https://www.facebook.com/yoast" />
<meta property="article:author" content="https://www.facebook.com/jdevalk" />
<meta property="article:modified_time" content="2020-02-18T13:24:20+00:00" />
<meta property="og:image" content="https://yoast.com/app/uploads/2018/03/SEO_for_everyone_FI.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="628" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@jdevalk" />
<meta name="twitter:site" content="@yoast" />

There’s a page/site title and a summary plus link, which tells Facebook, Pinterest or Twitter all it needs to know to create a great post on your visitor’s timeline. The og:image creates a richer experience. Be sure to add this. Again, use a plugin like Yoast SEO for TYPO3 to automate the process (and add these Twitter Cards along with Open Graph in no time).

Keep reading: Social media optimization with OpenGraph in Yoast SEO »

Quick reads on other platforms: AMP

Accelerated Mobile Pages or AMP, aim to strip your website to the bare necessities to deliver your reader the best mobile experience they can get. If they want to read your article, AMP will give them just your article in basic design. If you want to check a certain product, AMP will strip much of the heavy loading stuff from the store to deliver something more focused. Is this a bad thing? I think not. Every way you can help your visitor get a better experience increases the chance of them coming back to your content and site. It might even increase sales because it’s so focused. I suggest reading up on AMP and getting your site ready — if you want. Again: plugins will help you out with this!

Tell Google what your page is about: Schema.org

I will end this list of quick SEO wins with something we’ve been telling you about for quite some time: add Schema.org to your website. Structured data, like Open Graph and Schema.org, create a convenient summary of your website for every other site or search engine that wants to use your content. Schema.org data is one of the main types of structured data. JSON-LD gives us a convenient way of adding it to our website.

Yoast SEO does a lot of work behind the scenes and automatically adds a broad spectrum of Schema.org structured data. In addition, the free structured data content blocks in Yoast SEO help you build FAQ pages and how-to articles with valid Schema.org structured data. Our Local SEO plugin adds the right Schema.org so that Google can add your company to Google Maps as well, for instance. Add Schema.org data to your website and see your company appear in the knowledge graph as well.

Serving your content in the right format is essential in delivering it to other ‘places’ on the website. Be sure to use it. And if you’re not sure what structured data you should use to optimize your pages, be sure to enroll in our structured data training which is part of our Technical SEO training.

Bonus tip! Don’t forget internal linking

I know I said 3 quick wins, but I have another bonus tip that I want to share with you. Internal linking makes your site easier to understand for users and search engines. That’s why the right internal linking strategy can boost your SEO. And an easy and quick way to improve your internal link structure is by using our internal linking suggestion tool, which gives you suggestions for related internal links on every page or post!

Recap: the 3 SEO quick wins

There’s a lot you can do that benefits SEO. And this article gets you started with a few quick wins to increase your chances of ranking high in Google. Let’s summarize what we discussed.

First of all, you can improve the speed of your site by optimizing your (image) file sizes, being smart about browser caching and optimizing script handling. Secondly, it’s important to focus on your mobile site by having a task-based and performance-based design and writing great content for your mobile version. Thirdly, make sure to serve your content in the right format by using Open Graph, making good use of AMP and adding Schema.org to your site. Lastly, a bonus tip is to get started with internal linking. That’s it, you’re all set. So let’s get optimizing, good luck!

Read on: Must-reads for higher rankings »

The post 3 SEO quick wins to implement right now appeared first on Yoast.

What is a progressive web app (PWA)? Why would you want one?

Edwin Toonen

It’s been years since the beginning of the age of the smartphone. With it came the era of native apps. Apps continue to play a massive role in our daily life, and many business owners have asked themselves multiple times: should we have an app? Of course, the only answer to that is — it depends. Building and maintaining a native app is cumbersome and often quite expensive. Luckily, there is another option. This option combines the joys of a native app with the technology we use on the web: the progressive web app, a.k.a. PWA.

What is a PWA?

Twitter.com is a PWA

PWA stands for progressive web app. This is an app built from the web technologies we all know and love, like HTML, CSS, and JavaScript, but with a feel and functionality that rivals an actual native app. Thanks to a couple of smart additions, you can turn almost any website into a progressive web app. This means that you can build a PWA rather quickly, in regards to a native app that’s pretty difficult to develop. Plus, you can offer all the features of native apps, like push notifications, offline support, and much more.

Many sites you find online are actually a progressive web app. Take twitter.com, for instance. If you visit that site on your smartphone, you can install it to your home screen. Now, on opening the saved Twitter site, you’ll notice that it looks and performs just like a native app. There’s no browser window or nothing. There’s no difference in running it from an iPhone or an Android smartphone. Simply log in and you’re good to go. That’s a major benefit of building your web app with a PWA in mind.

PWAs are gaining popularity. Many big sites are PWAs, like Starbucks.com, Pinterest.com, Washingtonpost.com and Uber.com are actually installable on your home screen and offer a comparable experience to their native apps.

What’s the difference between a native app and a PWA?

A native app, like the ones you download from Apple’s App Store or Google’s Play Store, is often built in a programming language specific to that platform. So for iOS apps, that would be Swift and for Android apps, Java. If you want to build an app for those platforms, you need to know the technology. Yes, there are shortcuts, but these come with their own limitations. If you want to have an app on all the mobile platforms, you need to know all the different technologies. There’s no easy way to build one and publish it to all the stores out there.

Of course, there are ways to get the best of both worlds. A progressive web app, for instance. This runs in the browser and — once saved to the home screen — functions like a native app. It even gets access to the underlying hardware and software that the browser can’t access for safety reasons. If the PWA performs great, users will never know that they are using a web-based app instead of a native one.

There are some caveats, of course. While browsers have been quick to adopt the technology for this, there are still some limitations. On iOS, the technology needed works spotty in Safari. Apple doesn’t (want to) support everything yet, making it a bit of a chore to get the same exact experience everywhere.

What are the benefits of a PWA?

The main reason why everyone is chasing after apps is because they offer greater engagement. Users who install your app are your biggest fans and they are more likely to turn their usage into sales or signups. Thanks to push notifications it’s much easier to re-engage with users. Apps can offer an excellent experience that can do well for a brand.

We talked about some of the plusses of PWAs in this article, but here’s a short overview:

  • You don’t have to go through the process to get into different app stores
  • You can build PWAs with common web technologies
  • They are often cheaper to build
  • Since you’re turning your site into an app, you’ll have fewer code-bases to maintain
  • PWAs are responsive and work with many different screen sizes
  • PWAs are smooth, fast and lightweight
  • No need to hand off big chunks of money to Google and Apple
  • They work offline, unlike your regular site
  • PWAs are discoverable via search engines (which have a lot larger audience than app stores. Plus, if you want you can still get your PWAs distributed via app stores)
  • You can use push notifications to re-engage users
  • Installing a PWA can lead to higher engagement

Still, native apps win out sometimes. PWAs get deeper and deeper access to the operating system of a smartphone, but a native app can go deeper still. Plus, there are limits to what a PWA can do. For instance, PWAs are not the best choice when you want to build high-performance games.

All in all, it makes a lot of sense to think about having a PWA in your mobile strategy. But, the main question you should ask yourself is: does my audience want this?

Who’s this for?

Should everyone simply build a PWA and be done with it? No, consider your business and — more importantly — your target audience. Are they even using apps? Isn’t this an overly complex way of getting to what you want to achieve? Again, like everything, you need to research the needs of your audience. Ask yourself, what do you want this technology to do? Where are your users? Do they have a good data connection and solid hardware? How and where are they using your content? And do you think an app can help them do their job better?

PWAs are awesome and implementing them doesn’t have to be all that hard. But just because it’s easy doesn’t mean you should do it. If your audience has no need for it, why would you build one?

What are the SEO concerns of a PWA?

The PWA is inherently web-centric. It was born from the web and developed with search engines in mind to make discovery easy. Of course, you can make a progressive web app out of any-old site and it doesn’t take much to do so. However, many PWAs use JavaScript to build more complex functionality and while search engines have become apt at rendering JavaScript, it can still be a cause for concern.

When setting up a PWA, you have to make sure your JavaScript is accessible. Don’t block files for bots and make sure that links are available. To improve the rendering process you can make your JavaScript framework use server-side rendering.

Turning your site into a PWA doesn’t mean you directly improve the SEO of that site. If it makes sense to turn your site into a PWA, do so, but don’t do it for any perceived SEO benefits. If you have a great PWA, you are offering your users a fantastic user experience, which might make you one-up your competition. In this regard, it’s a good idea to take a look at them for your mobile SEO strategy.

What are the three main building blocks?

It doesn’t take much to set up a PWA. There are three things you need to provide before your site turns into a valid PWA.

  • A secure connection (HTTPS): PWAs only work on trusted connections, you have to serve them over a secure connection. This is not only for security reasons, but it’s also a very important trust factor for users.
  • A service worker: A service worker is a piece of script that runs in the background. This helps you determine how to handle network requests for your PWA, making it possible to do more complex work.
  • The manifest file: This JSON file contains information on how your PWA should appear and function. Here, you determine the name, description, icons, colors, et cetera.

Here’s a sample manifest from Google:

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "description": "Weather forecast information",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}

It doesn’t look too hard, right? A couple of interesting things in this listing:

  • start-url: this determines where your app should start. It’s better to let users land on a specific page for you PWA.
  • display: this helps you determine what type of browser UI you want to show. Options are fullscreen, standalone, minimal-ui and the standard browser interface.

These three things listed above are the minimal requirements for running a PWA. You can expand the functionality via JavaScript (frameworks).

How to set up a PWA?

There are plenty of resources to try your hand at building a simple PWA. This allows you to get a feel for the process. Google has an excellent, easy to follow tutorial on PWAS on the web.dev site. Mozilla has lots of documentation on building progressive web apps. Microsoft also has rich developer docs on building PWAs. Microsoft even built a tool called PWABuilder that’ll help you turn your site into a PWA. Of course, there are WordPress plugins that help you make a PWA of your site. In addition, Google is working on bringing base-support for PWAs to WordPress Core.

Engage your users with a progressive web app

Progressive web apps can be a great addition to your mobile toolkit. Done well, they are fast, work offline and perform like a native app. All in all, they can offer your users an awesome user experience. Engaged users are happy users, right?

The post What is a progressive web app (PWA)? Why would you want one? appeared first on Yoast.

Audience research with Els Aerts: Pro tips to get started

Willemien Hallebeek

Proper audience research is key in maintaining and growing your customer base. So, how do you go about doing this research and how do you make sure you ask the right questions? We asked expert Els Aerts, partner at AGConsult, to walk us through the process and give us a few tips on how to get started with audience research and surveying. Els, the floor is yours!

Why research your audience?

Els: “Let’s be honest, you probably assume you know your audience quite well. There’s no shame in admitting it, a lot of companies do. That’s because you might know socio-demographic information such as their age, gender, and location. But, does this actually tell us who these people are?”

Get to know your customer like never before

Els stresses that socio-demographics are valuable, but the age of your customers does not tell you why they’re interested in your service. Or what problem your product solves for them. It also doesn’t give you insight into their objections or concerns. Or what might be holding them back from buying (more) from you. She states: “If you want to connect with your audience, you need to know a whole lot more about them. And proper audience research can help you with that.”

Where to start with your audience research?

Before you start your research, Els advises to ask yourself this question: What problem do I want to solve? The answer will help you determine what type of research to conduct. And, who among your audience is able to give you relevant insights into this issue. Often enough, this will help you shape your questions and what part of your audience to reach out to. For example, don’t send a survey about your onboarding process to people that have been your customer for over three years. These people don’t remember what your onboarding was like and can’t help you optimize this specific process.

Choose your method wisely

Els: “When you’ve determined what part of your audience to research, it’s time to choose a method. Of course, this is dependent on a few factors, such as the problem you want to solve, your product or service, and the size of your audience. But for most businesses, a cheap and easy way to get started is an online survey. There are loads of tools that can help you set up an online survey at a very low price (or for free, yay!). You can post a survey on your website or in your app, by using a tool such as Hotjar or Zoho Page Sense. Or you can send it to people via email or social channels with a tool such as SurveyMonkey or SurveyGizmo.”

When you need to dig deeper, she suggests conducting personal interviews and user testing: “These one-on-one interactions provide you with context and a more profound understanding of your customers. Interviews are also the way to go if you haven’t got that many customers yet. Mainly because an online survey might not provide you with enough input when the number of participants is limited. In that case, you can collect valuable information about your audience through personal interviews.”

Let’s formulate some questions

The next step is formulating the right questions to ask your audience. And you probably have tons of questions you would love to ask them. How to select which ones to ask? Els advises taking a moment to think back to the question you asked yourself before starting your research: What problem do you want to solve? 

“If there are any problem areas you want to address, focus on those first. For example, if you have a problem with churn rate, research your existing customers. If the acquisition is the issue, reach out to potential customers in your audience. Your problem area will guide you in who you should approach and what questions you should ask.”

There’s no such thing as a stupid question, right?

Unfortunately, although always aiming to help, Els can’t provide you with a ready-made list of questions to ask your audience. She can, however, tell you what questions will not get you the results you’re looking for:

  • Leave out any questions in which you ask people to predict the future. An example: “would you use our app more regularly if we introduced feature x, y or z?” Asking your audience to predict their future behavior is asking to be lied to. 
  • Don’t ask questions about a too distant past. Human memory can be unreliable at times. And, even if people can’t really remember something correctly, they want to be helpful. So they might make stuff up, which in fact, doesn’t help you at all. 
  • Get rid of all questions in which you’re asking someone’s opinion. An example: “How attractive do you think our design is, on a scale from 1 to 10?”. What will you do if your design scores a 7? And how is that different from an 8 or 6? Ask yourself how this information will help your business. 
  • Try to avoid framing or phrasing your questions in a way that leads to biased answers. An example: “How fast would you say our customer service response time is on a scale from 1 to 10?” It might seem a perfectly neutral question, but by using the word fast you’re pretty much suggesting it as an answer. Either use both the positive and negative versions of an adjective in your question or leave it out altogether. 

Summary: how to set up your audience research

Proper audience research is essential in growing and maintaining your customer base. So, how do you make sure the research you conduct gets you the answers you need? Always start by asking yourself the question: what problem do I want to solve? This will help you choose the right audience and research method. An online survey is a cheap and easy way to get started, but if you want to dive deeper Els recommends doing personal interviews or user testing. To formulate your questions, keep the problem you want to solve in mind. And, try not to include any questions in which you ask people to predict their future behavior, questions about a distant past, questions in which you ask their opinion or questions that can lead to biased answers. 

You’re all caught up now, and ready to start your audience research. We wish you lots of luck and plenty of valuable input on all your future surveys and interviews. Thank you, Els, for sharing your knowledge and experience in this interview!

About Els Aerts: Els has been creating better online experiences based on user research since 2001. She’s the co-founder of AGConsult, a Belgium-based usability, and conversion optimization company. She loves helping companies understand their customers better. Because knowing what makes your customers tick, drives growth. 

Read more: An introduction to user research »

The post Audience research with Els Aerts: Pro tips to get started appeared first on Yoast.

What is the user journey in SEO?

Edwin Toonen

You’ll probably have heard the term user journey a lot, but what is it exactly? And what does it have to do with SEO? The user journey consists of all the steps a user takes to reach their goal. In buying something, the user journey includes steps like reading reviews, checking prices, comparing shops etc. In SEO, you can map out the user journey and place content on all the points a user comes into contact with you. Let’s take a look.

Your user journey: how do you purchase a product?

The concept of the user journey becomes instantly clear when you are looking to buy something. Let’s say you want to buy a new tv — your 15-year old 42 inch LCD tv doesn’t cut it anymore. You do research and ask yourself some questions: how big should it be? Which screen technology? What about 4k or maybe 8k for future-proofing? Do my friends have any advice? Which shops can I go to to see some screens in action? You go through a whole lot of steps before you are ready to pull the trigger on a new tv.

That proces, from the moment you realise you need a new tv to the moment you turn on the new tv in your home — and even after that fact — is called the user journey. As an eCommerce store selling tv’s you need to know how a user might get from A to Z and prepare useful content for the moments when that user might need that content.

Now, you might think that you can simply think about which steps a user might take in any given situation and put that on some kind of timeline. Well, it’s more complicated than that. If you think about it, your process of buying something might differ completely from someone else’s. You can’t force everyone to follow the same path.

In addition, the user journey is hardly ever a straight line, more often, it’s a squiggly line moving in all directions. Users go from awareness, to research, to checking prices, to research, to talking to friends about it et cetera. Eventually, the user makes a decision — some users take hours, other months.

This also goes for how people behave on websites. They hardly ever arrive neatly via the homepage only to follow the path you want them to follow. In different stages of the journey, people need different kinds of information and they will, therefore, enter your site via different pages — probably the one buried deep in your site. After that, they can move in any kind of direction. That means that every page on a site needs to consider multiple user journeys, and act as a landing page. You can’t assume that there’s a linear/predictable flow through a site.

Mapping the user journey makes it easier for users to find what they need to come to a decision. For site owners, it offers a helpful guide to where what kind of content should be to help speed up this decision making process.

Classic marketing still applies

Thinking about user journeys automatically lets you think about all those classic marketing funnels. The AIDA model — over a hundred years old —, for instance, is a good fit for making user journeys insightful. AIDA stands for:

  • Attention: get your potential consumer to notice you
  • Interest: find a way to hold that attention to build interest
  • Desire: persuade the consumer to make them want your product/service
  • Action: get the consumer to make that conversion 

AIDA is often appended with another letter, the S for Satisfaction — or the R for Retention. This is where you keep your customer once that sale is done, be it in excellent customer service or guiding him or her to their next purchase. You have to try and get some kind of loyalty. For many things, you don’t want to simply convert a sale, but also a customer for life and a champion of your brand. 

Mapping the user journey helps structure the process

Mapping the user journey helps you make sense of what you need to do to turn that potential customer into a loyal returning one. Once you start researching, you’ll probably find a number of holes in your strategy or thought-process. You’ll have missed a couple of entry points and discover thinking that hadn’t occurred to you. Once you find this, you’ll also notice that there is a lot of content missing that should have helped potential customers in their journey towards you.

Mapping done well, you’ll have a solid story for your customer’s process and a guide that helps you take away all pain points.

How to map out a user journey?

The most important thing for mapping a user journey is getting inside the potential customer’s mind. These are the people doing the travelling and they know what they do to get somewhere. Don’t think you can make up stuff by yourself or your marketing team. Talk to people! Also find out what they’re saying on forums and social media like reddit.

What journey does the user take to get to your solution? (c) Rosenfeld Media

Mapping a user journey can sometimes feel like releasing the kraken — it can become unwieldy, like something with a lot of tentacles. It is, therefore, a good idea to limit the scope somewhat. Set clear objectives, know when a task ends and don’t try to fit everything you do into one user journey. Research specific tasks for specific people and go from there. 

Define scope 

Before you start, you need to have the basics questions answered. Who are you? What is your mission? Which problems does your product or service solve? Who is your audience or who do you think your audience is? Know yourself before you jump into a research project with the wrong knowledge.

With that out of the way, it is often a good idea to make a high-level overview of what you want to achieve. Consider how you think the user will behave on this particular journey. Don’t go into detail, but simply make a quick visualisation of the process — this helps you to define the scope of the user journey. Keep in mind, you won’t know the exact user journey until you do the research. Don’t stick to these assumptions, please.

By mapping out a journey from A to Z, you get everything and the kitchen sink but that’s probably not what you need. It’s often better to focus on a sub-journey powered by a specific scenario. This makes it easier to develop, maintain and improve. 

For instance, if you offer SEO training courses, you might want to map a journey for people unaware of SEO that encompasses everything from becoming aware of the plusses of SEO to learning of SEO courses to finding your specific SEO course. That’s a whole lotta journey, so to say. In this case, you could make a high-level overview and fill these in with more detailed sub-journeys. That makes creating and mapping content to them easier as well.

In addition, it is good to think about who you are targeting. Are you targeting everyone? Probably not! By narrowing down the user profiles, you can get more specific in your journeys. This way, you can take the experiences of a user, for instance, into account. 

Start researching what you have

If you’ve been in business for a while, it might be that you’ve done a lot of user research already — both qualitative and quantitative data. Maybe you know your customers inside out. Have you interviewed customers, cool! Asked them how they use your newsletter? Nice. Got a whole bunch of keyword research sheets? Awesome. Did eye tracking tests on your new website? Epic. Go over every bit of research you have done and collect the most valuable insights that can help advance the development of the user journey. 

Take special note of your keyword research. If you haven’t done keyword research properly, you need to get to it. Search volumes and popularity of certain phrases can be helpful insight into what people want/need, and you can react accordingly. In addition, looking at the kinds of sites which rank for those keywords is useful. If the results for a particular keyword are mostly informational, for example, it’s probably worth considering that those searches are from people early on / in research phases, and your content/ui/etc should react accordingly.

Determine what you need

Once you’ve pored over the available research, you get an idea of what you need to form a full picture of your user/customer. You might notice a couple of patches that haven’t been discussed or questions that haven’t been asked by your customer. Make lists of all the questions you still need to answer before you know to fill in the user journey. Don’t assume anything. Don’t fill in the gaps yourself before doing the research.

Perform your research

It’s time to fill in the gaps. Once you’ve written your research plan, you can start your research. To get a good grasp on the way users are behaving, you can use all kinds of ways to get those answers:

  • Conduct customer interviews with specific questions
  • Direct observations
  • Field studies
  • Competitive analysis

You can combine these qualitative insights with quantitative insights, from survey data, Google Analytics, sentiment analysis et cetera. 

Structure the results

Once you’ve gathered all the data, you can start structuring the results. How you do this is up to you, but you could use the following buckets to structure your data and the user’s thoughts and expectations.

  • Actions: which steps does a user take to advance the journey?
  • Motivations: how do they feel about the process?
  • Questions: which questions do users ask themselves while trying to advance the journey?
  • Obstacles: what stops them from advancing?

Combined, you’ll get a clear sense of the user journey. In addition, you’ll also get an idea of the obstacles you need to take down to help the user progress without too much friction. 

Visualize the results

The most recognisable part of the user journey is the visual that supports it. User journey visualizations come in all shapes and sizes. Pick one that you can understand and that fits what you want to achieve. Here are a couple of examples:

Here’s an example by NN Group »
A more complex one by Columbia Road »
Or this one by GatherContent »

Once you’ve built up the user journey, it’s a good idea to try it for yourself. Maybe even let real customers or users do the journey. Ask them if it seems logical? Do the steps jump around? Maybe it’s too narrow or too broad? This all helps to validate the journey and take out any assumptions you might have made.

Map content to journey touchpoint

Now, you’ll have the full scope of the user journey in focus, so you’ll notice all the points where a user or customers comes into contact with you or your product. These so-called touch points are great entrance points for high-quality, and extremely relevant content that answers all the questions the user has at that particular moment in the user journey.

It’s time to start mapping your content to these specific touch points. We’ll explain how to do that in another post. While thinking about your content, keep the old AIDA model in your mind: how do you get attending and arouse interest? And once you have that, how do you get people from visitors to customers — and keep them there? 

SEO is only part of the user journey

The user journey contains, more often than not, almost everything you do as a company. If you want to successfully help a potential customer from A to Z, you need to have everything in order. As users often start their journey by typing a query in a search bar, SEO plays an important role to get them relevant content when they need it. SEO, however, is merely a part of the machinery that forms a successful journey.

This probably goes without saying, but your product or service should be truly valuable and good. There’s no sense in getting people to try a subpar product. Marketing 101, right? The same goes for your branding. It has to be recognisable, genuine, unique and befitting of your company. Your site has to be technically awesome, filled with relevant content and looking incredible and trustworthy. The user experience should be stellar. Practice holistic SEO!

The consumer experience should be impeccable as well. Your potential customer is going to do a lot of research, both online as well as offline. So make sure that your companies profiles are well-tended. Get those five star online reviews and respond to the negative ones. Have active social media accounts that send out relevant content and respond to users’ questions. 

Also, think about what you are doing offline. Are you running ads anywhere? Sponsoring events? Holding your own event? Think about ways to get into the minds of people without having to resort to the internet. Many people will want to form a good picture of how you are, what you do and if you are deserving of their money, so to say.

A primer on user journeys for SEO

This post gives you a solid overview of the use of user journeys for SEO. User journeys help you make sense of how users behave and they help you produce relevant content that answers questions and converts. Even if you don’t launch a full scale research project for this, thinking about how a user behaves and maybe even talking to a couple of them gives you great insights that might further your business. 

The post What is the user journey in SEO? appeared first on Yoast.