UX Archives - Bruce Clay, Inc. https://www.bruceclay.com/blog/tag/ux/ SEO and Internet Marketing Tue, 19 Mar 2024 22:24:39 +0000 en-US hourly 1 What Is Bounce Rate? A Quick Primer https://www.bruceclay.com/blog/what-is-bounce-rate/ https://www.bruceclay.com/blog/what-is-bounce-rate/#comments Thu, 08 Feb 2024 19:36:21 +0000 https://www.bruceclay.com/?p=211584 Discover the impact of bounce rate on your website's success and learn proven strategies to reduce bounce rate and increase conversions.

The post What Is Bounce Rate? A Quick Primer appeared first on Bruce Clay, Inc..

]]>
Illustration of computer mouse arrows bouncing off trampoline in front of a webpage.

Driving traffic to your website is one thing. Retaining that traffic is quite another. Your bounce rate is important because bounce rate tells you how much traffic going to your site does not leave quickly.

In other words, it is a measure of the traffic that you are retaining for any given webpage or marketing initiative.

In this article, I will cover common FAQs about bounce rate and what you can do to improve it.

What Is Bounce Rate?

Bounce rate is a metric in web analytics tools that measures the percentage of people who leave a webpage / the website quickly if not immediately after visiting it. This exit usually happens within seconds and represents people who do not visit any other page on the site from there.

Google’s official definition of a bounce rate is as follows:

“A bounce is a single-page session on your site. In Analytics, a bounce is calculated specifically as a session that triggers only a single request to the Analytics server, such as when a user opens a single page on your site and then exits without triggering any other requests to the Analytics server during that session.

Bounce rate is single-page sessions divided by all sessions, or the percentage of all sessions on your site in which users viewed only a single page and triggered only a single request to the Analytics server.

These single-page sessions have a session duration of 0 seconds since there are no subsequent hits after the first one that would let Analytics calculate the length of the session.”

Some analytics tools may calculate bounce rate differently from one another, so it’s worth understanding how the analytics you are using defines and calculates your website’s bounce rate.

Why Is Bounce Rate Important to SEO?

If you have a higher-than-normal bounce rate on your site and its webpages, you are wasting opportunity and money.

As it relates to SEO in particular, SEO drives traffic to a website. What you are able to do with that traffic comes next. Bounce rate is an indicator that your website is either not providing a good user experience or not delivering on the intent of the search that brought a visitor there.

When your webpages and their content grab the visitor, give them what they want and then offer them more ways to engage with things they might like, you increase your chances of retaining that traffic and getting conversions.

To put bounce rate into perspective:

  • If the bounce rate is 80 percent, that means you retain 20 percent of your traffic to a webpage.
  • If the bounce rate is 70 percent, that means you retain 30 percent of your traffic to a webpage.
  • A 10% reduction in bounce rate could mean a 50% increase in conversions, so minimizing bounce rate is critical.

Related: It’s Not the Job of SEO to Make a Pig Fly

Bounce Rate vs. Exit Rate

Exit rate calculates the percentage of people that left a particular webpage after visiting more than one page a website.

For example, if someone visits the website on Webpage A and leaves right away, that would be considered a bounce. But, if someone views Webpage A, then goes to Webpage B and leaves the website on Webpage B, the exit rate would measure the people who left on Webpage B.

Webpage A > Exit = Bounce rate measured on Webpage A
Webpage A > Webpage B > Exit = Exit rate measured on Webpage B

Of course, it is slightly more complicated than this, and you can get into the details of how Google Analytics calculates exit rate versus bounce rate by checking out their explanation here.

What Is a Good Bounce Rate?

Bounce rate can vary by industry, channel, type of webpage/content, device and more. Industry research can give us averages, but each website will be different.

For example, data from CXL gives the following insights on bounce rate by website type:

Chart showing benchmark bounce rates by website type.
Source: “Bounce Rate Benchmarks: What’s a Good Bounce Rate, Anyway?,” CXL.com

By industry:

Chart showing benchmark bounce rate by industry.
Source: “Bounce Rate Benchmarks: What’s a Good Bounce Rate, Anyway?,” CXL.com

And by channel/industry:

Chart showing average benchmark bounce rates by channel.
Source: “Bounce Rate Benchmarks: What’s a Good Bounce Rate, Anyway?,” CXL.com

Rather than relying on industry data, though, get a benchmark of bounce rates on your website and then make incremental improvements to the pages to try and get the bounce rate lower.

In Google Analytics 4, you can drill down into the data to show bounce rate for different scenarios, which can be helpful for solving specific problems.

You’ll most likely need to customize each report to add the bounce rate metric. To do that, go to a report like Traffic Acquisition: Life cycle > Acquisition > Traffic Acquisition.

Click the “Customize report” icon in the upper right section.

Google Analytics 4 report icons.

Under Report Data, click Metrics. If you don’t see “Bounce rate” in the list, you can add it by scrolling down to the bottom of the list, clicking into the “Add metric” field and typing in “bounce rate.” Select the option, then click the blue Apply button to add it to your report.

Google Analytics 4 Metrics section.

Google Analytics 4 traffic acquisition report including bounce rate.

To see the bounce rate per source/medium pair, click the Session primary…Channel Group dropdown just below the search bar and select Session source/medium.

You can also see the bounce rate in your Audience report: User > User attributes > Audiences

Google Analytics 4 Audience report.

And you can check bounce rates for individual pages: Life cycle > Engagement > Pages and screens

Google Analytics 4 pages and screens report.

How to Improve Bounce Rate

The best way to improve the bounce rate of any given webpage is to start figuring out the possible causes of a high bounce rate. Each webpage will have a different set of circumstances.

You will need to look at the whole picture, analyze how people are getting to the page and what they are getting when they land on it. Analytics tools can give you more data on the webpage as available to help rule out other problems, for example, speed issues.

Other than that, study the content and the layout of the webpage — is it delivering on the intent of the place where the visitor came from (i.e. an email campaign, the organic search results, paid search, etc.)?

Is it offering a good and easy user experience? Can people easily complete a task or find what they are looking for?

You should also go through an SEO checklist to make sure the webpage is properly optimized in a way that keeps people on the page.

Are bounces affecting your conversions? Our SEO experts can help solve the problem. Schedule a free consultation today.

FAQ: What strategies can I implement to reduce the bounce rate and boost engagement on my webpages?

High bounce rates can lead to low engagement and lost opportunities. To help you overcome this challenge, here are some strategies to help you retain visitors and encourage them to actively engage with your content.

Compelling and Relevant Content: To keep visitors engaged, provide high-quality content that captivates their interest. Ensure your content is relevant, informative and engaging to increase the chances of users staying longer on your webpages.

Visual Appeal: Utilize visually appealing elements such as eye-catching images, videos, infographics and well-designed layouts. This will enhance the user experience and make your content more enticing.

Streamlined Website Design: A cluttered and confusing website can lead to high bounce rates. Optimize your website’s design to ensure it is user-friendly, intuitive and easy to navigate. Simplify your menus and incorporate clear calls-to-action.

Faster Load Times: Slow-loading pages can frustrate visitors and cause them to leave. Optimize your website’s speed by compressing images, minimizing plugins and using caching techniques. This will create a seamless browsing experience for your users.

Mobile-Friendly Design: With the majority of internet users accessing content on mobile devices, it is essential to have a responsive website design. Ensure your webpages are mobile-friendly and provide a seamless experience across different devices.

Enhance Readability
: Make your content easy to read by using clear headings, subheadings, bullet points and short paragraphs. Additionally, choose fonts and colors that are visually appealing and optimize text size for easy reading.

Internal Linking: Strategically add internal links within your content to guide users to related articles or pages on your website. This encourages them to explore more of your content, reducing bounce rates.

Engage with your Audience: Encourage comments, feedback and social media sharing to foster a sense of community and interaction. Respond promptly to comments and engage with your audience to build trust and encourage return visits.

These strategies will ensure users stay on your website, increasing the chances of converting them. Remember to monitor and analyze website metrics regularly to identify areas for improvement.

Step-by-Step Procedure:

  1. Create compelling and relevant content that captivates your audience’s interest.
  2. Utilize visually appealing elements like images, videos and infographics to enhance the user experience.
  3. Simplify your website’s design, making it easy for users to navigate.
  4. Optimize your website’s speed by compressing images, minimizing plugins and using caching techniques.
  5. Ensure your webpages are mobile-friendly and responsive.
  6. Use clear headings, subheadings, bullet points and short paragraphs for improved readability.
  7. Strategically add internal links to guide users to related content.
  8. Foster community engagement by encouraging comments, feedback and social media sharing.

The post What Is Bounce Rate? A Quick Primer appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/what-is-bounce-rate/feed/ 2
SEO and UX: A Beginner’s Guide to Creating Search-Friendly, User-Centric Websites https://www.bruceclay.com/blog/seo-ux-guide-creating-search-friendly-user-centric-websites/ https://www.bruceclay.com/blog/seo-ux-guide-creating-search-friendly-user-centric-websites/#comments Thu, 07 Dec 2023 19:38:24 +0000 https://www.bruceclay.com/?p=205972 Discover how merging SEO and user experience leads to a search-friendly, user-centric website. Explore the synergy between SEO tactics and UX design for optimal website performance.

The post SEO and UX: A Beginner’s Guide to Creating Search-Friendly, User-Centric Websites appeared first on Bruce Clay, Inc..

]]>
Website interface displaying on laptop computer.

Successful websites are optimized for both users and search engines. SEO is what brings people to your site, but user experience (UX) is what helps people stay on your site longer, resulting in better ROI. You need both.

Today, we’re going to look at the UX side of this process and how you can take charge of your website’s UX experience.

Does UX Really Matter?

Absolutely. Google and other prominent search engines use UX as a signal of how popular and interesting a website is for visitors. The longer a person stays on your site, the more likely search engines are to rank your site higher in its search results.

Part of the length of time someone spends on your site is related to the value your site offers from a content and information perspective. The other part is related to how easy they find your site to navigate, how quickly it loads and how appealing it is visually.

For more on improving your user experience, see: 3 Steps to a Better User Experience on Your Site

Site Speed

I feel the need, the need for speed.” This famous Top Gun quote is particularly applicable for websites that want to boost site rankings and conversions.

Site speed is one of, if not the most important aspect of user experience. If your site loads slowly, people will bail. Who wants to spend extra time waiting for a site to load when there are millions of other sites available on the search page?

When a site takes too long to load, prospective visitors backtrack and head to another site. Because this is the first introduction to your site, you need it to be a good one and a quick one.

You can test your site speed PageSpeed Insights to see where your site falls on speed and other performance metrics like core web vitals.

For more on the importance of website speed, read: How Fast Should My Webpage Be and Why Should I Care?

Mobile Optimization

Most of us use our phones to search the web, order products and services, respond to e-mails, message friends and family, spend time scrolling through social media and so on and so on. The point is that phones are used as often, if not more, than laptops or desktop computers.

Having a seamless experience across devices for visitors is critical. This is where mobile optimization comes into the picture.

Making sure that your website is mobile-responsive is crucial to boosting your SEO. You can achieve this in multiple ways, including:

  • Employing responsive design: This automatically adapts your site’s layout to suit various screen sizes.
  • Implementing separate mobile URLs: These URLs are tailored specifically for mobile devices, optimizing the experience for mobile users.
  • Use Accelerated Mobile Pages (AMP): Creating AMP versions of your web pages helps them load faster on mobile devices, enhancing user experience and potentially improving your search engine rankings.

For more on mobile optimization, read:

Content Impact

Once you have the user’s attention on your site, you want to captivate them with clear, succinct, and valuable content. Users want to quickly find content that resonates with them based on their search query.

To enhance your UX, you want to be smart about how you choose to structure and prioritize your content.

