Category: eCommerce Essentials

Discover the Latest eCommerce SEM Trends for 2024: Adapt and Thrive

As an eCommerce digital marketing agency committed to ensuring our clients stay at the forefront of their relative industries, we are always searching for new ways to improve our client outcomes. As we look into 2024, the evolving landscape of Search Engine Marketing (SEM) offers many opportunities for growth. Here, our Paid Media Director, Rob Munro, leads us in a deep dive into some pivotal trends set to reshape SEM strategies in the eCommerce sector.

Harnessing AI and Automation for Enhanced SEM

With the groundswell of public interest and professional development in AI (artificial intelligence), it’s no surprise that AI-driven SEM for personalisation and efficiency will increase in 2024. No longer just buzzwords, AI and automation are central to effective SEM. These technologies are revolutionising how we approach SEM, from automated bidding strategies to AI-driven keyword research and ad optimisation. For eCommerce, this means creating more targeted and personalised ads, leading to higher engagement and conversion rates. By leveraging AI, we can analyse vast amounts of data to make informed decisions, thereby increasing the efficiency of our ad campaigns​​​​.

Optimising for the Surge in Voice Search is Key

Voice search optimisation has been steadily evolving towards conversational queries as more and more people use voice-activated searches and requests as a time-saving initiative. Mirrored by the rise of voice-activated devices, adapting to voice search is imperative for your eCommerce business. Users increasingly prefer voice commands for searches, necessitating a shift in keyword strategy towards long-tail, conversational phrases. This trend impacts how we structure our content and SEM strategies, focusing on how people naturally speak rather than traditional typed queries​​​​.

The Vital Role of Mobile Optimisation Continues to Expand

The dominance of mobile internet usage makes mobile optimisation a cornerstone of SEM strategies. Our clients’ ads and landing pages must go beyond being simply mobile-friendly to optimise for mobile experiences. This includes ensuring that ads are visually appealing and functional on smaller screens and that landing pages load quickly and efficiently on mobile devices. Google’s mobile-first indexing, which prioritises the mobile version of your website content over the desktop site, further underscores the importance of this approach for mobile-first SEM strategies​​.

Navigating Economic and Competitive Challenges as Cost-of-Living Continues to Rise

The fluctuating economy, stubbornly high inflation and increased competition in the digital space make strategic budgeting and competitive differentiation more important than ever. We are strongly focused on developing appealing discount strategies and efficient budget management to help our clients stay on top. By understanding market trends and consumer behaviours, especially in times of economic anxiety, we can guide our clients to make smarter, more impactful SEM decisions​​.

Leveraging Emerging Technologies

Consistently ahead of the pack, we pride ourselves on our adoption of innovative experiences with AR (augmented reality) and 5G, as these emerging technologies are poised to impact SEM significantly. AR offers new, interactive ways to showcase products and engage with customers by enhancing real-world perspectives with composite virtual content for immersive experiences. Meanwhile, 5G’s faster speed opens doors to more interactive and engaging ad formats. Staying across these technologies is key to leveraging them effectively in SEM strategies, offering our clients innovative ways to connect with their audiences​​.

Let LION Digital Lead Your Business to More Growth with Sustainable SEM Strategies in 2024

As we embrace these SEM trends in 2024, our commitment as an eCommerce digital marketing agency is to ensure our clients keep pace with these changes and capitalise on them. By focusing on AI and automation, adapting to voice search, prioritising mobile optimisation, navigating economic challenges, and exploring emerging technologies, we aim to position our clients at the forefront of eCommerce success. Partner with us for your SEM, and we’ll help you navigate the new technology while seizing the brilliant opportunities presented in this dynamic landscape.

Introduction

(00:00) Alan Kent: So, you want your eCommerce website to be number one in search results? Go for it. The challenge is, so does your competitors. Hi. My name is Alan Kent, and I’m a developer advocate at Google.

In this episode, I introduce some basic SEO tips particularly relevant to eCommerce. These tips are not a guarantee of success, but they will help you get started on your SEO journey. SEO, or Search engine optimisation, covers actions you take to improve the ranking of your web pages in search results.

You can have different goals when you tackle SEO. For example, a website that earns revenue from showing ads typically wants to increase the volume of site traffic. However, for eCommerce, a more common goal is to increase sales. A large number of visitors that do not make a purchase is less useful than a smaller number of visitors that do make purchases.

Similarly, think about which products you want to drive traffic to. Do you want to drive traffic to fast selling products in the hope of getting return visits, or to products with a higher profit margin?

There is no single best answer for all sites. Such considerations come from your business strategy. It is, however, important to think through your goals for your own site so that you measure and optimise your support for your business goals.

In this episode, I share eight SEO tips for eCommerce sites. But there are many more great resources on Google Search Central. Let’s dive in.

TIP #1: Get the Technical Basics Right

(00:55) Alan Kent: The first tip is to nail the technical basics. Maybe you’ve developed a great content strategy, but you’re not getting the traffic you expected. The first step is to make sure you have the technical basics in place.

For example, if Google cannot crawl your website, it does not matter how great your content is. One great tool to find technical issues on your website site is Google Search Console. There are a number of reports available reporting on a range of potential issues on your site.

To address issues on your site, follow the advice given by Google Search Console. If there were issues with individual URLs that you have since fixed, use the URL Inspection tool to check to see if issues have been fully resolved.

Also, if you control the URL structure of your site, make sure your URLs and internal linking are friendly to crawlers. Check out designing a URL structure for eCommerce websites on Google. Search central for advice on how to design URLs for your website.

If your platform does not give you control over the structure of URLs on your site, don’t worry many common platforms take care of these issues for you.

Next, it is worth checking details such as page titles. Consider including the details in the title, such as the brand name and the color of products, so that the title provides useful information to shoppers and clearly distinguishes between different products on your site. The page titles are used as a basis for the title links shown in search. You may also consider adding structured data to your web pages to ensure Google correctly understands the purpose of each page.

