@casoon/auditmysite
Version:
Professional website analysis suite with robust accessibility testing, Core Web Vitals performance monitoring, SEO analysis, and content optimization insights. Features isolated browser contexts, retry mechanisms, and comprehensive API endpoints for profe
198 lines • 5.88 kB
TypeScript
/**
* 📱 Mobile-Friendliness Analyzer
*
* Comprehensive analysis of mobile usability including:
* - Viewport & Layout (responsive design, no horizontal scrolling, safe areas)
* - Typography & Touch Targets (font sizes, click areas, spacing)
* - Navigation & Interactions (touch-friendly UI, focus management)
* - Media & Images (responsive images, lazy loading, video handling)
* - Performance (mobile-specific Core Web Vitals)
* - Forms & Input (mobile-optimized form controls)
* - Mobile UX (no intrusive popups, proper error handling)
*/
import { Page } from 'playwright';
import { QualityAnalysisOptions } from '../types/enhanced-metrics';
export interface MobileFriendlinessMetrics {
overallScore: number;
grade: string;
viewport: ViewportAnalysis;
typography: TypographyAnalysis;
touchTargets: TouchTargetAnalysis;
navigation: NavigationAnalysis;
media: MediaAnalysis;
performance: MobilePerformanceAnalysis;
forms: FormAnalysis;
ux: UserExperienceAnalysis;
recommendations: MobileRecommendation[];
desktopComparison?: DesktopMobileComparison;
}
export interface DesktopMobileComparison {
desktop: DeviceAnalysis;
mobile: DeviceAnalysis;
differences: ComparisonDifferences;
recommendations: ComparisonRecommendation[];
}
export interface DeviceAnalysis {
viewport: {
width: number;
height: number;
};
touchTargets: {
averageSize: number;
compliantTargets: number;
totalTargets: number;
};
typography: {
baseFontSize: number;
lineHeight: number;
};
navigation: {
stickyHeaderHeight: number;
hasVisibleFocusIndicators: boolean;
};
performance: {
lcp: number;
ttfb: number;
cls: number;
};
usabilityScore: number;
}
export interface ComparisonDifferences {
touchTargetSizeDifference: number;
fontSizeImprovement: number;
performanceImpact: number;
usabilityGap: number;
criticalIssues: string[];
}
export interface ComparisonRecommendation {
category: 'viewport' | 'touch-targets' | 'typography' | 'performance' | 'navigation';
priority: 'critical' | 'high' | 'medium' | 'low';
issue: string;
mobileRecommendation: string;
desktopRecommendation: string;
impact: string;
difficulty: 'easy' | 'medium' | 'complex';
}
export interface ViewportAnalysis {
hasViewportTag: boolean;
viewportContent: string;
isResponsive: boolean;
hasHorizontalScroll: boolean;
breakpointCount: number;
hasSafeAreaInsets: boolean;
score: number;
}
export interface TypographyAnalysis {
baseFontSize: number;
lineHeight: number;
maxLineLength: number;
isAccessibleFontSize: boolean;
contrastScore: number;
score: number;
}
export interface TouchTargetAnalysis {
compliantTargets: number;
totalTargets: number;
averageTargetSize: number;
minimumSpacing: number;
violations: TouchTargetViolation[];
score: number;
}
export interface TouchTargetViolation {
selector: string;
currentSize: number;
requiredSize: number;
spacing: number;
recommendation: string;
}
export interface NavigationAnalysis {
hasStickyHeader: boolean;
stickyHeaderHeight: number;
hasAccessibleNavigation: boolean;
supportsKeyboardNavigation: boolean;
hasVisibleFocusIndicators: boolean;
score: number;
}
export interface MediaAnalysis {
hasResponsiveImages: boolean;
usesModernImageFormats: boolean;
hasLazyLoading: boolean;
videoOptimizations: VideoOptimizations;
score: number;
}
export interface VideoOptimizations {
hasPlaysinline: boolean;
hasPosterImage: boolean;
hasSubtitles: boolean;
noAutoplayAudio: boolean;
}
export interface MobilePerformanceAnalysis {
lcp: number;
fcp: number;
cls: number;
ttfb: number;
isMobileOptimized: boolean;
score: number;
}
export interface FormAnalysis {
hasProperInputTypes: boolean;
hasAutocomplete: boolean;
labelsAboveFields: boolean;
keyboardFriendly: boolean;
score: number;
}
export interface UserExperienceAnalysis {
hasIntrusiveInterstitials: boolean;
hasProperErrorHandling: boolean;
isOfflineFriendly: boolean;
hasCumulativeLayoutShift: boolean;
score: number;
}
export interface MobileRecommendation {
category: string;
priority: 'high' | 'medium' | 'low';
issue: string;
recommendation: string;
impact: string;
}
export declare class MobileFriendlinessAnalyzer {
private options;
constructor(options?: QualityAnalysisOptions);
/**
* Analyze desktop vs mobile differences for comprehensive comparison
*/
analyzeDesktopMobileComparison(page: Page, url: string | {
loc: string;
}): Promise<DesktopMobileComparison>;
analyzeMobileFriendliness(page: Page, url: string | {
loc: string;
}, includeDesktopComparison?: boolean): Promise<MobileFriendlinessMetrics>;
private analyzeViewport;
private analyzeTypography;
private analyzeTouchTargets;
private analyzeNavigation;
private analyzeMedia;
private analyzeMobilePerformance;
private analyzeForms;
private analyzeUserExperience;
private calculateOverallScore;
private calculateGrade;
private generateRecommendations;
/**
* Perform device-specific analysis for desktop or mobile
*/
private performDeviceAnalysis;
/**
* Calculate device-specific usability score
*/
private calculateDeviceUsabilityScore;
/**
* Calculate differences between desktop and mobile analysis
*/
private calculateDifferences;
/**
* Generate comparison-specific recommendations
*/
private generateComparisonRecommendations;
}
//# sourceMappingURL=mobile-friendliness-analyzer.d.ts.map