5 ways to boost your Core Web vitals

“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.

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

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.

Checking mobile site speed and SEO with Google Lighthouse

Two words you often hear together are mobile and site speed. And that’s not without reason because these two go hand in hand. Mobile-friendliness and site speed are some of the most pressing matters we have to deal with. Measuring page speed has always been something of a dark art. The site speed tools we use today are fairly adequate, but with the new Web Vitals metrics Google is trying to come at it from a different, more realistic angle, taking page experience into account. Here, I’ll take a closer look at how to check your mobile site speed and SEO with Google Lighthouse.

Table of contents

What is Google Lighthouse?

Lighthouse is a page experience tool built by Google and was initially meant to audit Progressive Web Apps (PWA). The tool executes five audits for accessibility, performance, SEO, Progressive Web Apps and an extended list of best practices. Powered by the new Core Web Vitals, these audits together give you an excellent overview of the quality and performance of your mobile website as well as your desktop site, or web app.

Site speed is all about perception and user experience. Speed in numbers means nothing if your site still feels slow. Loads of users around the world are on rather crappy mobile connections of 3G or less. Even with lightning-fast 5G connections, a site can simply feel laggy and slow. And we all know what a devastating effect a slow site can have on your conversion. Shaving milliseconds of the time needed to load your site could make a world of difference. Not to mention the frustration that happens when a slow-loading ad pushes down the button you just wanted to click.

You can run a Lighthouse audit straight from the Developer Tools in Google Chrome — or install the Chrome extension

While testing, Google Lighthouse simulates visiting your mobile site via a flaky 3G connection on a slightly underpowered device. Packets are lost in an attempt to simulate real-world conditions as authentically as possible. These insights are combined with other data. After running the test, you’ll get a report with a score and actionable advice with issues to tackle.

PageSpeed Insights vs. Google Lighthouse

PageSpeed Insights is probably the most used site speed analysis tool out there. It gives you a nice score and a list of possible improvements, plus it gives you an idea of the perceived loading speed of your site. Also, PageSpeed Insights gives recommendations and identifies opportunities to improve the performance of your page. Some of these do tend to be hard implement, so getting a 100/100 is a pipe dream for most sites.

PageSpeed Insights and Lighthouse used to be two different tools for the job. They both provided valuable insights, but were hard to combine. With the advent of Web Vitals and the page experience update, Google improved the metrics across the board. Not only did they become easier to understand, they were also shared metrics. Of course, each tool is made for a specific subtask and offers specific metrics. These metrics come from different environments.

Field data vs. lab data

Web Vitals introduced new ways of determining performance. Some of these metrics can be calculated in a lab setting — simulated, so to say, while other metric only make sense if their are tested and collected in the field. In addition, some metrics work well in both settings. Google page experience tools use a variety of the metrics to provide you with the data you need to improve your site.

If you look closely, you’ll notice that some metrics only work in lab tools like the Developer Tools and Lighthouse. The field metrics appear in tools like the Web Vitals report in Search Console and PageSpeed Insights. The Core Web Vitals like LCP, FID and CLS will work everywhere.

Core Web Vitals

The brand-new Core Web Vitals will appear in all Google tools that measure site speed, performance and experience — even in the new Web Vitals report in Search Console. Now, you simply have to understand three basic metrics to get a sense of how your site or specific pages are performing. These Core Web Vitals are:

These new Web Vitals take a much more practical approach and put user experience front and center. The tools visit your site over a throttled connection on an average device so it can emulate what a real visitor in the real world might experience. Instead of just loading your site like the classic speed tools used to do, these Web Vitals-powered tools check how and when it responds to input — and if stuff happens after the initial load. It finds the exact moment when your content is ready to use, so you can try and optimize that when it feels too slow. Plus, you can find annoyances that hinder a good page experience.

Also, keep in mind that Lighthouse not only measures performance, but also checks SEO, various best practices and accessibility. It is a complete tool that helps you improve your site holistically.

PageSpeed Insights gives slightly different scores. You’ll also notice a difference between Field Data and Lab Data

What to look for in Lighthouse results

The whole concept of speeding up your mobile site is two-pronged; your site must be fast, and it must feel fast. You, therefore, need to get your content on screen as fast as possible. Don’t let people wait. Also, users must be able to interact with your content as soon as possible. Since Google announced that page speed and page experience are ranking factors for SEO, you need to fix these issues.

What should your priority be? Load your content first. Awesome graphics and killer animations can wait. Your message – and what people are looking for – is most likely in the content. You can load the rest of the content in the background and ease it on the screen later on.

Performance metrics used by Lighthouse 6.0

While measuring the performance of your site, Lighthouse 6.0 uses the following metrics:

  • First Contentful Paint: FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. This includes, images, non-white <canvas> elements, and SVGs but excludes stuff inside an iframe.
  • Speed Index: The Speed Index measures how quickly content is visually displayed during page load. 
  • Largest Contentful Paint: The LCP is all about how long it takes for the largest content object (for instance, an image or a block of text) to load. This is one of the most important new metrics. Here, having a good score means users perceive your site as loading quickly.
  • Time to Interactive: TTI measures the time it takes from loading the page to when it is capable of reliably responding to user input quickly. The page might look quick to load, only to find that pushing some buttons doesn’t do anything yet.
  • Total Blocking Time: The TBT measures the time between the FCP and TTI where blockades can happen, preventing responsiveness.
  • Cumulative Layout Shift: The CLS looks at the number of layout shifts that happen during the full loading process of the page. Every time an element jumps around on the screen from frame to frame, this counts as a layout shift. Remember those nasty ads that load at the last moment?

You can see how your score is calculated by going to the Lighthouse Scoring Calculator:

The Lighthouse Scoring Calculator shows the weight of the difference metrics

The Lighthouse report also features some opportunities to improve the site speed of your mobile site, including how much loading time they will save. These include reducing render-blocking stylesheets, render-blocking scripts, properly sizing images and fixing offscreen images.

Lighthouse identifies the largest contentful paint element so you can easily optimize that

All in all, Lighthouse gives you a tremendous amount of insight into the performance of your page. Use these insights to your advantage.

The Lighthouse SEO check

Lighthouse doesn’t do just performance, it also has an accessibility test, suggestions on improving your site based on best practices and a PWA analysis. Another cool Lighthouse features is the basic SEO check. With this check, you can run a simple SEO audit to uncover basic SEO issues a site may have. It gives you suggestions to fix them as well. Since Lighthouse runs locally in your browser, you can run the checks on your staging environment as well.

Currently, Lighthouse checks:

Although basic, the Lighthouse checks will alert you of any SEO problems to fix.

How to install Google Lighthouse

