compare_mobile_desktop
Analyze and compare website performance across mobile and desktop devices using the Lighthouse MCP server. Evaluate metrics in key categories like performance, accessibility, SEO, best practices, and PWA to optimize user experience.
Instructions
Compare website performance between mobile and desktop devices
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| categories | No | ||
| includeDetails | No | Include detailed metrics and recommendations | |
| throttling | No | Whether to throttle the audit (default: false) | |
| url | Yes | URL to audit |
Implementation Reference
- src/lighthouse-performance.ts:49-81 (handler)Core implementation of compareMobileDesktop: runs Lighthouse performance audits on mobile and desktop devices and computes differences in category scores.// Helper function to compare mobile vs desktop export async function compareMobileDesktop(url: string, categories?: string[], throttling = false) { // Run audits sequentially to avoid Chrome port conflicts const mobileResult = await runLighthouseAudit(url, categories, "mobile", throttling); const desktopResult = await runLighthouseAudit(url, categories, "desktop", throttling); const comparison = { url: mobileResult.url, mobile: { categories: mobileResult.categories, metrics: mobileResult.metrics, }, desktop: { categories: desktopResult.categories, metrics: desktopResult.metrics, }, differences: {} as Record<string, { mobile: number; desktop: number; difference: number }>, }; // Calculate differences for categories for (const [key, mobileCategory] of Object.entries(mobileResult.categories)) { const desktopCategory = desktopResult.categories[key]; if (desktopCategory) { comparison.differences[key] = { mobile: mobileCategory.score, desktop: desktopCategory.score, difference: desktopCategory.score - mobileCategory.score, }; } } return comparison; }
- src/tools/performance.ts:169-231 (registration)MCP tool registration for 'compare_mobile_desktop': defines name, description, input schema (compareDevicesSchema), and handler that calls core compareMobileDesktop function, structures results, handles errors.server.tool( "compare_mobile_desktop", "Compare website performance between mobile and desktop devices", compareDevicesSchema, async ({ url, categories, throttling, includeDetails }) => { try { const result = await compareMobileDesktop(url, categories, throttling); const structuredResult = createStructuredPerformance( "Mobile vs Desktop Comparison", result.url, "mobile + desktop", { differences: Object.fromEntries( Object.entries(result.differences).map(([category, diff]) => [ category, { mobile: diff.mobile, desktop: diff.desktop, difference: diff.difference, better: diff.difference > 0 ? "desktop" : "mobile", }, ]), ), includeDetails, }, [ "Mobile performance typically requires more optimization", "Focus on image optimization for mobile devices", "Consider implementing responsive design best practices", ], ); return { content: [ { type: "text" as const, text: JSON.stringify(structuredResult, null, 2), }, ], }; } catch (error: unknown) { const errorMessage = error instanceof Error ? error.message : String(error); return { content: [ { type: "text" as const, text: JSON.stringify( { error: "Mobile vs Desktop comparison failed", url, message: errorMessage, }, null, 2, ), }, ], isError: true, }; } }, );
- src/schemas.ts:80-85 (schema)Zod-based input schema for compare_mobile_desktop tool: validates url, optional categories, throttling, includeDetails.export const compareDevicesSchema = { url: baseSchemas.url, categories: baseSchemas.categories, throttling: baseSchemas.throttling, includeDetails: baseSchemas.includeDetails, };