tvura

M Posted 4 years 5 months ago

t 9 min read

In Mid-June, Google began rolling out Core Web Vitals as part of its Page Experience update. Page Experience is aimed at improving the user experience according to three metrics – known as Core Web Vitals:  

• Largest Contentful Paint (LCP), which measures loading performance. 
• First Input Delay (FID), which pertains to how quickly a visitor can interact with a page. 
• Cumulative Layout Shift (CLS), which measures visual stability.  

By prioritizing these page performance metrics as ranking factors, Google is incentivizing website owners to improve the user experience. High-performing pages are rewarded with greater consideration for high search ranks, and poor-performing pages are penalized in the quest for high search rankings. 

In a recent article, Google drew attention to an experimental markup-based signal called Priority Hints to help web developers control how page elements load. In simple terms, Priority Hints better enables developers to instruct the browser as to which resources are important, and which are not. By helping control how elements are loaded in the browser, Priority Hints can directly improve page performance and Core Web Vitals metrics.   

Developers can employ the tag <link rel=preload> and the attributes async and defer to manage the downloading and execution of scripts. Priority Hints goes a step further, effectively controlling the loading of other elements. Currently, Priority Hints can apply an “importance” attribute of high, low or auto to four-page elements: 

• link  
• img 
• script 
• iframe 

According to Google, Priority Hints can help: 

“1. Boost the priority of the LCP image by specifying importance="high" on the image element, causing LCP to happen sooner. 

2. Increase the priority of async scripts using better semantics than the current hack that is commonly used (inserting a <link rel="preload"> for the async script). 

3. Decrease the priority of late-body scripts to allow for better sequencing with images.” 

Priority Hints Improve Core Web Vitals 

Priority Hints give developers more granular control over the downloading of resources than existing tools like “preload,” “async,” and “defer.” 

While “preload” will tell a browser to prioritize downloading images as a category, for example, the experimental “importance” attribute can tell a browser which images to load first by marking their importance “high” while marking other images as “low” importance. It’s important to note that Priority Hints are precisely that, hints, and not directives to the browser. 

In practice, this can ensure that elements that are needed in the active viewport when a page is loading are loaded first, improving the Core Web Vitals largest contentful paint and first input delay. It can also improve the Core Web Vital metric, cumulative layout shift. Layout shifts generally happen when an element is loaded after the page becomes interactive. When that happens, the content a visitor is interacting with can move, disrupting the flow of interaction. As the visitor is reading a block of copy, for example, it suddenly moves down the page as an image above it is loaded, or the link they are about to click suddenly shifts away from the cursor. Priority Hints help minimize disruption to the browsing experience. 

What’s Good for Page Experience is Good for SEO 

Because Core Web Vitals are ranking factors, any opportunity to improve these key metrics in page performance also improves a page’s ability to rank highly for relevant searches. While Core Web Vitals are just several of many ranking factors, they have a significant impact, especially for e-commerce web pages. 

In a recent study, BrightEdge tracked 6,000 e-commerce keywords across 10 search categories over the past three years and analyzed the patterns in the data. Among a slew of ranking factors, Core Web Vitals had the greatest correlation to higher search result ranks. 

Deploying Priority Hints 

Currently, Priority Hints is in what Google calls origin trials with browser support slated to roll out with Chrome 96, which is scheduled to release on November 21, 2021. Interestingly, Google ran an origin trial for Priority Hints two years ago but received limited interest. With Core Web Vitals taking on greater importance, the participation will likely be much higher this time around. 

To participate in the origin trial, developers must register here: https://developer.chrome.com/origintrials/#/view_trial/365917469723852801

TIP: To evaluate if and how to apply the “importance” attribute, developers can check the priority assigned to different resources by using the Chrome Dev Tools network tab while loading a page and viewing the “priority” column. 

tvura

M Posted 4 years 5 months ago

t 9 min read

What is a Category Page? 

Category pages organize products into purchase paths for the consumer. At the highest level, they typically live close to the homepage in the website hierarchy and depending on the depth of an e-commerce site’s offering, can branch into multiple levels of sub-category pages. Regardless of their position in the website hierarchy, category pages feature multiple ways of sorting products, and their primary purpose is to help the user learn and discern between products, brands, price points, etc. Put more simply, they help shoppers shop.  

Why Focus on Category Pages? 

For e-commerce retailers, the ultimate goal is sales. With consumers transacting mainly on product pages, understandably, there is a lot of attention paid to the product page, its components and easing the path to a sale. So, how does a consumer find their way to a product page? If we trace back a sale to its origins, 87% of consumers start with search. In late 2021, BrightEdge published an E-Commerce Holiday Shopping Guide that gives insights into consumer search behaviors based on roughly 6,000 e-commerce keywords tracked across 10 categories over a period of three years. The study revealed that category pages – not product pages – earn the most clicks, and it’s not even close.   