Getting started with Google Lighthouse is very easy as it is built into Chrome’s Developer Tools Audit panel (Mac: Shift+Cmd+I. Win: Ctrl+Shift+J or F12). From there, you can run the test and get the full report. In addition, there is a separate Chrome add-on for Lighthouse that adds a button to your toolbar, though using it stays the same with a few restrictions : you can’t validate sites on your local server and authenticated pages also won’t work.

You can also run Lighthouse as a Node package. This way, you can incorporate the test into your build process. When using the Node package, you will also see that there are a couple of audits that only work in a Node environment and not in the Audits panel of the DevTools.

To install Lighthouse globally from the command line use:

npm install -g lighthouse

If you want to run a test for https://example.com use:

lighthouse https://example.com

The full results of the audit will be available in the terminal, but also in a separate HTML file.

You can fine-tune the test as you see fit

Testing Yoast.com in Lighthouse

It’s time to put Lighthouse through its paces. Let’s see what happens when I shine the spotlight of the lighthouse on yoast.com — as seen by a mobile browser. Today, we’re only focussing on the Performance tab. This tab shows how your site or app performs currently and shows you ways to improve it.

In the screenshot below, you can see the results for yoast.com. The initial loading of the mobile site is visualized by a number of screenshots showing when the content first appears onscreen. The metrics show how long it takes for the content to become visible. The faster, the better.

You get the most important metrics in one screen

In the metrics section, you’ll find the most important information, with a green, orange or red dot to show how good the performance is. When you want to optimize the performance of your mobile site, you need to watch the figures for first contentful paint, largest contentful paint and time to interactive, as mentioned earlier. Also, try to improve the speed index and make sure that nothing jumps around on screen.

From the grades, you can see that yoast.com does pretty well with a 78 overall score. The first contentful paint could be a bit better, but the speed index and total blocking time are good. Luckily, there are no elements found shifting in the layout. There’s still something to gain by eliminating render-blocking resources, like some JavaScript and CSS. In other words, the site appears to be rather fast but still could use some speeding up in the appearance part.

Implementing site speed fixes

There’s a lot you can do to improve your site speed. While explaining all the fixes is beyond the scope of this post, many optimizations can be found in the critical rendering path. The critical rendering path is formed by objects – like CSS and JavaScript – that have to load before the content can show up on screen. If this content is blocked, your page will render slowly or not at all. Pay attention to this and keep the path free of obstacles. Google’s Ilya Grigorik wrote a great guide on how to understand and improve the critical rendering path. And please, optimize your images! Last but not least, don’t forget to read up on Google’s new Web Vitals.

Try it!

Google Lighthouse isn’t the one site speed tool to rule them all, but it is a very valuable addition to your toolkit. The SEO checks are basic, but welcome nonetheless. Lighthouse is more fine-grained and gives you immediate feedback based on real-world usage. You should definitely use it along with your other page speed test tools, like PageSpeed Insights, WebPageTest and GTmetrix.

Are you using Google Lighthouse? How do you find it? Please share your experiences and tips in the comments. I would love to hear from you!

Read more: Mobile SEO: the ultimate guide »

The post Checking mobile site speed and SEO with Google Lighthouse appeared first on Yoast.

Page experience: a new Google ranking factor

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

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.

4 tips to quickly improve your website in the current situation

Everything is happening online, now that the situation with COVID-19 has everyone staying at home as much as possible. You’re not going to events, you’re not sitting down with customers. So, your online presence is more important than ever. Your website is your business card. And you want it to be found! But many people were probably not prepared for a situation like this and for their site to suddenly become this important. So, what can you do to quickly improve your website? In this blog post, I’ll share some tips on what you can do to improve your site ASAP.

1. Improve your site’s structure

A relatively quick way to boost your site is by working on your internal linking structure. If you make sure your most important pages get relevant internal links, they have a much better chance of ranking in the search engines. That’s because a good internal linking structure helps Google understand your site and figure out which pages are most prominent.

The best way to do this depends on the kind of site you have. As an online shop, you probably want to boost your category pages, but as a restaurant, you may want your brand new ‘delivery’ page ranked ASAP. Check out our ultimate guide to site structure for some tips that fit your site best. 

In any case, you can use the Yoast SEO text link counter to check how many internal links a post or page already has to it. That’ll quickly give you an idea of which posts need a more prominent place in your site structure. Need more help? Yoast SEO Premium includes an internal linking tool that gives you linking suggestions for posts or pages to link to. It’ll help you improve your site structure and save a lot of valuable time!

2. Work on your most important pages

Quality content remains crucial for every website. So, think about how you can improve your important existing pages. Perhaps you didn’t have the time yet to give them the attention they deserve. If you can, invest time and effort to demonstrate your expertise on those important pages; that means research into your topic, your audience and what they’re looking for. 

A quicker way to improve your (most important) pages is to look through your post overview and work on the content that has an orange or red bullet for either the SEO score or readability score. Getting that green bullet will give you the edge, as it means your content is well-optimized and readable for a wide audience. Take a look at how to use the Yoast SEO content analysis tool, or more specifically, how to use the readability analysis.  

Another tip: Don’t forget to keep the information on your informational pages and contact pages accurate and up to date, so your visitors have the latest details. In times like these, communication is important, so people know where they stand! 

3. Upgrade your site speed

Site speed plays an important part in SEO, so if you want to boost your site that’s definitely an aspect to focus on. There are several things you can do to improve your site’s speed relatively easily. Firstly, you could install a caching plugin. A caching plugin keeps static parts of your site saved on your server and serves users these lighter HTML pages instead of processing the relatively resource-intensive WordPress PHP scripts. There are both free and paid caching plugins available and they can significantly speed up your site, check out our post on improving site speed for more information. 

If you don’t feel comfortable making changes like that right now: optimizing your images is also a quick win when it comes to speed. Odds are you’ve uploaded big, high definition images here and there on your site. These take a long time to load, while most of the time, a lower resolution image will do just fine. Time to resize your images! You can do that using an image optimization tool, such as jpeg.io.

Read more: Image SEO: Optimizing images for search engines »

4. Add some structured data!

Structured data makes it easier for search engines to understand your website. What’s more, certain types of structured data can get you a featured snippet in the search results, and that’s a great way to stand out! 

If you use Yoast SEO (version 11.0 or higher), relevant structured data is already added for your site. But, there’s more you can do! For instance, use Yoast’s FAQ blocks to answer questions that might come up for your users. As mentioned before, clear communication is more important than ever. Also, Yoast’s HowTo blocks come in handy to easily explain to people at home the steps of how to do something. Whether you explain how to bake a nice loaf of bread, make a craft project for your children’s schoolwork or how to stay fit during quarantine with bodyweight workouts: don’t forget to use Yoast’s HowTo blocks for a shot at a featured snippet!

