Alt attributes provide a text alternative for images, used by screen readers when a user cannot see the image and by search engines and multimodal AI models to understand what the image depicts. Fixing this issue means writing concise, descriptive alt text for every meaningful image on the page, and using empty alt for purely decorative images so assistive technology can skip them. The same alt text helps multimodal LLMs and image search tools surface and cite your visuals.

Example

<img src="/images/marathon-shoes.jpg"
     alt="Side view of a lightweight neon-green marathon running shoe">

<img src="/images/divider.svg" alt="">

Where to make the change

• Raw HTML: add the alt attribute to every <img> tag. For decorative images, use alt="" so screen readers skip them.
• WordPress: the media library has an Alt text field on every uploaded image. Fill it once and the value is reused everywhere the image is inserted.
• Shopify: in the product or page editor, click an image and use the Edit alt text option. Theme code that renders product images should pull image.alt.
• Wix or Squarespace: click the image in the editor and use the Alt text or Image description field in the side panel.
• Headless or framework sites: require an alt prop on every image component and lint for missing values during build.

Common causes and how to resolve them

• Attribute missing: add alt="" at minimum so the page validates. Replace with descriptive text on any image that conveys information.
• Alt text is the filename: "IMG_4837.jpg" tells the user nothing. Replace with a description of what is in the image.
• Alt text duplicates the visible caption: screen readers will read both, doubling the user's listening time. Differentiate the alt from the caption or empty the alt.
• Decorative images get descriptive alt text: background patterns and dividers should use alt="", otherwise screen readers narrate noise.
• Bulk imports left alt blank: a one-off audit of the media library or a CMS-side script can fill missing alt values from product names, captions, or asset descriptions.

Best practices

• Describe the function, not just the appearance: for a chart, describe what the chart shows. For a button image, describe what the button does.
• Keep it concise: aim for under 125 characters. Screen readers do not pause mid-sentence, so long alt text is exhausting to listen to.
• Skip "image of" or "picture of": the screen reader already announces it as an image.
• Include the focus keyword when natural: alt text is a minor on-page signal, but stuffing keywords in unnatural alt text harms both accessibility and ranking.

This test fails when the raw HTML document weighs significantly more than necessary, even before counting images, CSS, or JavaScript. Bloated HTML increases time to first byte, slows parsing, and stalls rendering on mobile networks and lower-powered devices. Fixing this issue means trimming inline data, removing legacy markup, and keeping the document focused on what the user needs.

Where to make the change

• Application code or templates: identify which sections produce the most bytes (often a large inline JSON blob, an inline base64 image, or a giant comment block) and refactor them to load externally or be removed.
• WordPress: check for plugins or page builders that emit large inline configurations. Disable unused plugins and prefer themes that ship clean markup.
• Shopify: theme code may inline large product or section JSON. Move heavy data to a fetch-on-demand endpoint when possible.
• Headless or framework sites: review the rendered output for serialized state (for example __NEXT_DATA__ in Next.js) and trim what is sent on first paint by streaming or lazy-loading non-critical chunks.

Common causes and how to resolve them

• Inline base64 images or fonts: move them to external files so the browser can cache them across requests.
• Excessive inline CSS or JavaScript: link to external stylesheets and scripts so they cache. Inline only the truly critical CSS for above-the-fold content.
• Large server-side JSON payloads: ship only the data needed for first render. Fetch the rest on demand.
• Repeating boilerplate or commented-out code: strip comments and dead code in the production build.
• HTML compression disabled: Gzip or Brotli compression often shrinks the response by half or more. Confirm the server sends the appropriate Content-Encoding header.

Best practices

• Aim for under 100 KB of HTML: most pages can comfortably stay under this. Anything beyond a few hundred KB usually indicates structural bloat worth refactoring.
• Enable compression: Gzip is the safe minimum, Brotli is even better for HTML and other text formats.
• Defer non-critical content: rendering only what is needed for the initial viewport keeps both bytes and parse time down.
• Audit periodically: add HTML size to your performance budget so regressions get caught in CI.

This test fails when one or more images carry disproportionately large embedded metadata such as EXIF data, thumbnails, color profiles, geolocation, and camera information. This metadata is rarely useful on the web and adds bytes to every request without any rendering benefit. Fixing this issue means stripping the metadata as part of your image processing pipeline.

Where to make the change

