Beluas, Author at Beluacode

Core Web Vitals: The Key to SEO Success

by Beluas | Jun 18, 2023 | Performance Optimisitation

Core Web Vitals: The Key to SEO Success for Digital Analysts and Marketers

In the dynamic landscape of digital marketing, understanding the components that drive your website’s performance is crucial. One such element is Google’s Core Web Vitals, introduced on May 28, 2020. These metrics have become an essential part of Google’s ranking signals. This article will guide you through the basics of Core Web Vitals, their importance for SEO, and how to measure them and implement in Google Analytics 4 (GA4) using Google Tag Manager (GTM).

Why are Core Web Vitals Important for SEO?

Google’s primary goal is to provide users with the most relevant and high-quality search results. Core Web Vitals are a set of metrics that measure the user experience on a website. They include Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Google uses these metrics to assess the quality of a webpage. A website that scores well on Core Web Vitals is likely to provide a better user experience, leading to lower bounce rates, higher engagement, and ultimately, better search rankings.

Understanding the Metrics

Largest Contentful Paint (LCP)

LCP measures the loading performance of a webpage. It calculates the time it takes for the largest piece of content (like an image or text block) to become visible on the screen. A good LCP score is considered to be under 2.5 seconds.

First Input Delay (FID) and Its Replacement

FID quantifies the interactivity of a webpage. It measures the time between a user’s first interaction (like clicking a link or tapping a button) and the browser’s response to that interaction. An ideal FID score is less than 100 milliseconds. However, Google is replacing FID with a new metric called Input Latency (INP), which is still in the experimental phase.

Cumulative Layout Shift (CLS)

CLS gauges the visual stability of a webpage. It quantifies the amount of unexpected layout shift of visual page content. A low CLS score (less than 0.1) indicates a stable page that doesn’t shift around as it loads.

Introducing Interaction First Paint: A New Core Web Vitals Metric

As the digital landscape evolves, so do the metrics that gauge user experience. Google is known for continually updating its Core Web Vitals to reflect the changing expectations of users. One of the emerging metrics that is gaining attention is Interaction First Paint (IFP).

What is Interaction First Paint (IFP)?

Interaction First Paint, or IFP, is a metric that measures the time it takes for the first paint after a user interacts with your webpage. In simpler terms, it’s the time between when a user, for example, clicks on a button, and when the browser starts to render the response to that interaction. This metric is crucial because it gives an indication of how responsive a webpage is to user interactions.

Why is IFP Important?

IFP is an essential metric because it directly impacts the user experience. When users interact with a webpage, they expect a swift response. If the page takes too long to react, users may become frustrated and leave the site. This can lead to higher bounce rates and lower conversions. By optimizing for IFP, you can ensure that your webpage responds quickly to user interactions, leading to a better user experience and potentially higher rankings in search results.

How to Optimize for Interaction First Paint

Optimizing for IFP involves improving the responsiveness of your webpage. Here are a few steps you can take:

– Minimize Main Thread Work: The main thread is responsible for rendering content and handling user interactions. By minimizing the work it has to do, you can ensure that it responds to user interactions more quickly.

– Optimize JavaScript: JavaScript can often block the main thread. By optimizing your JavaScript code, you can reduce the amount of time the main thread spends executing JavaScript, which can improve IFP.

– Use Browser Caching: By caching resources, you can reduce the amount of time it takes to fetch resources, which can improve the responsiveness of your webpage.

– Optimize Web Fonts: Web fonts can block rendering. By optimizing your web fonts, you can ensure that text is visible sooner, which can improve IFP.

Tools to Measure Core Web Vitals

Having understood the importance of Core Web Vitals, it’s essential to know how to measure them. Google provides several tools that can help you in this regard:

Google Search Console

Google Search Console has a dedicated Core Web Vitals report that helps you to monitor your website’s performance over time. It highlights the pages that need improvement and provides recommendations.

PageSpeed Insights

PageSpeed Insights is a tool that analyzes the content of a web page and generates suggestions to make that page faster. It includes Core Web Vitals scores and suggestions for improvement.

Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO, and more, including Core Web Vitals.

Chrome User Experience Report

The Chrome User Experience Report provides user experience metrics for how real-world Chrome users experience popular destinations on the web.

Best Practices for Optimizing Core Web Vitals

Optimizing Core Web Vitals involves improving your website’s loading performance, interactivity, and visual stability. Here are some best practices:

Optimize Images

Large images can slow down your site. Optimize images by compressing them, using modern formats like WebP, and using responsive images to serve the right size based on the user’s device.

Use Browser Caching

Leverage browser caching to store copies of resources temporarily. It helps in reducing the number of requests to your server and speeds up loading times for repeat visitors.

Optimize CSS and JavaScript