How not close is it? In the customer journey for the keywords we evaluated, category pages that appeared in the results had a 70% click-through rate. 

The dominance of category pages in search clicks reflects a traditional search and compare shopping behavior, which differs from targeted buying behavior. Consider how consumers shop in-store at a grocery store, for example. Some portion of consumers know precisely what product and brand of that product they are looking for and go directly to purchase that item: house brand, low-fat milk, perhaps. This is a targeted product buyer. Another grocery shopper is looking to purchase a block of cheese but doesn’t have a particular variety or brand in mind. The cheese shopper will peruse the many options comparing varieties, brands, prices, etc. This is a category shopper.  

With category pages capturing the large majority of clicks in search, we can infer those consumers coming from search are largely in a search and compare mindset. Lending additional credence to this conclusion are a couple of additional data points from the research: 

• The sites winning the most clicks don’t necessarily rank for the most keywords, which further indicates that category pages are winning more high value keywords than unique product pages 
• Among the most common schema types that are winning e-commerce rankings, breadcrumb lists – a navigational element tying product pages to and from category pages – are the most common by nearly three times the next-most common schema type. 

The Anatomy of an Effective Category Page 

The perfect category page will depend somewhat on the unique audience and nature of the e-commerce product offering, but there are some best practices to ensure that category pages effectively secure meaningfully high search rankings for relevant keywords, and deliver an intuitive and positive customer experience. 

1. Address, phone numbers, live chat link – provides an alternative path for consumers who may prefer another method of contact or don’t immediately find what they’re searching for, helping convert sales both online and offline; From an SEO perspective, given what we know about shopping behaviors, these features could reduce click-backs and improve dwell times, which will help your SEO 

2. Breadcrumb list (with markup) – serves as a navigational trail to quickly direct consumers either back to where they came from or to a neighboring page in the website hierarchy that better matches what they’re looking for; helps the search engine understand how the contents of the page relate to other topics or categories and makes it possible for the search engine to crawl adjacent content 

3. Top level navigation for other categories – enables consumers to navigate more generally beyond the current category; helps the search engine crawl the larger site  

4. H1 tag – tells both the consumer and the search engine what the page is about  

5. Sorting option – enables the consumer to organize the contents of the page in a way that aligns with their shopping priorities; Helps with E-A-T (expertise, authoritativeness, trustworthiness) for SEO by establishing expertise for a given set of products 

6. Faceted search (by price, color, size, etc.) – enables shoppers to narrow the contents of the category page to better identify options that match their requirements; helps search engines understand the context of your page and how the user can navigate it; helps build long tail keyword relevance 

7. Categories – preset sub-categories help shoppers quickly navigate to relevant product pages (photos here can be especially helpful for the shopper who knows they need a bolt with a sharp end and a hex head, but doesn’t know that it’s called a lag bolt, for example); like with faceted search, helps search engines understand the context of your page and how the user can navigate it, and helps build long tail keyword relevance.

8. Promotions and relevant offers with hero image – while not strictly necessary, this real estate is often used to ratchet up interest from shoppers and help keep them on the site – especially for commodity categories and products – by giving them a reason to try to find what they’re looking for and purchase on the site 

9. FAQ and supplemental content – Giving shoppers answers to common questions, brand reviews, links to new or popular products in the category and the like, offers another path to fulfilling the shopper’s search; helps the site form SEO content relevancy and influences “People Also Ask” results, expanding the content’s footprint in search results pages 

Key Takeaways and Next Steps 

One final observation from the BrightEdge e-commerce research is this: product carousels in search results have declined over the three-year period from 2019 – 2021. Category pages, instead, are the new product carousel.  

To help you make the most of the upward trend in category page clicks, here are some guidelines to bear in mind as you evaluate and update your category pages: 

1. Ensure related categories and sub-categories are easily viewable 
2. Ensure phone numbers and store locator buttons are easy to locate on category pages 
3. If using faceted search elements, ensure they have schema elements to help search engines understand context 
4. Include FAQ content or easy links to it 

Finally, to better understand how consumers are shopping on your site, examine the traffic patterns across your category page links, breadcrumb lists and other navigational elements. Are you seeing people entering the website from search primarily on category pages, too? Where do they go once they reach the site? How often do they abandon the website and can you spot any patterns of abandonment that indicate a problem or opportunity? 

By implementing category page best practices, you will have a strong foundation for attracting search traffic, which in turn, can help inform tweaks and modifications that will maximize shopper interactions and transactions.