For example, there is structured data for describing products on product pages that can help Google understand your product attributes with greater accuracy. Again. Check out Google Search Central for advice on adding structured data to your web pages.

Finally, review the remaining eCommerce guidelines on Google Search Central for additional techniques. There are many considerations, such as whether to keep out of stock products listed on your site and, if so, how to inform Google that they’re currently not available for purchase.

Product pages are an obvious choice to optimise. You want shoppers who are ready to purchase to find the product on your site. But what else?

TIP #2: Check Your Breadth of Content

(04:28) Alan Kent: Tip number two is to have content relevant to users at different stages of their shopping journey.

For example, your homepage may be a great landing page for a shopper who wants to buy a photography gift but does not know what to buy. Yet your homepage often describes many products you have in stock.

Along with special offers, category pages allow you to get more targeted describing areas you have a range of products in for example, bags to hold photography equipment rather than products. Shoppers early in their shopping journey may be looking for advice on how to pick the right product. Product reviews may be more important to such shoppers.

Providing useful resources for shoppers may also help increase the recognition and reputation of your website. To check the breadth and quality of your site, think about likely searches by shoppers at different stages in their shopping journey.

Once you have set the queries, try them out. Does your site come up well positioned? What about your competitors? Also check the search console performance report for queries where your site is being shown. This may help you understand where you are doing well and where you are not. Once you’ve determined a set of queries that you want to rank well for, analyse sites that rank higher than your own. To see what inspiration, you can draw from them.

What gaps exist in your own site? How can you fill out your own unique story so you stand out from the crowd? If you find product pages are struggling against competitors selling the same products, consider writing your own product descriptions in a way that is unique to your site.

This can help you capture different search traffic than your competitors.

In summary, develop your own content strategy. Try it out, measure its effectiveness, then continue to refine and adjust to help create your own distinctive voice for your site.

TIP #3: Ensure you Mark Up Product Variants Correctly

(06:25) Alan Kent: The third tip is to make sure you mark up your product variant pages correctly. Product variants are when you have multiple colors or sizes of the same product. Informing Google of the relationship between product pages can help Google better understand your site content.

To look for issues, Google Search Console can be used to explore the relationship between pages and their levels of traffic. The URL Inspection tool can also be used to check the status of individual pages.

On your site, it is recommended to give each product variant a unique URL. For example, add query parameters to hold the product color or size. Then select one of the variants to be the canonical variant. All variants should include the URL of the canonical page to help Google understand the relationship between the pages.

Finally, check that the canonical page includes text describing all of the variants available, such as all colors and sizes. This could be using text in the product description, such as this product is available in green and blue. But it can also be as simple as having a color swatch on a page to let the user change the color. With alt text describing each color choice in text. This is so the canonical product variant page will match searches for all of the variant colors and sizes a user may try.

TIP #4: Preserve Deal Page URLs

(8:04) Alan Kent: There are also a number of sales events that occur on a recurring basis, such as Mother’s Day. Tip number four is to make sure you reuse the same URL across all event occurrences rather than introducing a new URL for each event.

This can help Google correctly understand and trust the purpose of such pages. To identify problems, check the URL for promotional event pages on your site. Sorry, there are no automated tools for this.

For example, avoid URLs that include the current year in the path. Once you’ve picked a URL for a promotional event, remember to reuse the same URL each time. After the event, consider leaving the page up with a summary of previous offers or describing products that are likely to be on sale next time.

For example, for Mother’s Day, you may include a number of traditional Mother’s Day gifts that you sell. Update the page before each event with the current offers, but keep the page alive and in Google indexes all year round rather than waiting for Google to find and index a new page each time.

TIP #5: Performance Matters

(09:14) Alan Kent: Tip number five is performance of web pages matters. Performance is obviously important to users, as a page that takes too long to load may be abandoned by the user. Performance is so important that user experience has also been made a Google ranking signal, influencing the ranking of pages in search results.

This can be particularly important if you use the same supplier provided product description as other sellers online. If two product pages have the same textual content, page Speed may be the factor that decides which page comes first in search results.

The Page Speed Insights Report is a useful report for checking the performance of the web page. You can provide the URL of one of your pages, and it performs a number of lab tests on the page, as well as displaying field data from the Chrome User Experience Report for your page, if available.

You can also use tools like Google Analytics to measure the performance of your pages. The PageSpeed Insight Report includes a list of potential problems it identifies on your site. It also includes a list of recommendations on how to address the problems.

You can also check out the other episodes in this series for advice on specific topics such as image and JavaScript optimisation. Okay, so you’ve been following Google’s SEO advice for a few weeks now, but you’ve not seen much benefit. What’s next?

TIP #6: Be Patient

(10:49) Alan Kent: Tip number six is wait for it to be patient. SEO, unfortunately, is a long game. Some ranking signals may take many months to change. Worse, there is no guarantee of success. The HTTP archive reports that approximately 20% of the websites it archives support eCommerce. That means there is a lot of online competition out there.

Google Search Console, as previously described, is the best tool to check that your content on your site is being next correctly without errors. It can also be used to explore traffic to your site. If traffic is trending upwards, that may be a positive sign you’re on the right track. It can take months to reap the benefits of a content creation strategy, but that does not mean there is nothing you can do until then.

Think about how to diversify your site traffic sources. Do you have a marketing campaign? Are you active on social media? Do you have an email newsletter? Have you approached independent reviewers to review products on your site?

If you also have a physical store, do you have signs or pamphlets that link to your online presence with URL or QR codes, as well as the additional direct traffic, authentic external links to your site can improve your ranking.

TIP #7: Consider Expert Help

