At our @Parentune Gurugram headquarter, we heavily focus on SEO and increasing our user base through organic channels, we realized our site’s CSS was bloated with unused styles, negatively impacting our SEO. We turned to PageSpeed Insights to understand our site’s performance issues and confirmed the problem using the DevTools Coverage tab.
Here’s how we tackled it:
Consulted Tailwind Docs: We started by thoroughly reading the Tailwind CSS optimization guide. This provided us with the necessary steps to streamline our CSS for production.
Modified Package.json: We updated our
package.jsonfile to automate the CSS build process. Here’s the relevant snippet:
"build:css": "npx tailwindcss -o src/build.css --minify",
"build": "npm run build:css && react-scripts build",
-
Updated index.tsx: To ensure we used the optimized CSS, we modified our
index.tsx:
// import './index.css';
import './build.css';
- Moved Fonts to CDN: We shifted our heavy fonts to a CDN and served them asynchronously to further enhance performance.
The Results:
Since implementing these changes, we’ve noticed significant improvements in our SEO scores and overall site performance. We are confident these enhancements will continue to drive better SEO results.
Optimizing your CSS can seem daunting, but with the right tools and steps, it can lead to substantial performance gains. Give it a try and watch your site speed and SEO improve!
Feel free to reach out for any kind of help, open for change😊
Top comments (1)
Interesting topic! Everything is explained articulately and clearly. For your project, consider checking out this free npm package: select-paginated.