This issue can be fixed by using responsive images, which relies on creating multiple versions of each image, that are served via CSS media queries depending on the user's viewport dimensions.

Another solution can be to use vector-based image formats like SVG. SVG images scale appropriately to any size, without wasting unnecessary bandwidth. Also consider image CDNs that can help serve responsive images.

There are two common causes for an incorrect image aspect ratio:

• An image is set to explicit width and height values that differ from the source image's dimensions.
• An image is set to a width and height as a percentage of a variably-sized container.

To help avoid these issues, consider using an image CDN, to help automate the process of creating different size versions of your image.

Also check any CSS that can affects the image's aspect ratio - if you're having trouble finding the CSS that's causing the incorrect aspect ratio, Chrome DevTools can show you the CSS declarations that affect a given image.

Finally, check the image's width and height attributes in the HTML. When possible, it's good practice to specify each image's width and height attributes in your HTML so that the browser can allocate space for the image. This approach helps to ensure that content below the image doesn't shift once the image is loaded.

• Improving website loading times
• Reducing bandwidth costs
• Increasing content availability and redundancy
• Improving website security

In order to pass this test, convert all the images listed in this report into a modern image format such as JPEG 2000, JPEG XR or WebP.

It's important to understand that the modern image formats, like WebP, are not yet widely supported across all devices and browsers. You can find here a full list of supported browsers and devices for the WebP format.

If your target audience falls within one of the unsupported browser/device categories, you should serve optimized fall-back images in the original JPEG/PNG format so that your users don't see a broken or badly designed page:

<!--Before:-->
<img src="image.jpg" alt="">

<!--After:-->
<picture>
	<source type="image/webp" srcset="image.webp">
	<img src="image.jpg" alt="">
</picture>

The browser uses the first listed source that's in a format it supports. If the browser does not support any of the formats listed in the "source" tags, it falls back to loading the image specified by the "img" tag.

In order to pass this test, you have to reduce the impact of render-blocking resources.

First, you have to identify what's critical and what's not. You can use the Chrome DevTools (Coverage tab) to identify non-critical CSS and JS.

Once you've identified critical code, you can try the below methods to eliminate render-blocking resources:

• inline critical JS within a script tag in your HTML document
• inline critical CSS required for the first paint inside a style block in the head of the HTML document
• move the script and link tags at the end of the HTML document
• add async or defer attributes to non-critical script or link tags
• split CSS styles into different files, organized by media query
• compress and minify your text-based resources

HTML5 Microdata is an easy way to add semantic markup to your web pages. Search engines rely on this markup to improve the display of search results, making it easier for people to find the right web pages.

Here is a simple example of how to use HTML5 microdata in your contact web page:

<div itemscope itemtype="http://schema.org/Person">
   <span itemprop="name">Joe Doe</span>
   <span itemprop="company">The Example Company</span>
   <span itemprop="tel">604-555-1234</span>
   <a itemprop="email" href="mailto:joe.doe@example.com">
      joe.doe@example.com
   </a>
</div>