Connect with us

SEO

What Are Core Web Vitals & How Can You Improve Them?

Published

on

What Are Core Web Vitals & How Can You Improve Them?


Core Web Vitals are speed metrics that are part of Google’s Page Experience signals used to measure user experience. The metrics measure visual load with Largest Contentful Paint (LCP), visual stability with Cumulative Layout Shift (CLS), and interactivity with First Input Delay (FID).

Mobile page experience and the included Core Web Vital metrics have officially been used for ranking pages since May 2021. Desktop signals have also been used as of February 2022.

Google's Page Experience signals include https, no intrusive interstitials, mobile-friendliness, and core web vitals

The easiest way to see the metrics for your site is with the Core Web Vitals report in Google Search Console. With the report, you can easily see if your pages are categorized as “poor URLs,” “URLs need improvement,” or “good URLs.”

The thresholds for each category are as follows:

  Good Needs improvement Poor
LCP <=2.5s <=4s >4s
FID <=100ms <=300ms >300ms
CLS <=0.1 <=0.25 >0.25

And here’s how the report looks:

Mobile and desktop Core Web Vitals report in Google Search Console

If you click into one of these reports, you get a better breakdown of the issues with categorization and the number of URLs impacted.

Breakdown of Core Web Vitals issues in GSC

Clicking into one of the issues gives you a breakdown of page groups that are impacted. This grouping of pages makes a lot of sense. This is because most of the changes to improve Core Web Vitals are done for a particular page template that impacts many pages. You make the changes once in the template, and that will be fixed across the pages in the group.

GSC page groups with specific issues

Now that you know what pages are impacted, here’s some more information about Core Web Vitals and how you can get your pages to pass the checks:

Quick facts about Core Web Vitals

Fact 1: The metrics are split between desktop and mobile. Mobile signals are used for mobile rankings, and desktop signals are used for desktop rankings.

Fact 2: The data comes from the Chrome User Experience Report (CrUX), which records data from opted-in Chrome users. The metrics are assessed at the 75th percentile of users. So if 70% of your users are in the “good” category and 5% are in the “need improvement” category, then your page will still be judged as “need improvement.”

Fact 3: The metrics are assessed for each page. But if there isn’t enough data, Google Webmaster Trends Analyst John Mueller states that signals from sections of a site or the overall site may be used. In our Core Web Vitals data study, we looked at over 42 million pages and found that only 11.4% of the pages had metrics associated with them.

Fact 4: With the addition of these new metrics, Accelerated Mobile Pages (AMP) was removed as a requirement from the Top Stories feature on mobile. Since new stories won’t actually have data on the speed metrics, it’s likely the metrics from a larger category of pages or even the entire domain may be used.

Fact 5: Single Page Applications don’t measure a couple of metrics, FID and LCP, through page transitions. There are a couple of proposed changes, including the App History API and potentially a change in the metric used to measure interactivity that would be called “Responsiveness.”

Fact 6: The metrics may change over time, and the thresholds may as well. Google has already changed the metrics used for measuring speed in its tools over the years, as well as its thresholds for what is considered fast or not.

Core Web Vitals have already changed, and there are more proposed changes to the metrics. I wouldn’t be surprised if page size was added. You can pass the current metrics by prioritizing assets and still have an extremely large page. It’s a pretty big miss, in my opinion.

Are Core Web Vitals important for SEO?

There are over 200 ranking factors, many of which don’t carry much weight. When talking about Core Web Vitals, Google reps have referred to these as tiny ranking factors or even tiebreakers. I don’t expect much, if any, improvement in rankings from improving Core Web Vitals. Still, they are a factor, and this tweet from John shows how the boost may work.

There have been ranking factors targeting speed metrics for many years. So I wasn’t expecting much, if any, impact to be visible when the mobile page experience update rolled out. Unfortunately, there were also a couple of Google core updates during the time frame for the Page Experience update, which makes determining the impact too messy to draw a conclusion.

There are a couple of studies that found some positive correlation between passing Core Web Vitals and better rankings, but I personally look at these results with skepticism. It’s like saying a site that focuses on SEO tends to rank better. If a site is already working on Core Web Vitals, it likely has done a lot of other things right as well. And people did work on them, as you can see in the chart below from our data study.

Graph showing percentage of good FID, LCP, and CLS over time

Let’s look at each of the Core Web Vitals in more detail.

Components of Core Web Vitals

Here are the three current components of Core Web Vitals and what they measure:

  • Largest Contentful Paint (LCP) – Visual load
  • Cumulative Layout Shift (CLS) – Visual stability
  • First Input Delay (FID) – Interactivity

