62
Performance
Verbesserungsbedarf
ViewMend
Vollständige ViewMend-Prüfung
AI-gestützte Performance-Interpretation
Verbesserungsbedarf
ViewMend-Bericht für www.canva.com
ViewMend hat die Seitenprüfung abgeschlossen und praktische Aufgaben vorbereitet.
Dieser Bericht wurde auf English erstellt. Sie sehen die ViewMend-Oberfläche auf Deutsch. Gespeicherte Prüfdaten werden so angezeigt, wie sie ursprünglich generiert wurden.
Neue Prüfung auf Deutsch starten
Prüftyp
Vollständig
Genutzte Daten
Metriken, Ressourcen und technische Prüfungen
Geprüft
May 18, 12:14
Geräte
Mobil + Desktop
Konkrete Aufgaben
0
Gefundene Ressourcen
0
Sicherheit
Hoch 0 / Mittel 0 / Prüfen 0
Finale URL
https://www.canva.com/en_gb/
Performance-Werte
Prüfergebnisse
Performance-Werte
Die folgenden Daten beziehen sich auf das ausgewählte Gerät.
91
Accessibility
Gut
82
Best Practices
Verbesserungsbedarf
100
SEO
Gut
36
Performance
Schwach
100
Accessibility
Gut
81
Best Practices
Verbesserungsbedarf
100
SEO
Gut
Labormetriken
Kernmetriken
Dies sind Laborsignale für das ausgewählte Gerät. Sie bleiben von der AI-Interpretationsschicht getrennt.
FCP Verbesserungsbedarf
2.3 s
Lab metric
LCP Schwach
6.1 s
Lab metric
TBT Verbesserungsbedarf
418 ms
Lab metric
CLS Gut
0.003
Lab metric
Speed Index Verbesserungsbedarf
4.7 s
Lab metric
FCP Verbesserungsbedarf
2.3 s
Lab metric
LCP Schwach
6.8 s
Lab metric
TBT Schwach
621 ms
Lab metric
CLS Gut
0.003
Lab metric
Speed Index Gut
2.9 s
Lab metric
ViewMend action plan
Was zuerst korrigieren?
Run a new audit to build an action-based report with exact resources.
Main action
ViewMend found 0 practical tasks
Detailed evidence is unavailable
No action-ready resources were extracted for Mobil.
For this metric ViewMend did not receive one exact file. Related resource checks are shown when available.
Symptoms
LCP: 6.8 s
FCP: 2.3 s
Speed Index: 2.9 s
TBT: 621 ms
CLS: 0.003
No action-ready resources were extracted for Desktop.
For this metric ViewMend did not receive one exact file. Related resource checks are shown when available.
ViewMend AI
AI-Korrekturplan
AI nutzt die von ViewMend gefundenen Aufgaben und Ressourcen, um einen schrittweisen Korrekturplan zu erstellen.
AI fragen Entwickleraufgabe Zu einem Problem fragen 1 Credit Entwickleraufgabe erstellen AI-Korrekturplan erstellen Verwendet 5 AI-Credits Wird erstellt... AI-Korrekturplan erstellt fixPlanAnswer ? 'Generated AI Fix Plan' : 'Generate AI Fix Plan' ViewMend AI fragen Entwickleraufgabe erstellen
5 Credits
AI-Korrekturplan für diesen Bericht erstellen
AI nutzt die von ViewMend gefundenen Aufgaben und Ressourcen, um einen schrittweisen Korrekturplan zu erstellen.
AI-Credits werden nur verwendet, wenn Sie AI-Ausgaben anfordern.
Kurzfassung
Wahrscheinlich größter Hebel
Beste erste Korrektur
Kann warten
Vollständigen AI-Korrekturplan öffnen
Zuerst korrigieren
Kann warten
- -
Empfohlene Reihenfolge
So testen Sie erneut
Zusammenfassung für Entwickler
Visuelle Nachweise
Screenshots und Ladeverlauf
Eine kompakte visuelle Prüfung bleibt hier, wenn ViewMend sie erfassen konnte. Öffnen Sie den vollständigen Viewer nur, wenn Sie Bildnachweise benötigen.
Mobil
Screenshot für diese Prüfung nicht verfügbar.
Ladeverlauf
8 FramesDie langsamsten Frames werden zuerst angezeigt.
Desktop
Screenshot für diese Prüfung nicht verfügbar.
Ladeverlauf
8 FramesDie langsamsten Frames werden zuerst angezeigt.
Passed checks
Passed checks
69 checks passed
73 checks passed
ViewMend also checked technical signals that do not require action.
Passed checks
Passed checks list
69 checks passed 73 checks passedSecurity
Uses HTTPS
All sites should be protected with HTTPS, even ones that don't handle sensitive data. This includes avoiding mixed content, where some resources are loaded over HTTP despite the in...
Avoids requesting the geolocation permission on page load
Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to a user action instead. Learn more about the geolocation per...
Avoids requesting the notification permission on page load
Users are mistrustful of or confused by sites that request to send notifications without context. Consider tying the request to user gestures instead. Learn more about responsibly...
HTML / Page basics
Has a `<meta name="viewport">` tag with `width` or `initial-scale`
A `` not only optimizes your app for mobile screen sizes, but also prevents a 300 millisecond delay to user input. Learn more about using the viewport meta tag.
`<html>` element has a `[lang]` attribute
If a page doesn't specify a `lang` attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page is...
`<html>` element has a valid value for its `[lang]` attribute
Specifying a valid BCP 47 language helps screen readers announce text properly. Learn how to use the `lang` attribute.
Page has the HTML doctype
Specifying a doctype prevents the browser from switching to quirks-mode. Learn more about the doctype declaration.
Properly defines charset
A character encoding declaration is required. It can be done with a `` tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. Learn more about declari...
Optimize viewport for mobile
Tap interactions may be delayed by up to 300 ms if the viewport is not optimized for mobile.
Performance
Cumulative Layout Shift
Cumulative Layout Shift measures the movement of visible elements within the viewport. Learn more about the Cumulative Layout Shift metric.
0.003
Initial server response time was short
Keep the server response time for the main document short because all other requests depend on it. Learn more about the Time to First Byte metric.
Root document took 520 ms
Images
Displays images with correct aspect ratio
Image display dimensions should match natural aspect ratio. Learn more about image aspect ratio.
Serves images with appropriate resolution
Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity. Learn how to provide responsive images.
Preload Largest Contentful Paint image
If the LCP element is dynamically added to the page, you should preload the image in order to improve LCP. Learn more about preloading LCP elements.
Image elements have `[alt]` attributes
Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute. Learn more about the `alt` attribute.
Image elements do not have `[alt]` attributes that are redundant text.
Informative elements should aim for short, descriptive alternative text. Alternative text that is exactly the same as the text adjacent to the link or image is potentially confusin...
Serve images in next-gen formats
Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more about modern image formats.
Efficiently encode images
Optimized images load faster and consume less cellular data. Learn how to efficiently encode images.
Properly size images
Serve images that are appropriately-sized to save cellular data and improve load time. Learn how to size images.
JavaScript
Avoids third-party cookies
Third-party cookies may be blocked in some contexts. Learn more about preparing for third-party cookie restrictions.
Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`).
Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output. Learn more about proper list structure.
Minify JavaScript
Minifying JavaScript files can reduce payload sizes and script parse time. Learn how to minify JavaScript.
Remove duplicate modules in JavaScript bundles
Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.
Document has a meta description
Meta descriptions may be included in search results to concisely summarize page content. Learn more about the meta description.
Links have descriptive text
Descriptive link text helps search engines understand your content. Learn how to make links more accessible.
Duplicated JavaScript
Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.
Legacy JavaScript
Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren't necessary for modern browsers. Consider modifying your JavaScript build process...
CSS / Fonts
All text remains visible during webfont loads
Leverage the `font-display` CSS feature to ensure text is user-visible while webfonts are loading. Learn more about `font-display`.
Minify CSS
Minifying CSS files can reduce network payload sizes. Learn how to minify CSS.
Document uses legible font sizes
Font sizes less than 12px are too small to be legible and require mobile visitors to “pinch to zoom” in order to read. Strive to have >60% of page text ≥12px. Learn more about legi...
98.39% legible text
Font display
Consider setting font-display to swap or optional to ensure text is consistently visible. swap can be further optimized to mitigate layout shifts with font metric overrides.
Network
Enable text compression
Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes. Learn more about text compression.
Use HTTP/2
HTTP/2 offers many benefits over HTTP/1.1, including binary headers and multiplexing. Learn more about HTTP/2.
SEO
Links are crawlable
Search engines may use `href` attributes on links to crawl websites. Ensure that the `href` attribute of anchor elements links to an appropriate destination, so more pages of the s...
Page isn’t blocked from indexing
Search engines are unable to include your pages in search results if they don't have permission to crawl them. Learn more about crawler directives.
Document has a valid `hreflang`
hreflang links tell search engines what version of a page they should list in search results for a given language or region. Learn more about `hreflang`.
Document has a valid `rel=canonical`
Canonical links suggest which URL to show in search results. Learn more about canonical links.
Accessibility
`[aria-*]` attributes match their roles
Each ARIA `role` supports a specific subset of `aria-*` attributes. Mismatching these invalidates the `aria-*` attributes. Learn how to match ARIA attributes to their roles.
Uses ARIA roles only on compatible elements
Many HTML elements can only be assigned certain ARIA roles. Using ARIA roles where they are not allowed can interfere with the accessibility of the web page. Learn more about ARIA...
`button`, `link`, and `menuitem` elements have accessible names
When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn how to make command...
ARIA attributes are used as specified for the element's role
Some ARIA attributes are only allowed on an element under certain conditions. Learn more about conditional ARIA attributes.
Deprecated ARIA roles were not used
Deprecated ARIA roles may not be processed correctly by assistive technology. Learn more about deprecated ARIA roles.
`[aria-hidden="true"]` is not present on the document `<body>`
Assistive technologies, like screen readers, work inconsistently when `aria-hidden="true"` is set on the document ``. Learn how `aria-hidden` affects the document body.
`[aria-hidden="true"]` elements do not contain focusable descendents
Focusable descendents within an `aria-hidden="true"]` element prevent those interactive elements from being available to users of assistive technologies like screen readers. [Learn...
Elements use only permitted ARIA attributes
Using ARIA attributes in roles where they are prohibited can mean that important information is not communicated to users of assistive technologies. Learn more about prohibited ARI...
`[role]`s have all required `[aria-*]` attributes
Some ARIA roles have required attributes that describe the state of the element to screen readers. Learn more about roles and required attributes.
`[role]` values are valid
ARIA roles must have valid values in order to perform their intended accessibility functions. Learn more about valid ARIA roles.
`[aria-*]` attributes have valid values
Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid values. Learn more about valid values for ARIA attributes.
`[aria-*]` attributes are valid and not misspelled
Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid names. Learn more about valid ARIA attributes.
Buttons have an accessible name
When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers. Learn how to make buttons more acces...
Background and foreground colors have a sufficient contrast ratio
Low-contrast text is difficult or impossible for many users to read. Learn how to provide sufficient color contrast.
Heading elements appear in a sequentially-descending order
Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. Learn mo...
Links have a discernible name
Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to ma...
No element has a `[tabindex]` value greater than 0
A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies....
Best Practices
No browser errors logged to the console
Errors logged to the console indicate unresolved problems. They can come from network request failures and other browser concerns. Learn more about this errors in console diagnosti...
Page has valid source maps
Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider de...
Other checks
Preconnect to required origins
Consider adding `preconnect` or `dns-prefetch` resource hints to establish early connections to important third-party origins. Learn how to preconnect to required origins.
Document has a `<title>` element
The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search. Learn more about documen...
Links are distinguishable without relying on color.
Low-contrast text is difficult or impossible for many users to read. Link text that is discernible improves the experience for users with low vision. Learn how to make links distin...
List items (`<li>`) are contained within `<ul>`, `<ol>` or `<menu>` parent elements
Screen readers require list items (``) to be contained within a parent ``, `` or `` to be announced properly. Learn more about proper list structure.
Touch targets have sufficient size and spacing.
Touch targets with sufficient size and spacing help users who may have difficulty targeting small controls to activate the targets. Learn more about touch targets.
Use video formats for animated content
Large GIFs are inefficient for delivering animated content. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes. Lea...
No issues in the `Issues` panel in Chrome Devtools
Issues logged to the `Issues` panel in Chrome Devtools indicate unresolved problems. They can come from network request failures, insufficient security controls, and other browser...
Avoids `document.write()`
For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. Learn how to avoid document.write().
Allows users to paste into input fields
Preventing input pasting is a bad practice for the UX, and weakens security by blocking password managers.Learn more about user-friendly input fields.
Uses passive listeners to improve scrolling performance
Consider marking your touch and wheel event listeners as `passive` to improve your page's scroll performance. Learn more about adopting passive event listeners.
Page has successful HTTP status code
Pages with unsuccessful HTTP status codes may not be indexed properly. Learn more about HTTP status codes.
Forced reflow
A forced reflow occurs when JavaScript queries geometric properties (such as offsetWidth) after styles have been invalidated by a change to the DOM state. This can result in poor p...
Modern HTTP
HTTP/2 and HTTP/3 offer many benefits over HTTP/1.1, such as multiplexing. Learn more about using modern HTTP.
Security
Uses HTTPS
All sites should be protected with HTTPS, even ones that don't handle sensitive data. This includes avoiding mixed content, where some resources are loaded over HTTP despite the in...
Avoids requesting the geolocation permission on page load
Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to a user action instead. Learn more about the geolocation per...
Avoids requesting the notification permission on page load
Users are mistrustful of or confused by sites that request to send notifications without context. Consider tying the request to user gestures instead. Learn more about responsibly...
HTML / Page basics
Has a `<meta name="viewport">` tag with `width` or `initial-scale`
A `` not only optimizes your app for mobile screen sizes, but also prevents a 300 millisecond delay to user input. Learn more about using the viewport meta tag.
`<html>` element has a `[lang]` attribute
If a page doesn't specify a `lang` attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page is...
`<html>` element has a valid value for its `[lang]` attribute
Specifying a valid BCP 47 language helps screen readers announce text properly. Learn how to use the `lang` attribute.
`[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5.
Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page. Learn more about the viewport meta tag.
Page has the HTML doctype
Specifying a doctype prevents the browser from switching to quirks-mode. Learn more about the doctype declaration.
Properly defines charset
A character encoding declaration is required. It can be done with a `` tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. Learn more about declari...
Optimize viewport for mobile
Tap interactions may be delayed by up to 300 ms if the viewport is not optimized for mobile.
Performance
Cumulative Layout Shift
Cumulative Layout Shift measures the movement of visible elements within the viewport. Learn more about the Cumulative Layout Shift metric.
0.003
Initial server response time was short
Keep the server response time for the main document short because all other requests depend on it. Learn more about the Time to First Byte metric.
Root document took 150 ms
Images
Displays images with correct aspect ratio
Image display dimensions should match natural aspect ratio. Learn more about image aspect ratio.
Serves images with appropriate resolution
Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity. Learn how to provide responsive images.
Image elements have explicit `width` and `height`
Set an explicit width and height on image elements to reduce layout shifts and improve CLS. Learn how to set image dimensions
Preload Largest Contentful Paint image
If the LCP element is dynamically added to the page, you should preload the image in order to improve LCP. Learn more about preloading LCP elements.
Image elements have `[alt]` attributes
Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute. Learn more about the `alt` attribute.
Image elements do not have `[alt]` attributes that are redundant text.
Informative elements should aim for short, descriptive alternative text. Alternative text that is exactly the same as the text adjacent to the link or image is potentially confusin...
Serve images in next-gen formats
Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more about modern image formats.
Efficiently encode images
Optimized images load faster and consume less cellular data. Learn how to efficiently encode images.
Properly size images
Serve images that are appropriately-sized to save cellular data and improve load time. Learn how to size images.
Improve image delivery
Reducing the download time of images can improve the perceived load time of the page and LCP. Learn more about optimizing image size
JavaScript
Avoids third-party cookies
Third-party cookies may be blocked in some contexts. Learn more about preparing for third-party cookie restrictions.
Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`).
Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output. Learn more about proper list structure.
Minify JavaScript
Minifying JavaScript files can reduce payload sizes and script parse time. Learn how to minify JavaScript.
Remove duplicate modules in JavaScript bundles
Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.
Document has a meta description
Meta descriptions may be included in search results to concisely summarize page content. Learn more about the meta description.
Links have descriptive text
Descriptive link text helps search engines understand your content. Learn how to make links more accessible.
Duplicated JavaScript
Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.
Legacy JavaScript
Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren't necessary for modern browsers. Consider modifying your JavaScript build process...
CSS / Fonts
All text remains visible during webfont loads
Leverage the `font-display` CSS feature to ensure text is user-visible while webfonts are loading. Learn more about `font-display`.
Minify CSS
Minifying CSS files can reduce network payload sizes. Learn how to minify CSS.
Font display
Consider setting font-display to swap or optional to ensure text is consistently visible. swap can be further optimized to mitigate layout shifts with font metric overrides.
Network
Enable text compression
Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes. Learn more about text compression.
Use HTTP/2
HTTP/2 offers many benefits over HTTP/1.1, including binary headers and multiplexing. Learn more about HTTP/2.
SEO
Links are crawlable
Search engines may use `href` attributes on links to crawl websites. Ensure that the `href` attribute of anchor elements links to an appropriate destination, so more pages of the s...
Page isn’t blocked from indexing
Search engines are unable to include your pages in search results if they don't have permission to crawl them. Learn more about crawler directives.
robots.txt is valid
If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed. Learn more about robots.txt.
Document has a valid `hreflang`
hreflang links tell search engines what version of a page they should list in search results for a given language or region. Learn more about `hreflang`.
Document has a valid `rel=canonical`
Canonical links suggest which URL to show in search results. Learn more about canonical links.
Accessibility
`[aria-*]` attributes match their roles
Each ARIA `role` supports a specific subset of `aria-*` attributes. Mismatching these invalidates the `aria-*` attributes. Learn how to match ARIA attributes to their roles.
Uses ARIA roles only on compatible elements
Many HTML elements can only be assigned certain ARIA roles. Using ARIA roles where they are not allowed can interfere with the accessibility of the web page. Learn more about ARIA...
`button`, `link`, and `menuitem` elements have accessible names
When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn how to make command...
ARIA attributes are used as specified for the element's role
Some ARIA attributes are only allowed on an element under certain conditions. Learn more about conditional ARIA attributes.
Deprecated ARIA roles were not used
Deprecated ARIA roles may not be processed correctly by assistive technology. Learn more about deprecated ARIA roles.
Elements with `role="dialog"` or `role="alertdialog"` have accessible names.
ARIA dialog elements without accessible names may prevent screen readers users from discerning the purpose of these elements. Learn how to make ARIA dialog elements more accessible...
`[aria-hidden="true"]` is not present on the document `<body>`
Assistive technologies, like screen readers, work inconsistently when `aria-hidden="true"` is set on the document ``. Learn how `aria-hidden` affects the document body.
`[aria-hidden="true"]` elements do not contain focusable descendents
Focusable descendents within an `aria-hidden="true"]` element prevent those interactive elements from being available to users of assistive technologies like screen readers. [Learn...
Elements use only permitted ARIA attributes
Using ARIA attributes in roles where they are prohibited can mean that important information is not communicated to users of assistive technologies. Learn more about prohibited ARI...
`[role]`s have all required `[aria-*]` attributes
Some ARIA roles have required attributes that describe the state of the element to screen readers. Learn more about roles and required attributes.
Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children.
Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions. Learn more about roles and required children elements.
`[role]`s are contained by their required parent element
Some ARIA child roles must be contained by specific parent roles to properly perform their intended accessibility functions. Learn more about ARIA roles and required parent element...
`[role]` values are valid
ARIA roles must have valid values in order to perform their intended accessibility functions. Learn more about valid ARIA roles.
`[aria-*]` attributes have valid values
Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid values. Learn more about valid values for ARIA attributes.
`[aria-*]` attributes are valid and not misspelled
Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid names. Learn more about valid ARIA attributes.
Buttons have an accessible name
When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers. Learn how to make buttons more acces...
Background and foreground colors have a sufficient contrast ratio
Low-contrast text is difficult or impossible for many users to read. Learn how to provide sufficient color contrast.
Heading elements appear in a sequentially-descending order
Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. Learn mo...
Links have a discernible name
Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to ma...
No element has a `[tabindex]` value greater than 0
A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies....
Best Practices
No browser errors logged to the console
Errors logged to the console indicate unresolved problems. They can come from network request failures and other browser concerns. Learn more about this errors in console diagnosti...
Page has valid source maps
Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider de...
Other checks
Document has a `<title>` element
The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search. Learn more about documen...
Links are distinguishable without relying on color.
Low-contrast text is difficult or impossible for many users to read. Link text that is discernible improves the experience for users with low vision. Learn how to make links distin...
List items (`<li>`) are contained within `<ul>`, `<ol>` or `<menu>` parent elements
Screen readers require list items (``) to be contained within a parent ``, `` or `` to be announced properly. Learn more about proper list structure.
Touch targets have sufficient size and spacing.
Touch targets with sufficient size and spacing help users who may have difficulty targeting small controls to activate the targets. Learn more about touch targets.
Use video formats for animated content
Large GIFs are inefficient for delivering animated content. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes. Lea...
No issues in the `Issues` panel in Chrome Devtools
Issues logged to the `Issues` panel in Chrome Devtools indicate unresolved problems. They can come from network request failures, insufficient security controls, and other browser...
Avoids `document.write()`
For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. Learn how to avoid document.write().
Allows users to paste into input fields
Preventing input pasting is a bad practice for the UX, and weakens security by blocking password managers.Learn more about user-friendly input fields.
Uses passive listeners to improve scrolling performance
Consider marking your touch and wheel event listeners as `passive` to improve your page's scroll performance. Learn more about adopting passive event listeners.
Page has successful HTTP status code
Pages with unsuccessful HTTP status codes may not be indexed properly. Learn more about HTTP status codes.
Modern HTTP
HTTP/2 and HTTP/3 offer many benefits over HTTP/1.1, such as multiplexing. Learn more about using modern HTTP.
Screenshot-Vorschau