๐๐ฒ๐ฏ๐๐ด ๐ฆ๐น๐ผ๐ ๐ฃ๐ฎ๐ด๐ฒ ๐๐ผ๐ฎ๐ฑ๐ ๐ช๐ถ๐๐ต ๐๐ฒ๐๐ง๐ผ๐ผ๐น๐
Slow pages lose visitors. 53% of mobile users leave if a site takes longer than 3 seconds to load. Use browser developer tools to find the problem. No extra tools needed.
Watch these four metrics:
- LCP: Keep under 2.5s.
- FID: Keep under 100ms.
- CLS: Keep under 0.1.
- TTFB: Keep under 800ms.
Press F12 to open DevTools. Go to the Performance tab.
- Turn off extensions.
- Pick 6x slowdown for mobile simulation.
- Check the Web Vitals box.
- Hit record and reload the page.
- Stop once the page loads fully.
Look at the flame chart colors:
- Purple: JavaScript blocks the thread.
- Blue: HTML parsing.
- Yellow: Style changes.
- Green: Rendering.
Go to the Network tab. Sort by Time.
- Total weight: Under 1,600KB.
- Images: Under 200KB.
- JS bundles: Under 300KB.
- CSS files: Under 100KB.
Find render-blocking resources.
- Minify CSS.
- Move scripts out of the head.
- Use font-display: swap.
- Defer non-critical scripts.
Use the Layout pane in the Elements panel. Turn on Layout shift regions.
- Give images width and height.
- Stop dynamic content from moving elements.
Follow these steps for big wins:
- Lazy load images below the fold.
- Minify CSS and JS.
- Enable gzip or brotli compression.
Run the test 3 times. Average the results. Use the Lighthouse tab for a final check.
Source: https://dev.to/kui_luo/how-to-debug-slow-page-loads-using-browser-devtools-a-step-by-step-guide-4k95