Note there are additional Web Vitals that serve as proxy measures or supplemental metrics but are not used in the ranking calculations. The Web Vitals metrics for visual load include Time to First Byte (TTFB) and First Contentful Paint (FCP). Total Blocking Time (TBT) and Time to Interactive (TTI) help to measure interactivity.

Largest Contentful Paint

LCP is the single largest visible element loaded in the viewport.

The largest element is usually going to be a featured image or maybe the <h1> tag. But it could also be any of these:

  • <img> element
  • <image> element inside an <svg> element
  • Image inside a <video> element
  • Background image loaded with the url() function
  • Blocks of text

<svg> and <video> may be added in the future.

How to see LCP

In PageSpeed Insights, the LCP element will be specified in the “Diagnostics” section. Also, notice there is a tab to select LCP that will only show issues related to LCP.

Largest Contentful Paint issues in PageSpeed Insights point to the blue LCP tab

In Chrome DevTools, follow these steps:

  1. Performance > check “Screenshots”
  2. Click “Start profiling and reload page”
  3. LCP is on the timing graph
  4. Click the node; this is the element for LCP
Checking LCP in Chrome DevTools

Optimizing LCP

As we saw in PageSpeed Insights, there are a lot of issues that need to be solved, making LCP the hardest metric to improve, in my opinion. In our study, I noticed that most sites didn’t seem to improve their LCP over time.

Here are a few concepts to keep in mind and some ways you can improve LCP.

1. Smaller is faster

If you can get rid of any files or reduce their sizes, then your page will load faster. This means you may want to delete any files not being used or parts of the code that aren’t used.

How you go about this will depend a lot on your setup, but the process is usually referred to as tree shaking. This is commonly done via some kind of automated process. But in some systems, this step may not be worth the effort.

There’s also compression, which makes the file sizes smaller. Pretty much every file type used to build your website can be compressed, including CSS, JavaScript, Images, and HTML.

2. Closer is faster

Information takes time to travel. The further you are from a server, the longer it takes for the data to be transferred. Unless you serve a small geographical area, having a Content Delivery Network (CDN) is a good idea.

CDNs give you a way to connect and serve your site that’s closer to users. It’s like having copies of your server in different locations around the world.

3. Use the same server if possible

When you first connect to a server, there’s a process that navigates the web and establishes a secure connection between you and the server. This takes some time, and each new connection you need to make adds additional delay while it goes through the same process. If you host your resources on the same server, you can eliminate those extra delays.

If you can’t use the same server, you may want to use preconnect or DNS-prefetch to start connections earlier. A browser will typically wait for the HTML to finish downloading before starting a connection. But with preconnect or DNS-prefetch, it starts earlier than it normally would. Do note that DNS-prefetch has better support than preconnect.

4. Cache what you can

When you cache resources, they’re downloaded for the first page view but don’t need to be downloaded for subsequent page views. With the resources already available, additional page loads will be much faster. Check out how few files are downloaded in the second page load in the waterfall charts below.

First load of the page:

Waterfall chart for the first load of the page

Second load of the page:

Waterfall chart for the second load of the page, which is much smaller
5. Prioritization of resources

To pass the LCP check, you should prioritize how your resources are loaded in the critical rendering path. What I mean by that is you want to rearrange the order in which the resources are downloaded and processed. You should first load the resources needed to get the content users see immediately, then load the rest.

Many sites can get to a passing time for LCP by just adding some preload statements for things like the main image, as well as necessary stylesheets and fonts. Let’s look at how to optimize the various resource types.

Images Early

If you don’t need the image, the most impactful solution is to simply get rid of it. If you must have the image, I suggest optimizing the size and quality to keep it as small as possible.

On top of that, you may want to preload the image. This is going to start the download of that image a little earlier. This means it’s going to display a little earlier. A preload statement for a responsive image looks like this:

<link rel="preload" as="image" href=“cat.jpg"
imagesrcset=“cat_400px.jpg 400w,
cat_800px.jpg 800w, cat_1600px.jpg 1600w"
image>

Images Late

You should lazy load any images that you don’t need immediately. This loads images later in the process or when a user is close to seeing them. You can use loading=“lazy” like this:

<img src=“cat.jpg" alt=“cat" loading="lazy">

CSS Early

We already talked about removing unused CSS and minifying the CSS you have. The other major thing you should do is to inline critical CSS. What this does is it takes the part of the CSS needed to load the content users see immediately and then applies it directly into the HTML. When the HTML is downloaded, all the CSS needed to load what users see is already available.

Inlining critical CSS moves part of the CSS into the HTML
CSS Late