• Image build pipeline: use a tool such as ImageMagick (mogrify -strip image.jpg), jpegoptim --strip-all, or oxipng --strip all to remove metadata at build time.
• WordPress: a media optimization plugin will strip metadata automatically on upload.
• Shopify, Wix, Squarespace: the platforms strip most metadata server-side. Failures usually point to images served from external sources you control.
• Image CDN: Cloudflare Images, Cloudinary, and Imgix strip non-essential metadata by default during transformation.

Common causes and how to resolve them

• Original camera files uploaded as-is: camera files contain large EXIF blocks (lens, GPS, embedded JPEG previews). Strip during upload or build.
• Color profile larger than the image: embed a small sRGB profile or strip the profile entirely if the image is meant for the web.
• Stock photo metadata: stock images often carry copyright notices, IPTC blocks, and watermarks larger than the image data itself.
• Geolocation in personal photos: beyond bytes, EXIF GPS can leak the photographer's location. Strip for privacy as well as performance.

Best practices

• Strip metadata on upload: make it part of the asset pipeline so no human action is required.
• Preserve only essentials: a small ICC color profile is occasionally worth keeping for accurate color rendering; everything else can usually go.
• Verify with a quick check: tools like exiftool image.jpg show what is left after stripping, so you can confirm only what you want remains.

This test fails when the site does not serve a branded, helpful page for missing URLs. A custom 404 keeps users on the site by offering navigation, search, and suggested links rather than dropping them at the browser's generic error screen. Fixing this issue means designing a 404 template, ensuring it returns the correct HTTP 404 status, and pointing your server at it.

Where to make the change

• Server configuration: point your web server at a custom 404 page. In Nginx, use error_page 404 /404.html;. In Apache, use ErrorDocument 404 /404.html.
• WordPress: create a 404.php template in your theme. WordPress invokes it automatically for missing URLs.
• Shopify: edit the 404.liquid template in the theme code editor.
• Wix or Squarespace: use the platform's built-in 404 page editor in site settings.
• Headless or framework sites: Next.js uses not-found.js, Astro uses 404.astro, and similar frameworks all have a convention for the missing-route page.

Common causes and how to resolve them

• No custom 404 at all: create one. The minimum is the site header, navigation, a clear "page not found" message, and links to popular sections.
• 404 page returns HTTP 200: a "soft 404" confuses search engines. Verify the response status with DevTools or curl, and configure the server to return 404 for missing routes.
• 404 page redirects to homepage: redirecting users to the homepage hides broken URLs from analytics and search engines. Show a real 404 instead.
• Generic browser error visible: the server is not invoking the custom template. Check the configuration directive.

Best practices

• Keep the site chrome: show the header, footer, and navigation so users do not feel lost.
• Offer next steps: a search box, popular links, or category navigation help users get back on track.
• Track 404s: log missing-URL hits in analytics so you can spot broken inbound links worth fixing or redirecting.
• Be clear about the error: "Sorry, that page does not exist" is better than vague messaging that confuses users.

This test reports on whether the page applies a nofollow directive that tells search engines not to follow outbound links. The nofollow attribute (and the related sponsored and ugc values) controls how link equity flows from your page. Fixing this issue means using the right rel value on each external link based on its purpose so signals are passed only where you intend.

Where to make the change

• Raw HTML: add rel="nofollow", rel="sponsored", or rel="ugc" to specific outbound links rather than blanket-applying them site-wide.
• WordPress: the block editor offers a "mark as nofollow" option per link, and SEO plugins can auto-tag external links by domain.
• Shopify, Wix, Squarespace: editor-generated links allow rel attribute toggles; manual HTML embeds need them set explicitly.
• Headless or framework sites: wrap external links in a component that decides the rel based on the link's classification.

Common causes and how to resolve them

• Site-wide nofollow on every external link: overly aggressive. Reserve nofollow for sponsored, untrusted, or user-generated content.
• Sponsored content not labeled: use rel="sponsored" on paid placements and affiliate links to comply with Google's link spam policy.
• User-generated content unmarked: comments, forum posts, and review user submissions should use rel="ugc".
• Trusted editorial links nofollowed: these should pass equity. Remove the nofollow.

Best practices

• Use the most specific value: sponsored for paid links, ugc for user content, nofollow for everything else you want to disclaim. They can be combined: rel="sponsored noopener".
• Do not nofollow internal links: "PageRank sculpting" with internal nofollow no longer works and just wastes crawl signal.
• Audit periodically: as content ages, sponsored relationships change. Review affiliate and partner links once a year.