If you’ve had to reschedule events and are comfortable adding structured data yourself, you could also add schema for rescheduled events

Bonus tip: Focus on social media 

While not strictly SEO, in these times, it’s a good idea to pay extra attention to social media. Many people are using it (again) to stay connected and find the latest information. So, make sure you’re active on your social media profiles to stay in contact with people. Keep them informed about your activities, about how you can help, or about how people can help you. I’m seeing a lot of creativity on social media, such as online dance classes, or a ‘sew-along’ through video calls. Whatever your niche might be, there are many ways to stay in touch and connect with your audience in a positive way, so give that some thought!

Keep reading: Social media strategy: Where to begin? »

Do what you can to quickly improve your website

There we have it, four ways to quickly improve your website, for both content-related and technical aspects. These are uncertain times; it may be hard for you to do all the things mentioned above, and that’s OK. But hopefully, these tips will help you boost your online presence and get your business through the situation. If you’re eager to learn more about SEO, have a look at our All-around SEO training, which is currently available for free, to help you improve your site even further!

The post 4 tips to quickly improve your website in the current situation appeared first on Yoast.

Timeless SEO tips: 6 universal SEO tactics that never go out of fashion

Things are always on the move in the SEO world. Google regularly updates its algorithm and the competition is never far behind. And the current situation is only making things harder, with the shift to online for businesses that might not be prepared. So if you’re not sure what to do, wouldn’t it be nice to have a list of timeless SEO improvements to focus on? We thought it might be! Arm yourself with these timeless SEO tactics and you’ll never go wrong.

1. Stay on the light side

If you’re desperate for quick results, you may be tempted to use blackhat SEO tactics. Well, don’t! Never, ever buy links, try to trick search engines or visitors with redirects or spam links on other sites. It may work for a short while, but search engines actively discourage this kind of thing, so it always backfires in the end and harms your rankings. You don’t want those tricks or bought links coming back to haunt you, do you?

Here at Yoast, we advocate Holistic SEO, which means you need to be the best result! Give your visitors high-quality content, a great user experience and a secure, technically superior website. It may take more time and effort, but it’s much more sustainable in the long run. Let’s take link building as an example: approached holistically, you produce quality content that people actually want to share. You can then reach out to relevant websites to see if they’ll consider linking to you. The links you’ll get this way will be much more valuable than any link you can buy. So go the extra mile and stay on the light side of SEO. Your website will benefit in the long run.

2. Optimize your site speed

In SEO, faster is better. We’re pretty confident that this will always be the case, as people expect to get content served to them quickly. Nobody likes waiting, even for a split second, so it always pays to invest time in improving your site’s speed.

There are several ways to speed up your WordPress site. We can’t cover them all in this article, but a good start is to install a caching plugin. This keeps static parts of your site saved on your server, and serves users these lighter HTML pages instead of processing the relatively resource-intensive WordPress PHP scripts. There are both free and paid caching plugins available and they can significantly speed up your site.

Read more: Improving site speed: tools and suggestions »

Images are another factor that’s often overlooked as people build their website. Big, high definition images will take a long time to load, while most of the time, a lower resolution image will do just fine. Always take the time to resize your images using an image optimization plugin.

And a final speed optimization tip: if your visitors come from all over the world, it may be worthwhile to use a CDN (or Content Delivery Network). It’ll direct visitors to the servers closest to their location, thereby greatly improving loading times. 

3. Work on excellent content

Another timeless SEO tip: don’t compromise on the quality of your content. Create the best quality content that you can, and consistently review and improve on it wherever possible. SEO isn’t just about improving your website, it’s also about beating the competition. In many cases, this means content that’s only ‘good enough’ simply won’t do. You have to demonstrate your expertise and stand out from the crowd. That means a big investment of time and effort; research into your topic, your audience and what they’re looking for.

Keep reading: It’s not enough to ‘write content’-you have to publish resources »

You may not always be able to do this right away, which is why you need to keep improving your articles, so they become valuable resources for your audience. How? Well, that all depends on your topic and what you’re trying to achieve. It’s always a good idea to ask yourself whether your questions would be answered by visiting your pages, and whether it aligns with what you’re seeing in the search results. These next tips will also help you improve the overall quality of your content.

4. Keep your audience in mind

Whether the aim of your website is to help you sell your product, or to attract followers for your blog posts, you will only succeed if you focus on what your audience wants and needs. That’s something that isn’t going to change, as search engines always aim to give users what they’re looking for. This is evident from the growing importance of search intent, so doing keyword research without first considering search intent is no longer an option. Are you really offering searchers what they’re looking for when they type in their search term -your keyword? Are they looking for information or to take action, and what do they need from you? Take a good look at the search results for your keywords to answer those questions.

There’s another reason to really focus on what your audience needs: the competition for people’s attention is fierce. So users can be picky, and they want to know whether you can solve their problem, or what they will get out of reading your blog post. They don’t much care about your product-related jargon, or why you want them to read your blog post. So, don’t overlook your visitor’s perspective in your SEO copy. That also includes not writing too much ‘I’ in your content. Make it about your user, not yourself!

Read on: Engaging your online audience: 8 practical tips »

5. Improve your internal linking structure

It’s always a good idea to make it easy for search engines to crawl your site to work out which articles are most important and to help your users find what they’re looking for. That’s why you can’t go wrong by improving your internal linking structure. Make sure that your most important articles also have the most internal links pointing to them. And don’t forget to add links to your most recent posts, to avoid orphaned content. It’s key to make sure that links are relevant to the context of a post or they won’t make sense to either the search engine or the user.

6. Keep your content well-maintained

A final timeless SEO tip: staying on top of your content maintenance always pays off. Not only will you save yourself the effort of cleaning up a load of posts in one go, but your content also stays fresh and relevant. Both search engines and users like that! What’s more, keeping track of your content and the topics it covers helps you avoid keyword cannibalization. And, you don’t want to impair your own chances of ranking by offering too much similar, competing content.

Of course, cleaning up is not generally people’s favorite task, so this is easier said than done. It helps to approach things systematically. Do a site search for one of your most important keywords and see what comes up. Do articles overlap, and do you still need to keep everything? How are pages performing? You’ll probably see some articles that can be deleted or merged. Doing this regularly helps to keep on top of things.

Timeless SEO: Be the best result! 

In the end, these timeless SEO tips boil down to the same thing: if you want to rank, you need to put effort into being the best result. Search engines may change their algorithms, but they ultimately want to offer their users what they’re looking for: high quality content that’s up to date and served on a fast loading website with no dirty tricks. It may seem like a lot of work, but at least it’s a clear objective to work on, right? So, let’s get on with it!

