# Website Performance Analyzer - Technical Brief ## Project Overview A modern, AI-powered website performance analyzer that combines Google's Chrome User Experience Report (CrUX) data with OpenAI's analysis to provide comprehensive website performance insights and optimization recommendations. ## Tech Stack - **Frontend**: Next.js 14 with App Router - **Styling**: Tailwind CSS - **APIs**: Google CrUX API, OpenAI API - **Analytics**: Google Analytics 4 (optional) - **Deployment**: Vercel ## Core Features ### 1. URL Analysis Interface The landing page features a simple, clean design with dark mode styling for an elegant and modern feel. The main elements are: - **Single Input Field**: A search bar where users can enter the website URL for analysis. The input field includes real-time URL validation. - **Progress Indicator**: Visual feedback for users during analysis, including an arrow button to initiate the analysis. - **Language Toggle**: Located under the search bar, allowing users to switch between English (ENG) and Danish (DK). - **Social Media Dock**: Includes icons for various social media platforms, providing easy access to the company’s social links. - **AI-Powered Badge**: A badge next to the title \"Analyze Your Website\" highlights that the tool uses AI for its insights. In the secondary screen (post-URL input), the interface provides: - **Two Primary Options**: - **Core Web Vitals**: Focusing on essential performance metrics like LCP, FID, and CLS based on real user experiences. - **AI Analysis**: Offering advanced SEO and accessibility insights powered by OpenAI's language models. - **Footer Attribution**: States “Analysis powered by Chrome User Experience Report” to indicate the data source, adding credibility. ### 2. API Integration

Versions

a minimalistic, dark-themed website interface with a prompt inviting users to “Analyze Your Website.” It mentions that this analysis is “AI-Powered” and provides “Advanced insights powered by OpenAI and Google CrUX.” Below the title, there’s a search bar with the example entry “google.com” filled in, suggesting where users can type a website URL to begin the analysis. There is a blue arrow button to the right of the search bar, which likely initiates the analysis. At the bottom, there are language selection buttons with “DK” for Danish and “ENG” for English, with “ENG” currently selected. There are also social media icons underneath, representing LinkedIn, YouTube, Twitter, and an email option, for easy navigation to the platform's social profiles. The interface appears sleek and professional, with a strong emphasis on simplicity and usability.