Start with the most critical information at the forefront of the page, followed by supplementary details and culminating with background information. This is the best way to ensure an efficient and rewarding user experience. Make sure that the content is useful, desirable, findable, accessible and credible.

For more on creating quality content, see:

Navigational Elements

Poor website navigation is a red flag for search engines. The functionality of your menus and headers hold substantial sway over user interactions on your site —  they must provide simplicity and clarity. Otherwise, visitors may find themselves frustrated and leave your site.

When visitors quickly decide to leave your site, your bounce rate rises. A bounce rate is a metric that indicates the percentage of visitors that leave your site after a single-page visit.

A high bounce rate tells Google and other search engines that your site isn’t relevant to the user’s queries and should move further down the ranking list for that query. Secondly, they can dent your click-through rate (CTR), denoting the proportion of people clicking your site’s link from search results.

A low CTR implies to search engines that your page fails to deliver sought-after information.

To optimize menus and headers for superior SEO performance, prioritizing simplicity and user-friendliness is paramount. Moreover, ensuring intuitive navigation pathways and clear labeling will significantly enhance user experience and positively impact SEO metrics.

For more on site navigation and architecture, see:

Visual Stability

Maintaining visual consistency is an important part of design and establishing brand recognition. This holds true not only for the website but also for both branding and marketing materials.

Achieving visual consistency can pose challenges but demands attention to both the broader framework and finer details. The layout should remain straightforward yet adaptable to specific elements.

Strategic use of color, typography, and imagery contributes to a unified look that resonates with your audience. Abiding by these principles empowers the creation of enduringly attractive and consistent designs.

Remember, SEO and UX aren’t standalone concepts—they intersect and complement each other. Prioritizing the user while optimizing for search engines is what ultimately leads to a better-performing website.

Time to update your UX and SEO? We can help you create a search-friendly, user-centric website. Schedule a free consultation.

FAQ: How can I merge SEO and user experience to create a search-friendly, user-centric website?

Creating a website that excels in both SEO and user experience is a dynamic endeavor, merging technical finesse with user-centric design. Here’s how to seamlessly blend these elements to craft an exceptional online presence.

Understanding SEO and User Experience
To merge SEO and user experience effectively, comprehend how each aspect functions independently and in unison. SEO enhances visibility, while UX optimizes user interaction and satisfaction.

Keyword Integration with User Intent
Align keywords with user intent to create content that’s not only search engine-friendly but also resonates with your audience. Focus on buyer intent search terms to attract relevant traffic.

Site Architecture and Navigation
Craft a logical site structure that enables easy navigation. Intuitive menus and clear pathways contribute to a user-friendly experience, reducing bounce rates.

Mobile Optimization for Enhanced UX
Given the prevalence of mobile browsing, prioritize mobile responsiveness. Ensure your site looks and functions seamlessly across various devices.

Content Quality and Readability
Engaging, informative content is pivotal. Structure your content logically, optimizing readability and delivering value to visitors.

Speed Optimization for SEO and UX
Site speed matters. Optimize loading times for better SEO rankings and an enhanced user experience.

Visual Appeal and Branding
Consistent design elements contribute to brand recognition. Maintain visual coherence across your website for a lasting impression.

User Feedback and Iterative Improvement

Regularly gather user feedback and data to refine your website continually. Incorporate suggestions to enhance both SEO performance and user experience.

Step-by-Step Guide: Merging SEO and User Experience for an Exceptional Website

  1. Understanding the SEO-UX Relationship: Grasp the core concepts of SEO and user experience.
  2. Keyword Research with User Intent: Align keywords with user queries for optimized content.
  3. Developing Site Architecture: Create a user-friendly site structure and navigation flow.
  4. Prioritize Mobile Optimization: Ensure seamless functionality across devices.
  5. Content Creation Strategies: Craft engaging and informative content.
  6. Optimizing Site Speed: Enhance loading times for better rankings and user satisfaction.
  7. Consistent Visual Branding: Maintain a unified design for brand recognition.
  8. Continuous Improvement: Gather user feedback and data for iterative enhancements.

Creating a search-friendly, user-centric website involves balancing SEO tactics and user-centric design. By prioritizing both aspects, your website can rank higher while providing a seamless experience for visitors.

The post SEO and UX: A Beginner’s Guide to Creating Search-Friendly, User-Centric Websites appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/seo-ux-guide-creating-search-friendly-user-centric-websites/feed/ 2
5 Reasons To Invest in SEO During a Recession https://www.bruceclay.com/blog/reasons-invest-in-seo-during-recession/ https://www.bruceclay.com/blog/reasons-invest-in-seo-during-recession/#comments Wed, 07 Jun 2023 14:46:31 +0000 https://www.bruceclay.com/?p=192085 Discover five compelling reasons why investing in SEO during a tough economy is worth it, including targeted leads, cost-effective marketing, improved user experience, long-term benefits, and staying ahead of competitors.

The post 5 Reasons To Invest in SEO During a Recession appeared first on Bruce Clay, Inc..

]]>
Illustration of data and analysis reporting on computer screens.

Navigating a challenging economy as a business owner can be daunting.

When the economy slows down, you can bet your competitors won’t. Even with the threat of an incoming recession, a recent HubSpot survey found that 47% of respondents reported their marketing budget would increase in 2023, while 45% expect their budgets to stay about the same.

Adapting your marketing strategies is essential in order to keep a competitive edge — especially in a recession. When prioritizing effective strategies that will help you thrive, SEO should be at the top of your list. HubSpot research tells us it is the second most reliable strategy (behind social media) to acquire new customers.

So to get out of an economic downturn alive and position yourself for long-term success, investing in SEO is a must. Let’s look at five reasons why.

    1. More targeted leads
    2. Cost-effective marketing strategy
    3. Improved user experience = more conversions 
    4. Long-term benefits
    5. Stay ahead of competitors 

FAQ: How does investing in SEO during these challenging economic conditions enhance long-term success for business owners? 

Reason #1: More Targeted Leads

Investing in the right SEO strategy leads to increased website traffic, which translates into more qualified leads, potential customers, and higher revenue.

Research from Forrester reveals that 71% of people begin their customer journey with a search engine. Moreover, Google data shows that 43% of consumers in the market for goods rely on search to find inspiration, browse and conduct research.

Now consider that studies show the top three spots on the search engine results pages consistently garner the most clicks (AKA website traffic).

By optimizing your website’s visibility in search engine results, particularly aiming for the top three spots, you can attract a significant portion of these potential customers and drive conversions that impact your bottom line.

Landing in the top positions out of millions of results doesn’t just happen, though. It takes expert SEO strategies and ample time investment to reach those heights.

Focus on implementing good SEO practices. Once you do, expect to see improvement in your organic search traffic and more targeted leads.

Reason #2: Cost-Effective Marketing Strategy

Compared to traditional marketing methods such as print, radio, and TV, SEO offers a cost-effective approach with a higher return on investment (ROI). Unlike these channels, SEO allows you to track and measure ROI accurately.

BrightEdge Research demonstrates that organic search traffic generated by SEO can outperform other digital channels in terms of revenue generation, including paid digital ads and social media.

Investing in SEO allows you to maximize your marketing budget for the best results.

Reason #3: Improved User Experience = More Conversions

In recent years, user experience (UX) and SEO have become interconnected. Google’s page experience algorithm now ranks websites with superior user experiences higher in search results. Technical SEO optimizes page load times and enhances customer experiences, giving your target market an enjoyable browsing experience.

Better user experiences lead to greater engagement and conversion rates. Case in point, Pinterest reported a 15% increase in SEO traffic and conversion rates to sign up by reducing page load wait time by 40%.

Reason #4: Long-Term Benefits

The problem with traditional marketing methods is that once you’ve stopped paying, you no longer exist. While pay-per-click ads offer instant gratification, SEO provides long-term benefits. The immediate ROI of paid ads can be enticing, but investing in SEO now can generate organic search traffic that benefits your business for years to come.

McKinsey research studied those that came out on top during the early 1990s recession in the U.S. and found that the winners traded short-term profitability for long-term gain. Today is no different — if you want to join the winners, implement SEO to position your business for lasting visibility and success.

Reason #5: Stay Ahead of Competitors

Businesses facing challenging economic times need to distinguish themselves and maintain a competitive advantage. Utilizing SEO will help you do just that. The longer you ignore SEO, the further ahead the competition will be.

Picture this: if any of your competitors stumble in the search results, you now have the opportunity to pass them by and get the coveted traffic that would’ve gone to them. SEO allows you to get the upper hand no matter what the market conditions are like.

Weather Economic Storms by Adapting

Don’t let a bad economy deter you. Instead, leverage the power of SEO to navigate these challenging times and come out stronger on the other side.

Remember that the success of your business rests on your ability to embrace and adapt new strategies. Investing in SEO is a proactive step to surviving — and thriving — in a recession.

Need help coping with reduced staff and budget? Watch our on-demand webinar “4 SEO Strategies to Survive a Recession” for proven SEO strategies that can save your business.

FAQ: How does investing in SEO during these challenging economic conditions enhance long-term success for business owners?

Overcoming Economic Challenges with SEO Strategies

Economic downturns can be particularly challenging for business owners in today’s highly-competitive business landscape, yet investing in SEO during economic difficulties can play an integral part of long-term success and business expansion.

By boosting your online presence and maintaining a competitive edge through optimized rankings, optimizing SEO helps business owners remain ahead of emerging opportunities and maintain sustained success.

Here’s how investing in SEO in a bad economy can pave the way for sustained success.

Enhancing Visibility and Targeted Traffic

Businesses faced with economic downturns often experience increased competition as customers become more thrifty with their spending. By investing in SEO, your website’s visibility in search engine results can increase and ensure potential customers find you when actively searching for products or services you provide. This results in high-quality leads and increased conversion rates, ultimately driving long-term success for your business.

Cost-Effective Marketing with Measurable Results

One of the many advantages of investing in SEO during a recession is its cost-effectiveness compared to traditional marketing methods. While costly ads or print media might drain your budget quickly, SEO allows you to stretch it further while still producing tangible results.

By employing data-driven strategies and monitoring key performance indicators, SEO enables you to make informed decisions and optimize your efforts for long-term success.

Establish Trust and Credibility

Customers in these uncertain economic times tend to favor established and trustworthy brands. A strategic SEO campaign can help your brand build its online reputation, trust, and credibility. By appearing near the top of search engine results pages, you establish yourself as an industry authority, instilling confidence among potential customers and increasing revenue through more sales. Positive online reviews further boost credibility; they help steer additional customers towards your product/service offering while driving sustained success for years.

Gaining a Competitive Edge

Investment in SEO during a recession offers you a powerful advantage over competitors. While some may scale back marketing expenditures, those who continue or increase investments in SEO enjoy a significant competitive edge.

By staying ahead of market changes and adapting quickly, SEO can position your business for long-term success and help attract customers while driving conversions during challenging periods. Embracing it as part of a key strategy during economic downturns allows your company to attract customers, drive conversions and continue growing even in adverse conditions.

Our SEO experts here at Bruce Clay can help your business achieve better success from your SEO program no matter what the economic conditions are. Contact us today for a free consultation.

The post 5 Reasons To Invest in SEO During a Recession appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/reasons-invest-in-seo-during-recession/feed/ 2
Core Web Vitals: Cumulative Layout Shift – What It Is and How to Improve It for SEO https://www.bruceclay.com/blog/core-web-vitals-cls/ https://www.bruceclay.com/blog/core-web-vitals-cls/#comments Wed, 01 Sep 2021 17:01:19 +0000 https://www.bruceclay.com/?p=85704 Find out how cumulative layout shift (CLS) contributes to a good user experience and SEO in Google’s 2021 page experience ranking update.