Keep on reading: WordPress SEO: the definitive guide »

The post Timeless SEO tips: 6 universal SEO tactics that never go out of fashion appeared first on Yoast.

Core Web Vitals report Search Console checks site speed

Google is rapidly expanding the capabilities of Search Console — its must-have tool for site owners/managers. We’ve seen al lot of cool structured data reports appear. In this post, we’re examining an enhancement report dedicated to site speed. It’s important to have a fast site with a good user experience and Google’s new tool helps you monitor it and improve it. Here’s is a quick guide to its capabilities.

What is the Core Web Vitals report in Google Search Console?

The Core Web Vitals report gives you an idea of how fast or slow your pages load over any given time. It gives you insights that were almost impossible to get up until now. Running page speed analysis on your complete site is not something the average user can do. Testing a couple of pages in PageSpeed Insights, fine, but 1,000 pages? The new Core Web Vitals report in Google Search Console gives you an idea of how your site loads. It puts all pages in buckets conveniently labeled poor, in need of improvement and good. 

The Core Web Vitals report overview in Search Console (desktop view)

As you know, site speed and user experience have been a hot topic for quite a while. Google even declared page speed a ranking factor as well as new ranking factor called page experience. The search engine is rolling out all sorts of initiatives to help visualize site speed and prioritize improvements, like PageSpeed Insights and Lighthouse. Sometimes, Google also tries some outside the box changes like Chromes “speed badge of shame”. It is one of the indicators in the Chrome browser that helps users understand why a site may be loading slower. In reality, this is more a not so subtle jab at site owners to do something about their slow sites.

Chrome’s slow site badge

This focus on site speed is understandable. Site speed is user experience and users expect fast. But in regards to all those pretty numbers and colors, it’s hard to know what to look for. But as our own SEO expert Jono Alderson loves to say: “Don’t optimize for scores — just make it faster.” Scores say a lot, but all that matters is the perception of speed by users. How quickly can you make your page feel ready?

What does the Core Web Vitals report do?

The Core Web Vitals report looks at the pages on your site, checks their scores in the Web Vitals data and puts these into buckets. There are mobile and desktop specific checks and these might differ. Due to hardware and network differences, it is harder to get a good score on mobile than it is on desktop. You’ll notice, though, that the same URLs are often troublesome both on mobile as well as desktop. They might load slightly faster due to changes in test setting, but they are a point of interest nonetheless.

Two specific reports help you analyze the different sources

While not the end-all tool for measuring site speed, the Core Web Vitals report is a valuable addition. It helps you find problematic URLs which you can check in PageSpeed Insights to get a deeper understanding — plus ways of fixing it. This way, you can keep an eye on all speed-related things, spot trends, make improvements and keep track of the results of those changes. 

Where does it get its metrics?

The cool thing about the Core Web Vitals report is that it uses data from the Chrome UX Report. The Chrome UX Report is a public data set of real user experience data collected from millions of opted-in users and websites. This way, Google collects loads of data — like connection type, type of device and much more — from real situations and used to give a better understanding of performance in the real world. Google uses this data in several speed-oriented Google tools, like PageSpeed Insights and Lighthouse.

What should I look for?

When looking at site speed tools it is easy to focus on the wrong stuff. Many tools check site speed in particular circumstances, like a set location at one point in time, accessed from a specific device. There’s not enough context to make a decision based on this data. That’s why our advice in this has always been for you to look at a multitude of site speed tools. Combined these will give you a better handle on the problem.

Google built the Search Console Core Web Vitals report around three metrics: FCP, FID and CLS. These three metrics form the Core Web Vitals. Here’s what these metrics mean:

Reading the results

The results lead to an overview of pages that have good or poor scores, or are in need of improvement. The score of a URL is the lowest status assigned to it by a specific device. According to Google, the three metrics work together to come to a conclusion about the loading of the URL:

  • A URL on mobile with Poor FID but Needs improvement LCP is labeled Poor on mobile.
  • The URLs on mobile with Needs improvement LCP but Good FID are labeled Needs improvement on mobile.
  • A URL on mobile with Good FID and CLS but no LCP data is considered Good on mobile.
  • A URL with Good FID, LCP, and CLS on mobile and Needs improvement FID, LCP, and CLS on desktop is Good on mobile and Needs improvement on desktop.

These insights give you a good idea of how your pages are performing. As said before, you probably need to run a couple of more tests to get the full picture.

Further analysis on a per-URL basis in PageSpeed Insights

URL grouping

Instead of showing a gazillion URLs and the corresponding results, Google uses aggregate scores and URL groups to make the results slightly less intimidating. For any issue, you’ll see a number of URLs getting the same score or issue. So it might be that from a specific URL, 70 other URLs suffer from the same performance issues. That makes it easier to uncover issues on a grander scale because all these pages probably have the same problems. Of course, you can do a deep-dive and check individual pages by clicking on the URL list and picking a URL to analyze using PageSpeed Insights.

Grouping URLs with similar perfomance issues makes the report easier to digest

Aggregate scores

The same goes for scoring. Grouping makes it easier to digest the results. The Core Web Vitals report in Search Console focuses mainly on FCP and FID, as mentioned above. It’s a good idea to keep an eye on PageSpeed Insights as well, as this has a multitude of other metrics, graphics of the loading process and suggestions to improve the results.

In the Core Web Vitals report, Google calculates the FCP and FID from all the visits to those particular pages. 

  • Aggregate FCP: The aggregate first content paint is the time it takes for 75% of the visits to a URL in the report to reach FCP.
  • Aggregate FID: The aggregate first interactive delay is the time it takes for 95% of the visits to that URL to respond to interactions on that page.
  • CLS agg.: The aggregate cumulative layout shift shown in the report is the lowest common CLS for 75% of visits to a URL in the group.

The calculation of these scores continues to fluctuate due to outside influences. That’s why you might see the trend line go up and down.

Aggregate CLS is the lowest common CLS for 75% of the visits to a URL in that group

Fixing issues and validating fixes

The Core Web Vitals report allows you to monitor your site for speed-related issues. It helps you find problems and prioritize their resolution. Once you or your developer have run through all the suggestions and improvements you can validate the fix. Google will then monitor the pages for 28 days to see if the issue is fixed for these URLs. 

Site speed resources

This post is not about telling you how to fix your site speed issues, but rather guiding you through the new Core Web Vitals report that might give you the insights you need. To get practical, you can start here:

Last but not least, an incredible source of information: Jono’s slide deck on site speed from a talk at SMXL Milan.

