addyosmani/web-quality-skills

"author": {     "name": "Addy Osmani",     "url": "https://github.com/addyosmani"

"name": "Addy Osmani",     "url": "https://github.com/addyosmani"   },

"url": "https://github.com/addyosmani"

},   "homepage": "https://github.com/addyosmani/web-quality-skills",   "repository": "https://github.com/addyosmani/web-quality-skills",

"homepage": "https://github.com/addyosmani/web-quality-skills",

"repository": "https://github.com/addyosmani/web-quality-skills",

# Lighthouse accessibility audit npx lighthouse https://example.com --only-categories=accessibility

# Lighthouse accessibility audit npx lighthouse https://example.com --only-categories=accessibility

npx lighthouse https://example.com --only-categories=accessibility

npx lighthouse https://example.com --only-categories=accessibility

# axe-core npm install @axe-core/cli -g axe https://example.com

# axe-core npm install @axe-core/cli -g axe https://example.com

axe https://example.com

axe https://example.com

- [WCAG 2.2 Quick Reference](https://www.w3.org/WAI/WCAG22/quickref/)

- [WCAG 2.2 Quick Reference](https://www.w3.org/WAI/WCAG22/quickref/)

- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)

- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)

- [Deque axe Rules](https://dequeuniversity.com/rules/axe/)

- [Deque axe Rules](https://dequeuniversity.com/rules/axe/)

<a href="/page">Descriptive link text</a> <!-- External links --> <a href="https://external.com" target="_blank" rel="noopener">

<!-- External links --> <a href="https://external.com" target="_blank" rel="noopener">   External site

<a href="https://external.com" target="_blank" rel="noopener">

| Tool | Type | URL | |------|------|-----| | axe DevTools | Browser extension | [deque.com/axe](https://www.deque.com/axe/) |

|------|------|-----| | axe DevTools | Browser extension | [deque.com/axe](https://www.deque.com/axe/) | | WAVE | Browser extension | [wave.webaim.org](https://wave.webaim.org/) |

| axe DevTools | Browser extension | [deque.com/axe](https://www.deque.com/axe/) |

| WAVE | Browser extension | [wave.webaim.org](https://wave.webaim.org/) |

| Lighthouse | Built into Chrome | DevTools → Lighthouse | | NVDA | Screen reader (Windows) | [nvaccess.org](https://www.nvaccess.org/) | | VoiceOver | Screen reader (Mac) | Built into macOS |

| NVDA | Screen reader (Windows) | [nvaccess.org](https://www.nvaccess.org/) |

| Colour Contrast Analyser | Desktop app | [tpgi.com](https://www.tpgi.com/color-contrast-checker/) |

- [WCAG 2.2 W3C Recommendation](https://www.w3.org/TR/WCAG22/)

- [WCAG 2.2 Quick Reference](https://www.w3.org/WAI/WCAG22/quickref/)

- [What's New in WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/)

**Never load polyfills from a third-party CDN you don't control.** The `polyfill.io` service was [compromised in mid-2024](https://sansec.io/research/polyfill-supply-chain-attack) in a supply-chain attack and used to serve malware to ~100k 

**Never load polyfills from a third-party CDN you don't control.** The `polyfill.io` service was [compromised in mid-2024](https://sansec.io/research/polyfill-supply-chain-attack) in a supply-chain attack and used to serve malware to ~100k 

// ✅ Async fetch const response = await fetch(url);

// ✅ Async fetch const response = await fetch(url);

const response = await fetch(url);

const response = await fetch(url);

<!-- Or allow for specific origins --> <meta http-equiv="Permissions-Policy"        content="geolocation=(self 'https://maps.example.com')">

<!-- Or allow for specific origins --> <meta http-equiv="Permissions-Policy"        content="geolocation=(self 'https://maps.example.com')">

content="geolocation=(self 'https://maps.example.com')">

content="geolocation=(self 'https://maps.example.com')">

|------|---------| | `npm audit` | Dependency vulnerabilities | | [SecurityHeaders.com](https://securityheaders.com) | Header analysis |

|------|---------| | `npm audit` | Dependency vulnerabilities | | [SecurityHeaders.com](https://securityheaders.com) | Header analysis |

| `npm audit` | Dependency vulnerabilities | | [SecurityHeaders.com](https://securityheaders.com) | Header analysis | | [W3C Validator](https://validator.w3.org) | HTML validation |

| `npm audit` | Dependency vulnerabilities | | [SecurityHeaders.com](https://securityheaders.com) | Header analysis | | [W3C Validator](https://validator.w3.org) | HTML validation |

| [SecurityHeaders.com](https://securityheaders.com) | Header analysis |

| [SecurityHeaders.com](https://securityheaders.com) | Header analysis |

| [W3C Validator](https://validator.w3.org) | HTML validation |

| [W3C Validator](https://validator.w3.org) | HTML validation |

| Live Lighthouse audit (Chrome DevTools MCP: `lighthouse_audit`) | Rendered Best Practices checks for agents | | Lighthouse CLI | Best Practices audit fallback | | [Observatory](https://observatory.mozilla.org) | Security scan |

| Live Lighthouse audit (Chrome DevTools MCP: `lighthouse_audit`) | Rendered Best Practices checks for agents | | Lighthouse CLI | Best Practices audit fallback | | [Observatory](https://observatory.mozilla.org) | Security scan |

| [Observatory](https://observatory.mozilla.org) | Security scan |

| [Observatory](https://observatory.mozilla.org) | Security scan |

- [MDN Web Security](https://developer.mozilla.org/en-US/docs/Web/Security)

- [MDN Web Security](https://developer.mozilla.org/en-US/docs/Web/Security)

- [OWASP Top 10](https://owasp.org/www-project-top-ten/)

- [OWASP Top 10](https://owasp.org/www-project-top-ten/)

<!-- ❌ Mixed content --> <img src="http://example.com/image.jpg">

<img src="http://example.com/image.jpg">

<script src="http://cdn.example.com/script.js"></script>

<!-- ✅ HTTPS only --> <img src="https://example.com/image.jpg">

<img src="https://example.com/image.jpg">

<script src="https://cdn.example.com/script.js"></script>

<meta http-equiv="Content-Security-Policy"       content="default-src 'self';                script-src 'self' https://trusted-cdn.com;

content="default-src 'self';                script-src 'self' https://trusted-cdn.com;                style-src 'self' 'unsafe-inline';

script-src 'self' https://trusted-cdn.com;

style-src 'self' 'unsafe-inline';                img-src 'self' data: https:;                connect-src 'self' https://api.example.com;">

connect-src 'self' https://api.example.com;">

Content-Security-Policy:   default-src 'self';   script-src 'self' 'nonce-abc123' https://trusted.com;

default-src 'self';   script-src 'self' 'nonce-abc123' https://trusted.com;   style-src 'self' 'nonce-abc123';

script-src 'self' 'nonce-abc123' https://trusted.com;

style-src 'self' 'nonce-abc123';   img-src 'self' data: https:;   connect-src 'self' https://api.example.com;

img-src 'self' data: https:;   connect-src 'self' https://api.example.com;   frame-ancestors 'self';

connect-src 'self' https://api.example.com;

* **Angular** documents built-in sanitization plus the `angular` Trusted Types policy required for enforcement; lazy loading, JIT, upgrades, and explicit sanitizer bypasses need additional named policies. Follow [Angular's maintained securi

* **React** does not sanitize `dangerouslySetInnerHTML`. Keep untrusted input out of it or pass content sanitized by an application-owned policy, and verify the deployed React version under report-only enforcement. Do not assume the framewo

<script src="https://cdn.example.com/lib@1.2.3/dist/lib.js"

- [MDN web security](https://developer.mozilla.org/en-US/docs/Web/Security)

- [OWASP Content Security Policy Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html)

- [DOMPurify](https://github.com/cure53/DOMPurify)

// ❌ Content loads after JavaScript useEffect(() => {   fetch('/api/hero-text').then(r => r.json()).then(setHeroText);

// ❌ Content loads after JavaScript useEffect(() => {   fetch('/api/hero-text').then(r => r.json()).then(setHeroText);

// ❌ Content loads after JavaScript useEffect(() => {   fetch('/api/hero-text').then(r => r.json()).then(setHeroText);

// ❌ Content loads after JavaScript useEffect(() => {   fetch('/api/hero-text').then(r => r.json()).then(setHeroText);

useEffect(() => {   fetch('/api/hero-text').then(r => r.json()).then(setHeroText); }, []);

useEffect(() => {   fetch('/api/hero-text').then(r => r.json()).then(setHeroText); }, []);

useEffect(() => {   fetch('/api/hero-text').then(r => r.json()).then(setHeroText); }, []);

useEffect(() => {   fetch('/api/hero-text').then(r => r.json()).then(setHeroText); }, []);

fetch('/api/hero-text').then(r => r.json()).then(setHeroText);

fetch('/api/hero-text').then(r => r.json()).then(setHeroText);

fetch('/api/hero-text').then(r => r.json()).then(setHeroText);

fetch('/api/hero-text').then(r => r.json()).then(setHeroText);

Start conservatively and measure prediction hit rate, transferred bytes, server load, and navigation improvement before expanding the rules. Recheck [Chrome's maintained eagerness documentation](https://developer.chrome.com/docs/web-platfor

Start conservatively and measure prediction hit rate, transferred bytes, server load, and navigation improvement before expanding the rules. Recheck [Chrome's maintained eagerness documentation](https://developer.chrome.com/docs/web-platfor

Start conservatively and measure prediction hit rate, transferred bytes, server load, and navigation improvement before expanding the rules. Recheck [Chrome's maintained eagerness documentation](https://developer.chrome.com/docs/web-platfor

Start conservatively and measure prediction hit rate, transferred bytes, server load, and navigation improvement before expanding the rules. Recheck [Chrome's maintained eagerness documentation](https://developer.chrome.com/docs/web-platfor

Caveats: - **Bandwidth/CPU cost.** Each prerender is roughly a full page load. Scope `where` carefully (`href_matches` patterns, exclude logout/checkout) and avoid `immediate` outside small sites. - **Side effects fire early.** Analytics, a

Caveats: - **Bandwidth/CPU cost.** Each prerender is roughly a full page load. Scope `where` carefully (`href_matches` patterns, exclude logout/checkout) and avoid `immediate` outside small sites. - **Side effects fire early.** Analytics, a

Caveats: - **Bandwidth/CPU cost.** Each prerender is roughly a full page load. Scope `where` carefully (`href_matches` patterns, exclude logout/checkout) and avoid `immediate` outside small sites. - **Side effects fire early.** Analytics, a

Caveats: - **Bandwidth/CPU cost.** Each prerender is roughly a full page load. Scope `where` carefully (`href_matches` patterns, exclude logout/checkout) and avoid `immediate` outside small sites. - **Side effects fire early.** Analytics, a

- **Bandwidth/CPU cost.** Each prerender is roughly a full page load. Scope `where` carefully (`href_matches` patterns, exclude logout/checkout) and avoid `immediate` outside small sites. - **Side effects fire early.** Analytics, ads, and a

- **Bandwidth/CPU cost.** Each prerender is roughly a full page load. Scope `where` carefully (`href_matches` patterns, exclude logout/checkout) and avoid `immediate` outside small sites. - **Side effects fire early.** Analytics, ads, and a

- **Bandwidth/CPU cost.** Each prerender is roughly a full page load. Scope `where` carefully (`href_matches` patterns, exclude logout/checkout) and avoid `immediate` outside small sites. - **Side effects fire early.** Analytics, ads, and a

- **Bandwidth/CPU cost.** Each prerender is roughly a full page load. Scope `where` carefully (`href_matches` patterns, exclude logout/checkout) and avoid `immediate` outside small sites. - **Side effects fire early.** Analytics, ads, and a

- **Side effects fire early.** Analytics, ads, and any code that runs on load will fire when the prerender starts, not when the user navigates. Gate side effects on the [`prerenderingchange` event](https://developer.chrome.com/docs/web-plat

- **Side effects fire early.** Analytics, ads, and any code that runs on load will fire when the prerender starts, not when the user navigates. Gate side effects on the [`prerenderingchange` event](https://developer.chrome.com/docs/web-plat

- **Side effects fire early.** Analytics, ads, and any code that runs on load will fire when the prerender starts, not when the user navigates. Gate side effects on the [`prerenderingchange` event](https://developer.chrome.com/docs/web-plat

- **Side effects fire early.** Analytics, ads, and any code that runs on load will fire when the prerender starts, not when the user navigates. Gate side effects on the [`prerenderingchange` event](https://developer.chrome.com/docs/web-plat

- [Detailed INP optimization](references/INP.md) — read when a trace or field attribution identifies a slow interaction - [Detailed CLS optimization](references/CLS.md) — read when a trace or field attribution identifies unexpected shifts -

- [Detailed INP optimization](references/INP.md) — read when a trace or field attribution identifies a slow interaction - [Detailed CLS optimization](references/CLS.md) — read when a trace or field attribution identifies unexpected shifts -

- [Detailed INP optimization](references/INP.md) — read when a trace or field attribution identifies a slow interaction - [Detailed CLS optimization](references/CLS.md) — read when a trace or field attribution identifies unexpected shifts -

- [Detailed INP optimization](references/INP.md) — read when a trace or field attribution identifies a slow interaction - [Detailed CLS optimization](references/CLS.md) — read when a trace or field attribution identifies unexpected shifts -

- [Detailed CLS optimization](references/CLS.md) — read when a trace or field attribution identifies unexpected shifts - [web.dev LCP](https://web.dev/articles/lcp) - [web.dev INP](https://web.dev/articles/inp)

- [Detailed CLS optimization](references/CLS.md) — read when a trace or field attribution identifies unexpected shifts - [web.dev LCP](https://web.dev/articles/lcp) - [web.dev INP](https://web.dev/articles/inp)

- [Detailed CLS optimization](references/CLS.md) — read when a trace or field attribution identifies unexpected shifts - [web.dev LCP](https://web.dev/articles/lcp) - [web.dev INP](https://web.dev/articles/inp)

- [Detailed CLS optimization](references/CLS.md) — read when a trace or field attribution identifies unexpected shifts - [web.dev LCP](https://web.dev/articles/lcp) - [web.dev INP](https://web.dev/articles/inp)

- [web.dev LCP](https://web.dev/articles/lcp)

- [web.dev LCP](https://web.dev/articles/lcp)

- [web.dev LCP](https://web.dev/articles/lcp)

- [web.dev LCP](https://web.dev/articles/lcp)

- [web.dev INP](https://web.dev/articles/inp)

- [web.dev INP](https://web.dev/articles/inp)

- [web.dev INP](https://web.dev/articles/inp)

- [web.dev INP](https://web.dev/articles/inp)

- [web.dev CLS](https://web.dev/articles/cls)

- [web.dev CLS](https://web.dev/articles/cls)

- [web.dev CLS](https://web.dev/articles/cls)

- [web.dev CLS](https://web.dev/articles/cls)

<img src="photo.jpg" alt="Photo"> <iframe src="https://video.example/embed/123" title="Demo"></iframe>

<iframe src="https://video.example/embed/123" title="Demo"></iframe>

<div class="video-frame">   <iframe src="https://video.example/embed/123" title="Demo"></iframe>

<iframe src="https://video.example/embed/123" title="Demo"></iframe>

* [Optimize CLS](https://web.dev/articles/optimize-cls)

* [Debug layout shifts](https://developer.chrome.com/docs/devtools/performance/insights#cls-culprits)

* [CSS font metric overrides](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust)

* [Optimize INP](https://web.dev/articles/optimize-inp)

* [`scheduler.yield()`](https://web.dev/articles/optimize-long-tasks#scheduler-yield)

* [web-vitals attribution](https://github.com/GoogleChrome/web-vitals#attribution-build)

* **HTTP/2 or HTTP/3.** Multiplexing reduces connection overhead. * **Edge caching.** Cache HTML at CDN edge when possible. * **Consider Early Hints (HTTP 103) for measured document latency.** If a trace shows slow HTML generation and stabl

* **HTTP/2 or HTTP/3.** Multiplexing reduces connection overhead. * **Edge caching.** Cache HTML at CDN edge when possible. * **Consider Early Hints (HTTP 103) for measured document latency.** If a trace shows slow HTML generation and stabl

* **HTTP/2 or HTTP/3.** Multiplexing reduces connection overhead. * **Edge caching.** Cache HTML at CDN edge when possible. * **Consider Early Hints (HTTP 103) for measured document latency.** If a trace shows slow HTML generation and stabl

* **Consider Early Hints (HTTP 103) for measured document latency.** If a trace shows slow HTML generation and stable critical subresources, send an interim `103` with `Link` headers before the normal final response from the same request. U

* **Consider Early Hints (HTTP 103) for measured document latency.** If a trace shows slow HTML generation and stable critical subresources, send an interim `103` with `Link` headers before the normal final response from the same request. U

* **Consider Early Hints (HTTP 103) for measured document latency.** If a trace shows slow HTML generation and stable critical subresources, send an interim `103` with `Link` headers before the normal final response from the same request. U

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

**Prerender likely-next navigations** with the [Speculation Rules API](https://developer.chrome.com/docs/web-platform/prerender-pages):

**Prerender likely-next navigations** with the [Speculation Rules API](https://developer.chrome.com/docs/web-platform/prerender-pages):

**Prerender likely-next navigations** with the [Speculation Rules API](https://developer.chrome.com/docs/web-platform/prerender-pages):

event.respondWith(       caches.match(event.request).then((cached) => {         return cached || fetch(event.request).then((response) => {

event.respondWith(       caches.match(event.request).then((cached) => {         return cached || fetch(event.request).then((response) => {

event.respondWith(       caches.match(event.request).then((cached) => {         return cached || fetch(event.request).then((response) => {

caches.match(event.request).then((cached) => {         return cached || fetch(event.request).then((response) => {           const clone = response.clone();

caches.match(event.request).then((cached) => {         return cached || fetch(event.request).then((response) => {           const clone = response.clone();

caches.match(event.request).then((cached) => {         return cached || fetch(event.request).then((response) => {           const clone = response.clone();

return cached || fetch(event.request).then((response) => {

return cached || fetch(event.request).then((response) => {

return cached || fetch(event.request).then((response) => {

The [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions) lets the browser cross-fade (or custom-animate) between two DOM states using a single GPU-composited snapshot — no double-render, no layout thrash, 

The [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions) lets the browser cross-fade (or custom-animate) between two DOM states using a single GPU-composited snapshot — no double-render, no layout thrash, 

The [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions) lets the browser cross-fade (or custom-animate) between two DOM states using a single GPU-composited snapshot — no double-render, no layout thrash, 

// ❌ Blocks main thread <script src="https://analytics.example.com/script.js"></script>

// ❌ Blocks main thread <script src="https://analytics.example.com/script.js"></script>

// ❌ Blocks main thread <script src="https://analytics.example.com/script.js"></script>

<script src="https://analytics.example.com/script.js"></script>

<script src="https://analytics.example.com/script.js"></script>

<script src="https://analytics.example.com/script.js"></script>

// ✅ Async loading <script async src="https://analytics.example.com/script.js"></script>

// ✅ Async loading <script async src="https://analytics.example.com/script.js"></script>

// ✅ Async loading <script async src="https://analytics.example.com/script.js"></script>

<script async src="https://analytics.example.com/script.js"></script>

<script async src="https://analytics.example.com/script.js"></script>

<script async src="https://analytics.example.com/script.js"></script>

if (entries[0].isIntersecting) {       const script = document.createElement('script');       script.src = 'https://widget.example.com/embed.js';

if (entries[0].isIntersecting) {       const script = document.createElement('script');       script.src = 'https://widget.example.com/embed.js';

if (entries[0].isIntersecting) {       const script = document.createElement('script');       script.src = 'https://widget.example.com/embed.js';

const script = document.createElement('script');       script.src = 'https://widget.example.com/embed.js';       document.body.appendChild(script);

const script = document.createElement('script');       script.src = 'https://widget.example.com/embed.js';       document.body.appendChild(script);

const script = document.createElement('script');       script.src = 'https://widget.example.com/embed.js';       document.body.appendChild(script);

script.src = 'https://widget.example.com/embed.js';

script.src = 'https://widget.example.com/embed.js';

script.src = 'https://widget.example.com/embed.js';

* [Chrome DevTools MCP tool reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)

* [Chrome DevTools MCP tool reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)

* [Chrome DevTools MCP tool reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)

* [Chrome UX Report API](https://developer.chrome.com/docs/crux/api)

* [Chrome UX Report API](https://developer.chrome.com/docs/crux/api)

* [Chrome UX Report API](https://developer.chrome.com/docs/crux/api)

* [Getting started with measuring Web Vitals](https://web.dev/articles/vitals-measurement-getting-started)

* [Getting started with measuring Web Vitals](https://web.dev/articles/vitals-measurement-getting-started)

* [Getting started with measuring Web Vitals](https://web.dev/articles/vitals-measurement-getting-started)

* [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started)

* [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started)

* [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started)

if (!navigator.sendBeacon?.('/rum', body)) {     fetch('/rum', {method: 'POST', body, keepalive: true});

if (!navigator.sendBeacon?.('/rum', body)) {     fetch('/rum', {method: 'POST', body, keepalive: true});

fetch('/rum', {method: 'POST', body, keepalive: true});

fetch('/rum', {method: 'POST', body, keepalive: true});

* [web-vitals library](https://github.com/GoogleChrome/web-vitals)

* [web-vitals library](https://github.com/GoogleChrome/web-vitals)

* [Best practices for measuring Web Vitals in the field](https://web.dev/articles/vitals-field-measurement-best-practices)

* [Best practices for measuring Web Vitals in the field](https://web.dev/articles/vitals-field-measurement-best-practices)

* [Find slow interactions in the field](https://web.dev/articles/find-slow-interactions-in-the-field)

* [Find slow interactions in the field](https://web.dev/articles/find-slow-interactions-in-the-field)

Sitemap: https://example.com/sitemap.xml

Sitemap: https://example.com/sitemap.xml

<!-- Prevent duplicate content issues --> <link rel="canonical" href="https://example.com/page">

<!-- Prevent duplicate content issues --> <link rel="canonical" href="https://example.com/page">

<link rel="canonical" href="https://example.com/page">

<link rel="canonical" href="https://example.com/page">

<!-- Self-referencing canonical (recommended) --> <link rel="canonical" href="https://example.com/current-page">

<!-- Self-referencing canonical (recommended) --> <link rel="canonical" href="https://example.com/current-page">

<link rel="canonical" href="https://example.com/current-page">

<link rel="canonical" href="https://example.com/current-page">

<!-- For paginated content --> <link rel="canonical" href="https://example.com/products">

<!-- For paginated content --> <link rel="canonical" href="https://example.com/products">

<link rel="canonical" href="https://example.com/products">

<link rel="canonical" href="https://example.com/products">

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

<url>     <loc>https://example.com/</loc>     <lastmod>2024-01-15</lastmod>

<url>     <loc>https://example.com/</loc>     <lastmod>2024-01-15</lastmod>

<loc>https://example.com/</loc>

<loc>https://example.com/</loc>

</url>   <url>     <loc>https://example.com/products</loc>

</url>   <url>     <loc>https://example.com/products</loc>

<url>     <loc>https://example.com/products</loc>     <lastmod>2024-01-14</lastmod>

<url>     <loc>https://example.com/products</loc>     <lastmod>2024-01-14</lastmod>

<loc>https://example.com/products</loc>

<loc>https://example.com/products</loc>

✅ Good URLs: https://example.com/products/blue-widget

✅ Good URLs: https://example.com/products/blue-widget

https://example.com/products/blue-widget

https://example.com/products/blue-widget

https://example.com/blog/how-to-use-widgets

https://example.com/blog/how-to-use-widgets

❌ Poor URLs: https://example.com/p?id=12345

❌ Poor URLs: https://example.com/p?id=12345

https://example.com/p?id=12345

https://example.com/p?id=12345

https://example.com/products/item/category/subcategory/blue-widget-2024-sale-discount

https://example.com/products/item/category/subcategory/blue-widget-2024-sale-discount

<!-- Ensure all resources use HTTPS --> <img src="https://example.com/image.jpg">

<!-- Ensure all resources use HTTPS --> <img src="https://example.com/image.jpg">

<img src="https://example.com/image.jpg">

<img src="https://example.com/image.jpg">

<!-- Not: --> <img src="http://example.com/image.jpg">

<!-- Not: --> <img src="http://example.com/image.jpg">

<img src="http://example.com/image.jpg">

<img src="http://example.com/image.jpg">

Treat title-link rewriting separately from truncation. Google may build a different title link from the visible page title, headings, anchor text, and other sources even when the `<title>` is short; investigate accuracy and consistency rath

Treat title-link rewriting separately from truncation. Google may build a different title link from the visible page title, headings, anchor text, and other sources even when the `<title>` is short; investigate accuracy and consistency rath

Training controls such as `GPTBot` and `ClaudeBot` are distinct from search and user-fetch controls. `GoogleOther` is a generic crawler, not an AI-search visibility switch. Verify current names and consequences in the vendors' maintained do

Training controls such as `GPTBot` and `ClaudeBot` are distinct from search and user-fetch controls. `GoogleOther` is a generic crawler, not an AI-search visibility switch. Verify current names and consequences in the vendors' maintained do

<!-- For multi-language sites --> <link rel="alternate" hreflang="en" href="https://example.com/page">

<!-- For multi-language sites --> <link rel="alternate" hreflang="en" href="https://example.com/page">

<link rel="alternate" hreflang="en" href="https://example.com/page">

<link rel="alternate" hreflang="en" href="https://example.com/page">

<link rel="alternate" hreflang="es" href="https://example.com/es/page">

<link rel="alternate" hreflang="es" href="https://example.com/es/page">

<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">

<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">

<link rel="alternate" hreflang="x-default" href="https://example.com/page">

<link rel="alternate" hreflang="x-default" href="https://example.com/page">

- [Google Search Central](https://developers.google.com/search)

- [Google Search Central](https://developers.google.com/search)

- [Schema.org](https://schema.org/)

- [Schema.org](https://schema.org/)

<script type="application/ld+json"> {   "@context": "https://schema.org",

{   "@context": "https://schema.org",   "@type": "Organization",

"@context": "https://schema.org",

"@type": "Organization",   "name": "Example Company",   "url": "https://example.com",

"name": "Example Company",   "url": "https://example.com",   "logo": "https://example.com/logo.png",

"url": "https://example.com",

"logo": "https://example.com/logo.png",

"sameAs": [     "https://twitter.com/example",     "https://linkedin.com/company/example"

"https://twitter.com/example",

"https://linkedin.com/company/example"

<script type="application/ld+json"> {   "@context": "https://schema.org",

{   "@context": "https://schema.org",   "@type": "Article",

"@context": "https://schema.org",

"headline": "How to Choose the Right Widget",   "description": "Complete guide to selecting widgets for your needs.",   "image": "https://example.com/article-image.jpg",

"description": "Complete guide to selecting widgets for your needs.",   "image": "https://example.com/article-image.jpg",   "author": {

"image": "https://example.com/article-image.jpg",

"@type": "Person",     "name": "Jane Smith",     "url": "https://example.com/authors/jane-smith"

"name": "Jane Smith",     "url": "https://example.com/authors/jane-smith"   },

"url": "https://example.com/authors/jane-smith"

"logo": {       "@type": "ImageObject",       "url": "https://example.com/logo.png"

"@type": "ImageObject",       "url": "https://example.com/logo.png"     }

"url": "https://example.com/logo.png"

<script type="application/ld+json"> {   "@context": "https://schema.org",

{   "@context": "https://schema.org",   "@type": "Product",

"@context": "https://schema.org",

"@type": "Product",   "name": "Blue Widget Pro",   "image": "https://example.com/blue-widget.jpg",

"name": "Blue Widget Pro",   "image": "https://example.com/blue-widget.jpg",   "description": "Premium blue widget with advanced features.",

"image": "https://example.com/blue-widget.jpg",

"price": "49.99",     "priceCurrency": "USD",     "availability": "https://schema.org/InStock",

"priceCurrency": "USD",     "availability": "https://schema.org/InStock",     "url": "https://example.com/products/blue-widget"

"availability": "https://schema.org/InStock",

"url": "https://example.com/products/blue-widget"

<script type="application/ld+json"> {   "@context": "https://schema.org",

{   "@context": "https://schema.org",   "@type": "FAQPage",

"@context": "https://schema.org",

<script type="application/ld+json"> {   "@context": "https://schema.org",

{   "@context": "https://schema.org",   "@type": "BreadcrumbList",

"@context": "https://schema.org",

"position": 1,       "name": "Home",       "item": "https://example.com"

"name": "Home",       "item": "https://example.com"     },

"item": "https://example.com"

"position": 2,       "name": "Products",       "item": "https://example.com/products"

"name": "Products",       "item": "https://example.com/products"     },

"item": "https://example.com/products"

"position": 3,       "name": "Blue Widgets",       "item": "https://example.com/products/blue-widgets"

"name": "Blue Widgets",       "item": "https://example.com/products/blue-widgets"     }

"item": "https://example.com/products/blue-widgets"

Test structured data at: - [Google Rich Results Test](https://search.google.com/test/rich-results)

- [Google Rich Results Test](https://search.google.com/test/rich-results)

- [Schema.org Validator](https://validator.schema.org/)

> **Lighthouse 13+.** The Performance category now uses shared **Performance Insights** across Lighthouse and the DevTools Performance panel ([announcement](https://developer.chrome.com/blog/moving-lighthouse-to-insights)). Follow current i

> **Lighthouse 13+.** The Performance category now uses shared **Performance Insights** across Lighthouse and the DevTools Performance panel ([announcement](https://developer.chrome.com/blog/moving-lighthouse-to-insights)). Follow current i

> **Lighthouse 13+.** The Performance category now uses shared **Performance Insights** across Lighthouse and the DevTools Performance panel ([announcement](https://developer.chrome.com/blog/moving-lighthouse-to-insights)). Follow current i

> **Lighthouse 13+.** The Performance category now uses shared **Performance Insights** across Lighthouse and the DevTools Performance panel ([announcement](https://developer.chrome.com/blog/moving-lighthouse-to-insights)). Follow current i

#!/bin/bash

WARNINGS+=("$file:$ln: Non-HTTPS URL")     http_count=$((http_count + 1))   done < <(grep -noE 'http://[^"'\''[:space:]>]*' "$file" || true)

http_count=$((http_count + 1))   done < <(grep -noE 'http://[^"'\''[:space:]>]*' "$file" || true) }

done < <(grep -noE 'http://[^"'\''[:space:]>]*' "$file" || true)