(12:19) Alan Kent: If you have done your best to improve your site but are still not getting the results you want, tip number seven is to seek professional help for your website.

There are many agencies available to provide expert SEO advice. Beware, however, of schemes that claim to improve your ranking by paying them to create more links to your site.

Artificially linking to pages on your site goes against Google quality guidelines and may have negative repercussions on your page rankings.

TIP #8: It’s All About Users

(12:54) Alan Kent: Still here? Great. Let me finish with my ultimate tip for SEO. Remember, it’s all about the user. The ultimate goal for Google Search is to put the best possible content in front of users performing a search.

Algorithms change over time, but the ultimate goal does not. This does not mean you should not measure your site’s performance. It is still recommended to make use of tools such as Google Search Console and Google Analytics to collect data on your site.

But think about changes to help your customers rather than focusing on Google Search results specifically. For example, check the bounce rate of pages on your site. If users land on a page but do not stay on your site, it may be worth reviewing a content strategy. Maybe you’re attracting the wrong sorts of users with your current content.

The best strategy is to create content and experiences that best serve your customers. Rather than think about Google specific ranking algorithms that seem to work at the moment, build your content strategy around serving your customers and let Google worry about the search algorithms to find the best content. This may involve checking what typical customers are searching for or staying on top of current search trends. Google makes search trend data available for public access at trends.Google.com as well as textual content.

Also, make sure you include high quality images and videos on your site. Visual media is increasingly important on eCommerce sites and the web in general.

I hope you found this episode on SEO Tips for eCommerce Websites useful to get you started on your SEO journey to be informed of new content as it becomes available, make sure to like and subscribe until the next episode. Take care!

Sign up for eCommerce Essentials today!

Introduction

ALAN KENT: (0:00) How mobile-friendly is your e-commerce website? And does it really matter? Hi, I’m Alan Kent, a developer advocate at Google. In this episode, I will talk about the importance of making sure your e-commerce website is mobile-friendly. The most obvious reason to worry about mobile friendliness is that more than half of Google’s search traffic comes from users on mobile devices. That is traffic we are potentially going to send to your site. Designing great experiences on mobile devices can be challenging due to the limited physical screen real estate compared to desktops and laptops. But guess what? Simpler mobile website designs often also perform well on larger screens. Simpler pages can help shoppers focus on their shopping journey with fewer distractions. Mobile friendliness is clearly important to users. And Google wants to direct users to sites that best meet their needs. For this reason, Google has published numerous articles on how best to create mobile-friendly websites. Check out Google Search Central and web.dev in particular, for great in-depth articles. So let’s dig in, starting with some technical tips and then moving on to user experience tips.

Tip #1. Keep mobile and desktop sites in sync

(1:29) Some sites prefer to have a separate domain name for mobile traffic so they can present a simplified user experience to mobile users. If a user lands on the wrong domain name, they are redirected over to the other site. The first tip in such cases is to keep the two sites in sync. There’s nothing inherently wrong with maintaining two websites. But it can result in content, functionality, or performance lagging on one of the two sites. Content and functionality differences can be particularly jarring to shoppers when they visit from different devices. If you choose to maintain two sites, you may find automated tools such as Puppeteer useful to check that the two sites behave similarly. Puppeteer provides an API to control a headless instance of Chrome, which makes it great for automating tests as part of your build process. With discipline, you can keep two sites in sync. Just make sure you always allocate a sufficient budget to cover the work on both sites. A better solution, however, may be to consolidate the two sites using responsive web design. Responsive web design uses techniques such as CSS media queries to change page layout based on the width of the display area. This can make it easier to deliver consistent experiences across all devices and potentially lower total development costs.

Tip #2 Design for mobile indexing

(3:01) The second tip is to make sure you design your mobile site for indexing by Google. Because most users issuing searches are on mobile devices, Google crawls sites looking for content to index using a mobile device user agent in the HTTP headers. If you are new to search engine crawling and indexing of websites, check out our how search works page on Google Search Central. Examples of problems that can occur when indexing mobile pages include mobile sites may omit information important for indexing from pages in order to reduce the page size. While this may reduce the number of bytes to download, improving load performance marginally, it may result in your pages not appearing in search results as often, not a good side effect. User experiences such as infinite scroll and load more buttons are often popular on mobile devices. They can, however, cause crawling problems as the full-page content is not loaded by default. This can lead to Google not finding all of your content to index. To detect problems with Google indexing your mobile site, check out Google Search Console. Google Search Console provides rich insights into what Google has indexed on your site, including reports of problems found. For more information, check out Daniel’s wonderful series of videos on getting the most out of Google Search Console. To help Google find all of your pages, consider using a sitemap file or providing Google Merchant Center with a feed of all your product pages. These provide alternative paths for Google to discover pages on your website rather than relying on crawling alone.

Tip #3 Optimise your site speed

(4:51) Tip number three is to optimise your site for site speed. Site speed is generally a greater concern for mobile devices, as they are often lower powered with lower network performance. In previous episodes, I covered improving image and JavaScript performance on your site. But there are other problems that can occur, such as when using web fonts. If a web font takes a while to download, content may be displayed first with a default font, which is then replaced with the web font when available. This can cause content layout shifts as the page reflows due to the font change. Potentially worse, rendering may be blocked completely until the font is loaded.  Page speed insights are a useful tool for analysing web pages. It provides a number of performance-related reports. Page speed insights is particularly useful as it includes both lab data from artificial tests it performs on your site and field data based on real user experiences on your site. Most issues identified by the page speed insights report include advice on how to resolve the issues. For web fonts, review your site to see if you can reduce the number of fonts you use. Also, try to reference the most important fonts early on a page so they are loaded promptly. Check out Katie’s web.dev  article on web fonts for more detailed advice. The final advice regarding site speed is if you cannot make it fast make it meaningful. For example, if submitting an order takes some time to complete, and there’s nothing you can do about it, show the customer special offers or upcoming events while they wait.