The post Core Web Vitals report Search Console checks site speed appeared first on Yoast.

How to use WordPress: Answering 12 common WordPress questions

WordPress is huge. According to the latest stats, WordPress powers almost 35% of the web — and growing quickly. With so many sites using the CMS and so many new sites bursting onto the scene, there’re a lot of new users taking their first steps in the wonderful world of WordPress. People from all walks of life and many of them are bound to ask the same questions about using WordPress. That’s one of the reasons why we launched a free WordPress for Beginners course. In addition, you can quickly get answers to common WordPress questions in this big guide.

New to WordPress? Don’t worry! Our FREE WordPress for beginners training is here to help. Find out how to set up your own site, learn the ins and outs of creating and maintaining it, and more. Soon you’ll be able to do it all by yourself!

Table of contents

1. How to start a WordPress site?

So you’ve decided to start your own blog. Hooray! Before you start blogging away, you’ll have to take some steps, like setting up your own WordPress site. But there’s more to starting your own blog! Here, we’ll give you some more pointers on how to hit the ground running.

A purpose, niche, but don’t forget to have fun!

While years ago you’d follow blogs because of the person behind them, nowadays it’s all about answering people’s questions, a purpose for your blog and link building. Or that’s what it might look like. Don’t forget that blogging should be fun, as it is fun! There’s no such thing as too many blogs, as there’s no one like you. It’s cliche, but it’s the truth. 

Before you start your blog, you need to decide whether you just want to write for fun or to help others and get high rankings. In the first case, you can start a personal lifestyle blog with everything you love. In the second case, you might need to find yourself a niche as this will increase your chance of ranking tremendously.

When you know who you’re writing for and what to write about, you can start working on your first blog posts! Want to make sure this post will be awesome? Then read this step-by-step guide on how to craft the perfect blog post.

Read more: How to start a blog »

2. How to choose a host for your WordPress site?

What to look for in a WordPress host? There are hundreds, if not thousands, of WordPress hosts. How to pick one that’s perfect for you? Check out this curated list of WordPress hosts that we’ve gathered, and consider the following aspects when making a decision.

Speed and stability

Are you going for a small travel blog? Or are you planning to cater to the clothing needs of half a country? Based on what you’re planning to do with your website, you should pick a host that has reliable uptime and keeps running during busy hours. Make sure they can provide a seamless way for you to grow. Because as you gather more daily visitors, you will need to upgrade your hosting at some point.

Accessibility and services

It is good to know if your host provides a support crew that is willing and able to help you with both your financial and technical questions. The following services might also be useful:

  • Alternative ways to access your data in case your WordPress website breaks.
  • A user‑friendly control panel that suits your needs.
  • The service to register and/or maintain domain names.

Security

Even if you don’t know much about the internet and security, you want your websites’ visitors to be safe. Go for a hosting provider that, at the very least, offers the following:

  • (Installation of) Paid or free SSL certificates.
  • Up‑to‑date server software.
  • Continuous malware/virus scans.

Optionally, check for:

  • The option for a 1-click staging environment: this makes building and maintaining a  site much easier.
  • Data retention and regulation protocols: based on your country’s laws, make sure you know where the data is stored and how it is handled.
  • Backup services: if something breaks, you will want to be able to restore it quickly.

A decent firewall (sometimes provided as an additional service, like CloudFlare).

3. How to get to the WordPress dashboard

The WordPress dashboard is the first thing you see when you log into WordPress. From there, you see an overview of various dashboard widgets with relevant information. For instance, our Yoast SEO dashboard widget gives you a quick overview of the SEO health of your site. 

But if you’ve never logged into your WordPress dashboard before, finding it can be a little tricky. When you installed WordPress, you were guided into the WordPress dashboard automagically after the installation process. However, if you haven’t saved the URL of your WordPress dashboard, logging back in is not that easy. 

Luckily, there’s a solution that works for all WordPress sites. When you add /login/ or /admin/ to the URL of your site, you will be sent to the login screen. Upon logging in, you’ll be sent to your WordPress dashboard. So what does that look like? If your domain, for example, is everydayimtravelling.com, the login URL would become everydayimtravelling.com/admin/ and this will prompt you with the login screen. For future convenience, bookmark that page as soon as you’re logged in so you’ll even have a quicker way to log in.

4. How to install and activate a WordPress theme 

A theme governs the layout of your WordPress site. That includes, among other things, the appearance of your posts and pages, and the location of the menus and sidebars. Not surprisingly, finding the right theme is quite important for your website as it makes your site stand out from the masses. But, with so many choices out there, that may be harder than it seems. So, make sure to spend some time and effort and choose the best WordPress theme for your site.

Once you have chosen a theme, installing and activating it is easy. There are two ways to install a new theme in WordPress.

A. Installing a theme from the WordPress directory:

You can install a theme from the WordPress repository. In addition, it is also possible to buy premium themes from a variety of sellers. To install and activate a theme, follow these steps or check out the free WordPress for beginners course.

  1. Open the Themes overview screen
    In the admin menu in your WordPress Backend, click on Appearance, then Themes. The Themes overview screen will open. 
  2. Click the Add New button or the Add New Theme area
    At the top of the screen, you’ll find the Add new button. Alternatively, in the themes overview area, there is an Add New Theme square. Click on either one, to open the screen with available themes.
  3. Preview the theme
    Before you install a theme, it is a good idea to see how it looks on your site. You can do this by hitting the Preview button. Note, this is not an exact match of your site, but it does give you a really good idea if the theme fits your goals.
  4. Install the theme
    Hover over the theme you want to use and click Install. The Install button will transform into an Activate button.
  5. Activate the theme
    Click the Activate button. The theme will be activated, and it will change the appearance of your website. 
  6. Go check what your site looks like on the front end!

B. Upload a theme

You can also add a theme that you’ve downloaded from outside the WordPress directory, this could be from one of the many online theme shops out there. The theme will have to be in a .zip format! To install and activate it, follow these steps or check out the free WordPress for beginners training

  1. In the Themes overview screen, click Add New
    Once you have accessed the Themes overview screen through the admin menu, you’ll see the Add New button at the top of the screen as well as the Add New Theme square in the area below. Click either one to open the screen with available themes. 
  2. Click the upload theme button
    At the top of the screen with available themes is the Upload Theme button. Click the button. You’ll see the new option to upload a .zip file.
  3. Click the Choose file button
    Once you click the button, a dialogue box will appear, that will allow you to choose files from your computer. Find and select the .zip file that you previously downloaded.
  4. Install the theme
    Click the Install Now button. Your theme will be installed and added to your themes overview.
  5. Activate the theme
    In the themes overview screen, hover over the theme, and click Activate. The theme will activate, and it will change the appearance of your website.
  6. Go check what your site looks like on the front end

