layer5 icon indicating copy to clipboard operation
layer5 copied to clipboard

[Performance] Fix the `unused-css-rules` issue reported by lighthouse-ci

Open ayushthe1 opened this issue 2 years ago β€’ 14 comments

Description

Currently, the lighthouse ci github action fails the assertion results for unused-css-rules as seen here .

Expected Behavior

The assertion test for the above rules should pass in the lighthouse ci run.

Screenshots

Environment:

  • Host OS:
  • Browser:

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

Join the Layer5 Community by submitting your community member form.

ayushthe1 avatar Jan 29 '23 16:01 ayushthe1

hey @ayushthe1 ,i can work on this!

nitheesh-daram avatar Jan 30 '23 09:01 nitheesh-daram

Great @nitheesh-daram :+1: .I assigned you the issue.

ayushthe1 avatar Jan 30 '23 09:01 ayushthe1

@ayushthe1 based on my brief over-view it looks like unused css and js are being imported from "GlobalStyle", which as the name states has global CSS rules, some of which are used by the pages but not all, and it is difficult to figure out which is using which. Possible Solutions :

  1. will have to rework some CSS files.
  2. can specify which assertions we want licl to run .

P.S.: I may be wrong, feel free to correct me.

nitheesh-daram avatar Jan 30 '23 13:01 nitheesh-daram

I will ping @Nikhil-Ladha for your doubts but I believe you are on right path. And it's not an option to disable any of the assertion test as already pointed out by Lee, however difficult or frustrating the issue may be .πŸ˜…

ayushthe1 avatar Jan 30 '23 14:01 ayushthe1

hey @nitheesh-daram ,can you please contact nikhil or anyone else on slack and ask your doubts regarding this issue there as people are more active there and you will get resolution to your doubts fast. You can also ask in the websites channel on slack.

ayushthe1 avatar Feb 04 '23 06:02 ayushthe1

@Anand-Theertha Would you like to take on this issue

ayushthe1 avatar Feb 11 '23 09:02 ayushthe1

I'm on this. Although, I think it's better to create two issues - one for unused-css-rules and another for unused-js, as there might be a considerable amount of changes.

Anand-Theertha avatar Feb 12 '23 05:02 Anand-Theertha

I'm on this. Although, I think it's better to create two issues - one for unused-css-rules and another for unused-js, as there might be a considerable amount of changes.

You can open a pr for whichever issue you solve .I will correspondingly change the name of this issue to match your pr.

ayushthe1 avatar Feb 12 '23 14:02 ayushthe1

btw which issue are you working on ?

ayushthe1 avatar Feb 12 '23 14:02 ayushthe1

Sounds good. I'm working on resolving the unused css rules first.

Anand-Theertha avatar Feb 13 '23 01:02 Anand-Theertha

Thanks ,i will assign it to you then .

ayushthe1 avatar Feb 13 '23 03:02 ayushthe1

Sorry for the delay. I have removed my assignment as this is more complex than I thought it would be. I am happy to share my learnings and progress incase someone picks this up.

Anand-Theertha avatar Mar 09 '23 04:03 Anand-Theertha

@ayushthe1 I have gone through this issue. But the logs for this github action have expired and are no longer available. Is there any way to view the logs related to this issue?

senali-d avatar Apr 09 '23 14:04 senali-d

I'd like to work on this @ayushthe1

AkashS20 avatar Apr 19 '23 08:04 AkashS20