/** * @file Critical Rendering Path Analyzer * @description Analyzes and optimizes the critical rendering path for faster * First Contentful Paint (FCP) and Largest Contentful Paint (LCP). * * Features: * - Render blocking resource detection * - Critical CSS extraction hints * - Resource prioritization * - Preload/prefetch recommendations * - DOM depth analysis * - Above-the-fold optimization */ /** * Resource criticality level */ export type CriticalityLevel = 'critical' | 'high' | 'medium' | 'low' | 'non-critical'; /** * Resource type */ export type ResourceType = 'script' | 'style' | 'font' | 'image' | 'other'; /** * Render blocking resource */ export interface RenderBlockingResource { url: string; type: ResourceType; size: number; loadTime: number; blockingTime: number; suggestions: string[]; } /** * Critical resource */ export interface CriticalResource { url: string; type: ResourceType; criticality: CriticalityLevel; size: number; loadTime: number; inViewport: boolean; aboveTheFold: boolean; recommendations: ResourceRecommendation[]; } /** * Resource recommendation */ export interface ResourceRecommendation { action: 'preload' | 'prefetch' | 'defer' | 'async' | 'inline' | 'lazy' | 'remove'; reason: string; priority: 'high' | 'medium' | 'low'; estimatedImpact: number; } /** * DOM analysis result */ export interface DOMAnalysis { totalNodes: number; maxDepth: number; widestLevel: number; widestLevelNodeCount: number; aboveTheFoldNodes: number; recommendations: string[]; } /** * Critical path analysis result */ export interface CriticalPathAnalysis { renderBlockingResources: RenderBlockingResource[]; criticalResources: CriticalResource[]; domAnalysis: DOMAnalysis; estimatedFCP: number; estimatedLCP: number; optimizations: CriticalPathOptimization[]; score: number; timestamp: number; } /** * Critical path optimization */ export interface CriticalPathOptimization { type: string; description: string; impact: 'high' | 'medium' | 'low'; estimatedSavings: number; implementation: string; } /** * Analyzer configuration */ export interface CriticalPathAnalyzerConfig { /** Enable analysis */ enabled: boolean; /** Viewport height for above-the-fold detection */ viewportHeight: number; /** Consider render-blocking if blocks for more than this (ms) */ blockingThreshold: number; /** Enable DOM analysis */ analyzeDom: boolean; /** Enable resource analysis */ analyzeResources: boolean; /** Debug mode */ debug: boolean; } /** * Analyzes critical rendering path */ export declare class CriticalPathAnalyzer { private config; constructor(config?: Partial); /** * Run full critical path analysis */ analyze(): CriticalPathAnalysis; /** * Find render-blocking resources */ findRenderBlockingResources(): RenderBlockingResource[]; /** * Analyze critical resources */ analyzeCriticalResources(): CriticalResource[]; /** * Analyze DOM structure */ analyzeDOM(): DOMAnalysis; /** * Get preload recommendations */ getPreloadRecommendations(): ResourceRecommendation[]; private getResourceTiming; private isInViewport; private getStylesheetSuggestions; private getScriptSuggestions; private getImageRecommendations; private getFontRecommendations; private generateOptimizations; private calculateScore; private estimateFCP; private estimateLCP; private getEmptyDOMAnalysis; } /** * Get or create the global critical path analyzer */ export declare function getCriticalPathAnalyzer(config?: Partial): CriticalPathAnalyzer; /** * Generate critical CSS extraction hints */ export declare function generateCriticalCSSHints(): string[]; /** * Check if a resource should be preloaded */ export declare function shouldPreload(resource: CriticalResource, currentPreloads: string[]): boolean;