Curious for more? Check out this lesson on themes of the free WordPress for beginners course.

5. How to install a WordPress plugin

Plugins can change or improve the functionality of your site in various ways. As a WordPress user, you’ll surely need to install a plugin at some point. How do you do that? Easy. You can do it in two ways. Either install a plugin from the WordPress plugin directory or upload a plugin you have downloaded from a third-party. Please note that only free and approved plugins are featured in the WordPress plugin directory.

A. Install a plugin from the WordPress directory

Let’s start by installing a plugin from the WordPress directory. Just follow these simple steps:

  1. Access the WordPress plugin directory
    In the WordPress backend, go to the admin menu. Hover over the Plugins menu item, and select Add New from the fly-out menu. The WordPress plugin directory will appear.
  2. Find the plugin you want
    Use the filter tabs in the toolbar, or search for plugins by typing in a keyword, author, or tag in the search box.
  3. Check the quality of the plugin
    Each plugin is featured in a box with basic information. A good quality plugin will have good reviews, a high number of active installations, frequent updates, and it will be compatible with your version of WordPress.
  4. Install the plugin
    Click the Install Now button in the plugin box. Once the installation is complete, the Activate button will replace the Install button. In addition, the plugin will appear on the Installed Plugins screen.
  5. Activate the plugin
    Clicking Activate is crucial for the plugin to work. You can activate the plugin in the plugin box by clicking the Activate button when the installation is complete. Alternatively, you can click the Activate link in the Plugins overview screen.

B. Upload a plugin

The WordPress plugin directory has a lot of plugins, but it does not have all of them. You can also find some cool plugins on third-party sites like, for example, Yoast SEO Premium. But no worries, you can still easily add these plugins to WordPress. To upload a plugin to WordPress, follow these steps:

  1. Download the plugin from the third-party site
    Note that you will need to download the plugin in a .zip format. Otherwise, the upload may fail. If the plugin is not available for download in that format, contact the plugin provider.
  2. Access the WordPress plugin directory
    In your backend, go to the admin menu. Hover over the Plugins menu item, and select. Add New from the fly-out menu. The WordPress plugin directory will appear.
  3. Upload the plugin
    In the WordPress plugin directory, click the Upload Plugin button at the top of the screen. A new option will appear to add a file. Click the Choose file button, which will trigger a dialogue box to open. Find and select the file from your computer and click Open.
  4. Install the plugin
    Click the Install Now button, and the plugin will be installed.
  5. Activate the plugin
    Remember, you always need to activate a plugin after installing it. Go to your plugins overview, locate the plugin, and click the Activate link.

6. How to change the site title in WordPress

Setting your site title is an important step when creating your website. Your site title is the name that will show up at the top of the browser window, in bookmarks, and when people share your site on social media or via messaging apps.

To set your site title, select Appearance > Customize from your admin dashboard menu. 

This will open the Customizer, which offers a lot of options to customize your site — as you may have guessed from the name. The option we need is right at the top, under Site identity > Site title. 

Enter the name you have chosen for your website, and if possible, try to keep it short. You’ll want to have plenty of space left in the search results to also display the title of your post or page. You can learn about why titles are important here.

And, while you’re there, make sure that you change your site’s favicon, which is called a site icon in WordPress. Find out how to do this in our step-by-step guide on changing your favicon.

7. How to add a page to WordPress

Pages form the backbone of your site structure. Naturally, it is quite important to know how to add a page in WordPress. Luckily, it’s quite easy. Just follow our instructions, and you’ll be adding pages to your WordPress site in no time.

To add a page, do this or check out the free WordPress for beginners training:

  1. Access the Page editing screen
    To access the page editing screen, hover over the Pages menu item in the Admin menu and choose the Add New tab from the flyout menu.
  2. Add a title
    In the editing screen, you will see a block with the text Add title. Add the title of your page there. Click enter to create a new block.
  3. Add content
    Add the content of your page by choosing the appropriate block. If you want to add text, choose the Paragraph block. To add a subheading, choose the Heading block. Choose an appropriate new block for each new type of content you want to add. For example, add an Image block for an image, or a Video block to add a video to your page.
  4. Preview the page
    When you’re done adding content to the page in the editor, we’d advise previewing what the page will look like on your site. To do that, click the Preview button in the top right corner of the screen.
  5. Publish the page
    When you’re satisfied with the preview, all you need to do is click on the Publish button. Your page will be published.

Curious for more? Check out this lesson on creating pages in WordPress of the free WordPress for beginners course.

8. How to delete a page in WordPress

You might think deleting a page from your site is as easy as just hitting that delete button. But with deleting a page, you’ll also delete one or more URLs. This usually results in a ‘404 not found’ error… Which isn’t great, neither for visitors, nor Google. 

So, think before you delete a page. You have two valid options after deleting a page: redirecting it to another page or showing search engine spiders a 410 header, which indicates the page is deleted intentionally. Redirecting a deleted page is the best choice when you have other content on your site that is similar to the deleted content. The goal still is to provide the user with the information he or she was looking for. If there’s no other page that answers the user’s question, you need to decide if you want to improve the existing page or show a 410 header instead. You can set such a header in code, but it’s much easier to do with one of the many redirect plugins for WordPress.

Redirect a page
There are different kinds of redirects, but a 301 redirect is what you should use when you redirect the deleted page to another one. This redirect, called a permanent redirect, makes sure the link value of the old page will be assigned to the new URL. You can redirect posts or pages easily with the Yoast SEO redirect manager, as it will ask you what to do with a URL when you delete a page. Just enter the replacing URL and you’re done!

Show a 410 Content deleted header
Is there no other page on your site that will give the reader the information he or she is looking for? Then it’s better to delete or improve that page. In case of deleting, you’ll need to send a ‘410 content deleted’ header. By using this HTTP status code, you’ll let Google know that you removed the URL on purpose and that Google can remove the URL from its index faster. In the  Yoast SEO redirect manager, you can also choose the option to show a ‘410 content deleted’ page after you’ve deleted a page.

9. How to change the font size in WordPress