The post Core Web Vitals: Cumulative Layout Shift – What It Is and How to Improve It for SEO appeared first on Bruce Clay, Inc..

]]>
With Google’s Page Experience update now rolled out, websites that are fine-tuned have some new ranking opportunities.

In particular, websites can qualify for a ranking boost based on several new performance metrics Google calls “core web vitals.”

Core web vitals are a set of core webpage functionalities that impact user experience. They now play a part in strategic SEO and can impact how websites rank in Google.

Google has defined three core web vitals:

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)

This article is part of our series about Google’s page experience update, and I’m updating it to reflect Google’s latest changes. Here I’ll discuss cumulative layout shift or CLS:

What Is Cumulative Layout Shift (CLS)?

CLS measures the formatting changes to a webpage after the initial rendering in a browser, usually by the dynamic insertion of content above what is already being shown.

It is generally annoying to be clicking on a link and have that link “move,” resulting in a click to an unexpected location. This kind of instability of content on a webpage creates a bad user experience.

Google discusses CLS here:

Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.

Unexpected page layout shifts hurt the user experience. One example is when a button or link shifts on the webpage, causing a person to click something else. This can be really bad if it means they accidentally made a purchase, as you can see in this demo from Google:

Importantly, Google clarifies that not all layout shifts are considered bad:

A layout shift is only bad if the user isn’t expecting it. On the other hand, layout shifts that occur in response to user interactions (clicking a link, pressing a button, typing in a search box and similar) are generally fine, as long as the shift occurs close enough to the interaction that the relationship is clear to the user.

Layout shifts that occur within 500 milliseconds of user input will have the hadRecentInput flag set so that they can be excluded from calculations.

How Is Cumulative Layout Shift (CLS) Measured?

CLS is measured by the total of all individual layout shift scores for every unexpected layout shift that occurs during a pageview’s worst “session window.”

A session window is any 5-second span of shifts that occur while a user visits a page. Google looks for the 5-second interval that has the most shift penalties, and that’s the score for that pageview.

To calculate a layout shift score, Google multiplies the impact fraction and the distance fraction. I’ll break these down.

Impact fraction is how much viewport area an unstable element takes up between two frames.

In the example below, you can see that the element takes up 50% of the original viewport, but then is moved down by 25%. Between both frames, the element takes up 50% plus 25% of the viewport, causing the impact fraction to be 75%.

Example CLS layout shift in viewport.
Example of layout shift between two frames, Google Developers

Distance fraction is the distance that an unstable element has moved. The example below shows that the element has moved 25% of the viewport height.

Example CLS distance shift.
Example of distance shift in the viewport, Google Developers

So to sum up: CLS is measured by the layout shift score, which is calculated this way:

     Impact fraction * distance fraction = layout shift score

Taking the examples above, the calculation would go like so: 0.75 * 0.25 = 0.1875. Google says a webpage should maintain a CLS of less than 0.1 across all pages or page views on your site. This example would be over that goal, so it would score poorly.

One illustration to give you a clearer idea of how CLS is scored: If everything inside of the viewport shifted out of the viewport in a single frame, that would have a layout score of 1.0. (See other examples on GitHub.)

The more elements you have on your page that shift in the viewport, the worse your score could be.

Cumulative Layout Shift target scores.
Google’s CLS score target

You can read more about the layout shift score here and how Google defines its thresholds here.

How Does Cumulative Layout Shift (CLS) Impact SEO?

As with the other core web vitals, CLS helps ensure that the page experience is smooth for your visitors — on both mobile and desktop.

A good layout shift score can help ensure users don’t get frustrated with your webpage, don’t accidentally click and get taken to another page, and don’t mistakenly make a purchase. A good user experience helps you achieve all the outcomes we like to see in SEO: rankings, traffic, conversions and revenue.

According to Screaming Frog research, URLs in Position 1 of the search results were 10% more likely to pass the core web vitals assessment than URLs in Position 9. Of course, this data reflected existing pages — which might not have been fine-tuned to comply with core web vitals yet — before these factors applied to the ranking algorithms.

Looking at CLS, less than half (46%) of mobile URLs and less than half (47%) of desktop URLs had “good” CLS scores. The average CLS score was 0.29 on mobile and 0.25 on desktop. In other words, there is room for CLS improvement on most sites.

Screaming Frog segmented pass rates by position, and found a decline in the percentage of “good” URLs as you move down the positions on the search results page. The following example is mobile results, but they also graphed the data for desktop.

Mobile CLS Classification by Ranking Position data.
“How Many Sites Pass the Core Web Vitals Assessment?” screamingfrog.co.uk

How Do I Improve My Cumulative Layout Shift (CLS) Score?

Google offers lab tools and field tools to help you measure, then optimize your CLS score. For CLS, lab tools may not be as useful as the real data captured in the wild for your webpages.

Tools provided include:

Another way to measure CLS uses the web-vitals JavaScript library. You can learn more about that here.

Common causes of layout shifts include:

  • Images without dimensions
  • Ads, video and other embedded objects or iframes without dimensions
  • Dynamically injected content
  • Late-loading CSS where styles are applied after other items have been loaded
  • Web fonts causing flashes of invisible or unstyled text
  • Elements on the page that wait for other items to be loaded over the network before appearing
  • Animating elements by “height” and “width” instead of CSS’s “transform: scale()”
  • Animating elements by “top”, “right”, “bottom” or “left” instead of CSS’s “transform: translate()”

Basic principles that will improve CLS include:

  1. Always use size attributes for images, videos and other embedded items or iframes. If an element is dynamically loaded, use CSS to style any container elements to the same size or aspect ratio before the content is loaded. Then, when the content is loaded into those container elements, the page will not shift.
  2. Never insert content dynamically above existing content.
  3. If using CSS to animate elements, prefer “transform” animations.

And check out this video about CLS from Google Chrome Developers on YouTube:

Want more in-depth info? Watch our on-demand webinar 3 Expert Tips to Improve Core Web Vitals including the extended Q&A at the end.

Read our entire page experience series for more information on this ranking update:

  1. What’s the Page Experience Update?
  2. How to Make a Mobile-Friendly Site
  3. Intrusive Interstitials & Why They’re Bad for SEO
  4. HTTPS for Users and Ranking
  5. Core Web Vitals Overview
  6. Core Web Vitals: LCP (Largest Contentful Paint)
  7. Core Web Vitals: FID (First Input Delay)
  8. Core Web Vitals: CLS (Cumulative Layout Shift)
E-book on Page Experience update.
Click to get this entire series as a printable e-book.

FAQ: How can I improve my website’s user experience and SEO with Core Web Vitals?

User experience and SEO have become the twin pillars of successful online ventures. Core Web Vitals, introduced by Google, guide websites toward better performance and visibility. These metrics, comprising Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), quantify crucial aspects of user experience.

LCP gauges loading speed, FID measures interactivity, and CLS evaluates visual stability. Improving these metrics not only ensures a seamless browsing experience but also holds the potential to influence search rankings positively. Users appreciate websites that load swiftly, respond promptly, and maintain visual consistency, ultimately leading to lower bounce rates and prolonged engagement.

To improve Core Web Vitals, consider optimizing your images and videos, leveraging browser caching, and employing content delivery networks (CDNs) for faster loading times. Minimize server response times by employing efficient hosting and coding practices. Moreover, prioritize the rendering of above-the-fold content to prevent layout shifts, enhancing both user satisfaction and SEO performance.

Focus on optimizing server and network performance, using browser caching effectively, and utilizing modern image formats to balance content richness and loading speed. Employ lazy loading for images and scripts to load resources only when users require them, contributing to faster initial page loading and a better overall user experience.

Finally, adopting a mobile-first design approach and leveraging responsive design principles are key strategies for improving Core Web Vitals. With a substantial portion of online traffic originating from mobile devices, catering to mobile users effectively can substantially enhance both user experience and search rankings.

Core Web Vitals offer a strategic advantage to website owners and digital marketers aiming to excel in user experience and SEO. By understanding and optimizing these metrics, websites can provide faster, more interactive, and visually stable experiences that resonate with users and search engines alike. Elevating Core Web Vitals creates a win-win scenario, bolstering website performance and driving organic traffic.

Step-by-Step Procedure to Improve User Experience and SEO with Core Web Vitals:

  1. Assess Current Metrics: Analyze your website’s existing Core Web Vitals metrics using tools like PageSpeed Insights and Google Search Console.
  2. Prioritize Key Metrics: Identify the metric (LCP, FID, or CLS) that requires the most improvement based on your analysis.
  3. Optimize Images and Videos: Compress images and use modern formats to reduce file sizes without compromising quality. Consider lazy loading for images and videos.
  4. Leverage Browser Caching: Configure your server to set appropriate resource caching headers, reducing loading times for returning visitors.
  5. Utilize CDNs: Implement a content delivery network (CDN) to distribute resources across multiple servers, enhancing loading speed.
  6. Optimize Server Response Times: Opt for reliable hosting providers with fast server response times. Minimize server-side processing delays.
  7. Responsive Design: Ensure your website is responsive and provides a seamless experience across various screen sizes and devices.
  8. Mobile-First Approach: Prioritize mobile users by designing your website with a mobile-first mindset.
  9. Efficient Coding: Optimize your code by minimizing unnecessary scripts and stylesheets. Use browser caching for code files.
  10. Minimize Third-Party Scripts: Limit the use of third-party scripts that might impact page loading and interactivity.
  11. Critical Rendering Path: Prioritize rendering of above-the-fold content to prevent layout shifts during page loading.
  12. Reduce Server Requests: Minimize the number of server requests by combining CSS and JavaScript files when possible.
  13. Content Delivery Networks: Utilize CDNs to distribute content across various servers, reducing latency and improving loading speed.
  14. Eliminate Render-Blocking Resources: Identify and eliminate resources that prevent the initial rendering of the page.
  15. Implement Lazy Loading: Use lazy loading to load images and resources only when users scroll to them, improving initial page loading.
  16. Use Responsive Images: Employ responsive images that adapt to the user’s device and screen size, optimizing visual appeal and loading speed.
  17. Continuous Monitoring: Regularly monitor and analyze your website’s Core Web Vitals metrics, making necessary adjustments.
  18. Regular Updates: Keep your website and its components updated to benefit from performance enhancements.
  19. Testing and Iteration: Test different strategies and continually iterate to find the optimal combination for improving Core Web Vitals.
  20. Measure and Adjust: Monitor your optimizations’ impact on user experience and SEO rankings. Adjust your strategies based on results.

The post Core Web Vitals: Cumulative Layout Shift – What It Is and How to Improve It for SEO appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/core-web-vitals-cls/feed/ 30
Core Web Vitals: First Input Delay – What It Is and How to Improve It for SEO https://www.bruceclay.com/blog/core-web-vitals-fid/ https://www.bruceclay.com/blog/core-web-vitals-fid/#comments Wed, 01 Sep 2021 17:00:40 +0000 https://www.bruceclay.com/?p=85549 “Core web vitals” is a set of core webpage functionalities that impact user experience. Google’s ranking algorithm update called page experience, which Google rolled out from June to August 2021, incorporates core web vitals as NEW ranking factors for SEO. The current set of core web vitals includes: Largest Contentful Paint (LCP) First Input Delay […]

The post Core Web Vitals: First Input Delay – What It Is and How to Improve It for SEO appeared first on Bruce Clay, Inc..

]]>
“Core web vitals” is a set of core webpage functionalities that impact user experience. Google’s ranking algorithm update called page experience, which Google rolled out from June to August 2021, incorporates core web vitals as NEW ranking factors for SEO.

The current set of core web vitals includes:

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)

In this article, part of our series covering the page experience update, I’ll discuss the first input delay or FID:

What Is First Input Delay (FID)?

