DEV Community

Cover image for Improving website performance by eliminating render-blocking CSS and JavaScript

Improving website performance by eliminating render-blocking CSS and JavaScript

Adrian Bece on August 31, 2020

In my previous post, I've talked about how I boosted Lighthouse scores for my personal website by implementing native lazy loading with fallback. ...
Collapse
 
zachdixon profile image
Zachary Dixon

@adrianbdesigns great article and just in time, we're currently working on this at my workplace :) Thanks!

Collapse
 
adrianbdesigns profile image
Adrian Bece

Thank you! Glad you found the article useful. Cheers!

Collapse
 
louislow profile image
Louis Low

Artis is a low-level and functional virtual CSS library with no CSS codes. More than 80 Utilities. Infinite Configurations. (artisjs.netlify.app) #virtualcss #virtualdom #javascript #cssinjs #csslibrary

Image description

Collapse
 
dailydevtips1 profile image
Chris Bongers

Nice article! Enjoyed it! 🔥

Collapse
 
leotocca profile image
Leonardo Toccaceli

Amazing article! We were just working on performance improvement at work. Thanks a lot!

Collapse
 
rajeshroyal profile image
Rajesh Royal

you can't be sure about critical CSS also when you do updates you have to regenerate it.

Collapse
 
thomasledoux1 profile image
Thomas Ledoux

At my company we use github.com/addyosmani/critical in Gulp to generate the critical CSS at build time, so we always have an up to date version.

Collapse
 
rajeshroyal profile image
Rajesh Royal

that's great 👍

Collapse
 
billionaire9 profile image
Anuwong Mongkudkornburee

Very simple but powerful! Thanks :D

Collapse
 
adriangrigore profile image
Adrian Emil Grigore

Great work! Thanks!

Collapse
 
ender_minyard profile image
ender minyard

It’s very simple to get a 100 for accessibility on Lighthouse. You should work on that next.

Collapse
 
trifit profile image
David

I wouldn't define it as simple, in some cases it might but often truly accessible and inclusive websites require a lot of thought and planing.

That being said every website should try to be as accessible as posible, otherwise you are excluding a big part of your audience, which is bad for your audience and for yourself.

Also, if we only have as source of truth Google lighthouse we might be missing important points (now or in the future), an automated tool has its limits.

Collapse
 
ender_minyard profile image
ender minyard • Edited

"Truly accessible and inclusive websites require a lot of thought and planning." Absolutely. Lighthouse does not even audit for what is required of a truly accessible website, which is why I'm surprised the author couldn't reach such a low bar.

Lighthouse does have its limits. If I really want to audit basic accessibility checkpoints of my website I use wave.webaim.org/ because Lighthouse sets too low of a bar. Every website should try to be accessible as possible and Lighthouse doesn't even test for enough.

Collapse
 
mak0099 profile image
Maulik Thaker

Nice one. But how can we get rid from unused CSS and JavaScript in Angular build ?

Collapse
 
yasionfire profile image
Yasio

For CSS maybe give purgecss.com/ a try.

Collapse
 
costinmanda profile image
Costin Manda

You very nicely explained what defer and async do, but what about defer and async at the same time on the same script tag? I've seen this in some code bases.

Collapse
 
mbustosp profile image
Matías Bustos

Great article! I wasn't aware of forzing css parse after site load.

Collapse
 
noubissie profile image
Noubissie

Thanks.great explanations. How do I improve the performance of a nextjs app.