DEV Community

Cover image for Your Website Looks Good — But Is It Actually Good?
Ishwor karki
Ishwor karki

Posted on

Your Website Looks Good — But Is It Actually Good?

A Beginner’s Guide to Fixing Hidden Web Issues Using Lighthouse (with React in Mind)

What is Lighthouse?

Lighthouse is a tool inside Chrome DevTools that audits your site across four major areas:

  • ⚡ Performance
  • ♿ Accessibility
  • 🧠 Best Practices
  • 🔍 SEO

Even if your React site looks beautiful, Lighthouse can show serious issues hurting performance, usability, and SEO — issues many beginners miss.

⚡ Performance — Speed = Retention + Ranking

A slow site makes users leave and hurts your Google ranking. React apps grow heavy fast—Lighthouse helps you trim the fat.

Lazy-load images

<img src="about.jpg" loading="lazy" alt="About Us" />
Enter fullscreen mode Exit fullscreen mode

Why? Loads images only when needed, improving initial page speed.

Compress and convert images to WebP
use Squoosh
Why WebP? It's a modern image format that reduces file size by 30–80% without visible quality loss. Smaller images = faster load.

Define width and height

<img src="banner.webp" width="1200" height="600" />
Enter fullscreen mode Exit fullscreen mode

Why? Prevents layout shifts (CLS), making your page load smoother and more stable.

Remove unused CSS and JS

npm run analyze
Enter fullscreen mode Exit fullscreen mode

Why? Reduces page weight. Dead code = wasted bandwidth.

Code-split components

const Home = React.lazy(() => import('./Home'));
Enter fullscreen mode Exit fullscreen mode

Why? Only loads what's needed per page. Speeds up initial render.

Instant Boosters

  • Turn on Brotli or gzip compression
    Why? Compresses files before sending to browser = faster transfer.

  • Add preconnect to external services:

<link rel="preconnect" href="https://fonts.googleapis.com" />
Enter fullscreen mode Exit fullscreen mode

Accessibility — Design for Everyone

Accessibility isn't just for screen readers—it's about universal usability.

Use semantic HTML

<main> <section> <nav> <footer>
Enter fullscreen mode Exit fullscreen mode

Why? Helps screen readers and improves SEO context.

Label form fields

<label for="email">Email</label>
<input type="email" id="email" />
Enter fullscreen mode Exit fullscreen mode

Why? Allows users with assistive tech to understand form inputs.

Fix color contrast
Use 👉 WebAIM Contrast Checker

Why? Poor contrast makes text unreadable for many users, especially with vision challenges.

Use ARIA sparingly

<div role="alert" aria-live="assertive">Error submitting form</div>
Enter fullscreen mode Exit fullscreen mode

Why? Gives screen readers important context when native HTML doesn't.

Best Practices — Secure, Clean, Scalable Code

Lighthouse flags security risks and bad habits that could hurt your users or make your app harder to maintain.

Use HTTPS
Why? Ensures secure connection. Browsers block some features on HTTP.

Set environment variables

NODE_ENV=production
Why? Ensures optimized builds by tools like React and Webpack.

Import only what you use

// Bad
import _ from 'lodash';
// Good
import debounce from 'lodash/debounce';
Enter fullscreen mode Exit fullscreen mode

Why? Smaller bundle sizes = faster loads.

Avoid inline scripts and styles
Why? Causes render-blocking and security risks (e.g., XSS).

SEO — Be Found. Be Clicked

Even if your content is gold, if Google can’t read your site, it won’t rank.

Use title & meta tags

<title>My React App</title>
<meta name="description" content="The best place to learn code" />
Enter fullscreen mode Exit fullscreen mode

Why? Helps search engines understand your page and show better previews.

Use a single


per page
Why? Search engines use it to understand your page’s main topic.

Alt text on images

<img src="hero.webp" alt="Welcome banner" />
Enter fullscreen mode Exit fullscreen mode

Why? Aids screen readers and improves image SEO.

Use clean, readable URLs
/product/shoes > /product?id=123abc

Why? Easier to index and more user-friendly.

After following all guidelines

Lighthouse report

Why Performance Really Matters

  • 40% of users bounce if your site takes more than 3 seconds to load
  • Google ranks faster sites higher
  • Slow sites frustrate users and hurt conversions
  • On mobile, speed is even more critical

That’s a Wrap!

Open DevTools → Lighthouse → Analyze pageload
Then follow this blog to clean up and ship smarter.
You’ll build faster, more inclusive, and SEO-ready apps — without guessing.

Top comments (0)