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 the server delivers HTML uncompressed. Compressing responses with Gzip or Brotli typically shrinks the transfer size by sixty to eighty percent with negligible decompression cost, which translates directly into faster page loads, especially on slower connections. Fixing this issue is usually a server or CDN configuration change rather than a code change.

Where to make the change

• Server configuration: enable compression in your web server. For Nginx use gzip on; (and the brotli module); for Apache use mod_deflate or mod_brotli; for IIS enable Dynamic Compression.
• Cloud platforms: most modern hosts (Cloudflare, Netlify, Vercel, AWS CloudFront, Fastly) compress text responses automatically. Confirm it is enabled in the dashboard.
• Application server: Node, Python, and Ruby app servers can compress responses themselves (for example compression middleware in Express). Compressing at the edge or web server is preferable to keep app servers focused on rendering.

Common causes and how to resolve them

• Compression not enabled: turn it on at the server or CDN level. Verify with a tool such as DevTools Network panel by checking for the content-encoding response header.
• Compression bypassed for HTML MIME type: some configurations compress only specific MIME types. Confirm text/html is included in the allowed list.
• CDN caching the uncompressed response: purge the cache after enabling compression so cached entries get regenerated.
• Server sets Content-Encoding: identity: this disables compression. Remove or update the directive.

Best practices

• Prefer Brotli over Gzip: Brotli compresses HTML, CSS, and JavaScript ten to twenty percent better than Gzip with comparable decode speed.
• Enable for all text content: apply compression to HTML, CSS, JavaScript, JSON, SVG, and XML responses. Skip it for already-compressed assets such as images and video.
• Verify in production: the response header content-encoding: br or content-encoding: gzip confirms compression is live.

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 image responses lack caching headers that allow browsers to store them for repeat visits. With proper caching directives, returning visitors retrieve images from the local cache instead of refetching them, producing noticeably faster subsequent page loads. Fixing this issue is a server or CDN configuration change.

Where to make the change

• Server configuration: add Cache-Control headers to image responses. A common setting is Cache-Control: public, max-age=31536000, immutable for versioned assets.
• CDN configuration: Cloudflare, Fastly, CloudFront, and similar offer rules to set long cache lifetimes for image MIME types.
• WordPress and plugins: a caching plugin or a CDN integration handles cache headers without server changes.
• Shopify: Shopify serves images with appropriate cache headers automatically; failures usually point to externally hosted images.

Common causes and how to resolve them

• No Cache-Control or Expires header: add one. Browsers will revalidate every request without it.
• Cache-Control: no-cache or no-store: these are correct for HTML responses but wrong for static images. Set a long max-age instead.
• Short max-age (under a day): images change rarely; a max-age of months or a year is typical.
• Cookie-bearing image requests: if the image URL sets cookies or varies by user, browsers cannot cache effectively. Serve images from a cookie-free subdomain or your CDN.

Best practices

• Use versioned filenames: renaming the file when the content changes lets you set near-permanent cache lifetimes without ever serving stale files.
• Mark immutable assets as such: the immutable directive tells browsers to skip even revalidation requests.
• Serve from a CDN: CDNs add caching, compression, and edge delivery in one step.

This test fails when external JavaScript files are served without caching headers that allow browsers to store and reuse them. Cached scripts skip the network on repeat visits, reducing load time and bandwidth for returning users. Fixing this issue is a server or CDN configuration change.

Where to make the change

• Server configuration: add Cache-Control: public, max-age=31536000, immutable to JavaScript responses, paired with versioned filenames.
• CDN configuration: set a default cache rule for *.js assets at the edge.
• Build pipeline: emit hashed filenames (for example app.7f3c1e.js) so cache lifetimes can be long without risking stale code.
• WordPress and plugins: caching and CDN plugins handle JS cache headers automatically.

Common causes and how to resolve them

• No Cache-Control header: add one. Without it, browsers revalidate on every page load.
• Short max-age: bump to a year for versioned files. Use a shorter lifetime only for unversioned scripts that may change in place.
• no-cache or no-store on static JS: remove these directives; they belong on dynamic responses, not static assets.
• Cookies on script requests: serve scripts from a cookie-free subdomain or a CDN to enable shared caching.

Best practices

• Versioned filenames: hashed file names plus immutable caching is the gold standard for cache effectiveness.
• Self-host critical scripts: hosting third-party scripts yourself lets you control cache headers and avoid vendor outages.
• Audit with DevTools: the Network panel's "Disk cache" column shows whether each script is genuinely served from cache on repeat visits.

This test fails when external CSS files are served without caching headers that allow browsers to store and reuse them. Cached stylesheets skip the network on repeat visits, reducing load time for returning users while still allowing updates through versioned filenames. Fixing this issue is a server or CDN configuration change.

Where to make the change

• Server configuration: add Cache-Control: public, max-age=31536000, immutable to CSS responses, paired with versioned filenames.
• CDN configuration: set a default cache rule for *.css assets at the edge.
• Build pipeline: emit hashed filenames so cache lifetimes can be long without risking stale styles.
• WordPress and plugins: caching plugins handle CSS cache headers automatically.

Common causes and how to resolve them

• No Cache-Control header: add one. Without it, browsers revalidate on every page load.
• Short max-age: bump to a year for versioned files; keep it shorter only for unversioned files that may change in place.
• Stylesheets behind authentication: private styles cannot use public caching. Move shared styles to a public path.

Best practices

• Versioned filenames: hashed names plus immutable caching is the gold standard.
• Inline critical CSS: the styles needed for above-the-fold rendering can be inlined while the rest is cached and loaded asynchronously.
• Audit with DevTools: confirm that on repeat visits, the stylesheet is served from disk cache rather than the network.

This test fails when external links opened in a new tab (with target="_blank") lack the rel="noopener" or rel="noreferrer" attributes. Modern browsers (Chrome 88+, Firefox 79+, Safari 12.1+) apply noopener implicitly, so this is largely a defense for older browsers and a way to keep the destination page from running in the same browser process as the original tab. Fixing this issue means adding the attributes explicitly to every external target="_blank" link.

Example

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External link
</a>

Where to make the change

• Application code or templates: search for target="_blank" and add rel="noopener noreferrer" to each match. A simple find-and-replace handles most cases.
• WordPress: the block editor adds rel="noopener" automatically on every external link opened in a new tab. Older content may need a one-time bulk update.
• Shopify, Wix, Squarespace: editor-generated links typically include the rel attributes. Manual HTML embeds need them added.
• Headless or framework sites: wrap external links in a component that always sets the correct rel attributes.

Common causes and how to resolve them

• Hand-written external links missing the attribute: add rel="noopener noreferrer" to each one.
• Old content from before the editor added it automatically: a one-time bulk update through the database or CMS export covers it.
• Markdown-rendered content: configure the renderer to add the attributes to every external link by default.

Best practices

• Use noopener noreferrer together: noopener handles the security concern, noreferrer additionally hides the referring URL. Both are safe defaults for most external links.
• Reserve target="_blank" for genuinely external links: internal links should open in the same tab so users can use the back button naturally.
• Add a lint rule: ESLint plugins for React and similar frameworks can enforce the rel attribute automatically.