Tip #4 Ensure content is readable

(6:49) Tip number four is less of a technical issue and more of a usability consideration. It is to make sure pages from your site are readable on smaller mobile device screens. This includes making sure content does not spill off the sides of the screen, making sure text is large enough to read comfortably, making sure users can zoom in on content if they want a closer look, and making sure button icons are large enough to be easily recognisable. To test for these issues, you can obviously try your website on your own phone, as well as ask some friends with different brands of phone to try it too. But during development, you can also use tools like Chrome Developer Tools to pick a mobile device to emulate with your desktop browser. This can make it easier to test how your site will appear on a range of devices. If you like automating tests, again, Puppeteer may be useful. Fixing your site once you’ve identified any problems is typically a matter of reworking your website’s HTML and CSS markup.

Tip #5 Ensure site usability

(8:03) In addition to readability, make sure your site does not suffer from common mobile usability issues. Examples include navigation structures, such as menus, being too hard to use on a small device, buttons being too small to tap easily, buttons being placed in a way not friendly to single-handed use, and relying too heavily on keyboard input to navigate your site. Many usability issues are best found by conducting a usability analysis of your site. It can be eye-opening to watch a new user try to find a product and complete a purchase on your site. What is obvious to you is not always obvious to a first-time visitor. And don’t forget to check the experience of refining on-site search results. Entering text is generally harder on a mobile device. So make sure you don’t require a re-entry of text to refine a search. In addition to manual inspections, tools can be used to find some issues. Tools have the benefits that you can integrate them into your website’s build and release process. For example, check out the mobile-friendly test tool. Simply enter the URL of a page on your site. And it will analyse for common issues such as the site using an obsolete plugin, such as Flash, the viewport property is not defined in a meta tag, and the font size being too small to read comfortably. Google Search Console also has a mobile usability report for pages Google has indexed on your site. Look for mobile usability in the sidebar menu. Usability issues are, again, generally solved by reworking the HTML and CSS on your website and then testing to ensure the problem has been fixed.

Tip #6 Simplify user experiences

(9:51) Tip number six is to understand and simplify user experiences on your site. Examples of common areas for improvement include forms for collecting payment and shipping details in the checkout flow. And carousels are a popular way to pack more information into limited-screen real estate. The use of techniques such as progressive web apps, or PWA for short, can also deliver users richer app-like experiences on your website. Detecting problems in your user flows generally requires manual usability analysis. Tools can help spot well-known issues. But they cannot be relied on to find all usability issues. When using forms, ensure your site correctly supports autofill for payment and shipping details. To learn more, check out great content on forms from Sam Dutton on web.dev. If a site maintains a customer database with passwords, make sure form fields are marked correctly so browsers can offer to remember passwords for users. Passwords, compared to standard autocomplete and autofill fields, must be treated with special care to ensure their security. Better yet, consider using a third-party identity provider such as Google so shoppers are not required to remember yet another password. Each site that manages its own database of passwords increases the risk of password theft, which can in turn, make other sites vulnerable as many users reuse passwords across sites. If you use carousels on your site, check out Katie’s great advice on web.dev. Practices such as auto-advancing carousels can look flashy but often result in a poorer user experience. Progressive web apps and potentially related single-page apps, or SPAs, are a large field and beyond the scope of this video. Check out web.dev for great articles on PWAs.

Tip #7 Personalisation Matters on Mobile

(12:01) Tip number seven is personalisation matters on mobile devices. Users on mobile devices generally have a greater expectation of personalisation. This is influenced by multiple factors, including mobile devices are typically not shared and so are inherently personal. And smaller screens mean it’s more important to make what is displayed relevant to the user. An effective way to determine if your site could benefit from personalisation is to perform a site audit. For example, shopper interviews are a great way to gain deeper insights into the expectations of your users. Personalisation comes in many forms. It can be as simple as displaying products on the home page that the user viewed on their last visit or showing hand-curated offers based on the user’s profile. Personalisation can also be advanced using AI-driven recommendation engines based on user actions on the site. There are many great personalisation and recommendation products on the market today, including from Google. Personalisation often benefits from remembering users. The use of cookies is a common way to remember a user’s tastes from a previous visit without knowing their full identity. Alternatively, a site may offer a more personalised visit if the user creates an account and logs on, accepting any terms and conditions to collect and hold details about the shopper.

Tip #8 Leverage mobile-specific capabilities

(13:37) The last tip is to review if your site can leverage more advanced input methods provided by mobile devices such as touchscreens, cameras, geopositioning location services, and voice input. They can offer new and engaging ways for customers to interact with your website. Examples of advanced interactions include using pinch and swipe gestures to zoom and browse through product images on your product page, using location services to show the user products in the nearest physical store first, supporting voice input to reduce the need to type on a mobile keyboard, providing the user with an augmented reality experience so they can better visualise what a piece of furniture looks like in their own home before purchase, and performing image searches for products based on sample material patterns captured with a camera using services such as Google’s Vision API. Many but not all native app features are now supported by mobile web browsers. Check out Google’s Project Fugu for a list of such advanced capabilities to see what is possible. You can also use sites like caniuse.com to see how widely a specific feature is supported across browsers before using the feature on your own site. Note that if a feature is not in all browsers, JavaScript can typically detect if the feature is available or not and react appropriately. That means it is not necessary for all browsers to support a feature for you to take advantage of it on your own site. 

Wrap up

(15:15) Thanks for watching this episode on making your website mobile-friendly. To be notified of new content as it becomes available, please subscribe. Until next time.

Sign up for eCommerce Essentials today!

Introduction