With any extra CSS that isn’t critical, you’ll want to apply it later in the process. You can go ahead and start downloading the CSS with a preload statement but not apply the CSS until later with an onload event. This looks like:

<link rel="preload" href="https://ahrefs.com/blog/core-web-vitals-2/stylesheet.css" as="style" onload="this.rel="stylesheet"">

Fonts

I’m going to give you a few options here for what I think is:

Good: Preload your fonts. Even better if you use the same server to get rid of the connection.

Better: Font-display: optional. This can be paired with a preload statement. This is going to give your font a small window of time to load. If the font doesn’t make it in time, the initial page load will simply show a default font. Your custom font will then be cached and show up on subsequent page loads.

Best: Just use a system font. There’s nothing to load—so no delays.

JavaScript Early

We already talked about removing unused JavaScript and minifying what you have. If you’re using a JavaScript framework, then you may want to prerender or server-side render (SSR) the page.

Your other options are to inline the JavaScript needed early. It’s similar to what we discussed about CSS, where you load portions of the code within the HTML or preload the JavaScript files so that you get them earlier. This should only be done for assets needed to load the content above the fold or if some functionality depends on this JavaScript.

JavaScript Late

Any JavaScript you don’t need immediately should be loaded later. There are two main ways to do that—defer and async attributes. These attributes can be added to your script tags.

Usually, a script being downloaded blocks the parser while downloading and executing. Async will let the parsing and downloading occur at the same time but still block parsing during the script execution. Defer will not block parsing during the download and only execute after the HTML has finished parsing.

How async and defer impact html loading

Which should you use? For anything that you want earlier or that has dependencies, I’ll lean toward async. For instance, I tend to use async on analytics tags so that more users are recorded. You’ll want to defer anything that is not needed until later or doesn’t have dependencies. The attributes are pretty easy to add. Check out these examples:

Normal:

<script src="https://www.domain.com/file.js"></script>

Async:

<script src="https://www.domain.com/file.js" async></script>

Defer:

<script src="https://www.domain.com/file.js" defer></script>

Misc

There are a few other technologies that you may want to look at to help with performance. These include Speculative Prerendering, Early Hints, Signed Exchanges, and HTTP/3.

Resources

Cumulative Layout Shift

CLS measures how elements move around or how stable the page layout is. It takes into account the size of the content and the distance it moves. Google has already updated how CLS is measured. Previously, it would continue to measure even after the initial page load. But now it’s restricted to a five-second time frame where the most shifting occurs.

It can be annoying if you try to click something on a page that shifts and you end up clicking on something you don’t intend to. It happens to me all the time. I click on one thing and, suddenly, I’m clicking on an ad and am now not even on the same website. As a user, I find that frustrating.

Example of the layout shifting when trying to click a link

Common causes of CLS include:

  • Images without dimensions.
  • Ads, embeds, and iframes without dimensions.
  • Injecting content with JavaScript.
  • Applying fonts or styles late in the load.

How to see CLS

In PageSpeed Insights, if you select CLS, you can see all the related issues. The main one to pay attention to here is “Avoid large layout shifts.”

CLS issues in PageSpeed Insights

We’re using WebPageTest. In Filmstrip View, use the following options:

  • Highlight Layout Shifts
  • Thumbnail Size: Huge
  • Thumbnail Interval: 0.1 secs

Notice how our font restyles between 5.1 secs and 5.2 secs, shifting the layout as our custom font is applied.

Layout shift from applying a custom font

Smashing Magazine also had an interesting technique where it outlined everything with a 3px solid red line and recorded a video of the page loading to identify where layout shifts were happening.

Optimizing CLS

In most cases, to optimize CLS, you’re going to be working on issues related to images, fonts or, possibly, injected content. Let’s look at each case.

Images

For images, what you need to do is reserve the space so that there’s no shift and the image simply fills that space. This can mean setting the height and width of images by specifying them within the <img> tag like this:

<img src=“cat.jpg" width="640" height="360" alt=“cat with string" />

For responsive images, you need to use a srcset like this:

<img

width="1000"

height="1000"

src="https://ahrefs.com/blog/core-web-vitals-2/puppy-1000.jpg"

alt="Puppy with balloons" />

And reserve the max space needed for any dynamic content like ads.

Fonts

For fonts, the goal is to get the font on the screen as fast as possible and to not swap it with another font. When a font is loaded or changed, you end up with a noticeable shift like a Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT).

If you can use a system font, do that. There’s nothing to load, so there are no delays or changes that will cause a shift.

