How search engines (and SEO) have evolved - Part 3

Search Engine Evolution - Mobile Friendliness and Page Experience (2015–2020)

The way we use the internet shifted drastically between 2015 and 2020, thanks to the explosion of mobile devices. For the first time, more people started browsing the web on their phones than on desktops. This change forced Google to rethink how it ranked websites, leading to a major focus on mobile friendliness and user experience.

Why Mobile Friendliness Became Critical

Imagine trying to open a website on your phone, only to find tiny text, buttons you can't click, or images that don’t load properly. Frustrating, right?

If a website isn’t mobile-friendly, users might find it frustrating to navigate, struggle to read tiny text, hit the wrong button, or give up waiting for a slow-loading page. This frustration often leads to users leaving the site before it loads (a behavior called “bouncing”), which can hurt the site’s performance in search rankings and result in lost opportunities.

To make the web more accessible and user-friendly, Google introduced the Mobile-Friendly Update in 2015, often called "Mobilegeddon." This update ensured that websites optimized for mobile devices ranked higher in search engine results. Websites that didn’t adapt risked losing visibility and traffic.

What Does "Mobile-Friendly" Mean?

A mobile-friendly website is designed to give users (and search engines) a smooth and pleasant experience when browsing on their mobile devices, such as smartphones or tablets. Let’s break down what makes a website mobile-friendly in detail:

Adjusts to Different Screen Sizes (Responsive Design)

Websites are accessed on all sorts of devices, from large desktop monitors to small smartphone screens. A responsive design ensures that the layout of the website automatically adjusts to fit the screen size. For instance, on a small screen like a phone, the content might stack vertically for easy scrolling, while on a larger screen like a laptop, it might appear in columns. Responsive design eliminates the need for users to pinch, zoom, or scroll horizontally, making the content easier to view and interact with.

Buttons and Links That Are Easy to Tap

On mobile devices, people use their fingers to navigate, unlike the precise clicking of a mouse on desktops. Buttons and links should be big enough to tap and have enough space around them so users don’t tap the wrong button by mistake.

Readable Text Sizes Without Zooming

Text on a mobile-friendly website should be readable right away, without users needing to zoom in.

• Fonts should:

  • Be appropriately sized (typically at least 16 pixels for body text).

  • Adjust dynamically to the screen size so that headings, body text, and links remain proportional and legible.

• Proper spacing between lines of text and paragraphs is also essential to improve readability.

  
  

Fast Loading, Even on Slow Mobile Connections

Many users browse on mobile data, which can sometimes be slower than Wi-Fi. A mobile-friendly site should:

• Optimize images and videos so they don’t take too long to load. For example, using compressed image formats like WebP can reduce file sizes without losing quality.

• Reduce unnecessary elements like heavy animations, large file downloads, or overly complex designs that slow down page loading.

• Use tools like caching to store parts of the site on a user’s device, so pages load faster the next time they visit.

For businesses, this was a wake-up call. They had to redesign their websites to make them easier to navigate on mobile devices or risk falling behind competitors.

Core Web Vitals: Taking User Experience to the Next Level

By 2020, Google introduced Core Web Vitals, a set of performance metrics that focus on measuring how enjoyable and smooth a webpage feels for users. These metrics go beyond just loading speed—they evaluate how well your website performs in real-world conditions, ensuring it’s fast, responsive, and visually stable.

Google uses these metrics to decide how user-friendly your website is. Pages that score well on these metrics are rewarded with better search rankings, as they provide a better experience for visitors. A site with poor Core Web Vitals, on the other hand, is more likely to lose visitors—and customers—due to frustration or delays.

Let’s break down these key factors:

1. Loading Speed (Largest Contentful Paint - LCP)

LCP measures how long it takes for the largest and most important content on a webpage (like a headline, main image, or video) to fully load and become visible to users. Users don’t want to wait. If your page takes too long to load, visitors are likely to leave. Ideally, LCP should happen within 2.5 seconds. Optimize images by using modern formats like WebP. Use faster hosting services or a Content Delivery Network (CDN) to deliver content from servers closer to the user.

Imagine visiting a news site. The headline and the main image should appear quickly, rather than making you wait for the entire page to load first.

2. Interactivity (First Input Delay - FID)

FID measures the time it takes for your website to respond when a user interacts with it, like clicking a button, tapping a link, or entering text in a form. Users expect instant feedback when they interact with a site. A delay can make the experience feel clunky or frustrating. A good FID is less than 100 milliseconds. Minimize the use of heavy JavaScript, which can delay responses. Use efficient code to reduce the time the browser spends processing tasks.

If you’re filling out a form and hit “Submit,” FID measures how quickly the site starts processing that action. If the button lags or nothing happens for a second, that’s poor FID.

3. Visual Stability (Cumulative Layout Shift - CLS)

CLS measures how much a page’s layout shifts unexpectedly as it loads. Good design means that elements on the page stay where they are supposed to, even as content like ads or images load in. Unexpected shifts can be frustrating for users. For instance, if you’re about to click a button and the page suddenly moves, you might accidentally click the wrong thing. A good CLS score is less than 0.1. Reserve space for ads and images with fixed dimensions so they don’t move content around when they load. Avoid animations or transitions that cause large shifts in layout.

You’re reading an article, and an ad suddenly appears at the top, pushing the text down. This instability negatively impacts the user experience.

How to Check Core Web Vitals

• Use tools like Google PageSpeed Insights, Lighthouse, or Search Console to test your website and see how it scores on LCP, FID, and CLS.

• These tools also give you suggestions on how to fix issues and improve performance.

The shift to mobile-first and page experience optimization was about putting the user first. Whether you're a blogger, an online store owner, or a corporate website manager, you had to think like your audience. Is your site easy to use? Does it load quickly? Does it work well on a phone? By focusing on these questions, websites not only met Google’s standards but also created better experiences for their visitors.

This era taught us that a great website isn't just about having the right information; it's about how that information is delivered.