FID measures the responsiveness of a page to user events. While technically, this could happen throughout the lifespan of a user session on a webpage, in practice, most interactivity problems occur during the initial page load. That is because this is when most resources are being downloaded, parsed, executed, and rendered.

Google discusses FID here:

First Input Delay (FID) is an important, user-centric metric for measuring load responsiveness because it quantifies the experience users feel when trying to interact with unresponsive pages—a low FID helps ensure that the page is usable. …

FID measures the time from when a user first interacts with a page (i.e., when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

Google cites two important reasons why the first input delay is important:

  • The first input delay will be the user’s first impression of your site’s responsiveness, and first impressions are critical in shaping our overall impression of a site’s quality and reliability.
  • The biggest interactivity issues we see on the web today occur during page load. Therefore, we believe initially focusing on improving site’s first user interaction will have the greatest impact on improving the overall interactivity of the web.

Keep in mind that FID will not apply to every situation, as Google points out here:

Not all users will interact with your site every time they visit. And not all interactions are relevant to FID … How you track, report on, and analyze FID will probably be quite a bit different from other metrics you may be used to.

How Is First Input Delay (FID) Measured?

FID measures the first impression of your site’s interactivity and responsiveness. It analyzes things like clicks, taps and key presses, which fall under the “responsiveness” category. It does not measure things like scrolling and zooming, which are related to animation.

Google recommends webpages aim for an FID of 100 milliseconds or less*, which means the page would be able to respond to an interactive event within that time frame. In order to be considered “good,” Google’s threshold should be met 75 percent of the time, segmented across mobile and desktop devices. You can learn more about how Google creates thresholds here.
*Updated threshold per Google as of 2/18/2021

FID score range from Google.
Google’s FID score

While the official threshold is 75% of page loads, Google says that for FID in particular, they “strongly recommend looking at the 95th to 99th percentiles, as those will correspond to the particularly bad first experiences users are having with your site. And it will show you the areas that need the most improvement.” This is true for both desktop and mobile users.

For developers, it’s important to understand that Google only measures the delay in event processing, not the “event processing time itself nor the time it takes the browser to update the UI after running event handlers.”

In other words, Google only measures how long the browser takes to start executing the event process. So, if you click on a link, it’s the delay between the time you click and the time the browser starts processing that click.

And when you’re ready to start improving FID, you’ll use tools that can help measure real data in the wild.

How Does First Input Delay (FID) Impact SEO?

Improving FID is another way to speed up your webpages for visitors. Consider that fast page loading was already a best practice for SEO and a ranking factor long before we heard of core web vitals. FID helps keep visitors on your site because they can interact with the content faster.

When people bounce from your site, they may never come back, and you can lose potential revenue. Not only that, but a sluggish site can also impact your rankings. That’s because Google’s AI, RankBrain, may take into account how a user engages with the search results.

Over time, if a website has enough visitors who go to the page from the search results and bounce back quickly, this could indicate they didn’t find what they were looking for. Because RankBrain’s goal is to analyze and serve the most relevant search results, rankings could suffer.

The good news is that most sites may already be OK when it comes to FID. In a study by Screaming Frog, 89% of mobile and 99% of desktop URLs fell within the threshold. The average was around 56 milliseconds on mobile and 13 milliseconds on desktop.

When looking at FID and search rankings correlation, Screaming Frog says that there’s much less of a correlation than for other core web vitals. But you need to recall that 2021 is when this becomes an important factor, and we would not expect an impact yet.

First input delay (FID) data from ScreamingFrog study.
“How Many Sites Pass the Core Web Vitals Assessment?,” Screamingfrog.co.uk

How Do I Improve My First Input Delay (FID) Score?

Google provides tools to measure FID, including:

You can also measure FID with the web-vitals JavaScript library and learn more about that here. If you are serious about improving CWV, this is the best way to get real-time feedback from actual user sessions to determine how to fix FID in the field.

The primary cause of a bad FID score is heavy JavaScript execution. So be sure to optimize how “JavaScript parses, compiles, and executes on your web page will directly reduce FID,” says Google. Reducing the amount of JavaScript and/or optimizing the running of JavaScript has always been a good idea for SEO.

If a user clicks while a JavaScript file is being processed, the browser can’t react, and the user feels blocked. If your FID score is in the red, you may need to split up your JavaScript files so the browser can go back and forth between JavaScript processing and reacting to the user.

Optimizing your JavaScript reduces page bloat, improves page performance, and provides Google with an easier path to index the correct content. That’s because Google will not have to process as much JavaScript to figure out what it needs.

In our experience, the more you can give Googlebot what it needs right away without having to process too many things, the better Google will index your site the way you think it should be indexed. Indexing is hugely important for SEO as it influences what pages Google determines are valid or not.

To optimize the FID score, Google recommends running a Lighthouse performance audit and looking at the opportunities uncovered but gives more detail on how to optimize JavaScript here.

Find out more about the update by reading our page experience series:

  1. What’s the Page Experience Update?
  2. How to Make a Mobile-Friendly Site
  3. Intrusive Interstitials & Why They’re Bad for SEO
  4. HTTPS for Users and Ranking
  5. Core Web Vitals Overview
  6. Core Web Vitals: LCP (Largest Contentful Paint)
  7. Core Web Vitals: FID (First Input Delay)
  8. Core Web Vitals: CLS (Cumulative Layout Shift)

Watch our on-demand webinar 3 Expert Tips to Improve Core Web Vitals to get more in-depth help on this timely SEO topic.

FAQ: What is the significance of First Input Delay in user experience?

First Input Delay (FID) is a pivotal metric that defines how responsive and interactive a webpage is upon user engagement. FID measures the time interval between a user’s initial interaction—such as clicking a link or tapping a button—and the browser’s ability to respond. It is, essentially, the first impression users have of a webpage’s responsiveness.

A seamless and prompt response to user input is integral to retaining visitors’ interest and ensuring their satisfaction. Users perceive a website as highly responsive when FID is minimized, leading to a positive user experience. Research indicates that user patience is limited, and even a slight delay in response can result in frustration, leading to higher bounce rates and decreased engagement.

FID’s significance extends beyond user satisfaction. Search engines, particularly Google, recognize the importance of user experience in determining search rankings. As part of its ranking algorithm, Google considers FID as a user-centric metric to gauge a website’s responsiveness. Websites that provide a smoother user experience by minimizing FID are more likely to rank higher in search results, gaining increased visibility and organic traffic.

To optimize FID, meticulous attention to website performance is crucial. Heavy JavaScript execution often contributes to delayed responses. By optimizing JavaScript code, reducing its size, and improving its execution efficiency, websites can significantly enhance FID scores. Identifying and addressing resource-intensive processes that impact FID is essential, as even seemingly insignificant elements can accumulate and cause delays.

Moreover, focusing on FID optimization aligns with the broader goal of improving website performance. A well-optimized website delivers a superior user experience and positively impacts SEO efforts. Websites that load swiftly and respond promptly to user input create a positive feedback loop, enhancing engagement, lowering bounce rates, and improving search rankings.

The significance of First Input Delay in user experience cannot be overstated. A quick and seamless response to user input is fundamental in retaining users, improving engagement, and enhancing overall website performance. Prioritizing FID optimization not only elevates user satisfaction but also contributes to improved search rankings and organic traffic.

Step-by-Step Procedure: The Significance of First Input Delay in User Experience

  1. Introduction to FID: Define what First Input Delay (FID) is and its importance in user experience.
  2. Measurement of FID: Explain how FID is measured and its impact on user interactions.
  3. User Perception: Discuss how FID influences user perception of website responsiveness.
  4. Impact on Engagement: Describe the correlation between low FID and higher user engagement.
  5. Search Engine Ranking: Explain how Google incorporates FID into its ranking algorithm.
  6. FID and SEO: Discuss the relationship between FID optimization and improved search rankings.
  7. Optimizing JavaScript: Provide insights into how heavy JavaScript execution affects FID.
  8. Reducing JavaScript Load: Detail strategies for optimizing JavaScript code to improve FID.
  9. Resource-Intensive Processes: Identify elements contributing to delayed responses and how to mitigate them.
  10. Holistic Website Performance: Highlight the broader benefits of FID optimization on overall website performance.
  11. User Experience Impact: Discuss the direct connection between FID optimization and enhanced user experience.
  12. Bounce Rate Reduction: Explain how FID optimization leads to lower bounce rates and higher engagement.
  13. Positive Feedback Loop: Illustrate how FID optimization fosters a positive user satisfaction and interaction cycle.
  14. Strategic Importance: Emphasize the strategic significance of FID optimization in digital marketing efforts.
  15. Real-world Examples: Provide case studies demonstrating the impact of FID optimization on user engagement and search rankings.
  16. Tools and Resources: List tools and resources available for measuring and improving FID.
  17. JavaScript Optimization Tools: Recommend tools for optimizing JavaScript execution to enhance FID.
  18. Performance Audits: Guide readers on how to conduct a Lighthouse performance audit for FID insights.
  19. Continuous Improvement: Stress the importance of ongoing monitoring and improvement of FID.
  20. Conclusion: Summarize the importance of FID optimization in delivering exceptional user experiences and driving SEO success.

The post Core Web Vitals: First Input Delay – What It Is and How to Improve It for SEO appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/core-web-vitals-fid/feed/ 17
Core Web Vitals: LCP – What It Is and How to Improve It for SEO https://www.bruceclay.com/blog/core-web-vitals-lcp/ https://www.bruceclay.com/blog/core-web-vitals-lcp/#comments Wed, 01 Sep 2021 16:58:30 +0000 https://www.bruceclay.com/?p=85453 In May 2020, Google announced that “core web vitals” would be part of a ranking algorithm update set to hit in 2021 called page experience. With the page experience update now rolled out, I wanted to revisit this topic. I’ll add a few more tips we’ve learned in the intervening months by helping many websites […]

The post Core Web Vitals: LCP – What It Is and How to Improve It for SEO appeared first on Bruce Clay, Inc..

]]>
In May 2020, Google announced that “core web vitals” would be part of a ranking algorithm update set to hit in 2021 called page experience.

With the page experience update now rolled out, I wanted to revisit this topic. I’ll add a few more tips we’ve learned in the intervening months by helping many websites improve their core web vitals scores. Mostly, I want you to be able to take advantage of the potential ranking benefits for your well-tuned webpages.

Core web vitals measure core elements of a webpage that enhance user experience. Google has identified three core web vitals:

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)

This article is part of our series on the Page Experience update. Here I’ll discuss LCP or largest contentful paint:

What Is Largest Contentful Paint (LCP)?

LCP measures webpage load performance. More specifically, LCP measures how fast the webpage’s largest image or text block renders.

Google discusses LCP here:

Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded—a fast LCP helps reassure the user that the page is useful. …

How Is Largest Contentful Paint (LCP) Measured?

Google states that in order to provide a good user experience, the largest image or text block should render on the webpage within the first 2.5 seconds.

LCP score target per Google.
Google’s LCP score

LCP documentation specifies which types of elements are considered for LCP, and include:

  • Images
  • Video
  • Background images loaded via CSS
  • Heading tags
  • Tables
  • Lists
  • Any other block element with text

Here’s an example of when the largest element of the page (a paragraph of text) renders before any other elements on the page:

Largest contentful paint example, per Google.
“Largest contentful paint,” Google Developers

The goal is to hit the recommended target loading speed on most of your pages. Google says “if at least 75 percent of page views to a site meet the ‘good’ threshold, the site is classified as having ‘good’ performance for that metric.” You can learn more about how Google defines its thresholds here.

How Does Largest Contentful Paint (LCP) Impact SEO?

We know that Google values a fast site and that things like page speed are already in its ranking algorithm. LCP is another way to ensure that webpages load fast so your website visitors have a good user experience and stay on your site.

So if you already have a fast site, are you in the clear? Not exactly. According to a study by Screaming Frog, the majority are not prepared for the LCP thresholds.