If you have to use a custom font, the current best method for minimizing CLS is to combine  <link rel=”preload”> (which is going to try to grab your font as soon as possible) and font-display: optional (which is going to give your font a small window of time to load). If the font doesn’t make it in time, the initial page load will simply show a default font. Your custom font will then be cached and show up on subsequent page loads.

Injected content

When content is dynamically inserted above existing content, this causes a layout shift. If you’re going to do this, reserve enough space for it ahead of time.

Resources

First Input Delay

FID is the time from when a user interacts with your page to when the page responds. You can also think of it as responsiveness.

Example interactions:

  • Clicking on a link or button
  • Inputting text into a blank field
  • Selecting a drop-down menu
  • Clicking a checkbox

Some events like scrolling or zooming are not counted.

It can be frustrating trying to click something, and nothing happens on the page.

Not all users will interact with a page, so the page may not have an FID value. This is also why lab test tools won’t have the value because they’re not interacting with the page. What you may want to look at for lab tests is Total Blocking Time (TBT). In PageSpeed Insights, you can use the TBT tab to see related issues.

TBT issues in PageSpeed Insights

What causes the delay?

JavaScript competing for the main thread. There’s just one main thread, and JavaScript competes to run tasks on it. Think of it like JavaScript having to take turns to run.

While a task is running, a page can’t respond to user input. This is the delay that is felt. The longer the task, the longer the delay experienced by the user. The breaks between tasks are the opportunities that the page has to switch to the user input task and respond to what they wanted to do.

Optimizing FID

Most pages pass FID checks. But if you need to work on FID, there are just a few items you can work on. If you can reduce the amount of JavaScript running, then do that.

If you’re on a JavaScript framework, there’s a lot of JavaScript needed for the page to load. That JavaScript can take a while to process in the browser, and that can cause delays. If you use prerendering or (SSR), you shift this burden from the browser to the server.

Another option is to break up the JavaScript so that it runs for less time. You take those long tasks that delay response to user input and break them into smaller tasks that block for less time. This is done with code splitting, which breaks the tasks into smaller chunks.

There’s also the option of moving some of the JavaScript to a service worker. I did mention that JavaScript competes for the one main thread in the browser, but this is sort of a workaround that gives it another place to run.

There are some trade-offs as far as caching goes. And the service worker can’t access the DOM, so it can’t do any updates or changes. If you’re going to move JavaScript to a service worker, you really need to have a developer that knows what to do.

Resources

Tools for measuring Core Web Vitals

There are many tools you can use for testing and monitoring. Generally, you want to see the actual field data, which is what you’ll be measured on. But the lab data is more useful for testing.

The difference between lab and field data is that field data looks at real users, network conditions, devices, caching, etc. But lab data is consistently tested based on the same conditions to make the test results repeatable.

Many of these tools use Lighthouse as the base for their lab tests. The exception is WebPageTest, although you can also run Lighthouse tests with it as well. The field data comes from CrUX.

Field Data

There are some additional tools you can use to gather your own Real User Monitoring (RUM) data that provide more immediate feedback on how speed improvements impact your actual users (rather than just relying on lab tests).

Lab Data

PageSpeed Insights is great to check one page at a time. But if you want both lab data and field data at scale, the easiest way to get that is through the API. You can connect to it easily with Ahrefs Webmaster Tools (free) or Ahrefs’ Site Audit and get reports detailing your performance.

CWV reports in Ahrefs' Site Audit

Note that the Core Web Vitals data shown will be determined by the user-agent you select for your crawl during the setup.

I also like the report in GSC because you can see the field data for many pages at once. But the data is a bit delayed and on a 28-day rolling average, so changes may take some time to show up in the report.

Another thing that may be useful is you can find the scoring weights for Lighthouse at any point in time and see the historical changes. This can give you some idea of why your scores have changed and what Google may be weighting more over time.

Lighthouse scoring calculator with metric weights

Final thoughts

I don’t think Core Web Vitals have much impact on SEO and, unless you are extremely slow, I generally won’t prioritize fixing them. If you want to argue for Core Web Vitals improvements, I think that’s hard to do for SEO.

However, you can make a case for it for user experience. Or as I mentioned in my page speed article, improvements should help you record more data in your analytics, which “feels” like an increase. You may also be able to make a case for more conversions, as there are a lot of studies out there that show this (but it also may be a result of recording more data).

Here’s another key point: work with your developers; they are the experts here. Page speed can be extremely complex. If you’re on your own, you may need to rely on a plugin or service (e.g., WP Rocket or Autoptimize) to handle this.

Things will get easier as new technologies are rolled out and many of the platforms like your CMS, your CDN, or even your browser take on some of the optimization tasks. My prediction is that within a few years, most sites won’t even have to worry much because most of the optimizations will already be handled.

