SpeedScope

This project is a web-based tool to analyze website performance using Google PageSpeed Insights. It provides scores for Performance, Accessibility, Best Practices, and SEO.

Project Structure

• public/: Contains the static frontend files (index.html, style.css, script.js).
• functions/: Contains the Cloudflare serverless function that proxies requests to the Google PageSpeed API.

How to Run Locally

To run this project locally, you can use the Cloudflare Wrangler CLI.

1. Install Wrangler:

   npm install -g wrangler

2. Start the Development Server:

   wrangler pages dev public

   This command will serve your static files from the public directory and run your function in a local development environment.

3. Set Environment Variable for Local Development: When you run the wrangler pages dev command, you'll need to provide the PAGESPEED_API_KEY environment variable. You can do this by creating a .dev.vars file in the root of your project with the following content:

   PAGESPEED_API_KEY=your_api_key_here
   

   Replace your_api_key_here with your actual Google PageSpeed Insights API key.

Deployment to Cloudflare Pages

This project is designed for easy deployment to Cloudflare Pages.

1. Create a Git Repository: Create a new repository on GitHub or GitLab and push your code.

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin <Your-Git-Repo-URL>
   git push -u origin main

2. Connect to Cloudflare Pages:

   • Log in to your Cloudflare dashboard.
   • Go to Workers & Pages and select the Pages tab.
   • Click Create a project and connect your Git repository.

3. Configure Your Project:

   • Build command: Leave this blank.
   • Build output directory: Set this to public.
   • Add Environment Variable:
     • Variable name: PAGESPEED_API_KEY
     • Value: Your Google PageSpeed API Key.

4. Deploy: Click Save and Deploy. Cloudflare will build and deploy your site.