Using Google Gemini to Audit My Website and Generate an Audio Overview
As a DevOps engineer, I'm always looking for innovative ways to improve my portfolio website. Recently, I had an idea: what if I could use AI not just to help me build features, but to actually audit my own website and provide feedback? And what if that feedback could be delivered in an audio format that visitors could listen to?
Enter Google's Gemini AI—a powerful multimodal AI that can analyze websites, generate comprehensive audits, and even help create audio content. This blog post documents my journey of using Gemini to audit my website and generate an audio overview that's now featured on my homepage.
Why Audit Your Own Website with AI?
Before diving into the technical details, let me explain why this approach is valuable:
- Objective Perspective: AI doesn't have the bias that comes from being the creator
- Comprehensive Analysis: AI can check multiple aspects simultaneously (SEO, accessibility, performance, security)
- Time Efficiency: Automated audits save hours of manual checking
- Accessibility Enhancement: Audio content makes your site more accessible to users with different needs
- Unique User Experience: An audio overview provides an alternative way to consume content
Using Google Gemini Deep Research
What is Gemini Deep Research?
Instead of setting up API access and writing code, I used Google's Gemini Deep Research feature—a powerful built-in capability that allows Gemini to conduct comprehensive research and analysis on websites. This feature is available directly in the Gemini interface and doesn't require any API setup or coding.
How to Access Deep Research
- Visit Gemini: Go to gemini.google.com
- Enable Deep Research: Look for the Deep Research option in the interface (this feature allows Gemini to browse and analyze websites in depth)
- Provide Your Website URL: Simply paste your website URL and ask Gemini to analyze it
The beauty of this approach is that it requires no setup—just access to Gemini and the ability to ask it to research your website. Gemini Deep Research will automatically browse your site, analyze its structure, content, and technical aspects, then provide comprehensive feedback.
The Website Audit Process
What to Ask Gemini to Analyze
I structured my audit request to cover multiple dimensions:
1. Technical SEO Audit
I asked Gemini to analyze:
- Meta tags and structured data
- URL structure and canonical tags
- Sitemap and robots.txt
- Page load performance
- Mobile responsiveness
2. Accessibility Audit (WCAG 2.1 AA)
Key areas to check:
- Semantic HTML structure
- ARIA labels and landmarks
- Color contrast ratios
- Keyboard navigation
- Screen reader compatibility
- Alt text for images
3. Performance Metrics
Focus areas:
- Core Web Vitals (LCP, FID, CLS)
- Image optimization
- Code splitting and lazy loading
- Caching strategies
- Bundle size analysis
4. Code Quality
Analysis points:
- TypeScript usage and type safety
- Component structure and reusability
- Error handling patterns
- Security best practices
- Best practices adherence
Example Audit Prompt
Here's the prompt I used to get Gemini to audit my website:
Please provide yhour opinion on the website https://stanho.dev
Gemini's Report
Generating the Audio Overview
The Audio Generation Process
One of the most interesting parts of this project was using Gemini to generate an audio overview. The process was actually much simpler than I initially expected.
After Gemini completed the comprehensive website audit, I simply asked it to generate an audio overview of the report it had just created. That's it—no complex API setup, no text-to-speech conversion steps, no manual optimization. Gemini handled everything in one go.
The prompt was straightforward:
Generate an audio overview of the report you just created about my website.
Gemini then generated the audio file directly, which I saved as Long-Intro.mp3 and placed in /public/audio/. The audio provides a friendly, conversational summary of the technical audit, making the comprehensive report more accessible to visitors who prefer to listen rather than read.
This demonstrates one of the powerful aspects of modern AI tools like Gemini—the ability to generate multimodal content (text, audio, etc.) from a single, simple request, without requiring complex technical setup or multiple steps.
Integrating AudioPlayer into the Blog Post
Now comes the fun part—using the AudioPlayer component in this very blog post! Since we've already added AudioPlayer to the BlogContent components, we can use it directly in MDX:
This demonstrates how the audio overview sounds and shows the integration in action.
Technical Implementation Details
AudioPlayer Component
The AudioPlayer component I created is a React component with the following features:
- Play/Pause Controls: Standard media controls
- Progress Bar: Visual and interactive progress tracking
- Volume Control: Adjustable volume with percentage display
- Time Display: Current time and total duration
- Accessibility: Proper ARIA labels and keyboard navigation
- Responsive Design: Works on all screen sizes
Integration in HeroSection
The audio player is integrated into the homepage hero section:
<AudioPlayer
src="/audio/Long-Intro.mp3"
title="AI Technical Audit on... myself😮?"
/>
This provides visitors with an immediate, engaging way to learn about the site.
Using AudioPlayer in Blog Posts
Since we've added AudioPlayer to the MDX components, you can use it in any blog post:
<AudioPlayer
src="/audio/your-audio-file.mp3"
title="Your Audio Title"
/>
Benefits of This Approach
For Website Owners
- Automated Quality Assurance: Regular AI audits help maintain quality
- Accessibility Compliance: Ensures your site meets standards
- SEO Optimization: Continuous improvement based on AI recommendations
- Unique Content: Audio overviews differentiate your site
For Visitors
- Accessibility: Audio content helps users with visual impairments
- Convenience: Listen while doing other tasks
- Engagement: Alternative content format increases engagement
- Information Access: Multiple ways to consume content
Conclusion
Using Google Gemini to audit my website and generate an audio overview has been an enlightening experience. It demonstrates how AI can be used not just for building features, but for quality assurance, accessibility enhancement, and creating unique user experiences.
The combination of automated auditing and audio content generation showcases the practical applications of modern AI tools in web development. Whether you're a solo developer or part of a team, these techniques can help improve your website's quality and accessibility.
Key Takeaways
- AI Audits Are Valuable: Automated audits provide objective, comprehensive feedback
- Audio Enhances Accessibility: Audio content makes sites more accessible
- Integration Is Straightforward: Modern tools make audio integration easy
- Continuous Improvement: Regular audits help maintain quality over time
The audio overview on my homepage serves as both a practical feature and a demonstration of how AI can enhance web development workflows. It's a reminder that sometimes the best way to improve your work is to have an AI assistant take a fresh look at it.
Want to hear the audio overview? Check out the AudioPlayer component on my homepage or listen to it above in this blog post!
Interested in exploring more AI-assisted development? Check out my other posts on Cursor AI and DevOps and Vibe Coding.
Connect with me on LinkedIn to discuss AI tools, website audits, and DevOps practices!