Many of the platforms are already rolling out or working on things that will help you.

Already, WordPress is preloading the first image and is putting together a team to work on Core Web Vitals. Cloudflare has already rolled out many things that will make your site faster, such as Early Hints, Signed Exchanges, and HTTP/3. I expect this trend to continue until site owners don’t even have to worry about working on this anymore.

As always, message me on Twitter if you have any questions.





Source link

SEO

Headings With Hierarchical Structure An “Awesome Idea”

Published

on

Headings With Hierarchical Structure An "Awesome Idea"

Google’s John Mueller discussed heading elements with a member of the SEO community where he affirmed the usefulness of using hierarchical structure when using heading elements.

Background Context to What Mueller Said

Heading elements <H1> – <H6> are supposed to be used to indicate what a section of a webpage is about.

Furthermore the heading elements have a ranking order, with the <H1> being the highest rank of importance and the <H6> being the lowest level of importance.

The heading element purpose is to label what a section of content is about.

HTML specifications allow the use of multiple <H1> elements. So, technically, using more than one <H1> is perfectly valid.

Section 4.3.11 of the official HTML specifications states:

“h1–h6 elements have a heading level, which is given by the number in the element’s name.

If a document has one or more headings, at least a single heading within the outline should have a heading level of 1.”

Nevertheless, using more than on <H1> is not considered a best practice.

The Mozilla developer reference page about the use of headings recommends:

“The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

…Avoid using multiple <h1> elements on one page

While using multiple <h1> elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice. A page should generally have a single <h1> element that describes the content of the page (similar to the document’s <title> element).”

John Mueller has previously said that it doesn’t matter if a webpage uses one <H1> or five <H1> headings.

The point of his statement is that the level of the heading isn’t as important as how they are used, with the best practice being the use of  headings for indicating what a section of content is about.

What Mueller Said on Twitter

A member of the SEO community was joking around and gently ribbed Mueller about using more than one H1.

He tweeted:

The SEO followed up by sharing how he preferred using the best practices for heading elements by using only one <H1>, to denote what the page is about and then using the rest of the headings in order of rank, give a webpage a hierarchical structure.

A Hierarchical structure communicates sections of a webpage and any subsections within each section.

He tweeted:

“I’m too traditional with header elements. (HTML 4 for Life! lol)

I’d still recommend using just one H1 element on a page.

I patiently go back to pages to implement header hierarchy for fun.”

John Mueller tweeted his approval in response:

“I think that’s an awesome idea & a great practice.

Header hierarchy is not just useful to Google, it’s also important for accessibility.

(Google still has to deal with whatever weird things people throw up on the web, but being thoughtful in your work always makes sense.)”

Hierarchical Page Structure

In the early days of SEO, <H1> used to be counted as an important ranking factor, one that was more important than an <H2>.

So, back then, one always put their most important keywords in the <H1> in order to signal to Google that the page was relevant for that keyword.

H1 used to have more ranking power so it was essential to use the <H1> to help rankings.

Google’s algorithm was using keywords as a way to “guess” what a webpage was about.

Keywords in the anchor text, keywords in the title tag and keywords in the <H1> helped Google guess what a page was relevant for.

But nowadays, Google doesn’t have to guess.

It is able to understand what sections of a webpage are about, and consequently, what the entire webpage is about.

Despite those advances, many SEOs still believe that using an <H1> is some kind of magic ranking factor.

Headings are no longer about shouting what keyword you want to rank for.

The role of heading elements are now about telling search engines what a section of content is about.

Each section of a content is generally about something specific.

Heading tags make it easier for search engines to know what a page is about.

And that helps them rank the page for the topic.

And according to the official HTML specifications, that’s technically the proper way to use heading elements.

Lastly, Mueller mentioned a quality of the heading element as a way to better communicate for accessibility reasons, like for people who use screen readers.

The official HTML specifications say:

“Descriptive headings are especially helpful for users who have disabilities that make reading slow and for people with limited short-term memory.

These people benefit when section titles make it possible to predict what each section contains.”

So thank you John Mueller for calling attention to the benefits of using headings with a hierarchical structure, for calling attention to how hierarchical structure is useful for Google and for accessibility.

Featured image by Shutterstock/Asier Romero



Source link

Continue Reading

SEO

The Challenges & Opportunities For Marketers

Published

on

The Challenges & Opportunities For Marketers

Google’s parent company, Alphabet Inc., reported its fourth straight quarter of declining profits.

It made $76 billion in sales over the past three months, but it wasn’t enough to meet Wall Street’s expectations.