ALAN KENT: (00:00) JavaScript is commonly used to build modern websites to create richer, more engaging experiences for users. Javascript is also a common source of performance problems on websites. My name is Alan Kent, and I’m a developer advocate at Google, specialising in e-commerce. In this episode, I run through six tips related to Javascript libraries and frameworks that can help improve your e-commerce sign. First, what is Javascript? Javascript is a programming language that has become popular, as it is supported by web browsers. Javascript allows web developers to write code that reacts to user interactions, manipulating the HTML markup on a page to change what the user sees. What Javascript has made possible are richer and more sophisticated user interactions than are supported by native HTML markup alone. For example, a mini cart on an e-commerce site is typically implemented using Javascript. The cart icon often shows the dynamically updated number of items in the cart and, when clicked on, displays the current cart contents, allowing users to view and adjust the cart contents. Advanced site navigation menus are also frequently implemented using Javascript. Javascript can also be used to collect site analytics to give you greater insights into how your site is performing. These days there are many Javascript frameworks and libraries, and components available that you can use on your own site. One reason for the development of Javascript libraries is that not all browsers are compatible with Javascript and CSS support. Sophisticated components can require substantial development to be reliable across a range of browsers, so it is natural to want to reuse them across multiple projects. While improving user experience and saving development time, watch out for the following problems.

Tip #1: Avoid JavaScript file proliferation

ALAN KENT: (01:58) Tip number one is to avoid proliferation in the number of Javascript files on your site. The number of Javascript files may rise if care is not taken, especially if each UI component is kept in a separate file. There are overheads per downloaded file, especially for websites that only support HTTP1. There are a number of free tools available to work at if your site has too many Javascript files. One tool that combines both data from real users and lab testing is PageSpeed Insights. To use PageSpeed Insights, simply enter the URL of a page on your public site. The opportunity section of the PageSpeed Insights report lists recommendations specific to your site. For example, the recommendation to keep request counts low and transfer sizes small, when expanded, summarises the number and sizes of resource types requested, including Javascript files. There are a number of techniques that can be used to reduce the number of files to download but solving the problem also depends on the flexibility of the platform or tools you are using. For example, many content management systems restrict access to Javascript to simplify the job for content creators and reduce the risk of mistakes. This, however, can also make it harder to address issues that the platform does not solve. If you have a large number of small Javascript files, it may be more efficient to join those files together to have a single larger file to download. In practice, it is common to bundle files into a few larger files that can be downloaded in parallel for greater efficiency. If you have control over the Javascript files on your site, you may find Javascript bundling tools, such as Webpack, useful to simplify this process. Note that supporting HTTP2 on your site can improve performance without joining files, as HTTP2 improves the efficiency of downloading multiple small files.

Tip #2: Avoid excessive DNS lookups

ALAN KENT: (3:55) The second tip is to avoid an excessive number of DNS lookups for the reference Javascript files. If Javascript files are loaded from different domain names, there may be a DNS look-up overhead per domain name referenced. If excessive, this can slow down the first visit of a user to your site. Reports such as PageSpeed Insights may show you a list of domain names used in URLs in sections such as reducing Javascript execution time. But you may find using the network tab inside Chrome Developer Tools a more reliable way to see all the domain names referenced. Note that, unlike cookies, you cannot easily request the DNS cache to be cleared, making DNS issues harder to detect. To reduce the number of DNS lookups, consider whether to host a copy of externally referenced Javascript files on your own site. This is not always a clear-cut decision whether to self-host Javascript files, as if you download a popular Javascript library from a central site, it may already be in the browser cache due to the user visiting some other site that also uses the same library. Putting a copy on your own site may save you the DNS lookup but at a higher cost of downloading the file a second time.

Tip #3: Eliminate inefficient JavaScript

ALAN KENT: (5:11) The third tip is to eliminate inefficient Javascript from your site. Poor quality Javascript can slow down web pages, leading to bad user experiences. There are multiple opportunities reported by PageSpeed Insights that can be hints of inefficient Javascript on your site. Reduce Javascript execution time reports scripts where a relatively large amount of CPU time was spent parsing or executing Javascript code. Eliminate render-blocking resources, including Javascript, which may be executed before the page can be rendered, making the user wait longer to see any content. The Javascript function document.write(), if misused, can cause significant performance issues on a page, as it blocks other operations from occurring. For example, performance testing has shown that adding a script inclusion via document. Write () can double the length of time it takes to load a webpage, especially on slow networks. Not using passive listeners can also slow down a site. A passive listener is a hint to the browser that Javascript code will not call a function that prevents scrolling, allowing the browser to scroll the page, even while the Javascript is still executing. These were a few common examples, but there are many other causes of performance issues. Making Javascript more efficient is a large topic and is beyond the scope of this video. The solutions generally involve writing the Javascript code differently. There are many good resources available on the web describing various techniques, from profiling existing code to running your own cut-down versions of more powerful components.

Tip #4: Eliminate unused JavaScript

ALAN KENT: (6:48) Unused Javascript is another form of inefficiency, but it is common enough to be called out as its own tip. Reuse of code across sites can lead to sites including Javascript that is not needed. For example, most websites do not use all of the functionality provided by a library or framework, or a component may be used that has more features than are needed. Javascript code that is never called still needs to be downloaded and parsed by the web browser, wasting resources. To see if your site has potentially unused Javascript, the PageSpeed Insights report has a reduce unused Javascript section. This includes Javascript, which was not executed as part of loading a page. The PageSpeed Insights avoid enormous network payloads that can also be the result of downloading large Javascript libraries, which may also identify potential areas for improvement. In addition, minimised main thread work includes time spent parsing, compiling, and executing Javascript. Eliminating unused Javascript can reduce these overheads. There is a range of tools to identify Javascript that is not used. Techniques such as tree shaking can be used to identify Javascript that is never called on a site, and so it can be deleted from downloads. Care must be taken, as the execution of Javascript may be dependent upon environmental factors. For example, with AB testing, a section of Javascript may only be run for some users. The code must stay on the site, even if the profiler reports it is not executed.

