Web Performance

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.

  <!-- 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">

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! ❤️

Bala's photo

Lazy Loading works in all browsers? I have used in our site,but it doesn't work in our site: bizappln.com

Marko Denic's photo

It doesn't work in IE, Bala. But, it's fine because, in that case, this attribute will be ignored. Actually, you don't use it on your website. Or, at least not on the homepage. Have fun.

Franklin Nwangene's photo

Hi Marko, this is my first visit(blogimize.com is my blog), I love the tips above, can you review my blog to tell me more about optimization opportunities?

Franklin Nwangene's photo

Hi denic, if I specify webp for my blog without having a webpage format images on my blog which image format will load? Webp or png-jpeg

Franklin Nwangene's photo

<img src='image.jpg' loading='lazy' alt='Alternative Text'> Will this Lazyload .PNG image's?

Or just JPEG?