Data shows that less than half of the websites studied (across 20,000 URLs) were considered good. Specifically, 43% of mobile and 44% of desktop URLs had a good LCP. The average render time was 3.13 seconds for mobile and 3.04 seconds for desktop.

In that study, the research correlated LCP and search rankings. The data is interesting, but there are too many factors to be able to say for certain how LCP influences rankings today.

Data graph of LCP by ranking position.
“How Many Sites Pass the Core Web Vitals Assessment?,” Screamingfrog.co.uk

As an incentive for website publishers to improve their performance metrics, Google shows a “fast page” label in search results on Android that have historically met or exceeded the thresholds for core web vitals, including LCP.

Websites with this label may see an uptick in organic traffic and time on site.

How Do I Improve My Largest Contentful Paint (LCP) Score?

Google provides tools to measure LCP in a lab and in the field, including:

When it comes to lab versus field data, both can be useful. Lab is important for testing and working on improving your scores. You will get a greater variance in results, but lab data provides instant feedback.

Field data is more important when you’re trying to get the overall view of your site. The values represented will depend a lot on your users’ environments, for example, mobile versus desktop, their internet speed, their computer performance, etc. The field data is nice because it gives you an idea of how your site is performing for everyone, not just how it performs for you.

You can also measure LCP with the web-vitals JavaScript library, and you can learn more about that here. This is useful if you have your own reporting or you want to build it into other reports.

To get started, Google provides a general roadmap for how to use the tools provided to diagnose a core web vital. Out of the following list, the first three are good. I would wrap up after the third bullet by saying to publish your changes and start seeing the benefits of increased performance. The remaining bullets (4th to 6th) are “nice to haves.” The last bullet likely won’t apply to 90% of websites.

  • Use Search Console’s new Core Web Vitals report to identify groups of pages that require attention (based on the field data).
  • Once you’ve identified pages that need work, use PageSpeed Insights (powered by Lighthouse and Chrome UX Report) to diagnose lab and field issues on a page. PageSpeed Insights (PSI) is available via Search Console or you can enter a URL on PSI directly.
  • Ready to optimize your site locally in the lab? Use Lighthouse and Chrome DevTools to measure Core Web Vitals and get actionable guidance on exactly what to fix. The Web Vitals Chrome extension can give you a real-time view of metrics on desktop.
  • Need a custom dashboard of Core Web Vitals? Use the updated CrUX Dashboard or new Chrome UX Report API for field data or PageSpeed Insights API for lab data.
  • Looking for guidance? web.dev/measure can measure your page and show you a prioritized set of guides and codelabs for optimization, using PSI data.
  • Finally, use Lighthouse CI on pull requests to ensure there are no regressions in Core Web Vitals before you deploy a change to production.

In general, LCP is impacted by the following:

  • Server and/or software response times
  • Webpage resources and bandwidth
  • Browser software and plugins
  • Site JavaScript and CSS code

Many of the things Google suggests when it comes to optimizing LCP are things you may already be doing as part of a good SEO strategy to create a faster site.

Some tips to keep in mind as you are optimizing:

  • Text will render faster in most cases than other items that need to be fetched separately (like images). So using things like heading tags as the larger elements is a good idea.
  • Design changes may be needed in some cases where the largest contentful item is just too slow.
  • Optimizing your JS and CSS will help load times. Be wary of including too many third-party scripts.
  • The LCP is in the viewport for mobile or desktop. Things in your footer are not likely to count, so this really is focusing on the top of your page.
  • You should be able to see your LCP element above the fold if you visit the page with JavaScript turned off.
  • If your LCP element is an image, consider inlining it in your HTML with a data URI.

For more about this algorithm update, read the rest of our page experience series:

  1. What’s the Page Experience Update?
  2. How to Make a Mobile-Friendly Site
  3. Intrusive Interstitials & Why They’re Bad for SEO
  4. HTTPS for Users and Ranking
  5. Core Web Vitals Overview
  6. Core Web Vitals: LCP (Largest Contentful Paint)
  7. Core Web Vitals: FID (First Input Delay)
  8. Core Web Vitals: CLS (Cumulative Layout Shift)

Need to go more in-depth on this topic? I invite you to watch our on-demand webinar 3 Expert Tips to Improve Core Web Vitals. The extended Q&A at the end may just answer your toughest CWV questions!

FAQ: How can I optimize my website’s user experience and SEO ranking using core web vitals?

Optimizing your website’s user experience and SEO ranking has become paramount. Core web vitals, a set of user-centric metrics introduced by Google, play a pivotal role in achieving these goals. In this whitepaper, we’ll explore how you can leverage core web vitals to elevate both the user experience and your website’s SEO ranking, backed by expert insights and practical tips.

Understanding the Significance of Core Web Vitals

Core web vitals encompass three essential metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). These metrics gauge loading speed, interactivity, and visual stability, respectively. Google emphasizes these metrics because they directly impact user engagement and satisfaction. A seamless user experience fosters longer sessions, lower bounce rates, and improved SEO rankings.

Elevating User Experience and SEO Ranking

To optimize the user experience and SEO ranking using core web vitals, consider these expert tips:

Prioritize Loading Speed (LCP): Accelerate loading times for the largest content element on your pages, such as images or text blocks. Compress images and minimize server response times to ensure quick rendering within the first 2.5 seconds.

Enhance Interactivity (FID): Reduce First Input Delay by optimizing JavaScript code and minimizing main thread tasks. This enhances page responsiveness and provides a seamless browsing experience.

Maintain Visual Stability (CLS): Avoid unexpected layout shifts by specifying image dimensions and setting a proper size attribute for multimedia content. This prevents content from shifting, providing visual consistency.

Monitor and Iterate: Regularly monitor your core web vitals using tools like Google’s PageSpeed Insights and Search Console. Iterate your optimizations based on feedback and evolving best practices.

Optimizing your website’s user experience and SEO ranking through core web vitals requires a meticulous approach. By understanding and fine-tuning LCP, FID, and CLS metrics, you can provide users with a seamless and engaging browsing experience while boosting your site’s visibility and ranking in search results. Stay informed, adapt to evolving standards, and make data-driven improvements to stay ahead in the digital landscape.

Step-by-Step Procedure: Optimizing User Experience and SEO with Core Web Vitals

  1. Assess Current Performance: Use Google’s tools to measure core web vitals metrics on your website.
  2. Identify LCP Elements: Determine the largest content element on each page for LCP optimization.
  3. Optimize Images: Compress images without compromising quality to enhance loading speed.
  4. Minimize Server Response Time: Work on server-side optimizations to reduce delays.
  5. Optimize JavaScript: Minimize and defer non-essential JavaScript to improve FID.
  6. Specify Image Dimensions: Set explicit image dimensions to prevent unexpected layout shifts.
  7. Manage Multimedia Content: Use appropriate attributes for multimedia content to maintain visual stability.
  8. Use Monitoring Tools: Regularly check core web vitals using Google’s PageSpeed Insights and Search Console.
  9. Prioritize User Experience: Implement changes that improve user engagement and satisfaction.
  10. Iterate and Refine: Continuously monitor metrics, gather insights, and refine your optimizations.
  11. Stay Updated: Keep up with industry best practices and algorithm updates to maintain optimal performance.
  12. Analyze Data: Utilize data-driven insights to make informed decisions for further improvements.
  13. User-Centric Approach: Ensure that optimizations enhance user experience and engagement.
  14. Test Across Devices: Evaluate your website’s performance on various devices and browsers.
  15. Address Feedback: Respond to user feedback and address issues promptly.
  16. Collaborate with Developers: Work with web developers to implement technical optimizations effectively.
  17. Stay Consistent: Maintain a consistent monitoring, optimizing, and refining approach.
  18. Adapt to Changes: Adjust strategies as core web vitals standards evolve.
  19. Utilize Expert Resources: Refer to trusted sources for up-to-date information and guidance.
  20. Measure Success: Track improvements in user experience metrics and SEO ranking over time.

The post Core Web Vitals: LCP – What It Is and How to Improve It for SEO appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/core-web-vitals-lcp/feed/ 21
Core Web Vitals for SEO: An Overview https://www.bruceclay.com/blog/page-experience-core-web-vitals-overview/ https://www.bruceclay.com/blog/page-experience-core-web-vitals-overview/#comments Wed, 01 Sep 2021 15:57:12 +0000 https://www.bruceclay.com/?p=85313 There are a great many things that go into designing a webpage that offers a good user experience. How fast the page loads and how easy it is to interact with the page are just a couple. And the list is constantly evolving. Google defines the core elements of a webpage that enhance user experience […]

The post Core Web Vitals for SEO: An Overview appeared first on Bruce Clay, Inc..

]]>
There are a great many things that go into designing a webpage that offers a good user experience. How fast the page loads and how easy it is to interact with the page are just a couple. And the list is constantly evolving.

Google defines the core elements of a webpage that enhance user experience as “core web vitals.” Core web vitals were introduced in Google’s page experience ranking update</a, which rolled out June–August 2021. And there is a strong indication that they will significantly impact SEO and how websites rank in Google.

In this article from our series on the page experience update, I’ll discuss core web vitals and how they factor into SEO.

What Are Core Web Vitals?

Core web vitals are a series of signals that help assess a webpage’s usability. These “vital signs” are page-quality signals that contribute to a good user experience. And that’s good for SEO.

Core web vitals cover things like page load time, responsiveness, and the visual stability of content. Google’s current set of core web vitals includes:

  • Largest contentful paint (LCP): LCP measures how fast the webpage’s largest image or text block renders. And Google recommends that it happen within the first 2.5 seconds.
  • First input delay (FID): FID measures load responsiveness. This refers to how quickly a webpage loads and executes so that the user can interact with the page.
  • Cumulative layout shift (CLS): CLS measures unexpected layout shifts on a webpage. One example is when a button or link shifts on the webpage, causing a person to click on something other than what they wanted.

Each of these core web vitals has specific thresholds that your webpages must meet at least 75% of the time, which I’ll go into in more detail in future articles. Doing so can earn your webpage a slight ranking boost.

Core web vitals thresholds chart from Google.
Image credit: Web Vitals, Google Developers

You can expect the core web vitals to evolve over time, but not without warning. According to Google:

… Core Web Vitals represent the best available signals developers have today to measure quality of experience across the web, but these signals are not perfect and future improvements or additions should be expected. … developers should expect the definitions and thresholds of the Core Web Vitals to be stable, and updates to have prior notice and a predictable, annual cadence.

How Might Core Web Vitals Impact SEO and Rankings?

Core web vitals help ensure the user experience with your site is fast, responsive, and smooth. This is already a goal of a good SEO strategy.

  • LCP is one way to measure that webpages load fast. It helps your website visitors have a good user experience and stay on your site.
  • FID plays into another good SEO strategy, to keep visitors on your site.
  • CLS helps ensure that the experience is smooth for your mobile users, a key SEO strategy.

Google has not yet specified the percentage of rankings the new page experience signal impacts. We also haven’t heard exactly how core web vitals play into the overall page experience ranking update either. But we do know that earning “good” scores can help your rankings. According to John Mueller, page experience “is a ranking factor, and it’s more than a tie-breaker, but it also doesn’t replace relevance.”

Search Engine Land spoke to a Google rep and reported that Google would not discuss “how much each factor is weighted” but that “great content with a poor page experience can still rank highly in Google search.”

Perhaps a different view will help: If your site is slow, it cannot respond quickly to a voice search request. Will voice search become increasingly important? Of course. So overall speed is vital going forward.

It’s also suspected that Google’s AI, RankBrain, takes into account how users engage with the search results. RankBrain’s goal is to interpret search queries better and serve the most relevant search results. Specifically, RankBrain may look at the time spent engaging with a webpage when accessed from the search results.

