Common Mistakes

When you add an image to a web page without specifying its width and height in the HTML, the browser doesn't know how much space to reserve for it before it loads. The browser renders the surrounding text and other elements first, then when the image finally loads, it pushes everything else down to make room. This movement is called layout shift.

Google measures this with Cumulative Layout Shift (CLS). Every time content moves unexpectedly while a page loads, it adds to the CLS score. A high CLS score means your page is visually unstable, and Google treats that as a poor user experience.

The fix is simple: add width and height attributes to every img tag. This tells the browser exactly how much space to reserve before the image loads, preventing the shift entirely. It's a one-line change per image that can dramatically improve your CLS score.

When a browser loads a web page, it processes the HTML from top to bottom. When it encounters a script or stylesheet, it stops and waits for that file to finish loading before continuing. This is called render-blocking. During this pause, the visitor sees nothing.

Many websites load JavaScript files in the head section of their HTML, which means the browser must download and process those files before it can show the visitor any content at all. A page with several large JavaScript files can take several seconds to show anything, even on fast connections.

The solution involves loading non-critical scripts with the defer or async attribute, moving scripts to the end of the page body, and splitting large CSS files so that only the styles needed for the initial view are loaded first. These changes can dramatically reduce the time before your page's main content becomes visible.

A photograph taken with a modern smartphone can be anywhere from 3 to 12 megabytes. That same image, properly compressed and saved in a modern format like WebP or AVIF, might be under 150 kilobytes. The visual quality is nearly identical. The file size difference is enormous.

Large images are the single most common cause of slow Largest Contentful Paint scores. If your hero image is 4 megabytes, it will take several seconds to download even on a reasonably fast connection. On a mobile network, it could take much longer.

Image optimization involves three things: choosing the right format (WebP or AVIF for photos, SVG for icons and logos), compressing the image to remove unnecessary data, and serving the image at the correct dimensions for the display size. Serving a 2000-pixel-wide image in a 400-pixel container wastes bandwidth and slows your page. Tools like Squoosh, ImageOptim, and most content management systems have built-in optimization options.

The viewport meta tag is a single line of HTML that tells mobile browsers how to scale your page. Without it, mobile browsers render your page as if it were a desktop browser, then scale the entire thing down to fit the mobile screen. Everything appears tiny. Users have to pinch and zoom to read anything.

The correct viewport meta tag looks like this: meta name="viewport" content="width=device-width, initial-scale=1". This tells the browser to match the page width to the device's screen width and set the initial zoom level to 1 (no zoom). It's the foundation of a mobile-friendly page.

Google's Search Console Mobile Usability report specifically flags pages with viewport configuration issues. If you see this error, it's one of the highest-priority mobile issues to fix, because it affects every single element on every page that's missing the tag.

On a touchscreen, a fingertip covers roughly 40 to 60 pixels. If a button or link is smaller than that, or if two tappable elements are closer together than that, users will frequently tap the wrong thing. Google recommends that touch targets be at least 48 pixels tall and wide, with at least 8 pixels of space between adjacent targets.

This is especially common with navigation menus, footer links, and inline text links that appear close together. A list of five links stacked with only 2 pixels between them is nearly impossible to use accurately on a phone. Users who can't navigate your site reliably leave. High bounce rates signal poor user experience to Google.

Fixing touch target sizes usually involves adding padding to links and buttons, or increasing the line-height of text containing links. These are CSS changes that don't require redesigning your site, just adjusting spacing values.

When a visitor loads your page for the first time, their browser downloads every file: HTML, CSS, JavaScript, images, fonts. On a return visit, the browser can reuse files it already downloaded, instead of downloading them again. This is called caching. It makes repeat visits dramatically faster.

But caching only works if your server tells the browser how long to keep each file. This is done through HTTP headers called Cache-Control and Expires. Without these headers, browsers may not cache files at all, or may cache them for a very short time.

Google's PageSpeed Insights flags pages with missing or very short cache policies. Setting appropriate cache durations for static files like images, fonts, and CSS can significantly improve page speed for returning visitors, which makes up a substantial portion of most sites' traffic.

Custom web fonts are loaded from external servers, which means there's a delay before they arrive. During that delay, the browser displays text in a fallback font. When the custom font loads, the text reflows into the new font's dimensions. If the fallback font and the custom font have different sizes or letter spacing, this reflow shifts content around the page, contributing to CLS.

This is called a Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT), depending on how the browser handles the waiting period. Both can cause layout shift and both create a visually disruptive experience.

Solutions include using the font-display: swap CSS property to control how the browser handles font loading, preloading critical fonts with a link rel="preload" tag, and using font metrics override properties to make the fallback font dimensions match the custom font more closely. These techniques reduce or eliminate the shift caused by font loading.

Google specifically penalizes pages that show intrusive interstitials to mobile users who arrive from search results. An intrusive interstitial is any popup or overlay that covers the main content and makes it difficult for users to access what they were looking for. Full-screen overlays, large banners that cover the majority of the screen, and popups that require interaction before showing content all fall into this category.

The penalty applies to the specific page that shows the interstitial, not necessarily the entire site. And it specifically targets interstitials shown immediately when a user arrives from a search result. Interstitials shown after a user has been on the page for a while, or triggered by exit intent, are generally treated differently.

If your site uses popups for email collection, newsletter signups, or promotional messages, reviewing when and how they appear on mobile is worth doing. Small banners that don't cover the main content, or popups that appear only after significant user engagement, are generally not penalized.