What if the WordPress theme you’ve chosen is perfect — except for one little thing? The font size is just a little bit off. Do you need to find yourself a completely new theme because of this? Of course not! Changing the font size in your WordPress theme is relatively easy, but it does involve a little bit of CSS coding. We’ll help you! These are the steps you need to take to change the font size in WordPress:

  1. First, you’ll have to identify what the current font size is. You can do this by opening the Inspector of your browser. When you right-click on the text you’d like to see in a different font size, you’ll be greeted with a menu that will have a direct link to your browser inspector tool. They look different from browser to browser, but they all work in a similar fashion. In Chrome, the menu item is called Inspect and in Firefox Inspect Element. Go ahead and click on that.
  2. Next up is finding the relevant CSS code that dictates the current font size. You’ll be looking for a section inside the Inspector you’ve just activated on the right-hand side of the screen called Styles. 
  3. Below that, you’ll see lines of code that match the element you’ve clicked on. You’ll see a line that has something like font-size: 14px or font-size: 1rem. 
  4. You can manually change the value of that line of code to, for instance, font-size: 16px. You’ll immediately see that change reflected in the open screen of your website. This is how you can check which value works best for you. 
  5. Once you’ve made up your mind on what you’d like to change it to, it’s time to write that down. You’ll also have to save the CSS element in which you changed the value. Most of the time this will be either a p or an h2 or h2 if you’ve selected a title.
  6. You’ll need to entire CSS code snippet for our next step, but it will look like something like this: p {font-size: 16px;}
  7. The next step is to navigate to your WordPress dashboard and find the Customize menu option inside the Appearance menu. 
  8. Click that and you’ll see a preview of your site on the right-hand side of your screen and a menu on the left-hand side. Inside this menu, you’ll find the Additional CSS menu. 
  9. Click on that menu option and you’ll see an input field. Here, you can paste the CSS snippet you saved earlier. As soon as you’ve pasted it, you’ll see the effects reflected on the right-hand side of your screen. 
  10. If it has the desired effect, go ahead and save your settings by clicking the Publish button inside the Customizer section. Afterwards, you click on the plus ( + ) sign in the top left-hand side of the Customizer to close the customizer screen. That’s it — you’ve now successfully changed the font size of your WordPress site.

Many themes have a so-called footer. The footer at the bottom of your pages is a good location to add some links to the less prominent content on your site, such as your address and contact information, terms of service and privacy policy. Not every theme has one, and the ones that do, often have different ways of activating and filling the footer. The Genesis theme, for instance, uses the Customizer settings to get this done, while other themes have a different setting for it. So, you best look around in the settings to find it. Here’s one of the most used ways of adding a footer to your theme.

  • Go to Appearance > Widgets from your admin dashboard.
  • On the left of this page are widgets that you can add to various places in your site’s theme. Those locations are listed on the right.
  • Find the widget that you want to add, and drag it to the location called “Footer”.
  • That’s it!

11. How to embed Youtube videos in WordPress

To really engage your audience, making your content visually appealing is key. One of the easiest ways to do this is by adding some images, or even a video. Embedding video hasn’t always been easy, but thanks to the block editor in WordPress 5.0, it is now! When you are editing a post or a page on your site, here’s how to do it:

  • Go to Youtube and find the video you want to add to your content.
  • Click the Share icon and copy the URL it displays.
  • Open the post or page on your site you want to add the video to.
  • Press the + icon where you want the video to appear to add a new block.
  • Paste the URL of the Youtube video, and it should automatically convert to an embedded video!
  • If you want, you can change the styling of the video to make it stand out.

12. How to do SEO on WordPress

Search Engine Optimization (SEO) is the practice of optimizing your site and content to reach a high position in the search results of Google or other search engines. WordPress itself is already pretty SEO-friendly, but it still pays off to do WordPress SEO. Let’s look at a few important SEO aspects.

Technical SEO

An important first step to take when optimizing your WordPress site, is to make sure everything ‘under the hood’ of your website is in good shape. Technical SEO encompasses many things, such as:

Content SEO

Besides working on your site’s technical side, you should also optimize your content. There are three pillars of content SEO:

Holistic SEO

At Yoast, we believe in holistic SEO: ranking by being the best result. That’s why, in our opinion, flawless user experience (UX) should be part of your SEO strategy. We also believe that websites should be usable for everyone, which is why accessibility matters.

There are also outside factors that affect your (WordPress) SEO, such as link building, social media, and local SEO. We call this off-page SEO. While it can take some effort, working on this aspect of SEO for your WordPress site is also part of a holistic SEO strategy. 

Yoast SEO

As you can see, there are several sides of SEO, and it’s a lot of work to keep everything on track. Luckily, the Yoast plugin will help you work on many aspects, from site structure to content optimization to technical settings. That’s why every website needs Yoast SEO!

Keep reading: WordPress SEO: the definitive guide »

The post How to use WordPress: Answering 12 common WordPress questions appeared first on Yoast.

What’s technical SEO? 8 technical aspects everyone should know

An SEO Basics post about technical SEO might seem like a contradiction in terms. Nevertheless, some basic knowledge about the more technical side of SEO can mean the difference between a high ranking site and a site that doesn’t rank at all. Technical SEO isn’t easy, but here we’ll explain – in layman’s language – which aspects you should (ask your developer to) pay attention to when working on the technical foundation of your website.

What is technical SEO?

Technical SEO refers to improving the technical aspects of a website in order to increase the ranking of its pages in the search engines. Making a website faster, easier to crawl and understandable for search engines are the pillars of technical optimization. Technical SEO is part of on-page SEO, which focuses on improving elements on your website to get higher rankings. It’s the opposite of off-page SEO, which is about generating exposure for a website through other channels.

Why should you optimize your site technically?

Google and other search engines want to present their users with the best possible results for their query. Therefore, Google’s robots crawl and evaluate web pages on a multitude of factors. Some factors are based on the user’s experience, like how fast a page loads. Other factors help search engine robots grasp what your pages are about. This is what, amongst others, structured data does. So, by improving technical aspects you help search engines crawl and understand your site. If you do this well, you might be rewarded with higher rankings or even rich results.

It also works the other way around: if you make serious technical mistakes on your site, they can cost you. You wouldn’t be the first to block search engines entirely from crawling your site by accidentally adding a trailing slash in the wrong place in your robots.txt file.

But it’s a misconception you should focus on technical details of a website just to please search engines. A website should work well – be fast, clear and easy to use – for your users in the first place. Fortunately, creating a strong technical foundation often coincides with a better experience for both users and search engines.

What are the characteristics of a technically optimized website?

A technically sound website is fast for users and easy to crawl for search engine robots. A proper technical setup helps search engines to understand what a site is about and it prevents confusion caused by, for instance, duplicate content. Moreover, it doesn’t send visitors, nor search engines, into dead-end streets by non-working links. Here, we’ll shortly go into some important characteristics of a technically optimized website.

1. It’s fast

Nowadays, web pages need to load fast. People are impatient and don’t want to wait for a page to open. In 2016 already, research showed that 53% of mobile website visitors will leave if a webpage doesn’t open within three seconds. So if your website is slow, people get frustrated and move on to another website, and you’ll miss out on all that traffic.