Tip #5: Compress JavaScript files

ALAN KENT: (8:18) Tip number five is to make sure your Javascript files are compressed when downloaded, especially for larger files. Javascript file generally compresses well, reducing the number of bytes to be downloaded by the web browser. While the web browser does have to spend more CPU time to decompress the file contents, compression is normally an overall win. Again, the PageSpeed Insights report has a section describing Javascript files that may benefit from being compressed. Expand the enabled text compression opportunity to see which files are recommended to be compressed. Uncompressed Javascript downloads are usually relatively straightforward to fix when identified. Most web browsers or content management systems have built-in support to compress downloads if appropriately configured.

Tip #6: Set appropriate cache durations for JavaScript code

ALAN KENT: (9:06) Another worthwhile tip is to check that your Javascript files are returned with appropriate cache expiry time headers. This helps browsers avoid the overhead of checking if Javascript files in their cache are out of date, improving performance. To check if your site is set up appropriately, the networking tab of Chrome Developer Tools can be used to check the HTTP response headers for Javascript files that are downloaded. Look for headers such as cache control. Also, the serve static assets with an efficient cache policy opportunity in the PageSpeed Insights report lists resources, including Javascript files, that may benefit from appropriately set cache headers. The first step to fixing any issues on your site is to make sure the website is returning appropriate cache lifetime headers to help browsers cache Javascript files correctly. However, care must be taken to make sure that Javascript files can be updated when required to correct site defects or introduce new functionality. One strategy is to include a version number or hash of the file contents as part of the URL on the downloaded file. That way, a new URL is used for each variation of the file. Another approach to enhance the caching of commonly used Javascript files is to reference files from a shared public location. If a user visits sites that reuse the same Javascript file, the browser can use the previously downloaded copy of the file, improving performance.

Conclusion

ALAN KENT: (10:35) To wrap up, Javascript has made it possible to significantly improve the experience of users on your website. Care must, however, be taken to avoid common performance problems that can arise when using Javascript. There are many great resources on the web to help with these different issues. My colleague, Martin Splitt, also has some great content focusing on Javascript and websites. Thanks for watching. If you enjoyed this video, make sure to click subscribe to keep up with the latest videos from Google Search Central.

Sign up for eCommerce Essentials today!

Introduction

ALAN KENT: (00:07) They say a picture is worth a thousand words. And there is no field where that is not more true than eCommerce . My name is Alan Kent, and I’m a developer advocate at Google. In this episode, I’ll explore six tips to optimise images on your eCommerce  website. It is not uncommon for an eCommerce  page to reference hundreds of images. These images are everything from full-sized product images to smaller product thumbnails, category images, banners, page decorations, and button icons. Given their abundance, how can you make sure that they are fast and efficient?

Tip #1: Eliminate image Cumulative Layout Shift

(00:46) The first tip for optimizing the image used on your site is to eliminate cumulative layout shifts. Cumulative Layout Shift, or CLS for short, is where the contents of a page visibly move around on the screen. You know those sites you stop reading, or you try and click on a link, and suddenly the page content moves. It’s really annoying. Images can contribute to this problem if used incorrectly. CLS is so impactful to a user’s experience.

Google has defined CLS as one of three Core Web Vitals. These are factors that Google considers important for user experience on all web pages. So why can images cause CLS? To load a page, your web browser starts to download the HTML markup of the page. Most browsers will start displaying the top of the page before the whole page has been downloaded. To reduce your wait time, any references to images encountered are added to a queue of resources to download. JavaScript and CSS files are also added to the queue. These files are then downloaded in parallel to the main page, a few at a time. The problem is when the browser does not know the image dimensions before rendering the page content. Layout shift occurs if the browser discovers it did not leave the right amount of space for an image. CLS is often easy to spot on a page manually by watching it load. But there are also automated tools that can measure it. But let’s first take a slight detour and talk about lab versus field data.

Lab data is collected by testing tools you point to your web page, such as Google’s Lighthouse. You can perform a lab test at any time and have complete control over the process. Field data is collected by measuring what happens to real users on your site. In production, field data can be collected using JavaScript you embed in your own web pages or via anonymized data collected by Chrome. Chrome makes data for popular sites available in the Chrome User Experience Report, or CrUX, for short. Lab data can be easier for developers to collect and analyze, but it has some limitations. For example, data can miss shifts that occur after a page finishes loading. Ultimately, it is field data that demonstrates whether you’ve really solved a problem for your users. PageSpeed Insights is a useful tool, as it presents both lab and field data in one report. For CLS, look for warnings such as avoiding large layout shifts and images that do not have explicit width and height. Just be aware that layout shifts in the report can be caused by things other than images, such as JavaScript. Fixing image CLS issues can be as simple as including image dimensions in the HTML markup. That way, the browser immediately knows exactly how much space to reserve for the image. There are other CSS tricks that can be used as well if the CSS is loaded properly.

Tip #2: Correctly size your images

(3:56) The second tip is to pick the right width and height for your images. Larger files take longer to download, particularly on mobile phones with slower network connections. Larger files also require more processing time, especially on mobile phones with less powerful CPUs. Sizing images correctly can be complicated by the range of device sizes and resolutions that access your site. If the browser shrinks or crops the image, the download file is larger than needed, which is wasteful. One easy way to detect incorrectly sized images is using the properly sized images section under Opportunities in the PageSpeed Insights report. Page speed insight identifies images on a page that have larger dimensions than needed, listing the URLs. Once you have detected there is a problem, how to fix it. Responsive images refer to techniques to make images behave well on different-sized devices. For example, in HTML, there is a source set attribute that allows you to list URLs for different sizes and formats of images so the browser can pick the best one to download. This requires you to resize the images in advance or perform imagery sizing on demand. If resizing images is too much work for your own site, consider using a Content Delivery Network or CDM. Many such services can resize images and convert them to more efficient formats on your behalf.

