You should care about web performance. Web performance is important for user experience and SEO. Improving web performance increases the conversion rate. And we all want more profit, right?

I share a lot of tips on how to improve web performance. This article will be some kind of archive for them.

This article will be updated frequently, so be sure to bookmark it!

Let's start

.webp images

Use the .webp image format to make images smaller and boost the performance of your website.

<picture>
  <!-- load .webp image if supported -->
  <source srcset="logo.webp" type="image/webp">

  <!-- 
    Fallback if `.webp` images or <picture> tag 
    not supported by the browser.
  -->
  <img src="logo.png" alt="logo">
</picture>

Lazy loading of the images

You can use the loading=lazy attribute to defer the loading of the image until the user scrolls to them.

<img src='image.jpg' loading='lazy' alt='Alternative Text'>

Fonts requests optimizing

You can specify a text= value in your font request URL to reduce the size of the font file by up to 90%.

<!-- Instead of loading the whole font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Comfortaa">


<!-- 
Load only what you will use.
Super useful when you're using a web font in a logo or heading
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello">

If you liked this article, be sure to ❤️ it.

Happy coding! ❤️