Google’s revenue was down 9% compared to last year, and its biggest business, Google Search, saw a 1% drop in revenue. Even YouTube’s advertising sales fell by nearly 8%.

Alphabet has decided to cut its workforce by 12,000 and expects to spend between $1.9 billion and $2.3 billion on employee severance costs.

This latest earnings report shows tech giants like Google are facing challenges in the current digital advertising landscape.

But Google’s CEO, Sundar Pichai, believes that the company’s long-term investments in AI will be a key factor in its future success.

In a press release, Pichai says he expects major AI advancements to be soon revealed in Google search and other areas:

“Our long-term investments in deep computer science make us extremely well-positioned as AI reaches an inflection point, and I’m excited by the AI-driven leaps we’re about to unveil in Search and beyond. There’s also great momentum in Cloud, YouTube subscriptions, and our Pixel devices. We’re on an important journey to re-engineer our cost structure in a durable way and to build financially sustainable, vibrant, growing businesses across Alphabet.”

Alphabet’s CFO, Ruth Porat, reported that their Q4 consolidated revenues were $76 billion, a 1% increase from the previous year. The full year 2022 saw revenues of $283 billion, a 10% increase.

Going forward, Alphabet is changing how it reports on its AI activities.

DeepMind, which used to be reported under “Other Bets,” will now be reported as part of Alphabet’s corporate costs to reflect its increasing integration with Google Services and Google Cloud.

What Does This Mean For Marketing Professionals?

It’s important to stay updated on the latest developments in the tech industry and how they may affect advertising strategies.

Google’s declining profits and decreased revenue in their search and YouTube platforms are reminders that the digital advertising landscape is constantly evolving, and companies must adapt to keep up.

Marketers should consider diversifying their advertising efforts across multiple platforms to minimize the impact of market swings.

Additionally, Google’s focus on AI and its integration with Google Services and Cloud is something to keep an eye on.

As AI advances, it may offer new opportunities for marketers to target and engage with their audience effectively.

By staying informed on the latest tech advancements, marketers can stay ahead of the curve and make the most of these opportunities.

Despite Google’s recent financial setbacks, the tech giant is still a major player in the digital advertising landscape, and its investments in AI show its commitment to continued growth and innovation.


Featured Image: Sergio Photone/Shutterstock

Source: Alphabet



Source link

Continue Reading

SEO

How to Use WordPress in 9 Simple Steps (Beginner’s Guide)

Published

on

How to Use WordPress in 9 Simple Steps (Beginner’s Guide)

WordPress is the world’s largest content management system (CMS)—around 810 million websites are built on it.

It’s free to use and includes all the features any website owner could need. And if it doesn’t have a feature you want or need, you can have a developer create it for you because it’s built on open-source software.

But with all of these features come some complications. WordPress has a fairly steep learning curve compared to other CMSes like Wix or Squarespace.

I’ve built dozens of websites using WordPress.org (not WordPress.com, which is a totally different beast) and have narrowed down the process to nine simple steps that anyone can follow.

Let’s start with…

Step 1. Get a domain name and hosting

Every website built on WordPress.org needs a domain name (www.thisisyourdomainname.com) and a hosting service that stores and displays your website on the internet.

You can buy a domain name for a small fee from a domain name registrar like NameCheap or GoDaddy. However, if you buy your domain name and your hosting from separate companies, you will need to change your website’s Domain Nameservers (DNS) to point your domain name from your registrar to your hosting company.

They look like this:

SiteGround DNS settings example

It’s a little cheaper to do it this way but not worth the hassle in my opinion. Instead, most hosting providers (such as SiteGround or Bluehost) can also sell you a domain name and connect it with your website automatically, allowing you to skip messing with DNS settings.

You can check out this guide to choosing a domain name if you’re not sure what to pick.

Step 2. Install WordPress

Once you purchase hosting, most hosting providers have a one-click install to set up WordPress on your website. Here are some links to guides on how to do this with common hosting services:

You can also opt for a faster (but more expensive) dedicated hosting provider like Kinsta or WP Engine. These companies will set up WordPress for you when you buy their hosting.

Step 3. Familiarize yourself with the UI

Now that you have a website with WordPress installed, let’s get into how to use WordPress. You can log in to your WordPress dashboard by going to www.yourdomainname.com/wp-admin.

Once you log in, your dashboard will look like this (with fewer plugins since you’re on a fresh install):

WordPress user interface

