# Measuring website performance using Chrome DevTools

> Use the Network and Performance panels in Chrome DevTools to see how your pages load and find what slows them down.

Source: https://helpcenter.ruachost.com/apps/guides/measuring-website-performance-using-google-chrome-developer-tools/

Google Chrome includes **Developer Tools**, a built‑in feature that helps web developers debug and analyze websites. One of its most powerful uses is measuring performance, identifying bottlenecks in page load times and resource usage. On **ruachost.com**, you can use Chrome DevTools to optimize your site’s speed.

## Why Use Chrome DevTools?

- Provides real‑time insights into how your site loads.
- Breaks down each request (HTML, CSS, JS, images, fonts).
- Helps identify slow server responses, large files, or inefficient scripts.
- Essential for diagnosing performance issues before deploying changes.

## Steps to Measure Performance

1. **Open Developer Tools.**

   - On Windows/Linux → Press `Ctrl+Shift+I`.
   - On macOS → Press `Option+Command+I`.
2. **Go to the Network Tab.**

   - Navigate to the page you want to test.
   - Refresh the page with DevTools open.
   - Chrome will list all connections/resources loaded by the page.
3. **Review Resource Information.** Each resource shows:

   - **Name** → URL or file name.
   - **Method** → HTTP method (GET/POST).
   - **Status** → HTTP status code (200, 404, etc.).
   - **Type** → MIME type (HTML, CSS, JS, image).
   - **Size** → File size received by the browser.
   - **Time** → Total time to retrieve the resource.
   - **Timeline** → Waterfall chart showing when each request occurred.
4. **Analyze Timing Breakdown.** Hover over a waterfall bar to see:

   - **Blocking** → DNS lookup, SSL handshake, connection setup.
   - **Sending** → Time to send the request.
   - **Waiting** → Time server spent generating the response.
   - **Receiving** → Time to download the content.
5. **Check Page Load Summary.** At the bottom of the Network tab, Chrome shows:

   - Total number of requests.
   - Total size of the page (including resources).
   - Overall load time.
   - Key events:

     - **DOMContentLoaded** → Time until HTML is parsed and DOM is ready.
     - **Load** → Time until all resources (CSS, JS, images) are fully loaded.

## Optimization Tips

- Reduce **waiting time** by optimizing server response (caching, database queries).
- Compress and minify CSS/JS files.
- Optimize images (use WebP or properly compressed JPEG/PNG).
- Use a CDN to serve static files closer to users.
- Limit the number of requests by combining files where possible.