Why I Dished WordPress for Vanilla JS + Edge (And Hit 100/100 Lighthouse)

Clément Delacoux — Tue, 10 Feb 2026 09:59:30 +0000

We live in a world of 5MB JavaScript bundles.
React, Angular, Vue... they are amazing tools. But for a portfolio or a showcase site? They are often overkill.

As a student developer, I wanted to challenge the status quo.
I asked myself: "Can I build a site that feels instant, looks modern, and scores a perfect 100/100 on Lighthouse, without a single framework?"

The answer is Yes. And here is how I built Drasiotech.dev.

🐢 The Problem: "The Framework Tax"

Most student portfolios I see are built on WordPress or heavy React templates.
The result?

Slow TTI (Time to Interactive)
Huge JS payloads just to render a static page.
Generic designs that look like everyone else's.

I wanted raw performance. I wanted to be closer to the metal (the browser).

⚡ The Solution: Edge + Vanilla JS

I call my stack the "Pure Performance Stack":

HTML5 & CSS3 Variables: No Tailwind, no Bootstrap. Just clean, semantic code.
Vanilla JavaScript: No compilation step, no hydration nightmare.
Vercel Edge: Serving content from the closest node to the user.

The Result?

![Lighthouse Score 100/100]

Performance: 100
Accessibility: 100
Best Practices: 100
SEO: 100

🐍 The "Easter Egg" Benchmark

Performance is boring if you can't feel it.
So I hid a Snake Game inside the footer (or via the /snake route).

It's not just a game; it's a latency benchmark.
It weighs less than 5KB. It loads instantly. It proves that you don't need a game engine to make something fun in the browser.

Challenge: My high score is 410. Can you beat it?
👉 Play the Benchmark Here

🛠️ Lessons Learned

Building this taught me more than any React tutorial:

DOM Manipulation is fast. You don't always need a Virtual DOM.
CSS Grid > Flexbox for complex layouts (like my Bento Grid design).
Images matter. Preloading WebP images saved me 300ms on load time.

🚀 Check the Code

I decided to make the whole project Open Source.
If you are a student or a junior dev looking to understand how to structure a "No-Framework" project, check the repo:

NyloodzZ / drasiotech

Drasiotech.dev

L'Art de la Performance Web & du SEO Technique
Architecture Serverless • Vanilla JS • Edge Network

Voir le site en Live »

⚡ À propos du projet

Drasiotech est une démonstration technique radicale réalisée dans le cadre du BTS SIO SLAM À une époque où le web est alourdi par des frameworks complexes, ce projet prend le contre-pied : revenir aux fondamentaux pour une performance absolue.

L'objectif ? Prouver qu'une stack native (HTML5/CSS3/JS) couplée à une infrastructure Edge (Vercel) surpasse les solutions modernes en termes de vitesse, de SEO et d'éco-conception.

🎯 Les Scores (Audit Lighthouse)

Métrique	Score	Impact
Performance	🟢 100	Chargement instantané (< 0.5s LCP)
Accessibilité	🟢 100	Compatible lecteurs d'écran & navigation clavier
Best Practices	🟢 100	HTTPS, HSTS, pas de vulnérabilités
SEO	🟢 100	Données structurées (JSON-LD) & balisage sémantique

🛠️ Stack Technique

Ce projet suit la philosophie "Zero Bloat". Aucune librairie inutile.

View on GitHub

Whatever your stack, keep shipping! 🚀

If you liked this post, drop a star on the repo or let me know your Snake high score in the comments! 👇

DEV Community: Clément Delacoux