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

Source: Dev.to

Introduction

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

As a student developer 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?”

Yes. Here’s how I built Drasiotech.dev.

🐢 The Problem: “The Framework Tax”

Most student portfolios are built on WordPress or heavy React templates, resulting in:

• 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—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 node closest to the user.

The Result

🐍 The “Easter Egg” Benchmark

Performance is boring if you can’t feel it. I hid a Snake Game in the footer (or via the /snake route). It’s a latency benchmark that weighs less than 5 KB and loads instantly.

Challenge: My high score is 410. Can you beat it?

👉 Play the Benchmark Here

🛠️ Lessons Learned

• DOM manipulation is fast. You don’t always need a Virtual DOM.
• CSS Grid > Flexbox for complex layouts (e.g., my Bento Grid design).
• Images matter. Preloading WebP images saved me ~300 ms on load time.

🚀 Check the Code

The whole project is Open Source. If you’re a student or junior dev looking to understand a “No‑Framework” structure, check the repo:

⚡ À 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)

🛠️ Stack Technique

Le projet suit la philosophie “Zero Bloat” – aucune librairie inutile.

• HTML5, CSS3 (variables, Grid)
• Vanilla JavaScript
• Vercel Edge Functions / Edge Network
• Serverless architecture
• WebP images, preloading, semantic markup

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!