왜 나는 WordPress를 Vanilla JS + Edge로 교체했는지 (그리고 Lighthouse에서 100/100 점을 받았다)

Source: Dev.to

소개

우리는 5 MB JavaScript 번들 세계에 살고 있습니다.
React, Angular, Vue…는 놀라운 도구이지만 포트폴리오나 쇼케이스 사이트에는 종종 과잉입니다.

학생 개발자로서 나는 스스로에게 물었습니다:

“프레임워크 없이도 즉각적인 느낌이고 현대적인 디자인이며 Lighthouse에서 완벽한 100/100 점수를 받는 사이트를 만들 수 있을까?”

예. 제가 Drasiotech.dev 를 어떻게 만들었는지 알려드리겠습니다.

🐢 문제: “프레임워크 세금”

대부분의 학생 포트폴리오는 WordPress나 무거운 React 템플릿으로 구축되어 다음과 같은 결과를 낳습니다:

• 느린 TTI (Time to Interactive)
• 거대한 JS 페이로드 정적 페이지를 렌더링하기 위해서만
• 일반적인 디자인 모두와 똑같이 보임

나는 원시 성능—브라우저(메탈)와 가까운 것을 원했습니다.

⚡ The Solution: Edge + Vanilla JS

I call my stack the “Pure Performance Stack”:

• HTML5 & CSS3 Variables – Tailwind도, Bootstrap도 없이; 깔끔하고 의미론적인 코드만.
• Vanilla JavaScript – 컴파일 단계 없이, 하이드레이션 악몽도 없음.
• Vercel Edge – 사용자와 가장 가까운 노드에서 콘텐츠 제공.

결과

🐍 “이스터 에그” 벤치마크

성능은 직접 느낄 수 없으면 지루합니다. 저는 푸터(또는 /snake 경로) 안에 스네이크 게임을 숨겼습니다. 이는 지연 시간 벤치마크이며 5 KB 미만의 크기로 즉시 로드됩니다.

도전: 제 최고 점수는 410점입니다. 당신은 이길 수 있나요?

👉 여기서 벤치마크 플레이하기

🛠️ Lessons Learned

• DOM 조작은 빠릅니다. 언제나 Virtual DOM이 필요하지는 않아요.
• CSS Grid > Flexbox 복잡한 레이아웃에 (예: 내 Bento Grid 디자인).
• 이미지는 중요합니다. WebP 이미지를 미리 로드하면 로드 시간이 약 300 ms 감소했습니다.

🚀 코드 확인

전체 프로젝트는 오픈 소스입니다. “No‑Framework” 구조를 이해하고자 하는 학생이나 주니어 개발자라면, 저장소를 확인해 보세요:

⚡ 프로젝트 소개

Drasiotech는 BTS SIO SLAM 과정에서 수행된 급진적인 기술 시연입니다.
웹이 복잡한 프레임워크로 무거워진 시대에, 이 프로젝트는 절대적인 성능을 위해 기본으로 돌아가는 반전적인 접근을 취합니다.

목표는? 네이티브 스택(HTML5/CSS3/JS)과 Edge 인프라(Vercel)를 결합하면 속도, SEO, 친환경 설계 측면에서 현대적인 솔루션을 능가한다는 것을 증명하는 것입니다.

🎯 점수 (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!