Web Performance

This page brings together seven free tools for monitoring and lightening site loading. Page weight adds up assets and shows load time, Performance budget sets ceilings per resource type, and Responsive images produces srcset and sizes. Lazy-loading audit, Critical CSS, Preload hints, and Site speed test complete the set. They help web teams prioritise optimisations. They require no sign-up and run in the browser.

Start with Page weight to see the total volume. Performance budget then helps set ceilings. Responsive images produces srcset and sizes for an image, while Lazy-loading audit finds images blocking the first render. Critical CSS isolates above-the-fold rules, Preload hints composes link rel preload tags, and Site speed test measures several stages. Begin with diagnosis, then move to fixes.

How to use

  1. Start with Page weight to add up assets and locate the total volume before fixing anything.
  2. Then set limits with Performance budget, and handle images with Responsive images and Lazy-loading audit.
  3. For first render, use Critical CSS, then Preload hints to compose the useful link rel preload tags.
  4. Finish with Site speed test to measure DNS, connection, first byte, and download, then compare with the first diagnosis.

Frequently asked questions

Which tool gives a view of total weight?

Page weight adds up your assets and shows load time. It is a good starting point for understanding volume. The tool is free and requires no sign-up.

What is a performance budget for?

Performance budget sets ceilings per resource type. It helps keep clear limits during development. The tool is free, requires no sign-up, and stays in your browser.

Can I prepare responsive images?

Yes. Responsive images produces srcset and sizes for an image. Lazy-loading audit can then help find images blocking the first render. Both tools are free and require no sign-up.

In what order should I handle images on a slow page?

Measure volume first with Page weight. Then prepare variants with Responsive images, and check with Lazy-loading audit which images block the first render. Keep Performance budget to set ceilings before adding new assets. This sequence links measurement, preparation, and checks.

When should I use Critical CSS and Preload hints?

Critical CSS isolates above-the-fold rules to help the first render happen sooner. Preload hints composes the useful link rel preload tags for important resources. Use them after diagnosis, then check the effect with Site speed test. This combination supports a faster first view after the diagnosis.

Tools in the same category