In order to pass this test you must add an alt attribute to every <img> tag used into your webpage.

An image with an alternate text specified is inserted using the following HTML line:

<img src="image.png" alt="text_to_describe_your_image">

Remember that the point of alt text is to provide the same functional information that a visual user would see. Search engines, users who disabled images in their browsers and other agents who are unable to see the images on your webpage can read the alt attributes assigned to the image since they cannot view it.

Learn more about optimizing images for SEO.

In order to resolve this problem you are advised to:

• use gzip compression
• move all CSS style rules into a single, external and minified CSS file
• minify all JS files and, if possible, try combining them into a single external JS file
• use CSS layouts

In order to pass this test, you need to reduce the DOM size.

First, you need to identify the causes of an excessive number of DOM nodes. They can be: poorly coded plugins or themes, DOM nodes created dynamically via JavaScript, page builders that generate bloated HTML, copy-paste text into a WYSIWYG editor, hidden elements via CSS, etc.

Second, you need to remove the unnecessary tags and even refactor or rewrite some parts of the code/template. Another workarounds can be: code splitting (create more pages instead of one long page), consider to lazy load some parts of your website in order to speed up the initial rendering, implement infinite scroll, improve page rendering with content visibility (with the CSS content-visibility property, the browser will skip the styling, layout, and paint until the user scrolls down the page).

In order to pass this test, you have to remove the unnecessary image metadata (additional information which is stored along with the image). There are literally hundreds of metadata tags, but most of them (like camera model and settings, exposure, creation date, etc) are useless to site visitors and isn't required by browsers to render images. However, a few metadata tags can still be useful and may help Search Engine bots to better understand your images:

• GPS tags - These define where the image was taken providing location information that might help with local SEO. If you have a location-based business, tag your image with the GPS coordinates of your premises.
• Author/Owner Name - Add your brand name (or your own name) here because it may influence the image being shown when someone searches your brand in Google Images.
• Image Description - Just like an ALT description, the image description metadata tag can provide information pertaining to what the content of the image is about.

Media queries allow you to style elements for specific devices (smartphones, tablets, desktop computers) by using attributes like width, height, resolution, aspect ratio, orientation or color. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

Example:

<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 960px)" 
href="480-960.css" />
 
<!-- OR -->
@media screen and (min-width: 480px) and (max-width: 960px) {
    #header {
        display: none;
    }
}

A @media rule specifies the target media types of a set of statements. In the example above, we are specifying the media type screen. The max-width and min-width features are telling the browser that at any screen size larger than 480px, but smaller than 960px, hide any elements with id="header".