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.
<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! ❤️
Lazy Loading works in all browsers? I have used in our site,but it doesn't work in our site: bizappln.com
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.
Blogging seo WordPress
<img src='image.jpg' loading='lazy' alt='Alternative Text'> Will this Lazyload .PNG image's?
Or just JPEG?
Blogging seo WordPress
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
Blogging seo WordPress
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?
Comments (5)