Improving app performance

Giusti Ro

·

Follow

Published in

Better Programming

·

5 min read

·

Apr 8, 2023

--

5

Listen

Share

This is a short guide where I want to share how I went from 212kB of CSS to 32.1kB (84.91% code reduction), still using 3rd-party style libraries
and fully maintaining the aesthetics of the App.

This example project was made using Astro.

We will go through this:

1. From 3rd-party CSS to custom required-only CSS.
2. Review and improve other CSS code resources.
3. Re-think how to write your CSS structure.

Let’s start! ✨

1. From 3rd-party CSS to custom required-only CSS.

Using styles libraries (ie: Bootstrap, Tailwind) is a common task on a daily Frontend Developer job.

You will still using them, of course, but this is how I made the best of them to get a boost in my App.

If you ever tried to improve your site metrics reported by Lighthouse, then you know that some of the recommendations that you get, are to reduce unused styles/scripts code.

Chrome’s DevTools also provides a really interesting tool called Coverage, and this can help you to know which sections of code are not used at all in the app after a full interaction with your App*

*Check the docs of Coverage tool to better understand this.

Where we are.

I’ll share this example using Bootstrap, and the first thing to note is that I’m not using it as a project dependency but through CDNs, and there is a reason, you’ll see why.

Let’s quickly recap what we are doing using Bootstrap’s CDNs.

Official Bootstrap’s Docs tell you to install the full minified package (225.97 kB):

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

But we don’t want all the Bootstrap library for this case, we’ll just import what we need, so, to see what content will you need, go to the root CSS CDN’s deliver page:

https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/

In my case, I know that I only need the utilities.css (104.09 kB) and the grid.css (68.28 kB).

At this point, we have Coverage like this, 92% unused styles.

That’s too much.

Let’s keep the focus on Bootstrap for now. Here it comes 🧙‍♂️ the magic trick.

Hands-on

I was hardly trying to export only the CSS used by the site.. is that possible?

That would be great, right?

Well, here you have my latest contribution:

‘Sniper CSS’:

Once installed, it’s so easy to use, just open your site, click on the extension, click the button ‘sniperize’ and let the plugin do his work!

This extension tries to collect all posible scenarios of a site: different client displays, user agents, dark and light themes, full page scroll, pseudo states fo every element, and so on.

It will automatically generate and download a optimized CSS file.

// If you are using Astrojs and VSCode too, use this regex to find and replace all the :where(.astro-whatever) with an empty space.
// This will remove all custom clases added by Astro that might broke your styles.
:where\(\.+([aA-zZ])+-+([aA-zZ])+\)

Results

We still have the default Astro styles, but now we have our Sniper-CSS bootstrap_custom.css file

We started with 212kB of styles and now we got just 32.1kB. 🔥

Note we have a resulting small increase in styles, that’s because some inline codes or local styles might be duplicated.

2. Review and improve other CSS code resources.

In the screenshots, we’ve seen that we had other CSS resources that we might improve, for example, Google Fonts.

Can we improve Google Fonts imports? Yes we can.

Check out what the Coverage tab says about Google Font usage.

It seems like anything it’s being used, that’s not right, but we can see how much code is useless for us.

In this case, Google Fonts, is providing support for Montserrat and MuseoModerno for different languages.

Check this Quora to know more or you can read what Google says about it.

Again, for this example site, I know that I don’t want full support for all languages worldwide. Just Latin support.

So make a new file ‘fonts.css’ to use all your font weights supporting Latin languages only. Here’s the difference:

Can you improve other resources that your project is using?
Always you can improve, always!

3. Re-think how to write your CSS structure.

If you go this way to improve your CSS, here are some advice:

From server to local content.

In your development phase, you will use 3rd-party content as normally you’ll do, but once you finished your project, you will be using your custom CSS files and configs based on what you worked with the library.

Keep this in mind. Ideally, this is a one-time task when trying to improve your site metrics.

Lost some rules or you’ve found repeated ones?

The ‘Sniper CSS’ extension will export all the CSS possible, it does a good job but I still have to improve it, so try replacing your styles and verify if something is missing.

Try to keep your Keyframes and other At-Rules (if missing) on files aside to avoid style losses.

Wrapping up

Let’s compare what Coverage looks like before and after.

Before:

We had 212kB of styles with a 92% of unused code.

After:

Now we have 32.1kB of styles with a 26% of unused code. 🔥

We have decreased our total CSS an 84.91% 🎉

And surely it could be reduced even more!

If you know how to make your site 0% unused styles, share your post!!!

PD: This article is part of a section that I’ll be writing about how to bring your App from poor performance to a very decent one, using rich-interaction libraries like Threejs, GSAP, and Scrollbooster.

Project’s repo: https://github.com/GiustiRo/as-next-astro