Performance and Optimisation

1. Can I lazy load CSS for better performance?

Yes, you can lazy load CSS for better performance. However, there maybe a flash of unstyled content (FOUC) if the styles load after the render and this works only on the client ('use client' in case of Next.js).

// This is a sample example.
erstanding different usecases and update as per your needs.
 
// app/search/page.tsx
"use client";
 
import { useEffect } from "react";
import { SearchBox } from "@unbxd-ui/react-search-components";
 
export default function SearchPage() {
	useEffect(() => {
		// Lazy load CSS files
		import("@unbxd-ui/react-search-components/styles/searchbox.css");
	}, []);
 
	return (
		<UnbxdSearchCSRWrapper>
			<SearchBox />
		</UnbxdSearchCSRWrapper>
	);
}

2. Why is my CSS causing layout shifts?

There are various reasons why your CSS might be causing layout shifts:

1. Missing height/width for images and containers:

// ❌ Causes layout shift
function ProductCard() {
	return (
		<div className="product-card">
			<img src={productImage} />
		</div>
	);
}
 
// ✅ Prevent layout shift
function ProductCard() {
	return (
		<div className="product-card" style={{ minHeight: "400px" }}>
			<img src={productImage} style={{ width: "200px", height: "200px" }} />
		</div>
	);
}

2. Handling loading states: You may have conditional rendering for loading states. You need to make sure that the skeleton loaders are of the exact dimensions as the final content.

// ✅ Use skeleton loaders with exact dimensions
function ProductsGrid() {
	return <div className="product-grid">{loading ? <ProductSkeleton height={300} width="100%" /> : <Products />}</div>;
}

3. Assets loading: Assets like fonts, images, etc. which load after the render can cause layout shifts. You need to make sure that they do not cause any layout shifts.

/* ✅ Add font-display swap */
@font-face {
	font-family: "YourFont";
	font-display: swap;
	src: url("/fonts/YourFont.woff2");
}
 
/* ✅ Set explicit line heights */
.unbxd-product-title {
	line-height: 1.5;
	min-height: 3em; /* Reserve space for 2 lines */
}

3. Can I import components dynamically?

Yes, you can import components dynamically. However, you need to make sure that the components are imported only when they are needed and not before the render.

import { lazy, Suspense } from "react";
 
// Lazy load individual components
const Products = lazy(() => import("@unbxd-ui/react-search-components").then((module) => ({ default: module.Products })));
 
function SearchPage() {
	return (
		<Suspense fallback={<div>Loading products...</div>}>
			<Products />
		</Suspense>
	);
}

4. How do I minimize CSS bundle size?

• Import only required CSS: Instead of importing all styles, import only what you need.

  // ❌ Don't import everything
  import "@unbxd-ui/react-search-components/styles/index.css";
   
  // ✅ Do import specific component styles
  import "@unbxd-ui/react-search-components/styles/searchbox.css";
  import "@unbxd-ui/react-search-components/styles/products.css";
  import "@unbxd-ui/react-search-components/styles/facets.css";

• Use CSS Optimisation Tools: You can add code for CSS optimisation in your bundler configuration.

  const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
   
  module.exports = {
  	webpack: (config) => {
  		if (!config.optimization) {
  			config.optimization = {};
  		}
   
  		if (!config.optimization.minimizer) {
  			config.optimization.minimizer = [];
  		}
   
  		config.optimization.minimizer.push(
  			new CssMinimizerPlugin({
  				minimizerOptions: {
  					preset: [
  						"default",
  						{
  							discardComments: { removeAll: true },
  							normalizeWhitespace: false,
  						},
  					],
  				},
  			})
  		);
   
  		return config;
  	},
  };

• Use PurgeCSS: PurgeCSS is a tool that helps you remove unused CSS from your final production build, making your website or application faster and lighter.

  // postcss.config.js
  const purgecss = require("@fullhuman/postcss-purgecss")({
  	content: [
  		"./src/**/*.{js,jsx,ts,tsx,html}",
  		// Add paths to components or templates if needed
  	],
  	safelist: [
  		// Critical classes that should never be purged
  		// Add always-used classes
  	],
  	defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
  });
   
  module.exports = {
  	plugins: [require("postcss-import"), ...(process.env.NODE_ENV === "production" ? [purgecss] : [])],
  };

• Component-Level Style Optimization: Import and use only the styles that are required for the components you are using.

  // Only load styles for components you use
  function SearchPage() {
  	return (
  		<div>
  			<SearchBox /> {/* searchbox.css */}
  			<Products /> {/* products.css */}
  			{/* Don't include unused components */}
  		</div>
  	);
  }

Best Practices:

• Regularly check which styles are actually being used and remove the unused styles.

• Use CSS modules:

  // styles/SearchBox.module.css
  .customSearchBox {
      /* Your styles */
  }
   
  // Component
  import styles from './SearchBox.module.css';
   
  <SearchBox styles={{
      searchBox: styles.customSearchBox
  }} />