DEV Community

The Need for Speed: HTML & CSS Tips to Boost Your Page Loading Time by 10x

devkoustav on November 02, 2022

We all hate it when our page loads this slow right! 😔 Infact website conversion rates drop by an average of 4.42% with each additional second o...

Read full post

Yuwang Cai • Nov 2 '22

Great post!
But I think "1.a Splitting CSS Files" may be hard to achieve when using modern CSS solutions like CSS modules or Tailwind CSS.
Anyway it's a good idea. Thank you!

devkoustav • Nov 2 '22

Yes that's a problem in PostCSS plugins like Tailwind. The ways out are just minifying your CSS with a tool like cssnano, and compressing your CSS with Brotli. But hoping they will update something as such later!

Moazam Ali • Nov 4 '22

Does using styled components in React (css in js) also speed up the application or website?

devkoustav • Nov 5 '22

I don't think so. If you compare static css and styled components in react.... static css will be faster... because it is not processed during runtime.

However with every new versions React is getting better and better.

So in this case if you can compromise on your performance a bit... styled components in React may solve many other issues!

Moazam Ali • Nov 5 '22

Ok @koustav, I got it.

By static css do you mean files with .css extension?

Using .scss files reduces performance or not? Because they are also processed (converted) into css first.

Btw thanks for your quick reply ❤️

Pedro Pimienta M. • Nov 3 '22

Great advise, principal the image format.

devkoustav • Nov 3 '22

Thanks

Rizky Zhang • Nov 5 '22

Great post!

devkoustav • Nov 5 '22

Thanks

Oluwagbenga • Nov 2 '22

This is great. Thank you.

ArsalanNury • Nov 3 '22

my suggestion .
we can manage our API requests with tricks and libraries like React Query

Jona • Dec 1 '22

I once tried to lazyloading content which is off screen and the SEO guy came for my blood.

devkoustav • Nov 2 '22

Feeling something missing?
Put your suggestions in the comments 😄

I'll be happy to add your suggestions!

devkoustav • Nov 2 '22

Did this post help you?
Save it for later...

lets_code_together

Dipanjan Ghosal • Nov 4 '22

Yep. This was very helpful. Thanks

Toan Tran • Nov 8 '22

Since you mentioned about coding splitting for CSS code, it is also good to inline critical css so the page could render. And then fetch and apply the remaining CSS.

twitter.com/iamakulov/status/12394...

fetchpriority is also a good choice even it is not supported by all browser now