Let me explain the options here:

  • Posts: This is where you’ll create blog posts.
  • Media: You can go here to see all the media on your site, such as images and videos. I typically upload media directly to my posts and pages and don’t visit media often.
  • Pages: This is where you’ll create static pages on your site, such as your homepage, about page, and contact page.
  • Comments: Here is where you’ll moderate any blog comments.
  • Appearance: This is where you’ll customize the appearance of your website, such as your website’s theme, font type, colors, and more.
  • Plugins: A plugin is an add-on to your website that adds functionality, such as custom contact forms or pop-ups on your website. I’ll discuss these in more detail later.
  • Users: Here is where you can add users to your website, such as writers, editors, and administrators.
  • Settings: Pretty straightforward; here is where your general website settings are located.

Now that you know what each option does, let’s get your website settings dialed in.

Step 4. Optimize your settings

Your WordPress website comes with some generic settings that need to be changed, as well as some things I recommend changing to optimize your website for search engines.

Specifically, you should:

  • Change your title, tagline, time zone, and favicon.
  • Change your permalink structure.
  • Configure your reading settings.
  • Delete any unused themes.
  • Change your domain from HTTP to HTTPS.

Let’s walk through each of these steps.

Change your title, tagline, time zone, and favicon

Head to Settings > General to find these settings. Change the title of your website and the tagline, which can appear underneath the title if you choose to display it.

Next, check that the time zone is correct (according to your local time zone) and upload your favicon. A favicon is the little icon that shows up in browser tabs next to the title of the page, like this:

Examples of favicons

You can make a favicon for free with Canva. Just make a 50×50 design with whatever you want your favicon to look like. Check out this guide to learn more. 

Change your permalink structure

Head to Settings > Permalinks. A permalink is the URL structure your blog posts take when you publish them. By default, WordPress displays the date in your URLs, which isn’t great for SEO or readability.

WordPress permalink structure settings

I always change this to the “Post name” option (/sample-post/) to add the title of the post by default. You want to optimize all of your URLs individually when possible, but this setting will make the process easier.

Configure your reading settings

Head over to Settings > Reading to choose whether you want your homepage to be a static page or if you want it to be a feed of your latest blog posts. 

WordPress homepage display settings

Personally, I always create a unique static page to use as my homepage because it gives me more control over the homepage. I like to add internal links to specific pages to help them rank higher on Google, as well as add an email opt-in form on the homepage.

Check out this guide to homepage SEO to learn more.

Delete any unused themes 

By default, you have a few themes installed. Once you choose a theme in step #5 below, you should delete any unused themes to remove vulnerabilities from your site (hackers can attack WordPress websites with outdated themes).

To do that, go to Appearance > Themes, click on the unused theme, then click the red Delete button in the bottom right.

How to delete unused themes on WordPress

Change your domain from HTTP to HTTPS

The “S” in HTTPS stands for secure. Adding this is done with an SSL certificate, and it’s an important step. It means your website is encrypted and safer for viewers.

Having HTTPS instead of HTTP gives you the “lock” icon next to your URL—Google (and most internet users) wants to see a secure website.

HTTPS secure "lock" icon

Most hosting providers automatically activate the secure version of your website. But sometimes, it needs to be manually activated by you. Here are guides on how to do this with common hosting providers:

If your host isn’t shown here, just do a Google search for “[your host] SSL encryption.”

Step 5. Select and customize your theme

Once you’ve optimized your settings, it’s time to start actually building your website using a WordPress theme. A theme is a customizable template that determines what your website looks like. 

You can browse for themes by going to Appearance > Themes, then clicking the Add new button at the top of the page. 

WordPress theme page

The generic Twenty Twenty-Three theme is actually pretty good. Most WordPress themes these days are optimized to show up in search engines and for requirements of the modern user, such as being mobile-friendly. 

However, some themes have a lot of added bloat that can slow a website down, so choose a theme that only has the features you need without extras you won’t use.

Alternatively, if you don’t like any themes or want something that’s more drag-and-drop, you can use a website builder like Elementor or Thrive Architect. These tools make building a website extremely easy, but they do add bloat that can slow a website down.

I use Elementor to build my websites but only use it to build static pages that I want to convert well. Then I use the built-in Guttenberg editor for my blog posts.

If you decide to go with a regular theme rather than a theme builder, you can edit the theme by going to Appearance > Customize. You’ll be taken to the following editor:

WordPress theme customization options

Depending on the theme you installed, you may have more or fewer options than the screenshot above. Rather than trying to cover every option you may encounter, I’ll just recommend that you go through each option to see what it does. 

For the most part, the options are self-explanatory. If you hit a snag, you can always do a Google search for that option in your theme to see forum posts from other users or even the theme’s FAQ or manual.

Step 6. Build your basic pages

After you’ve selected a theme, you can start building your website’s pages. Every website typically needs at least the following pages:

  • A homepage
  • A contact page
  • An about page
  • A privacy policy page
  • A terms of service page

