📋 Instructions
In this hands-on exercise, you will learn how to measure and optimize the Largest Contentful Paint (LCP) metric using browser DevTools.
🔍 Measuring LCP
- 🛠️ Open the browser DevTools by pressing
F12orCtrl+Shift+I(Windows/Linux) orCmd+Opt+I(Mac). - 📊 Navigate to the "Performance" tab.
- 🔄 Click the "Reload" button (circular arrow) to start recording and reload the page.
- ⏱️ After the page loads, the recording will stop automatically.
- 🔍 Look for the "LCP" marker in the "Timings" section of the recording.
- 👆 Click on the LCP marker to see details about the LCP element in the summary panel below.
- 🐢 Note: You can use CPU throttling to simulate slower CPU if needed.
- 🔎 Check the console for LCP measurements, there is another way to identify the LCP element on this page. Observe its code.
- ⚡ Click the "Optimize LCP" button below to apply optimizations. Observe the changes in the image tag.
- 💾 To save the optimized version use the "Overrides" feature in DevTools:
- 📂 In DevTools, go to the "Sources" tab
- 🖱️ Right-click in the navigator panel on the index.html file and select "Override content"
- 📁 Select a folder and grant permission
- ✏️ Open the optimized index.html file in the editor panel and add the optimized content.
- 📋 Right-click on image element in the elements tool and copy the optimized element
- 🔄 Refresh the page to see the changes.
- 📈 Record the LCP time again and compare the improvement.
🛠️ Common LCP Optimization Techniques
- 🖼️ Optimize image loading: Use properly sized images, modern formats (WebP), and remove lazy-loading from above-the-fold content.
- ⏱️ Preload critical resources: Use
<link rel="preload">for important images and fonts. - ⚡ Reduce server response time: Implement efficient caching and use a CDN.
- 🚫 Eliminate render-blocking resources: Defer non-critical CSS and JavaScript.
- 💄 Implement critical CSS: Inline critical CSS to render above-the-fold content quickly.