Tip #3: Use the best image file format

(05:28) The next tip is to think about the file format of your images, such as whether to use PNG, JPEG, or webP files. The file format affects the file size. Care should be taken, however, as formats such as JPEG and webP can reduce files using lossy compression algorithms. Lossy means image quality may be reduced as a trade-off for reducing the file size. If pixel-perfect images are required, such as button icons, less efficient but pixel-perfect formats should be used. While lower-quality images may sound like a bad idea, remember that the degradation in quality may not be noticeable to shoppers. And the speed benefit can be substantial. Shoppers may abandon your page if it takes too long to load. To detect if your site can benefit from using a different image format, look at the serve images in the Next Gen Format section of the PageSpeed Insights report. This report lists images on a page that are candidates to be converted to a more efficient file format. So is there a single best image format to use? One complication is not all image formats will work on all browsers. The caniuse.com site can be used to check which browsers support image file formats. For example, webP is now supported by almost all browsers in use. So it offers a good combination of efficiency and adoption. Alternatively, rather than picking a single format, you can have your website return the most efficient format that the browser says it supports. Again, this is a service offered by CDMs.

Tip #4: Compress images appropriately

(07:17) Tip number four is to use the right quality factor for your images to encode them efficiently while retaining the desired image quality. The Encode Images Efficiently section of the PageSpeed Insights report can be used to identify candidate images for compression optimisation. The report also shows potential file size savings. Be aware, however, that the report does not perform a visual check on your compressed images. The report is based on commonly used compression factors. To find a quality factor you are happy with, use your favourite image conversion tool on several images using different quality values. A common default value for webP is 75. The Squoosh.app site can be useful for this purpose, as it makes it easy to compare the before and after versions of images. Remember also that there are times when you want higher resolution images, such as when you want to allow the shopper to Zoom in on a product image. Want to go deeper? Jake and Surma had a great session on image compression they gave at Web.dev Live.

Tip #5: Cache images in the browser

(08:22) Tip number five tells the browser how long it can safely cache images. When you return an image from your site, you can include an HTTP response header with caching guidance, such as how long it is recommended for a browser to cache an image. One approach to detect if the HTTP response cache headers have been set appropriately on your site is, again, to use the PageSpeed Insights report. The Serve Static Assets With an Efficient Cache Policy section of the PageSpeed Insights report identifies images that may benefit from caching improvements. Another approach is to use a networking tab in developer tools inside Chrome to examine the HTP cache response headers. To fix issues on your site, check to see if you have platform or web server settings you can change to adjust the cache lifetime for images on your site. If you do not change images frequently, or if you always give images a new URL, then you can set a very long cache lifetime. In addition to a cache duration, using a CDN frequently makes downloads faster by caching copies of your images in multiple locations around the world, closer to where users connect from.

Tip #6: Correctly sequence your image downloads

(09:37) The final tip is a more advanced tip. Correctly sequencing the order in which resources, including images, are downloaded can significantly improve page performance. Because downloading the images one by one can be slow, browsers using HTTP1 typically download several images in parallel over independent network connections to the website. If the website supports HTTP2, most browsers now multiplex downloads over a single network connection. This is generally faster and avoids problems such as large files blocking the downloads of smaller files. Whichever approach is used, there is still a network bandwidth bottleneck. In general, you want images to be downloaded in the following order. First, you want to download large hero images at the top of the page, as they can affect the largest Contentful Paint score for the page. The largest Contentful Paint, or LCP for short, is the time it takes to show the user the main content of the screen. Largest Contentful Paint, like cumulative layout shift, is a core web vital metric. Next, you want other images that will be visible without scrolling to be downloaded. Images visible without the user scrolling are referred to as above the fold. The rest are referred to below the fold. As a web page may be viewed on devices with different screen sizes, it is common to estimate which images are above and below the fold by checking your site on multiple devices. Finally, you want images to be downloaded that are just off the screen so that they can be ready for display when a user starts scrolling. Other images that are not likely to be displayed soon are often best to load lazily. If the user does not scroll the page, fetching them would be a waste of resources. To detect if your site is loading images efficiently, again, the PageSpeed Insights report can help. For example, the Defer Offscreen Images section of the report identifies images that could be loaded after other images. There are other sections that can be useful, such as Avoid Chaining Critical Resources. Although these chains typically involve JavaScript and CSS files. A common technique to improve the order of image loading is lazy loading. This is where images are not downloaded until the user scrolls to that portion of the page.

Lazy loading was originally implemented using JavaScript. But now, most browsers support the loading equals lazy attribute of HTML. Care should be taken, as performance degradation can occur if lazy loading is used for images above the fold. Recent versions of Lighthouse will highlight if an image is lazily loaded, which will impact LCP. With the advent of HTTP2, there are additional optimizations that are possible if the browser and website both support HTTP2. An HTTP2 website can start pushing images to the browser that knows they are going to be needed without waiting for the browser to request them. The HTTP/2 also allows browsers to download multiple images in parallel over a single network connection. To take advantage of HTTP2, either your web server must be configured, so it knows which resources to push or use a CDN with HTTP2 support and configure it to push resources, as required.

Conclusion

(12:59) To wrap up, I’ve shown common problems that can occur on eCommerce  sites with static images. Some have easy fixes, such as ensuring that image tags in HTML always specify the image width and height attributes or using the loading equals lazy image attribute. 

There are more advanced techniques that you can implement directly on your website, but it may be easiest to use a third-party CDN with suitable support. Such services can: 

• Serve images in the best format supported by the browser; 
• Convert images from a single source image to more efficient formats as needed; 
• Pre-scale images to multiple sizes for efficient download;
• Display across a range of devices, and compress images to reduce download sizes. 