Rather than going through how you should create each of these pages, I’ll refer you to the following guides:

Keep in mind that your privacy policy and terms of service (ToS) pages will vary depending on the country you live in. If you’re in the U.S., you can follow this guide for privacy policies and this guide for ToS pages.

That said, there are some general tips you should follow when building any page on your website. In general, make sure that your font is easy to read and a good visible size (18–20px is typical), your colors match, and you avoid too much clutter.

Here’s a good example of a webpage that is clean, legible, and thought out:

Ahrefs about page example

Here’s an example of a webpage that has too much clutter and displays an ad over half the page, causing confusion:

CNN poor website design

In general, less is more and legibility is better than fancy fonts.

Step 7. Install these essential plugins

One of the best parts of using WordPress is access to its massive library of plugins

A plugin is a custom piece of code written by a developer that anyone can install on their WordPress website in order to add specific functionality to the site, such as a contact form, extra customization options, or SEO features.

You can install a new plugin one of two ways. Head over to Plugins > Add New. From here, you can either:

  1. Browse the plugins directly on this page, then install and activate them directly.
  2. Download a plugin .zip file from the plugin’s website, then click the Upload plugin button at the top of the screen and upload the .zip file.
How to upload a plugin to your WordPress website

While many plugins are free, some are paid or have a premium paid version. It depends on what you need. However, I always install the following free plugins on my websites:

Rank Math: This plugin makes basic on-page SEO easier. It tells you if you’re missing basic things like metadata, image alt text, and more. It also allows you to create a robots.txt file and a sitemap, which are important for search engines to crawl your website the way you want.

Wordfence: This is a security plugin to help prevent your website from being hacked. I always install some sort of security plugin on my sites.

Insert Headers and Footers: One of the things you’ll often find yourself needing to do is insert code into the header or footer of your pages. You need to do this for everything from setting up Google Analytics and Google Search Console to adding the Facebook Remarketing pixel and more. Having this plugin makes it much easier to add this code.

Keep in mind that installing a lot of plugins on your website can cause code bloat and slow down your loading speeds, so only install plugins that you really need. 

Step 8. Start creating content

Now you know all the basics of how to use WordPress. But another important thing I want to talk about, which is probably why you wanted to start a WordPress website in the first place—how to create content for your blog.

Writing blog posts is an essential part of showing up on search engines like Google, having something to share on social media, and attracting more visitors to your website.

What you write about depends on your goals. I always start with some basic keyword research to figure out what people are searching for on Google that relates to my website.

A quick and easy way to do this is by plugging a broad keyword into Ahrefs’ free keyword generator tool to get some keyword ideas. 

For example, if I’m starting a website about farming, I may type “farm” into the tool. I can see keyword ideas like “farming insurance” and “vertical farming,” which are two potential blog topics I can write about.

Keyword ideas for farming, via Ahrefs' free keyword generator tool

If I want to get a little more specific, I can try a keyword like “how to start a farm.” This gives me ideas like “how to start a farm with no money” and “how to start a farm in texas.”

Keyword ideas for "how to start a farm," via Ahrefs' free keyword generator tool

Try different seed keywords—both broad keywords and more specific ones—to come up with some blog topics. Once you have a few ideas, go ahead and outline the article and then write it and publish it.

Check out our guide to writing a blog post to learn more.

Step 9. Monitor your website for technical issues

A regular part of maintaining your WordPress website is keeping plugins and themes up to date, as well as monitoring your website’s technical health.

WordPress automatically notifies you of updates to your plugins or themes with a red circle next to Dashboard > Updates. Log in to your dashboard at least once a week to update everything.

WordPress updates dashboard

Beyond weekly updates, use the free Ahrefs Webmaster Tools to run a technical audit on your site and see any issues your site may have, such as broken links, missing metadata, or slow loading speeds. 

Ahrefs website audit overview, via AWT

If you click the All issues tab, you can see every issue your site has—with an overview of what the issue is and how to fix it if you click on the ? icon.

All issues report, via AWT

You’ll also get email alerts when anything on your site changes, such as a link breaking or a page returning a 404 code. It’s a helpful tool to automatically monitor your WordPress site.

Final thoughts

Congratulations, you now know the basics of using WordPress. It may have a large learning curve, but learning how to use this CMS is one of the most valuable skills you can have in today’s digital age.

You can use your WordPress website to make money blogging, promote your services as a freelancer, or even sell products online. Knowing how to build a website is almost mandatory these days for anyone who wants to start a business.

Source link

Continue Reading

Trending

en_USEnglish