Pythonium

Python, What else ?

Web performance mistakes that still slow down too many websites (and how to fix them)

At the beginning of a web project, performance is rarely a problem. The website is small, the number of pages is limited, few scripts are loaded and every change feels instant.

Then the project gradually grows. New features appear, libraries are added, analytics tools are integrated, images become more numerous and the code accumulates dependencies.

A few months or a few years later (yes, time flies), the same website can become slow without any obvious cause.

In many cases, it is development choices that gradually degrade the user experience: too much JavaScript, oversized images, poor cache management or unnecessary queries.

Let's go through common mistakes that can slow down a website and how to fix them.

Loading too much unnecessary JavaScript

JavaScript is essential for many web applications, but it is also one of the main causes of slowdowns. Each JavaScript file must be downloaded, parsed and executed by the browser. On a less powerful mobile device, a few hundred kilobytes can have a significant impact.

Common problems:

  • importing a complete library to use only one function (I admit, I have already done this for one of my side projects);
  • loading components that are never used;
  • adding too many third-party scripts (analytics, chat, widgets, ads...);
  • using too many npm dependencies.

For example, adding a complete date management library just to format a date seems unnecessary.

How to fix this?

  • Regularly analyze the size of your bundles with tools like Webpack Bundle Analyzer or equivalent.
  • Remove unused dependencies.
  • Use lazy loading for non-essential features.
  • Load some scripts only when they are actually needed.

A fast website is not only a website with less code, but a website that loads only what the user needs.

Ignoring image optimization

Images often represent the majority of a web page's size. A photo directly from a camera can easily exceed several megabytes, while an optimized version could be ten times smaller without any visible difference.

Common mistakes include using original images, using an unsuitable format, but also more frequently loading all images as soon as the page opens.

How to fix this?

  • Compress images before publishing them.
  • Use `srcset` to serve different sizes depending on the screen.
  • Enable lazy loading for images outside the viewport.

Example:

<img
  src="image.webp"
  loading="lazy"
  width="800"
  height="600"
  alt="Image description">

The browser can reserve the required space and avoid layout shifts.

Forgetting about caching

Without caching, users have to download the same resources on every visit. CSS files, JavaScript files, images and fonts can often be stored for several days or even several months.

How to fix this?

Configure HTTP headers correctly:

Cache-Control: public, max-age=31536000

For versioned files:

app.83fd92.js
style.a91cd4.css

you can use a very long cache duration because any modification will generate a new filename. Browser caching is one of the simplest optimizations to implement.

Blocking rendering with too much CSS and JavaScript

Before displaying a page, the browser has to build the DOM and calculate CSS rendering. Large files loaded too early can delay the initial display.

Common mistakes:

  • loading all CSS files on every page;
  • placing blocking scripts inside the `<head>`;
  • using expensive animations.

How to fix this?

  • Load only the CSS required for the page.
  • Use `defer` for scripts that are not needed immediately.

Example:

<script src="app.js" defer></script>

Avoid animations based on expensive properties such as `width` or `height`.

Prefer animations using `transform` and `opacity`.

Using inefficient SQL queries

Website performance does not only depend on the frontend, but also on the backend. A page can feel slow simply because the backend takes too long to respond.

Common problems:

  • SQL queries executed multiple times unnecessarily;
  • missing indexes;
  • retrieving unnecessary columns;
  • N+1 query problems.

Example:

SELECT * FROM users;

can become problematic if the table contains many columns or several million rows.

How to fix this?

  • Analyze slow queries (In database systems, you can easily log queries that take longer than a certain amount of time; it is worth checking this regularly).
  • Add the required indexes (and remove unnecessary ones).
  • Select only the columns you actually need.
  • Use a caching system when data rarely changes (Redis, files, ...).

A fast page often starts with an efficient API or database.

Not testing on real devices

A website that feels fast on a recent computer can be slow on an entry-level smartphone. Developers often test with:

  • a fast connection;
  • a powerful processor;
  • an already populated cache.

This is not necessarily representative of real users.

How to fix this?

Test with:

  • real mobile devices (well, depending on the developer, having these devices available is not always easy...);
  • a limited connection (With my mobile provider, I get this kind of connection a little too often :'(...));
  • an empty cache.

A performant website should work under normal usage conditions, not only in a development environment.

Conclusion

Web performance problems often come from an accumulation of small choices. The best approach is to regularly measure performance, identify real issues and gradually improve the website.

In real projects, performance often degrades over time. It is therefore important to regularly plan dedicated moments to analyze and improve performance, for example during a sprint.

cyrilou




Popular posts

Laisser un commentaire