Google knows slow web pages offer a less than optimal experience. Therefore they prefer web pages that load faster. So, a slow web page also ends up further down the search results than its faster equivalent, resulting in even less traffic.

Wondering if your website is fast enough? Read how to easily test your site speed. Most tests will also give you pointers on what to improve. We’ll guide you through common site speed optimization tips here.

2. It’s crawlable for search engines

Search engines use robots to crawl or spider your website. The robots follow links to discover content on your site. A great internal linking structure will make sure that they’ll understand what the most important content on your site is.

But there are more ways to guide robots. You can, for instance, block them from crawling certain content if you don’t want them to go there. You can also let them crawl a page, but tell them not to show this page in the search results or not to follow the links on that page.

Robots.txt file

You can give robots directions on your site by using the robots.txt file. It’s a powerful tool, which should be handled carefully. As we mentioned in the beginning, a small mistake might prevent robots from crawling (important parts of) your site. Sometimes, people unintentionally block their site’s CSS and JS files in the robot.txt file. These files contain code that tells browsers what your site should look like and how it works. If those files are blocked, search engines can’t find out if your site works properly.

All in all, we recommend to really dive into robots.txt if you want to learn how it works. Or, perhaps even better, let a developer handle it for you!

The meta robots tag

The robots meta tag is a piece of code that you won’t see on the page as a visitor. It’s in the source code in the so-called head section of a page. Robots read this section when finding a page. In it, they’ll find information about what they’ll find on the page or what they need to do with it.

If you want search engine robots to crawl a page, but to keep it out of the search results for some reason, you can tell them with the robots meta tag. With the robots meta tag, you can also instruct them to crawl a page, but not to follow the links on the page. With Yoast SEO it’s easy to noindex or nofollow a post or page. Learn for which pages you’d want to do that.

Read more: https://yoast.com/what-is-crawlability/

3. It doesn’t have (many) dead links

We’ve discussed that slow websites are frustrating. What might be even more annoying for visitors than a slow page, is landing on a page that doesn’t exist at all. If a link leads to a non-existing page on your site, people will encounter a 404 error page. There goes your carefully crafted user experience!

What’s more, search engines don’t like to find these error pages either. And, they tend to find even more dead links than visitors encounter because they follow every link they bump into, even if it’s hidden.

Unfortunately, most sites have (at least) some dead links, because a website is a continuous work in progress: people make things and break things. Fortunately, there are tools that can help you retrieve dead links on your site. Read about those tools and how to solve 404 errors.

To prevent unnecessary dead links, you should always redirect the URL of a page when you delete it or move it. Ideally, you’d redirect it to a page that replaces the old page. With Yoast SEO Premium, you can easily make redirects yourself. No need for a developer!

Read more: https://yoast.com/what-is-a-redirect/

4. It doesn’t confuse search engines with duplicate content

If you have the same content on multiple pages of your site – or even on other sites – search engines might get confused. Because, if these pages show the same content, which one should they rank highest? As a result, they might rank all pages with the same content lower.

Unfortunately, you might have a duplicate content issue without even knowing it. Because of technical reasons, different URLs can show the same content. For a visitor, this doesn’t make any difference, but for a search engine it does; it’ll see the same content on a different URL.

Luckily, there’s a technical solution to this issue. With the so-called, canonical link element you can indicate what the original page – or the page you’d like to rank in the search engines – is. In Yoast SEO you can easily set a canonical URL for a page. And, to make it easy for you, Yoast SEO adds self-referencing canonical links to all your pages. This will help prevent duplicate content issues that you’d might not even be aware of.

5. It’s secure

A technically optimized website is a secure website. Making your website safe for users to guarantee their privacy is a basic requirement nowadays. There are many things you can do to make your (WordPress) website secure, and one of the most crucial things is implementing HTTPS.

HTTPS makes sure that no-one can intercept the data that’s sent over between the browser and the site. So, for instance, if people log in to your site, their credentials are safe. You’ll need a so-called SSL certificate to implement HTTPS on your site. Google acknowledges the importance of security and therefore made HTTPS a ranking signal: secure websites rank higher than unsafe equivalents.

You can easily check if your website is HTTPS in most browsers. On the left hand side of the search bar of your browser, you’ll see a lock if it’s safe. If you see the words “not secure” you (or your developer) have some work to do!

Read more: SEO Basics: What is HTTPS?

6. Plus: it has structured data

Structured data helps search engines understand your website, content or even your business better. With structured data you can tell search engines, what kind of product you sell or which recipes you have on your site. Plus, it will give you the opportunity to provide all kinds of details about those products or recipes.

Because there’s a fixed format (described on Schema.org) in which you should provide this information, search engines can easily find and understand it. It helps them to place your content in a bigger picture. Here, you can read a story about how it works and how Yoast SEO helps you with that.

Implementing structured data can bring you more than just a better understanding by search engines. It also makes your content eligible for rich results; those shiny results with stars or details that stand out in the search results.

7. Plus: It has an XML sitemap

Simply put, an XML sitemap is a list of all pages of your site. It serves as a roadmap for search engines on your site. With it, you’ll make sure search engines won’t miss any important content on your site. The XML sitemap is often categorized in posts, pages, tags or other custom post types and includes the number of images and the last modified date for every page.

Ideally, a website doesn’t need an XML sitemap. If it has an internal linking structure which connects all content nicely, robots won’t need it. However, not all sites have a great structure, and having an XML sitemap won’t do any harm. So we’d always advise having an XML site map on your site.

8. Plus: International websites use hreflang

If your site targets more than one country or countries where the same language is spoken, search engines need a little help to understand which countries or language you’re trying to reach. If you help them, they can show people the right website for their area in the search results.

Hreflang tags help you do just that. You can define for a page which country and language it is meant for. This also solves a possible duplicate content problem: even if your US and UK site show the same content, Google will know it’s written for a different region.

Optimizing international websites is quite a specialism. If you’d like to learn how to make your international sites rank, we’d advise taking a look at our Multilingual SEO training.

Want to learn more about this?

So this is technical SEO in a nutshell. It’s quite a lot already, while we’ve only scratched the surface here. There’s so much more to tell about the technical side of SEO! If you want to take a deep-dive into technical SEO, we’d advise our Technical SEO training or Structured data training. With these courses, you’ll learn how to create a solid technical foundation for your own website.

PS You’re the ambitious type? Get both training courses together and save $59!

Read more: https://yoast.com/wordpress-seo/

The post What’s technical SEO? 8 technical aspects everyone should know appeared first on Yoast.