I'm looking for methods to obfuscate the class and ID names on a webpage to enhance performance and prevent elements from being blocked by ad blockers. I've noticed that large sites like Facebook use obfuscated names like _8esj and x193iq5w, which are much shorter and help with faster page loads. The downside is that my current solutions like postcss-obfuscator only rename CSS but don't handle HTML or JS. I've found a few tools such as Closure Stylesheets, PostCSS Rename, and PostCSS Obfuscator, but I'm still not able to apply renaming effectively across all files. My site uses plain HTML, JS, TypeScript, CSS, and SCSS without any frameworks. Any tips or suggestions from web development experts would be appreciated!
5 Answers
If you're worried about class names clashing or getting overwritten, consider using CSS Modules. They allow you to bundle CSS with your JavaScript components and automatically scope class names, which might solve your problem. Just keep in mind that it can complicate things a bit when you want global styles or when trying to override pre-existing classes from libraries like Bootstrap.
There are tools for minifying your code as well, which can help streamline class names as part of your build process. You might want to check out the 'minify' package on npm or see if your build tool like Vite has built-in options for that. It could make managing your projects a lot smoother.
Many frontend frameworks do implement this kind of obfuscation to streamline styling processes. Most likely, it’s not just about evading ad blockers. In some of my web apps, I've avoided classes entirely and let the framework handle styles automatically. That being said, it probably won't make a big impact on your site’s performance unless you’re scaling up to a massive user base.
You probably don’t need to stress about this. In practical terms, unless you're serving a huge volume of traffic, the difference in load times from obfuscating classes is negligible. The trends now lean more towards simplicity, and focusing on gzip compression and other optimizations could deliver better results without the extra hassle.
It’s true that Facebook and similar sites do this to reduce payload size, but honestly, it’s a bit of a stretch to deem it crucial nowadays. There are better ways to handle ads and elements than solely relying on IDs and classes. Focus on what makes your site function well rather than this micro-optimization. If you still want to give it a shot, Meta has open-sourced their library for style management, which might help you.
It's worth mentioning that while it may not seem useful in fast internet areas, there are still users out there on slow connections. So it can be more relevant than it seems!