Thanks for watching. If you enjoyed this video, make sure to click Subscribe. Google Search Central has new videos posted weekly.

Sign up for eCommerce Essentials today!

Introduction

ALAN KENT: (00:07) Google Merchant Center is a great way to share data about your eCommerce business with Google. Hi. My name is Alan Kent, and I’m a developer advocate at Google. In this episode, I’m going to share six tips on how to get the most out of Merchant Center for your presence in search results. The most common use for Merchant Center is to upload product data via structured feeds. Because feeds are designed to be read by computers, data is extracted more reliably than Googlebot crawling your site and extracting data from web page markup. If you’re familiar with structured data, you may wonder whether to embed structured data in web pages or provide a feed to the Merchant Center. Google’s recommendation is to do both. Google may cross-check feed data against your website. So product-structured data in web pages is still recommended even if you also provide Merchant Center feeds. If you have physical stores, you can also share inventory location data with Google. This can then be used by Google when answering queries for products near me.

Tip 1. Ensure products are indexed

(01:50) The Googlebot web crawler attempts to locate all products on your site by following links between pages. Googlebot, however, may miss pages in some circumstances. For example, you may have some products only reachable from on-site search results. Google typically does not enter search terms into the on-site search box to discover new pages. If you have a product page and are unsure if it is indexed, you can use the URL Inspection tool. This will report what Google Search knows about your page. You can also use the site colon URL as a search term to search for that specific URL. In a previous episode, I described creating a Sitemap file to list the important pages to index on your site. The Sitemap file is used by the Googlebot crawler to find pages on your site without relying solely on links between pages. But there is another way. Creating a Merchant Center product feed will help Google discover all the product pages on your website. These product page URLs are shared with the Googlebot crawler to potentially use as starting points for crawls of additional pages. It is, however, important to note that this and some other Merchant Center features are not available in all countries. Please refer to the Merchant Center Help Center for up-to-date lists of countries’ features available.

Tip 2. Check your prices are correct in the Search results

(03:26) The second tip is to check the accuracy of product pricing data used by Google. If Google incorrectly extracts pricing data from your product pages, it may show your original price instead of your discounted price in search results. To check if Google is extracting price data accurately, quickly test a sample of results. You can search for a product page and check the price displayed if rich results are displayed. Search using the site colon URL for your product page to return the web page as a search result. To accurately provide product information, such as list price, discounts, and net price, it is recommended to add structured data to your web pages and provide Merchant Center with structured feeds of your product data. This will help Google correctly interpret pricing shown on product pages.

Tip 3. Minimise price and availability lag

(04:24) Tip number 3 is to minimise inconsistencies in pricing and availability data between your website and Google’s understanding of your site due to timing lags. For example, Google crawls web pages on your site according to its schedule. Changes on your site may not be noticed until the next Googlebot crawl. On the other hand, Merchant Center can be updated on a more consistent schedule, such as once a day or even once an hour. These delays can result in Merchant Center and search indexes lagging behind site changes, such as when a product goes out of stock. I described how to check Google’s understanding of your pricing data in the previous tip using a site colon URL query. In addition, Merchant Center may identify products that have different pricing data according to your website due to delays in processing. This can negatively impact your products’ search results until the discrepancy is resolved. Merchant Center also allows you to download all pricing data in bulk if you want to do a more exhaustive reconciliation of pricing data in Merchant Center against your website. To reduce lag, you can request Merchant Center to process your feeds more frequently. This can reduce the time lag between the product data changing on your website, and Google is aware of it. Another approach is to enable automated item updates in Merchant Center. This causes Merchant Center to automatically update collected pricing and stock-level data based on web page contents when discrepancies are detected. This is based on the assumption that your website updates in real-time when pricing or availability changes.

Tip 4. Ensure your products are eligible for rich product results

(06:18) Tip number 4 is to check that your products are getting rich results treatment in search results. Rich results are displayed at Google’s discretion but rely on Google having rich product data. To check if your product pages are receiving rich results presentation treatment, you can use a site colon URL query to search for a specific web page. If not found, the page may not be indexed. You can also use the Google Search URL Inspection tool to verify if Google is indexing your product page. To get the special rich products presentation format, it is recommended to provide structured data in your product pages and a product feed to Merchant Center. This will help ensure that Google correctly understands how to extract product data from your product pages needed for rich text product results. Also, check for error messages in Google Search Console and Merchant Center.

Tip 5. Share your product inventory data

(07:18) Tip number 5 is to ensure, if you have physical stores, that your products are being found when users add phrases such as “near me” to the queries. To test if locality data is being processed correctly, you may need to be physically near one of your physical stores and then search for your product with “near me”, or similar added. Register your physical store locations in your Google Business Profile, and then provide a local inventory feed to Merchant Center. The local inventory feed includes product identifiers and store codes, so Google knows where your inventory is physically located. You might also like to check out Pointy from Google. Pointy is a device that connects to your in-store point of sale system and automatically informs Google of inventory data from your physical store.

Tip 6. Sign up for tab Shopping tab

(08:15) The final tip is related to the shopping tab. You may find your products are available in search results but do not appear. To see if your products are present, the easiest way is to go to the Shopping tab and search for them. To be eligible for the shopping tab, provide product data feeds via Merchant Center and opt-in to Surfaces Across Google. Structured data and product pages alone are not sufficient to be included in the Shopping Tab search results.

Conclusion

(08:45) This is the final episode in the current series on improving the presence of your commerce website in search results. If you have topics, you would like to see included in a future series. Please leave a comment. If you have found the series useful and want to see more similar content, make sure to Like and Subscribe. Google Search Central publishes new content every week. Until next time, take care.

Sign up for eCommerce Essentials today!