Keep in mind that a fast site finds favor in Google’s eyes. It creates a better user experience, and that’s good for all. For that reason, page speed has been a ranking factor for years. The most recent news on this was the “speed update” for mobile that rolled out in 2018. The page experience update makes that more granular, with many metrics being tracked.

Core web vitals help ensure users are happy and stay on your site. This, in turn, can impact rankings. See an earlier article I wrote on SEO and the user experience.

Core Web Vitals and the ‘Fast Page’ Label

Is your website ready to pass the thresholds for core web vitals? If not, you’re not alone.

According to research by Screaming Frog published in August 2020, only 12% of mobile and 13% of desktop results passed the assessment.

A more recent study by Searchmetrics found even worse results. Less than 4% of the two million URLs they checked could pass all of the core web vitals tests!

It’s likely that Google knows the work that is ahead of website publishers, which explains why the search engine announced it a year in advance. Google also announced an added incentive: a “fast page” label that would be added to search results on Chrome for Android, starting in Chrome 85 Beta.

How can you earn that label for your webpages? Google says that “links to pages that have historically met or exceeded all metrics thresholds for the core web vitals” get the label.

(While Google says “all” core web vitals, it’s unclear how cumulative layout shift factors into the fast page label.)

Google example of the "fast page" label in SERP.

That means that even though Google said back in May 2020 that “there is no immediate need to take action,” it tried to make core web vitals a little more enticing to get a head start on.

That’s because sites with a “fast page” label in the results can potentially garner more clicks. This is reminiscent of the “mobile-friendly” labels Google created back in 2014, when it wanted website publishers to start putting mobile users first.

More on Core Web Vitals

As we continue our series on core web vitals, I’ll highlight each of the factors — LCP, FIC, and CLS — and include frequently asked questions on how to prepare for the coming page experience update.

You can find out about each page experience factor in our series:

  1. What’s the Page Experience Update?
  2. How to Make a Mobile-Friendly Site
  3. Intrusive Interstitials & Why They’re Bad for SEO
  4. HTTPS for Users and Ranking
  5. Core Web Vitals Overview
  6. Core Web Vitals: LCP (Largest Contentful Paint)
  7. Core Web Vitals: FID (First Input Delay)
  8. Core Web Vitals: CLS (Cumulative Layout Shift)
E-book on the Page Experience Update.
Click to get this entire series as a printable e-book.

Would you like help analyzing and improving your SEO strategy? Contact us for a free consultation today.

FAQ: How do Core Web Vitals contribute to a better user experience and SEO?

User experience and search engine optimization (SEO) are pillars of online success. The nexus between these two lies in Core Web Vitals – crucial performance indicators that encapsulate the essence of a website’s responsiveness, speed, and stability.

Core Web Vitals represent a set of performance metrics Google has identified as integral to a seamless user experience. Comprising Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), these metrics gauge a webpage’s load time, interactivity, and visual stability, respectively. By scrutinizing these aspects, search engines evaluate how effectively a site engages and retains visitors. A website that responds swiftly, allows quick interactions, and prevents unexpected layout shifts resonates more positively with users, thereby improving its SEO prospects.

User experience has become an increasingly pivotal factor for both users and search engines. In its pursuit of delivering the best results, Google factors in Core Web Vitals when determining the ranking of a webpage. A site that offers a smooth and expedient experience is more likely to receive favorable treatment in search engine results pages. Consequently, optimizing Core Web Vitals can yield a double benefit: it satisfies users by providing a better interface and enhances a site’s visibility in search results.

To grasp the impact of Core Web Vitals on user experience, consider their influence on page speed. The Largest Contentful Paint, measuring the time it takes for the largest element to load, directly affects how quickly users perceive a site as ready for interaction. Pages that load swiftly captivate and retain users’ attention, reducing bounce rates and contributing to longer dwell times – factors that search engines appreciate. This underscores the symbiotic relationship between user engagement and SEO.

One insightful tip for optimizing Core Web Vitals is to focus on efficient content delivery. Employ content delivery networks (CDNs) to distribute assets across multiple servers, ensuring users receive resources from the server closest to them. This technique minimizes latency, accelerating load times and positively impacting LCP. By prioritizing resource loading and leveraging browser caching, webmasters can significantly enhance both user experience and SEO performance.

Core Web Vitals are pivotal in shaping a website’s user experience and influencing its SEO rankings. Prioritizing these performance metrics isn’t just about meeting search engine requirements – it’s about delivering a website that resonates with users and keeps them engaged. By optimizing Core Web Vitals and focusing on strategies to enhance webpage performance, businesses and website owners can establish a strong online presence and foster better user interactions.

Step-by-Step Procedure: Optimizing Core Web Vitals for User Experience and SEO

  1. Assess current Core Web Vitals metrics using Google’s PageSpeed Insights or other relevant tools.
  2. Identify the web pages with suboptimal performance metrics.
  3. Prioritize content delivery by utilizing content delivery networks (CDNs) for efficient asset distribution.
  4. Implement lazy loading for images and videos to load resources only when needed, improving LCP.
  5. Optimize server response times by utilizing caching mechanisms and minimizing server-side processing.
  6. Minimize JavaScript execution time to enhance FID by removing unnecessary scripts and optimizing critical scripts.
  7. Prioritize above-the-fold content to ensure faster rendering and improved user engagement.
  8. Optimize CSS delivery by minimizing render-blocking resources and utilizing asynchronous loading techniques.
  9. Address layout shifts by setting explicit dimensions for media elements and utilizing CSS properties.
  10. Monitor Core Web Vitals regularly and track improvements over time.
  11. Utilize browser caching effectively by specifying appropriate cache durations for different types of resources.
  12. Optimize images and other media assets by compressing them without compromising quality.
  13. Implement code minification and bundling to reduce the size of HTML, CSS, and JavaScript files.
  14. Leverage browser preloading to anticipate user actions and preload essential resources.
  15. Implement responsive design to ensure smooth rendering across various devices and screen sizes.
  16. When optimizing and testing third-party components and scripts to avoid performance bottlenecks.
  17. Take advantage of modern web technologies, like HTTP/2 and HTTP/3, for improved server-client communications.
  18. Continuously monitor server performance and uptime to prevent disruptions in Core Web Vitals metrics.
  19. Conduct A/B testing to evaluate the impact of optimizations on user experience and engagement.
  20. Stay updated with industry trends and Google’s guidelines to adapt and optimize Core Web Vitals accordingly.

The post Core Web Vitals for SEO: An Overview appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/page-experience-core-web-vitals-overview/feed/ 7
Page Experience Matters: HTTPS for Users and Ranking https://www.bruceclay.com/blog/page-experience-https/ https://www.bruceclay.com/blog/page-experience-https/#comments Tue, 31 Aug 2021 18:59:07 +0000 https://www.bruceclay.com/?p=85184 Did you know that more than 95% of U.S. webpages loaded in Google Chrome are now encrypted? That’s good for websites and users. But not so good for the 5% that have not migrated from HTTP to HTTPS. This article is part of our series on page experience. It highlights why HTTPS is important for […]

The post Page Experience Matters: HTTPS for Users and Ranking appeared first on Bruce Clay, Inc..

]]>
Did you know that more than 95% of U.S. webpages loaded in Google Chrome are now encrypted? That’s good for websites and users. But not so good for the 5% that have not migrated from HTTP to HTTPS.

