Chrome DevTools AI Assistant – Web Development Made Easy

In the rapidly changing landscape of web development, keeping up with performance challenges can be overwhelming. Fortunately, the Chrome DevTools AI Assistant is designed to simplify this process. This innovative tool enhances debugging and optimization, making it easier for developers to identify issues and improve website performance. Whether you want to optimize load times, enhance your Core Web Vitals, or streamline your code, the DevTools AI Assistant offers various features to accelerate your workflow and enhance user experience. This article will explore how this state-of-the-art tool can help you effortlessly optimize your web projects.

Introduction

Over the past few years, I have created several websites, always striving to make them fast, responsive, and user-friendly. Although I have some knowledge of web development, I don’t consider myself an expert. While working on these websites has been enjoyable, putting them into production has often been challenging. My struggles primarily have been tools like Google PageSpeed Insights, GTmetrix, and similar platforms.

Although the websites appeared polished and appealing, the scores reported by the tools mentioned above were relatively poor, particularly for mobile devices. I have consistently struggled to pass Google’s Core Web Vitals Assessment. There were always issues with LCP (Largest Contentful Paint), prolonged TTFB (Time to First Byte), excessive render-blocking elements, and numerous similar problems. I made significant efforts to address these issues, but at times, I found it challenging to understand them fully.

The introduction of the Chrome DevTools AI Assistant in Google’s Chrome browser was a game-changer for me. Previously, identifying the reasons for failing the Core Web Vitals assessment was a painful and daunting task. However, the AI Assistant quickly provided me with the insights I needed. In this article, I will demonstrate how to use this tool and share my experience in debugging the reasons behind my low LCP score.

Enable Chrome DevTools AI Assistant

To enable AI Assistant in Chrome, click the Settings⁽¹⁾ button and select More tools⁽²⁾ from the menu. Then click on Developer tools⁽³⁾.

Once you have Developer tools opened, click on the Settings⁽¹⁾ button:

Within Developer tools settings, click on AI innovations⁽¹⁾ option:

Now enable both Console Insights⁽¹⁾ and Ai assistance⁽²⁾ toggles:

With that, you have successfully enabled Chrome DevTools AI Assistant. In the following section, I will show you how I’ve used it for image optimization for faster LCP on this website.

Use Case: LCP Problem on Zack’s Website

When I completed the last version of this website, I had a pretty good score for Desktop on Google PageSpeed Insight, but my Mobile score was terrible, as you can observe in the picture below:

As you can see, First Contentful Paint and Largest Contentful Paint scores are horrible. When I checked the details, the element causing the problem was revealed to me:

And here is where I got confused. I did everything by the book, yet this image was still causing the problem. I have preloaded the image in my code since it is the above-the-fold element, and I used the fetchpriority=”high” parameter to signal the browser to load that element as soon as possible:

<link rel="preload" as="image" href="https://zacks.eu/wp-content/uploads/2025/01/000-ZFS_Mirror_On_Linux-Featured_Image.webp" fetchpriority="high">

After wasting many hours trying to figure out what was going on, I stumbled upon an article mentioning Chrome DevTools AI Assistant, and I decided to give it a try. Let’s see what happened.

From the PageSpeed Insights results above, the element causing the problem is the following:

<div class="x-bg-layer-lower-image" style=" background-image: url(https://zacks.eu/wp-content/uploads/2025/01/000-ZFS_Mirror_On_Linux-Featured_Image.webp); background-repeat: no-repeat; background-position: center; background-size: cover;"></div>

For those of you who already see the problem, kudos! But, I repeat, I am no expert in web development. So, here is what I did. With the Developer tools open, I first clicked on the Toggle device toolbar⁽¹⁾ and switched the view to mobile. Then, I clicked on the Element selector⁽²⁾ and selected the element causing the problem⁽³⁾. This revealed that element in the Elements tab⁽⁴⁾. Once I clicked on it, a small icon appeared in the bottom right part of the screen. The icon, once you click on it, starts the AI assistance⁽⁵⁾:

Once I clicked on the icon, an AI assistance tab opened, so I asked the following question:

This element is causing a high LCP time. Can you please explain why?

It took some time for AI assistant to analyze the prompt and once it did, it provided the following answer:

• Resize the Image: Resize the image to be closer to the displayed size (around 378px x 300px). This will significantly reduce the file size.
• Use <img> Tag: Consider using an <img> tag instead of a background image. This will allow the browser to prioritize the image for LCP calculation and potentially use lazy loading.
• Use srcset attribute: If you decide to use <img> tag, use the srcset attribute to provide different image sizes for different screen sizes.
• Compress the image: Compress the image to reduce the file size.
• Consider using a CDN: Consider using a CDN to serve the image from a server closer to the user.
• Consider using fetchpriority="high": If you decide to use <img> tag, consider using fetchpriority="high" to prioritize the image loading.
• Consider using loading="lazy": If you decide to use <img> tag, consider using loading="lazy" to lazy load the image.
• Consider using content-visibility: auto: Consider using content-visibility: auto on the parent element to improve the rendering performance.
• Consider using will-change: Consider using will-change on the element to improve the rendering performance.
• Consider using view transitions: If you are changing the image, consider using view transitions to improve the user experience.

As you can see, the AI Assistant provided lots of valuable insights. One thing that caught my attention is the Consider using fetchpriority="high" suggestion. So I mentioned that in my next question since I already have that option in place:

I already have fetchpriority="high" set for the image in question. Here is a block of code 
where it is set:
<link rel="preload" as="image" href="https://zacks.eu/wp-content/uploads/2025/01/000-ZFS_Mirror_On_Linux-Featured_Image.webp" fetchpriority="high">

AI Assistant again provided lots of valuable insights and I will highlight the one which, by the looks of it, hit the core of the problem:

• Use <img> Tag (HIGHLY RECOMMENDED): Switch from using a background image to an <img> tag. This will:
  • Make the image a candidate for LCP.
  • Allow the browser to potentially use lazy loading if needed.
  • Allow the use of srcset for responsive images.
  • Allow the use of fetchpriority="high" directly on the <img> tag.

As a summary, the AI Assistant also provided the following:

In summary: Preloading is a good optimization, but it's not a substitute for proper image
optimization and using the correct HTML element (<img>) for content images. The primary
focus should be on resizing the image and switching to an <img> tag.

And there you go. I have used <div> element and image as a background. After further examination, I found out the background images are applied via CSS, and the browser doesn’t know about them until it has parsed CSS. Furthermore, background images are not considered as LCP candidates, while images contained in <img> tags are. Also <img> elements are part of the DOM structure and the browser doesn’t need to wait for CSS to be parsed to discover the image.

Eventually, I converted the problematic element from a <div> to an <img>, which resulted in a slight improvement in my Core Web Vitals score. However, this change did not eliminate all my issues; many factors still affect my site’s performance. In my opinion, if you’re not a web development expert and you’re not creating a simple HTML website with viewport-optimized CSS, and without relying on any third-party resources, you’ll likely never achieve a perfect score of 100 in Core Web Vitals. A score in the 70-85 range is more realistic, and I believe that is acceptable.

Conclusion

Since we’ve entered the “AI Era,” I believe there will be more AI tools for diagnosing LCP and similar issues related to Core Web Vitals. Chrome DevTools AI Assistant has an edge over others because it is built into the Chrome browser. It is specifically built as an additional feature to already robust development tools and to help you with the specifics of problems you might encounter when developing websites.

The Chrome DevTools AI Assistant is more than just a tool—it’s a game-changer for web developers seeking to enhance their workflow and website performance. By leveraging its AI-driven insights, you can simplify complex debugging processes, optimize key metrics like LCP, and deliver a seamless user experience. Whether you’re a seasoned developer or just starting, this powerful assistant empowers you to tackle challenges confidently and efficiently. As web development continues to evolve, tools like this ensure you stay ahead of the curve. Start exploring the possibilities today and take your projects to the next level!