Minimize the size of CSS and JavaScript files by removing unnecessary characters and spaces. Also, defer the loading of non-essential scripts until after the first render.

Use a Content Delivery Network (CDN)

A CDN can distribute the load, saving bandwidth and speeding up access for your users. It ensures that your web content is delivered from the server closest to the user’s location.

The Future of Core Web Vitals

Core Web Vitals are expected to evolve over time as user expectations change and the web community’s understanding of user experience grows. Google has indicated that they plan to incorporate more page experience signals yearly. Staying informed about these updates is crucial for maintaining and improving your website’s performance and SEO.

Core Web Vitals are not just another set of metrics; they are Google’s way of ensuring that websites offer a great user experience. By understanding and optimizing these vitals, digital analysts and marketers can significantly improve their website’s performance, user experience, and, ultimately, their SEO rankings. Additionally, implementing these metrics in GA4 using GTM can provide valuable insights that can be used for data-driven decision-making.

Implementing Core Web Vitals in GA4 using GTM

Implementing Core Web Vitals in GA4 using GTM is a methodical step that can provide valuable insights into your website’s performance. First, load the Web Vitals script on your website. This script will push the Core Web Vitals metrics to the dataLayer of your website. Next, create a custom event trigger in GTM for each metric. Finally, create a GA4 event tag in GTM to send the Core Web Vitals data to your GA4 property.

Having Core Web Vitals data in your GA4 reports is incredibly beneficial. It helps you identify issues affecting your website’s user experience and SEO. Moreover, you can use this data in Google Data Studio to create custom reports and dashboards, helping you make data-driven decisions.

Free 15-Minute Consultation Call

At Beluacode, we offer a free 15-minute consultation call to help you navigate the digital marketing landscape. During this call, we can check your digital marketing stack, provide advice on how to improve it, and discuss the topics mentioned in this article. Contact us today to schedule your free consultation call.

Tracking Performance Improvement: A guide to Debouncing Functions

by Beluas | Jun 17, 2023 | Performance Optimisitation

Debouncing functions have become a popular technique for developers to use when tracking events in modern web development. The concept behind debouncing functions is simple, yet effective in preventing unwanted behavior when tracking events, such as button clicks or scrolling. In this article, we will explore what debouncing functions are, how they can help you in tracking, and how to implement them in your own projects.

What is a Debouncing Function?

A debouncing function is a function that limits the rate at which an event can fire. This means that instead of responding to an event immediately, a debouncing function waits until a specific amount of time has passed before it executes the code. This is especially useful when tracking events that fire many times in quick succession, such as scrolling or button clicking.

How Debouncing Functions Help in Tracking

Debouncing functions help in tracking by preventing unwanted behavior and improving performance. Without debouncing functions, tracking events that fire many times in quick succession can result in slow performance, and in some cases, the code may not execute at all. This is because the browser can become overwhelmed by the amount of work it needs to do in a short amount of time.

How to Implement Debouncing Functions

Implementing debouncing functions in your projects is simple and straightforward. To implement a debouncing function, you need to wrap the code that you want to execute in a function, and then add a setTimeout() function that waits for a specified amount of time before executing the code. Here is an example of a debouncing function in JavaScript:

;

In this example, the debouncing function takes two arguments: a function fn that represents the code that you want to execute, and “wait”, which is the amount of time to wait before executing the code. The debouncing function returns a new function that sets a timeout using setTimeout(). This timeout is then cleared using clearTimeout() each time the function is called. To use this debouncing function, simply call it and pass in the code that you want to execute and the amount of time to wait. For example:

;

In this example, the debouncing function is used to log “Debounced function” to the console once per second, even if the function is called multiple times in quick succession. Debouncing functions are a powerful tool for developers to use when tracking events in modern web development. By limiting the rate at which an event can fire, debouncing functions can prevent unwanted behavior and improve performance. If you are thinking about Implementing debouncing functions in your own projects we can help you build more efficient and stable applications through this and other optimisation tricks, get in touch for a 15-min free consultation call

Essential parameters to send along with Server-Side tracking requests

by Beluas | Jun 17, 2023 | Debugging, Digital Analytics, GA4

Finally, you’ve decided to implement Server-Side tracking to collect data about your users and are you wondering what parameters you should send to Google Analytics 4? You should know that in order to process correctly the Server-Side requests to Google Analytics 4 you have to send some mandatory parameters. But first, let’s have a look at the difference between Client-Side vs Server-Side hits sent to Google Analytics 4.

Google Analytics 4 Client-side vs Server-side request. What’s different?

Let’s briefly review why the client-side data sent to Google Analytics 4 is different from the server-side request you do. The main thing to notice is that with the browser we have some values related to your users natively available and automatically collected by your Google Analytics 4 tag. That is unfortunately not always the case if you choose to send traffic to your Analytics property using a custom HTTP request. There are other differences between the two tracking methodologies but in this article, we’ll focus on the Essential parameters to send to Google Analytics 4 in order to not mess up your reports and track in a more reliable way your users