This article is part of our series on page experience. It highlights why HTTPS is important for everyone, but especially so you can equip your webpages to qualify for a ranking boost in Google. A secure site is a ranking signal in Google’s page experience update that went live in mid-2021. (Tip: You’ll find more info on the page experience ranking factors at the end of this post.

In this post (and be sure to see the other articles in this series at the end of this one):

What Is HTTPS?

HTTPS, or hypertext transfer protocol secure, secures the data that are exchanged between a web browser (such as Chrome) and a web server (which stores, processes, and delivers your webpages to a user).

What is HTTPS vs. HTTP illustration.
Image credit: “What is https?” by TutorialsTeacher.com

As the illustration shows, the difference between HTTP and HTTPS is that the data is not encrypted on HTTP. HTTPS helps protect against attacks that can happen while data is in transit.

Examples of attacks could be:

  • A breach of sensitive data like passwords, credit card numbers, and health information
  • Malware installation onto the user’s computer
  • Fake content is served up to the user instead of the content they wanted
  • Studying the overall browsing activities of users to discover a user’s identity ultimately

HTTPS came about in the ‘90s and originally applied to processing credit card information. But as companies like Google began to push for secure web browsing, HTTPS has become a gold standard for websites.

Google’s goal is to achieve 100% encryption across its products and services.

Why Is HTTPS Important?

HTTPS is important because it helps to protect your website and your website visitors from potential bad actors. HTTPS creates a good user experience, helps instill trust in your website, and protects your revenue.

HTTPS is also necessary when pursuing new web platform features, including progressive web apps (for more on what that is, see this article on Medium).

Google announced back in 2014 that sites with HTTPS would receive a ranking boost albeit a small one. In other words, if your site was not secure but a competitor’s was, their website may rank better, all else being equal.

Will HTTPS be a stronger signal in the future? Maybe.

In its 2014 announcement, Google said that “over time, we may decide to strengthen it, because we’d like to encourage all website owners to switch from HTTP to HTTPS to keep everyone safe on the web.”

But in 2017, Google rep Gary Illyes said they didn’t have plans to make it a stronger signal:

Another announcement coming from Google in 2015 said it would index HTTPS pages by default:

… we’re adjusting our indexing system to look for more HTTPS pages. Specifically, we’ll start crawling HTTPS equivalents of HTTP pages, even when the former are not linked to from any page.

A secure website can also protect website visitors and revenue. When people reach a webpage that is not secure, they may receive a message that labels it as such. This may cause a person to bounce from the site or abandon their cart.

Treatment of http pages, per Google.
Image credit: “A secure web is here to stay,” Google Security Blog

Plus, once you enable HTTPS, you can implement HTTP/2 on your site. This is the first major upgrade to HTTP since its inception, and it can improve page load time. Remember that site speed is a signal in Google’s ranking algorithm .

So it’s a good idea to implement HTTPS for security — and to do it ahead of Google’s page experience ranking update in 2021.

An additional note: I believe HTTPS is a strong trust signal, especially for ecommerce sites. But if everyone is finally HTTPS, then everyone is tied. That means NOT being HTTPS becomes a disqualifier.

How Do You Move to HTTPS?

If you’re ready to move your site to HTTPS, Google offers some good resources to start:

Like any site migration, it’s common to see fluctuations in rankings and traffic for a time. Depending on the size of the site, this can take weeks or more. Traffic should resolve itself after things settle (and you may even see a ranking and traffic boost afterward).

To avoid pitfalls that could impact your site during the migration, make sure that you:

  • Start small by moving a part of the site and testing as you go.
  • Do the migration when website traffic levels are lowest.
  • Monitor your rankings before and after — there will be some flux, but it should work itself out.
  • Don’t block HTTPS with robots.txt.
  • Don’t forget to 301 redirect all the old URLs to the new ones.
  • Make sure your internal links and tags (canonicals, etc.) aren’t referencing the old HTTP URLs.
  • Avoid the noindex meta tag on important pages.
  • Look for excessive redirects that may cause slow page load times.
  • Ensure the content on HTTPS webpages is the same as on HTTP pages.
  • Crawl the site after and make sure you get the 200 status code on all pages.

Google offers its best practices for an HTTP > HTTPS move here.

For more details on the coming update, keep reading our Page Experience series:

  1. What’s the Page Experience Update?
  2. How to Make a Mobile-Friendly Site
  3. Intrusive Interstitials & Why They’re Bad for SEO
  4. HTTPS for Users and Ranking
  5. Core Web Vitals Overview
  6. Core Web Vitals: LCP (Largest Contentful Paint)
  7. Core Web Vitals: FID (First Input Delay)
  8. Core Web Vitals: CLS (Cumulative Layout Shift)
Ebook to download on Page Experience preparation.
Click to download this entire series as a printable ebook.

If you found this article helpful, please share it and consider subscribing to our blog.

FAQ: How does using HTTPS improve website security and user experience?

HTTPS, or hypertext transfer protocol secure, encrypts data exchanged between a user’s web browser and a website’s server. This encryption establishes a secure channel that safeguards sensitive information from malicious actors seeking unauthorized access. HTTPS uses cryptographic protocols to ensure that the data remains confidential and tamper-proof during transmission. Consequently, this added layer of security gives users the confidence to engage with websites, knowing their data remains private and protected.

Beyond fortifying security, HTTPS significantly contributes to an enhanced user experience. In today’s fast-paced digital landscape, website speed is crucial in retaining user engagement. When combined with HTTP/2, HTTPS enables faster loading times, ensuring that users can access content swiftly and without frustration. Google’s ranking algorithm considers website speed, favoring sites that offer seamless experiences. By adopting HTTPS, website owners can cater to user expectations, resulting in decreased bounce rates and improved engagement metrics.

Moreover, the trust factor associated with HTTPS cannot be overstated. Modern internet users are aware of potential security threats and often look for visual cues indicating a website’s safety. The padlock icon in the browser’s address bar and the “Secure” label next to the URL signal to users that the website employs HTTPS. This visual affirmation fosters trust and encourages users to interact freely with the site, whether it’s making a purchase, submitting personal information, or exploring content.

An experiential insight worth noting is that HTTPS enhances user trust and impacts search engine rankings. Search engines like Google prioritize secure websites in their search results, giving them a competitive edge. This ranking boost highlights the importance of HTTPS in the context of search engine optimization. As HTTPS adoption continues to rise, websites prioritizing security and user experience through HTTPS will likely gain an upper hand in the digital arena.

Adopting HTTPS is an essential step toward bolstering website security and user experience. By encrypting data, improving site speed, and building user trust, HTTPS is a robust solution for the challenges posed by the digital landscape. Prioritizing HTTPS implementation is a best practice and a strategic move that can improve security, user engagement, and search engine visibility.

Step-by-Step Procedure: How to Fully Answer the Question “How does using HTTPS improve website security and user experience?”

  1. Introduction to HTTPS: Provide a brief overview of HTTPS and its role in website security and user experience enhancement.
  2. Data Encryption: Explain the data encryption process in HTTPS, detailing how it prevents unauthorized access and data breaches.
  3. User Confidence: Elaborate on how HTTPS contributes to user confidence by protecting personal and sensitive information.
  4. Visual Cues: Discuss the visual indicators of a secure website, such as the padlock icon and “Secure” label, and how they build user trust.
  5. Website Speed: Explain the relationship between HTTPS and website speed, highlighting the benefits of faster loading times.
  6. Search Engine Rankings: Detail how search engines prioritize secure websites in their rankings, emphasizing the SEO advantages of HTTPS.
  7. Adoption Trends: Discuss the increasing adoption of HTTPS across websites and its impact on user expectations.
  8. Migration Process: Provide a concise guide on how website owners can seamlessly migrate from HTTP to HTTPS.
  9. Impact on User Engagement: Explain how HTTPS positively affects user engagement metrics, including reduced bounce rates.
  10. HTTPS and Mobile Devices: Discuss the significance of HTTPS for mobile users and its role in providing a consistent experience.
  11. Security Against Cyberattacks: Detail the protection offered by HTTPS against various cyber threats, such as data interception and tampering.
  12. Google’s Ranking Algorithm: Explore Google’s emphasis on secure websites and how it influences search engine ranking.
  13. HTTPS and E-Commerce: Highlight the importance of HTTPS for e-commerce platforms, where user trust directly impacts sales.
  14. Implementation Tips: Offer practical tips for website owners considering HTTPS implementation, including selecting the right SSL certificate.
  15. SEO Strategy: Explain how incorporating HTTPS into an SEO strategy can improve visibility and organic traffic.
  16. User Expectations: Discuss how HTTPS has become an industry standard and aligns with modern user expectations.
  17. Monitoring and Maintenance: Emphasize the need for ongoing monitoring and maintenance to ensure SSL certificates remain valid.
  18. Case Studies: Provide real-world examples of websites that experienced enhanced security and user experience after implementing HTTPS.
  19. Future of HTTPS: Touch on the evolving role of HTTPS in future web technologies and its continued significance.
  20. Conclusion: Summarize the key takeaways from the procedure, reinforcing the crucial role of HTTPS in improving website security and user experience.

The post Page Experience Matters: HTTPS for Users and Ranking appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/page-experience-https/feed/ 20
Page Experience Matters: Intrusive Interstitials & Why They’re Bad for SEO https://www.bruceclay.com/blog/page-experience-intrusive-interstitials/ https://www.bruceclay.com/blog/page-experience-intrusive-interstitials/#comments Tue, 31 Aug 2021 18:52:36 +0000 https://www.bruceclay.com/?p=84981 Find out how to avoid intrusive interstitials, pop-ups on your website that drive mobile visitors away, which is part of Google’s page experience ranking update.

The post Page Experience Matters: Intrusive Interstitials & Why They’re Bad for SEO appeared first on Bruce Clay, Inc..

]]>
You’re searching for a product on your phone. You find a listing in the search results, select it and — fail! A pop-up has dominated the entire screen on your mobile device. And you can’t press the little “x” because it’s too close to the screen’s edge. All that’s left to do is leave the site.

Has something like this ever happened to you? Aside from the fact that it’s annoying as a user, think about what it’s doing to your business as a site owner. That’s one reason why avoiding intrusive pop-ups is an SEO best practice. Another is that they could cost you a ranking boost in Google.

Let’s explore intrusive interstitials as No. 3 in our series on Google’s page experience ranking update that rolled out between mid-June and early September 2021.

What Are Intrusive Interstitials?

An intrusive interstitial is essentially a webpage pop-up that makes it hard for a mobile user to access the content they want.

When Google first talked about this issue in 2016, it gave some examples of intrusive interstitials:

  • A pop-up that covers the main content immediately after a person navigates to a webpage from the search results or while they are looking through the page.
  • A standalone interstitial that a person has to dismiss before accessing the main content.
  • A webpage with above-the-fold content similar to a standalone interstitial where the original content is inline underneath.
Intrusive interstitial examples from Google.
“Helping users easily access content on mobile,” Google Webmaster Central Blog

Pop-ups that are OK include:

  • Interstitials for legal obligations (like cookie usage notices or age verifications)
  • Login dialogs on sites, such as to access private content
  • Banners that are easily dismissible and don’t take up too much space on the webpage
Interstitial examples that are OK per Google.
“Helping users easily access content on mobile,” Google Webmaster Central Blog

When the interstitial pops up matters. Google’s intrusive interstitials ban “is essentially focused on that moment when a user comes to your website” because that’s a bad user experience. A pop-up may be “perfectly fine” if it isn’t the “first thing” a user sees and if the user experience is preserved. We’ve known this all along, but it’s nice to have John Mueller state it for the record in a Google SEO Office Hours hangout on August 20, 2021.

Why Do Intrusive Interstitials Matter?

Intrusive website pop-ups create a bad user experience for mobile users. Since this can harm your website rankings, they’re also bad for SEO.

In 2017, Google rolled out an intrusive interstitial penalty. Google explained that:

Starting today, pages where content is not easily accessible to a user on the transition from the mobile search results may not rank as high.

This applies only to pages that mobile users visit directly from a Google search result (not subsequent webpages visited on the same site from the original page). Regardless, it’s a good best practice to avoid annoying your visitors.

Google reminded readers that this is just one signal and, as always, great content will prevail:

As we said, this new signal is just one of hundreds of signals that are used in ranking and the intent of the search query is still a very strong signal, so a page may still rank highly if it has great, relevant content.

With interstitials being a factor in Google’s new page experience algorithm update, it’s a reminder that intrusive pop-ups have no place in a mobile-first world.

How to Avoid Intrusive Interstitials

You want to avoid intrusive-pop ups by aligning your website with the mobile user experience.

Google offers in-depth guidance on creating a mobile-friendly site here, including how to avoid common mistakes with pop-ups.

Luckily, you can still achieve your website goals without hindering people’s page experience. Keep these mobile-friendly navigation practices for pop-ups in mind:

  1. Use pop-up banners that don’t take up a lot of space. This may mean reducing the size of the elements or placing a banner on the side or bottom of the page.
  2. Make sure users can easily dismiss the pop-up. That “X” should be clearly visible and easy to press.
  3. Apply a delay before the pop-up renders. Make sure visitors can access the main content right away when they come from the search results. This can be a time delay or a scrolling delay. Or you can show the pop-up on exit instead of entry to the page.
  4. Segment your pop-ups by the audience to make the message more relevant to them. For example, new versus returning visitors.
  5. If a user closes a pop-up once, make sure that it doesn’t continue to display or follow them around the website. Showing it to them again at a later date (like a week later) should be fine.
  6. Make sure your pop-up doesn’t slow your page load time.

It comes down to courtesy. When designing website elements like interstitials, make sure your site delivers the kind of page experience that satisfies visitors and Google.

For more details on the update, keep reading our page experience series:

  1. What’s the Page Experience Update?
  2. How to Make a Mobile-Friendly Site
  3. Intrusive Interstitials & Why They’re Bad for SEO
  4. HTTPS for Users and Ranking
  5. Core Web Vitals Overview
  6. Core Web Vitals: LCP (Largest Contentful Paint)
  7. Core Web Vitals: FID (First Input Delay)
  8. Core Web Vitals: CLS (Cumulative Layout Shift)
E-book on Google's Page Experience Update.
Click to get this entire series as a printable e-book.

If you found this article helpful, please share it! Subscribe here to receive updates from the Bruce Clay Blog delivered to your inbox.

FAQ: How can I avoid using intrusive interstitials while maintaining a positive user experience on my website?

Optimizing user experience has become paramount. As websites aim to engage visitors and convey their messages effectively, avoiding intrusive interstitials while maintaining a positive user experience is both pertinent and challenging. Intrusive interstitials, those pesky pop-ups that hinder access to content, can disrupt user interaction flow and potentially drive visitors away. However, striking the balance between your website’s goals and users’ needs is achievable with the right approach.

Regarding intrusive interstitials, the key lies in embracing user-centric design. These pop-ups are roadblocks; they deter users from reaching their desired destinations. To avoid frustrating your audience, consider using subtle banners that convey important messages without obstructing the content. Strategically position these banners to ensure minimal disruption and easy dismissal. By respecting your users’ journey, you show that your website values their experience.

Experience teaches us that timing is crucial in web interactions. Similarly, consider when your pop-ups appear. Intrusive interstitials that greet users immediately can lead to dissatisfaction. Instead, slightly delay their appearance, allowing users to immerse themselves in the content before encountering interruptions. This strategic delay minimizes frustration and contributes to a smoother user journey.

Moreover, segmenting your audience allows you to tailor messages effectively. New visitors might benefit from different pop-ups compared to returning users. Personalization enhances user experience and showcases your website’s attentiveness to individual needs. This level of detail underscores your commitment to delivering value without compromising usability.

A well-executed exit intent strategy can also be effective. Instead of bombarding users upon entry, consider triggering pop-ups as users navigate toward exiting your site. This approach respects their initial engagement while allowing them to share additional content or offers. This way, your pop-ups become valuable extensions of their journey.

Thoughtful design and strategic implementation are key to avoiding intrusive interstitials while maintaining a positive user experience. By considering the user journey, optimizing timing, segmenting audiences, and leveraging exit intent, you can strike a harmonious balance between your website’s objectives and your users’ satisfaction.

