While there are tools available to identify unused CSS on static web pages, real-world scenarios often involve CSS being used dynamically after interactions such as opening modals or popups. How can we effectively manage our ever-growing render-blocking CSS in these cases?
One approach could be to utilize unused-CSS-detector tools in combination with Selenium to test various interactions and determine what CSS is left unused. However, this method relies on knowing all possible interactions that may require new CSS. Is there a way to address this issue without making such assumptions?
In an ideal scenario, it would be helpful to track all CSS used by a visitor's browser on the page and send this data back to a server for analysis over time. By aggregating this information, we could gain insights into the actual usage of CSS on our site.
Do you have any innovative suggestions to tackle this challenge?