Essential Parameters to use when tracking Pageview events and transactions and why

Just another clarification, these parameters come in handy also in the case of hybrid tracking. Hybrid tracking here means a User Journey tracked both on the Server-side and Client-side. Without further ado lets’ go through this list.

Google cid: needed to identify the user across his/her journey if this is tracked both with the client and server-side methodologies
User Agent: This is an important metric to use in order to avoid that your traffic being identified by Google Analytics 4 as bot traffic and ultimately filtered out
Document parameters: You should send as many parameters related to the document you can to let Google Analytics 4 assign to the right the collected hits. You should not forget to include:

Document path
Document title
Document host name
Document Location URL

If you intend to track server side some kind of event you should not forget about:

Event Category
Event Action
Event Label

If you intend to track Transactions using Server-Side methodologies you should include all these essential E-commerce parameters:

Product ID/SKU
Product price/revenue
Product name
Pruct quantity

I’d like to remark here that every implementation has its own particularities and there is no general solution that works for everyone but having these essential parameters should do the trick in most cases. If you’re using Server-Side tracking to collect data about your users and you want to know more about the best practices to use with your Server-tracking implementation contact us and we’ll be pleased to help you to track in the best reliable way your users’ data

What does Apache-HttpAsyncClient traffic mean in Google Analytics ?

by Beluas | Jun 17, 2023 | Debugging, Digital Analytics, GA4

First thing first let’s see which reports can help you to identify Apache-HttpAsyncClient user agent traffic in Old Google Analytics properties and the newest Google Analytics v4 properties.

Google Analytics v4 property: Reports -> User -> Tech -> Tech Overview -> scroll until Browsers
Old Analytics property: Audience -> Technology -> Browser & OS

What could Apache-HttpAsyncClient traffic mean?

Well, there are a variety of reasons why you can see this traffic in Analytics but what we can say is that it’s not conventional Client-Side traffic but it could be attributed to Server-Side traffic.

Why do we see Apache-HttpAsyncClient traffic?

Most likely if you’re using Server-Side methodology to track the traffic on your website you’re seeing this traffic because there is no correct User-Agent assigned in the hit sent to Google Analytics from the Server-Side provider you’re using (I.E. Tealium EventStream – AudienceStream ).

When you send traffic to Google Analytics using Server-Side methodologies you perform an HTTP request with a custom payload to your Server-Side provider which is used then to redirect the traffic you’re collecting to your Web Analytics tools like Google Analytics.

The difference between a Client-Side Hit and a Server-Side hit, among the others, is the payload sent to, in this case, Google Analytics. With Client-side traffic you automatically send parameters like User-Agent, Google account ID, Browser language, Referrer, etc.. instead with Server-Side traffic you have to manually send them.

If you are struggling with this or other issues with your Google Analytics feel free to contact us. We also offer an Audit for your Google Analytics property as well as an expert eye on your tracking implementations with Tealium and Google Tag Manager.

How to fix duplicate event collection on Single Page Applications.

by Beluas | Jun 16, 2023 | Debugging, Digital Analytics, GA4, GA4 - Events

When can an event on a Single Page Application be collected more than once in Google Analytics?

This behaviour can be observed in different situations and trying to describe all the possibilities is fairly difficult but most of the time you’ll experience duplicate event collection :

Because of the conditional rendering of your Google Analytics tag after the user accepts the consent to be tracked using a Consent Management Platform ( Liveramp / UserCentrics / etc.. )
The JS code related to the events is inside some sort of loop which runs more than once
When using a Tag Management System ( GTM / Tealium ) you can incur in duplicate event tracking when the portion of JS code responsible for the events runs more than once.

How to fix Google analytics duplicate event collection on Single Page Applications ?

If you’re using a Tag Management System ( GTM / Tealium ) you should have available some option for which you can prevent the code from firing more than once. But sometimes there could be other factors that could still let the event be collected twice or for some reason you cannot run the extension only one time. If you’re in this situation you can try to set a counter to prevent the event from firing if this counter has been already triggered. Depending on the implementation you should know that you can use different areas to store a counter:

Local Storage
Session Storage
JS variable on the global object ( window)
Built-in variable in the Tag Management System

Here is a hint : Don’t forget to put the counter at zero when moving from a SPA to another website area outside the SPA or in some cases also when moving around in the same SPA otherwise you’ll end up creating unwanted side effects As always in these situations, there is no solution applicable to all the cases out there. If you’re struggling with these or other topics feel free to contact us and we’ll help you with an AD-HOC solution for your needs.

« Older Entries