Step-by-Step Procedure:

  1. Evaluate your pop-ups’ purpose and alignment with user experience goals.
  2. Identify critical messages that need to be conveyed through pop-ups.
  3. Design subtle banners that complement your website’s visual aesthetics.
  4. Position banners in non-obtrusive locations, such as the sides or bottoms of pages.
  5. Ensure the “X” button to dismiss pop-ups is easily visible and accessible.
  6. Introduce a slight delay before pop-ups appear after users navigate to a page.
  7. Implement exit intent triggers for pop-ups to engage users before they leave.
  8. Segment your audience based on characteristics or behaviors.
  9. Tailor pop-up messages to suit different audience segments.
  10. Prioritize mobile responsiveness for all pop-up designs.
  11. A/B tests different pop-up designs and timings to gauge user preferences.
  12. Monitor user engagement and bounce rates to assess the impact of pop-ups.
  13. Use analytics to understand user interaction with pop-ups.
  14. Continuously refine pop-up strategies based on user feedback and data.
  15. Focus on delivering value through pop-ups, such as exclusive offers or content.
  16. Avoid using pop-ups excessively; opt for quality over quantity.
  17. Prioritize the overall user journey and seamless navigation.
  18. Stay updated with industry best practices and evolving user preferences.
  19. Seek feedback from users to gauge their perception of your pop-ups.
  20. Continuously adapt and evolve pop-up strategies based on user behaviors and trends.

The post Page Experience Matters: Intrusive Interstitials & Why They’re Bad for SEO appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/page-experience-intrusive-interstitials/feed/ 11
Page Experience Matters: The Mobile-Friendly Site https://www.bruceclay.com/blog/page-experience-mobile-friendly-site/ https://www.bruceclay.com/blog/page-experience-mobile-friendly-site/#comments Tue, 31 Aug 2021 18:51:29 +0000 https://www.bruceclay.com/?p=84750 It’s no secret that the majority of Google’s search engine users are mobile users. That fact is the driving force behind Google’s focus on making sure websites like yours serve them well. And if you don’t comply? Your search engine rankings suffer. That’s why this article (No. 2 in our page experience series) will discuss […]

The post Page Experience Matters: The Mobile-Friendly Site appeared first on Bruce Clay, Inc..

]]>
It’s no secret that the majority of Google’s search engine users are mobile users. That fact is the driving force behind Google’s focus on making sure websites like yours serve them well. And if you don’t comply? Your search engine rankings suffer.

That’s why this article (No. 2 in our page experience series) will discuss mobile-friendliness as a way to help your webpages earn a ranking boost from Google’s page experience ranking update, which went live in mid-2021. (Be sure to see all our other articles in this series at the end of this one).

What Is a Mobile-Friendly Website?

A mobile-friendly website creates a good experience for people who visit a website from a smartphone or tablet.

There’s a lot that goes into having a mobile-friendly website. Some of the factors include:

  • Using mobile-compatible plugins
  • Ensuring the webpage fits different screen sizes
  • Configuring the size of the text for mobile viewing
  • Making sure that it’s easy for mobile users to click on buttons and links
  • Having fast-loading webpages (Although this is not talked about much in Google’s mobile-friendly guide, it counts toward the page experience ranking signals and is a best practice for mobile anyway.)

Why Does a Mobile-Friendly Website Matter?

A mobile-friendly website also matters to your search engine rankings because Google wants to include websites in its search results that offer a good experience to mobile users.

After all, about 63 percent of visits to Google’s search engine on average in 2019 were from mobile users.

You can confirm how many mobile users are coming to your own site through your Google Analytics account. (Go to: Audience > Mobile > Overview)

Google Analytics Mobile Overview graph.

Recognizing the growing trend in mobile web browsing, in 2016, Google started testing a mobile-first index. In March 2020, Google announced it would be “switching to mobile-first indexing for all websites starting September 2020” but then pushed the full rollout back to the end of March 2021.

Mobile-first indexing means Google predominantly uses the mobile version of the content for indexing and ranking. Historically, the index primarily used the desktop version of a page’s content when evaluating the relevance of a page to a user’s query. Since the majority of users now access Google Search with a mobile device, Googlebot primarily crawls and indexes pages with the smartphone agent going forward.

–Google, “Mobile-first indexing best practices

When Google announced the upcoming page experience ranking update, it affirmed that the existing mobile friendliness signal would be a part of it. This is another confirmation that having a website set up for mobile users is key if you want to compete in Google’s search results.

How Do You Make a Site Mobile-Friendly?

You can make a website mobile-friendly by following best practices outlined by Google and a seasoned SEO expert. One size does not fit all when it comes to a mobile strategy.

If you’re ready to make your site more friendly to mobile users, you need to follow four basic steps:

  1. Test your current site.
  2. Learn about mobile-friendly best practices.
  3. Implement changes.
  4. Watch for common mistakes.

1. Test Your Current Site

One of the first things Google recommends is to run pages through its mobile-friendly test. You can also use the mobile usability report in Search Console.

Depending on what stage you’re at in your mobile journey, the next steps will vary. The goal is to address the main issues uncovered in the testing phase.

Google mobile-friendly test results.

2. Learn About Mobile-Friendly Best Practices

Addressing the issues will require learning more about mobile-friendly best practices. You can do so by reviewing Google’s guide here and our guide on mobile SEO and UX optimization as well for more information.

Again, an experienced SEO professional can help you make good choices here.

3. Implement Changes

Of course, implementing mobile-friendly updates is the next step.

Website Configurations

One big decision you may be facing is what type of website configuration you should have to support mobile users.

Google supports three types of mobile website configurations: responsive web design, dynamic serving and separate mobile URLs. (Check out this cheat sheet on mobile design.)

In general, a responsive website is going to be the easiest to create and maintain. A responsive website uses the same URL and HTML code no matter what device the visitor has (versus a separate mobile site). But it serves up the content in a slightly different format depending on the screen size — so it’s friendly for mobile users.

Be sure to check out these seven mobile navigation best practices for more.

Website Content

Remember that a responsive website does not automatically mean a mobile-friendly website. How you serve the content is one thing. But what you actually prioritize in the content is another.

You see, people using mobile phones tend to search differently than those on a desktop. User intent is different, and that means that the information you want to serve may be different.

You can learn more about this concept in my article on understanding Google’s mobile-first index. And read the mobile SEO checklist for ideas on mobile content and more.

Website Speed

Mobile friendliness and fast webpage loading go hand in hand.

Mobile users do not want to wait around for content to load. Google once found that 53% of mobile site visits were abandoned when webpages took more than three seconds to load.

You can test page speed on your key pages through Google’s PageSpeed Insights tool.

Example of failed mobile-friendly test.

You can also view data in your Google Analytics on site speed (go to: Behavior > Site Speed). And the Core Web Vitals report in Google Search Console is going to give data on load times, as well.

Read more about the need for speed in Google’s mobile-first index.

4. Watch for Common Mistakes

One pitfall to avoid is sacrificing necessary content for the sake of speed. Reducing content to improve page speed could impact rankings in a mobile-first world as I’ve written about in the past:

What is currently being served as your mobile site is what Google would consider for indexing and ranking in its mobile-first index. If the mobile version of your site only displays a portion of all available content, then Google will only consider that part in its ranking calculations (and not any additional resources available in the desktop version of a site).

If a site has a responsive design configuration, as Google recommends, everything on both the desktop version and the mobile version should be accounted for by Google, right?

Not exactly. In responsive design, you tell the site not to display blocks of text or certain images in a mobile device.

Traditionally, Google would index the desktop version of your site. Whatever the desktop image was, that’s what Google would index and use to rank. Then, when a person loaded that page on a mobile device, at that point, you could control what was displayed. However, the index was based on the full desktop version of the content. Responsive design just decided what was displayed or not for a mobile or tablet device.

Now Google is moving to a mobile-first index. Whereas the desktop version of the site used to matter most for search engine optimization, now it’s the mobile UX that counts. If the mobile version of your site is not displaying certain content or images, Google will no longer consider them in ranking and indexing.

For example, on your desktop site in your footer, you might have 50 links. But in the mobile version, you don’t want to clutter it up so you only display 10. When Googlebot crawls your page, it’s not going to count 50 links, it’ll only consider the 10.

Because there are so many variables when creating a mobile-friendly site, it’s important to have an expert SEO working with your developers to make important decisions about mobile configuration.

For more details on the update, read our entire page experience series:

  1. What’s the Page Experience Update?
  2. How to Make a Mobile-Friendly Site
  3. Intrusive Interstitials & Why They’re Bad for SEO
  4. HTTPS for Users and Ranking
  5. Core Web Vitals Overview
  6. Core Web Vitals: LCP (Largest Contentful Paint)
  7. Core Web Vitals: FID (First Input Delay)
  8. Core Web Vitals: CLS (Cumulative Layout Shift)
Ebook to download on Page Experience preparation.
Click to get this entire series as a printable e-book.

If you’d like to talk to us about your SEO needs, contact us today for a consultation.

FAQ: How can I create a mobile-friendly website to improve user experience and search engine rankings?

As it becomes increasingly important for businesses and websites to remain accessible across all devices, mobile-friendly sites become even more essential in serving a growing mobile user population and improving search engine rankings. This article discusses how you can create an appealing mobile-friendly website that appeals to both users and search engine algorithms alike.

To begin, consider responsive web design as your foundation. Responsive design enables your website to adapt automatically to different screen sizes, providing users with an uninterrupted user experience across devices and reducing maintenance burden by eliminating your site’s separate desktop and mobile versions.

Next, prioritize content optimization for mobile users. Understand that mobile search behavior differs from desktop searches. Craft concise and engaging content that addresses user intent quickly. Prioritize crucial information, enhancing readability and engagement.

Website speed is critical to user satisfaction and search engine rankings. Mobile users demand swift loading times, and Google rewards fast-loading pages. Regularly assess and optimize your website’s speed using tools like Google’s PageSpeed Insights.

Additionally, mobile-friendliness extends to navigation. Simplify menus and ensure buttons are easily clickable on smaller screens. Optimize images for mobile consumption to minimize load times without compromising quality.

Lastly, leverage Google’s mobile-friendly test and mobile usability report in Search Console to identify and rectify any issues. Regularly monitor mobile performance metrics to stay proactive in improving the user experience.

Step-by-Step Procedure: How to Create a Mobile-Friendly Website

  1. Choose a responsive web design framework.
  2. Optimize your website’s content for mobile users’ needs and preferences.
  3. Craft concise and engaging headlines and content.
  4. Prioritize essential information to capture user attention quickly.
  5. Implement a mobile-first approach to design and user experience.
  6. Simplify navigation menus for easier mobile browsing.
  7. Ensure buttons and links are easily clickable on smaller screens.
  8. Optimize images for mobile devices to reduce load times.
  9. Evaluate website speed using tools like Google’s PageSpeed Insights.
  10. Implement speed optimization techniques, including browser caching and image compression.
  11. Leverage mobile usability reports in Google Search Console to identify issues.
  12. Test your website using Google’s mobile-friendly test tool.
  13. Regularly monitor mobile performance metrics, including load times and bounce rates.
  14. Address any issues identified through testing and monitoring.
  15. Continuously update and refine your mobile-friendly strategy based on user feedback and industry trends.
  16. Stay informed about Google’s algorithm updates and mobile-friendliness guidelines.
  17. Collaborate with experienced SEO professionals to ensure optimal results.
  18. Consider user behavior and intent when crafting mobile content.
  19. Regularly assess and improve website speed to maintain a competitive edge.
  20. Prioritize user experience in all mobile website design and optimization aspects.

The post Page Experience Matters: The Mobile-Friendly Site appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/page-experience-mobile-friendly-site/feed/ 10