Documentation
¶
Overview ¶
Package criticalcss provides CSS extraction utilities for critical CSS optimization.
Critical CSS Optimization ¶
Critical CSS refers to the CSS required to render the above-the-fold content of a page. By inlining this CSS directly in the HTML and async loading the rest, we can significantly improve First Contentful Paint (FCP) metrics.
Selector-Based Extraction ¶
This package uses a selector-based approach to identify critical CSS rules. It parses CSS files and extracts rules that match a predefined set of selectors known to appear above the fold in most layouts.
Critical selectors include:
- Base elements: html, body, main, article, header, nav, footer
- Typography: h1, h2, h3, p, a, span
- Common classes: .site-header, .container, .content-width, .post, .feed
- Media elements: img, video, figure
- Layout elements: .page-wrapper, .main-content
Usage ¶
The Extractor type provides the main API:
ext := criticalcss.NewExtractor() critical, remaining, err := ext.Extract(cssContent)
The critical CSS can then be inlined in the HTML <head>, while the remaining CSS is loaded asynchronously via <link rel="preload">.
Performance Benefits ¶
Expected improvements:
- 200-800ms reduction in First Contentful Paint (FCP)
- Elimination of render-blocking CSS resources
- Better Core Web Vitals scores
Index ¶
- type Extractor
- func (e *Extractor) Extract(css string) (*Result, error)
- func (e *Extractor) ExtractMultiple(cssFiles map[string]string) (*Result, error)
- func (e *Extractor) WithExcludeSelectors(selectors []string) *Extractor
- func (e *Extractor) WithMinify(minify bool) *Extractor
- func (e *Extractor) WithSelectors(selectors []string) *Extractor
- type Result
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
This section is empty.
Types ¶
type Extractor ¶
type Extractor struct {
// CriticalSelectors is the list of selectors considered critical
CriticalSelectors []string
// ExcludeSelectors is the list of selectors to exclude from critical CSS
ExcludeSelectors []string
// MinifyOutput controls whether to minify the output CSS
MinifyOutput bool
}
Extractor handles CSS parsing and critical CSS extraction.
func NewExtractor ¶
func NewExtractor() *Extractor
NewExtractor creates a new Extractor with default settings.
func (*Extractor) Extract ¶
Extract separates CSS into critical and non-critical parts. It parses the CSS and identifies rules matching critical selectors.
func (*Extractor) ExtractMultiple ¶
ExtractMultiple extracts critical CSS from multiple CSS sources.
func (*Extractor) WithExcludeSelectors ¶
WithExcludeSelectors sets selectors to exclude from critical CSS.
func (*Extractor) WithMinify ¶
WithMinify sets whether to minify the output.
func (*Extractor) WithSelectors ¶
WithSelectors adds additional selectors to the critical selectors list.
type Result ¶
type Result struct {
// Critical is the CSS that should be inlined
Critical string
// NonCritical is the CSS that can be async loaded
NonCritical string
// CriticalSize is the size of critical CSS in bytes
CriticalSize int
// TotalSize is the total size of all CSS in bytes
TotalSize int
}
Result holds the extracted CSS parts.
Source Files