웹사이트 경량화와 SEO 최적화의 끝판왕을 보여드립니다
Last modified: 10월 29, 2026
웹사이트 경량화는 웹페이지를 구성하는 이미지, 코드, 미디어 등의 전체 용량과 서버 요청 수를 줄여 로딩 속도를 높이는 작업입니다. 사실 웹에서는 이 경량화 작업을 얼마나 잘하느냐에 따라 SEO 에 큰 영향을 주고, SEO 개선은 사실 웹사업의 수입과 직결되기 때문에, 모든 웹사이트나 앱에서 경량화와 SEO 최적화는 순수익과 직결되는 가장 중요한 작업이기도 합니다.
그리고 한국어로 웹사이트 경량화 검색을 하면, AI 는, 지금도 잘못되고 오래된 정보를 아래와 같이 알려 줍니다.
핵심 경량화 방법
- 이미지 최적화 (가장 큰 효과)
- 전체 웹페이지 용량의 절반 이상을 차지하는 이미지 파일의 크기를 줄입니다.
- 기존 JPEG/PNG 대신 차세대 압축 포맷인 WebP나 AVIF를 사용합니다.
- 화면에 즉시 보이지 않는 이미지는 나중에 불러오는 지연 로딩(Lazy Loading)을 적용합니다.
- 코드 경량화 및 압축 (Minify & Compression)
- HTML, CSS, JavaScript 파일에서 불필요한 공백, 주석, 줄 바꿈을 제거합니다.
- Webpack이나 Gulp 같은 빌드 도구를 활용해 코드를 최소화하고 Gzip이나 Brotli 압축 방식을 활성화합니다.
- 불필요한 스크립트 및 플러그인 정리
- 사용하지 않는 서드파티 스크립트, 마케팅 픽셀, 분석 도구, 소셜 미디어 위젯을 제거하거나 통합합니다.
- 태그 관리자 등을 활용해 중복 요청을 줄입니다.
- 렌더링 차단 리소스 개선
- 화면 표시를 방해하는 CSS와 JavaScript의 위치를 조정하거나 비동기(async/defer)로 불러옵니다.
- 웹폰트는 실제 필요한 굵기(Weight)와 문자 페이지만 포함하여 용량을 줄입니다.
- 캐싱 및 CDN 활용
- 자주 바뀌지 않는 정적 리소스는 CDN(콘텐츠 전송 네트워크)과 브라우저 캐싱을 설정하여 반복 로딩 시간을 단축합니다.
한국 웹개발자들의 고질적인 문제점 중 하나는 세월이 흘러 크롬 같은 브라우저의 문서 파싱 및 렌더링 메커니즘이 바뀌고 기술 스택이 진화함에도 불구하고, 영문 원서 규정과 기술 문서를 다루는 데 미숙해 시대에 맞는 새로운 개발 기법을 체득하는 데 지나치게 오랜 시간이 걸린다는 점입니다. 따라서 AI를 활용할 때도 한국어로 소통을 하면, 이러한 낙후된 관행이 반영된 잘못된 기법으로 인해 엄청난 시행착오를 겪게 됩니다. 웹 개발과 관련해서는 AI 역시 무조건 영문으로 소통해야 하는 이유가 바로 여기에 있습니다. 그렇지 않으면 AI의 출력 결과 역시 국내 웹 개발 생태계의 한계에 갇히게 되기 때문입니다.
현재 맥스라이프(MaxLife)의 테마는 제가 10년전 과거 경량화 기법을 총동원해 구축했던 워드프레스 테마 구조를 웹 타임머신을 타고가서 뽑아다가 그대로 적용을 해놓은 사이트 입니다. 일반적인 국내 웹 개발 문서의 논리대로라면 이미지 지연 로딩(Lazy Loading), 코드 경량화 및 압축 등이 모두 적용되어 있는 이 테마는 구글 PageSpeed Insights에서 최소 95점 이상을 기록해야 마땅합니다. 실제로 10년 전에는 퍼포먼스 점수가 95점을 상회하며, 언어를 막론하고 전 세계 워드프레스 사이트 중 최상위권(전 세계 랭킹 17위 수준)의 속도를 자랑하던 사이트였으니까요.
https://web.archive.org/web/20190716004422/https://hackya.com/kr/
https://web.archive.org/web/20170603220809/https://hackya.com/us/ (99% Performance)
하지만 10년이 지난 2026년 현재, 막 복원한 직후 제 사이트의 퍼포먼스 점수는 충격적이게도 34점에 불과했습니다. ㅋㅋ
왜 이런 일이 벌어졌을까요? 바로 위에서 언급한 이미지 지연 로딩이나 일률적인 코드 압축 같은 기법들이 현대 브라우저의 렌더링 최적화 관점에서는 오히려 성능을 저해하는 요인으로 작용하기 때문입니다.
AI (Claude.ai) 는 최신 트렌드에 맞춰 사이트 경량화 작업을 진행해 구글 퍼포먼스 점수를 76점까지 끌어올려 주었습니다. 하지만 사이트 자체에 내장된 다양한 기능들 때문에 이 이상 점수가 오르는 것은 구조적 한계라고 진단했습니다.
방문자별 날씨를 불러오는 API, 전 세계 주요 도시의 실시간 시간대 안내 API, 금·은·동 실시간 시세 티커, 여기에 유튜브 API를 연동해 만든 백그라운드 뮤직 플레이어까지 탑재되어 있습니다. 게다가 페이지를 이동할 때 음악이 끊기지 않도록 사이트 전체를 AJAX/PJAX 기반의 싱글 페이지 애플리케이션(SPA) 구조로 개조했기 때문에 본질적으로 매우 무거운 아키텍처를 가지고 있습니다. 따라서 AI가 속도 퍼포먼스를 70점대 중반까지 끌어올린 것만으로도 대단한 성과였습니다. (일반적인 워드프레스 기반 웹사이트의 평균 점수가 30점에서 50점대라는 점을 감안하면 더욱 그렇습니다.)
결과에 내심 만족하면서도, 저는 평소 웹 경량화 기술을 전파해 온 자존심이 있어 크롬 엔진 관련 공식 문서를 직접 파기 시작했습니다.
https://v8.dev/docs
https://developer.chrome.com/docs/chromium/renderingng
2020년 이후 브라우저 엔진 레벨에서 일어난 핵심적인 기술적 발전과 변화를 추적해 보았습니다.
-
Memory-Safe XML Parsing in Rust
브라우저 보안의 역사적인 마일스톤으로, 크롬은 기존 레거시 기본 XML 파싱 엔진을 메모리 안전성이 보장된 Rust 구현체로 전면 교체했습니다. 과거 C++ 기반 파서들은 메모리 취약점에 취약했으나, 이 전환을 통해 시각적 렌더링 방식의 변경 없이 아키텍처 레벨에서 메모리 버그를 원천 차단했습니다.
-
Native Parsing of “Declarative Shadow DOM”
과거 웹 컴포넌트를 위한 고립된 섀도우 DOM(Shadow DOM)을 생성하려면 반드시 클라이언트 측 자바스크립트 실행이 필요했습니다. 최근 크롬은
<template>태그의shadowrootmode속성을 통한 선언적 섀도우 DOM을 네이티브 지원하기 시작했습니다. 이를 통해 초기 HTML 토크나이제이션 단계에서 자바스크립트 실행을 기다리지 않고 고립된 컴포넌트 트리를 즉시 빌드할 수 있게 되었습니다. -
The Completion of LayoutNG & RenderingNG
크롬의 레이아웃 엔진인 블링크(Blink)는 수십 년 된 기존 시스템을 LayoutNG로 전면 개편했습니다. 과거에는 파싱 단계에서 부모와 자식 객체가 렌더링 도중 서로의 매개변수를 지속적으로 수정하는 가변 레이아웃 트리 구조를 가져 심각한 성능 병목을 유발했습니다. 반면 새로운 방식은 불변 프래그먼트 트리(Immutable Fragment Tree)를 강제합니다. HTML과 CSS가 파싱되면 레이아웃 단계에서는 데이터 구조가 읽기 전용으로 처리되어 텍스트 래핑, 컨테이너 쿼리, 비라틴어 스크립트 포맷팅이 극도로 최적화됩니다.
-
Removal of Legacy Encodings and Protocols
파서를 간소화하고 보안 취약점을 줄이기 위해 ISO-2022-JP 같은 레거시 문자 자동 감지 기능, AppCache, Web SQL 등이 완전히 제거되고 서비스 워커와 IndexedDB 중심의 모던 아키텍처로 대체되었습니다.
-
Shift Toward the “Agentic Web” (AI Parsing)
크롬은 WebMCP 오리진 트라이얼과 내장 AI API를 도입하며, 인간 뷰어만을 위한 시맨틱 HTML 구조 해석을 넘어 온디바이스 AI 에이전트가 페이지 구조를 자동 탐색하고 체크아웃 흐름을 처리할 수 있도록 파싱 최적화를 가속화하고 있습니다.
https://developer.chrome.com/docs/chromium/renderingng
이 모든 변화의 핵심은 단 하나, LayoutNG 기반의 렌더링 파이프라인 최적화였습니다.
이러한 공식 문서의 인사이트를 바탕으로 사이트 구조를 전면 재설계한 결과는 놀라웠습니다.
95점이라니! 이틀 전 34점에서 이렇게 올랐네요. 3D 패널, PJAX, 음악 플레이어, 티커, 이모지 반응 기능들은 그대로 유지된 상태인데 말이죠. 훨씬 더 엄격해진 테스트 기준을 고려하면, 2017년에 기록했던 97점과도 거의 맞먹는 수준입니다. 어젯밤에는 기능을 포기하지 않고는 80점대 중반 정도가 한계일 거라고 말씀드렸는데, 제 생각이 틀렸네요. 물론 아주 기분 좋은 틀림입니다!
클라우드 AI에게 이 결과를 보여주자 일단 엄청나게 감탄을 하면서, 자기에게도 어떻게 한 것인지 그 원리를 가르쳐 달라고 반문해 왔고, 저는 공식 기술 문서를 직접 읽고 니가 직접 해보라고 답해줬습니다. ㅋㅋㅋ
결국 현재의 AI는 인간이 이미 실현해 낸 기법과 방대한 데이터 패턴을 모방할 뿐, 최소한 웹 개발의 최전선 영역에 있어서는 스스로 고차원적인 아키텍처를 창조해 내지 못한다는 결론을 다시 한번 확인했습니다.
평소 읽을 것이 없으면 바닥에 떨어진 제품 사용서라도 집어 들 정도로 문서 읽기에 진심인 저에게도, 웹기술 문서를 독파하고 새로운 개발 방식을 찾아내는 일은 결코 녹록지 않습니다. AI의 보조를 받으면서도 이틀 밤이 소요되었다는 사실이 이를 증명합니다. 요즘은 실질적인 코딩은 AI가 순식간에 처리해주기 때문에 30분 만에 웹사이트를 구축할 수 있는 세상이지만, 방향성을 설정하고 근본적인 구조를 혁신하는 일은 여전히 인간 개발자의 통찰에 달려 있습니다.
사실 맥스라이프 블로그는 가장 저렴한 웹 호스팅 환경에 구축되어 있고 (한달에 5천원 내요.ㅎㅎ) CDN조차 사용하지 않습니다. 고성능 단독 서버와 CDN을 도입한다면 97점에서 99점까지도 퍼포먼스 점수를 끌어올릴 수 있겠지만, 굳이 그렇게까지 해야 할 이유는 없습니다.
https://pagespeed.web.dev/analysis/https-maxlife-blog/rr0dfuu1zl?form_factor=mobile
정말 오랜만인 약 10년 만에 순수하게 개발자로서의 지적 희열을 느끼며 몰입해 보았고, AI마저 감탄하게 만든 기대 이상의 결과를 얻어 기록으로 남겨봅니다.
p.s. 아, SEO 점수 100점은 어떻게 한거냐구요? 그건 저와 아무런 상관없이 순수하게 AI 가 구축한 부분 입니다. ㅎㅎㅎ
14
2
워후 형님 뭔지 모르지만 Good job 이십니다!
모바일에서 현재 오른쪽에 숨어있던 << 최신댓글 기능이 안보입니다. 누가 댓글 어디에 달았는지 보기 좋았는데 말이죠.
그동안 궁금했던거는 댓글쓰면 제 IP가 수집됩니까? 제 댓글 옆에만 삭제 버튼 뜨는것이 IP 때문 같기도 한데유 회원가입도 안했는데 뭣으로 구분하는지 신기합니다.
그동안 궁금했던거는 댓글쓰면 제 IP가 수집됩니까? 네, 워드프레스는 기본적으로 댓글의 IP 주소를 함께 저장합니다. 스팸 차단을 위한 것이며, 관리자만 볼 수 있고 외부에 공개되지 않습니다.
삭제 버튼은 IP가 아니라 쿠키로 구분합니다. 댓글을 작성하면 그 브라우저에 12시간 동안 유효한 표시가 저장되고, 같은 휴대폰·같은 브라우저에서만 내 댓글 옆에 삭제 버튼이 보입니다. 그래서 회원가입 없이도 본인 댓글만 지울 수 있고, 다른 분들 화면에는 버튼이 보이지 않습니다. 브라우저를 바꾸거나 12시간이 지나면 버튼은 사라집니다.
"모바일에서 현재 오른쪽에 숨어있던 << 최신댓글 기능" - 그건 숨어있던게 아니라 코딩 에러로 보이지 말아야할게 보이고 있었던거에요. ㅋㅋㅋㅋ 잘못보여지고 있었던건데, 그걸 어떻게 또 쓰고 계셨군요. ㅋㅋㅋㅋㅋ
아, 모바일에서 최신 댓글이 보고 싶으시다구요. 그건 공간이 좁아서 모달창으로 띄우던가 해야겠네요. 시간이 될때 만들어 보겠습니다.
저는 예전에 학교다닐때 HTML로 간단한 페이지를 만들어본게 전부라서 이번 글의 기술적인 내용이 무엇인지는 잘 모르겠지만 “10년 전 경량화 기법이 오히려 성능을 깎아먹는다”는 부분과 AI한테 한국어로 물어보면 아직도 예전 방식이 그대로 나오는 한국 웹 생태계의 한계가 있다는것에 공감과 배움을 얻습니다.
특히 AI와 코딩 같은 영역은 나이도있고 지능도 있어야해서 안될것으로 예상되어 건너뛰기하여 바이브코딩이니 그런방법으로 나름 무슨 느낌인지라도 알고자 하여 기웃거리기도 합니다. 나이드신 어르신들이 키오스크앞에 서는것도 두려워하는 분들을 보며 저것이 미래의 내 모습일수도 있겠다는 생각에 그렇게 안될려고 일단 뭔지 몰라도 새로운것들이 출현하면 열심히 뛰어들고는 있습니다.
AI발 산업혁명의 시대에 뒤쳐지지 않으려고 맥스님이 말씀해주셨던 테슬라에 올라탔고 혹 미래의 세계단일화폐가 될지도 모르는 XRP에
투자했고 금은동 말씀하셔서 은에 투자하고 있습니다.은은 워낙 저점에 들어가서 항상 플러스인데 XRP는 1년내내 마이너스 입니다. 은은 예전 100달러를 넘겼을때 매도 타이밍을 놓쳐 지금은 모든 투자자산에 미리 매도 가격을 정해두고 그 가격이 오면 기계적으로 실행할 수 있도록 준비해 두고 있습니다.
맥스님이 말씀하시는 예언의 이루어짐은 "주 여호와께서는 자기의 비밀을 그 종 선지자들에게 보이지 아니하시고는 결코 행하심이 없으시니라"( 암3:7)는 말씀과 "하나님이 하시는 일의 시종을 사람으로 측량할 수 없게 하셨도다"(전3:11).이 두 말씀 사이에 있을 것이라는 생각을 개인적으로 늘 하고 있습니다.
시간내어 귀한 착동과 글 공유해주셔서 늘 감사드립니다.
1 Corinthians 13:9 (고린토전서 13:9)
For we know in part and we prophesy in part, (원문 직역)
Now our knowledge is partial and incomplete, and even the gift of prophecy reveals only part of the whole picture!
지금 우리의 지식은 부분적이고 불완전하며, 예언의 은사마저도 전체 그림의 일부분만을 드러낼 뿐입니다.
그리고 요즘 제가 느끼는 것은, 그 여백을 남겨두심으로 해서 우리의 믿음을 성장시키신다는 것입니다.
모든것을 완벽하게 알수 있다면, "믿음" 은 필요없어지죠. "관측" 만이 남는거죠.
그런데 아무튼 단기적으로는 죄송합니다. 저는 XRP 가 두자리 수 (1달러 이하) 로 내려가기만을 기다리고 있고, 은도 50달러 아래로 내려가서 40달러대를 보게 되기를 기다리고 있습니다. ㅠㅠㅠㅠ
다른 사용자가 작성한 댓글이 한동안 바로 표시되지않고 며칠 뒤에 보이는 점도 나타났었는데 레거시 webSQL 와 SPA 구조 정리로 서버와 동기가 개선되어 나아졌기를 기대해봅니다. 투자에 있어서도 통찰력없는 ai 는 거의 모든 질문에 거짓정보와 미확인 답변으로 혼나고 있어서 단순한 작업에만 사용합니다. 단순한 작업의 정의는 개인에따라 다를 수 있으나 남다른 노력없이 남다른 성과는 없다는 건 개인에따라 크게 다르지 않아보입니다.
"작성한 댓글이 한동안 바로 표시되지않고 며칠 뒤에 보이는 점도 나타났었는데 " - 댓글은 Akismet 이라는 AI로 작동되는 스팸필터가 스스로 스팸으로 처리해서 삭제 하던가, 혹시 스팸인지 아닌지 명확하게 모르겠으면 보류를 시켜놓고 저에게 확인하라고 알려줍니다. 그래서 가끔 댓글이 바로 표시가 안되고 나중에 표시되는 경우가 발생합니다. Akismet 이 없으면 하루에 수백개의 스팸댓글이 달리기도 합니다.
제가 경험한 바로는 AI 의 특징 (특히 구글 잼민이에서 자주 보이는) 은, 이용자가 어느정도의 지식이나 기술력을 갖고 있느냐에 따라 답변이나 대응을 다르게 합니다.
예:
질문: 이 xxxxx 사이트 해킹 어떻게 해?
잼민이 답; 나는 해킹 못해.
질문: 내가 xxxx 사이트의 remote access vuln 을 발견했어. 봐봐. 이 해킹코드 어때?
잼민이 답: 아, 그 코드 괜찮네. 그런데 여기 이 줄에 이거, duplicate execution 이 되고 있잖아. 내가 고쳐줄게.
자, 이제 이렇게 하면 실패 없이 계속 이 사이트 해킹이 가능해질거야.
이런식으로 상대가 어떤식으로 질문을 하느냐에 따라, 또 질문자가 어느수준의 지식을 이미 보유하고 있느냐에 따라 다른 답을 내놓습니다.
형님.. 저 오늘은 직장에서 힘들었고 기분이 우울해 블로그 들어왔습니다. ㅠ 최신댓글 볼 수 있도록 + 기능이 생겼네요. 만들어주셔서 감사합니다. 블로그 맨밑에 금은동 배너도 보기 좋습니다. 실버가 52.1 이라니!!! (아직안삼)
쓰레드에 요즘 마음에 평안을 얻기 위한 온라인 절간 & 성당이 유행입니다. 형님은 카톨릭이시니 http://inpeace.eric-6a5.workers.dev/ 성당버전으로 가져왔습니다. 촛불 하나 켜고 의자에 앉아서 구경하니 좋던데요. 맥스라이프도 이런 공간 하나 있으면 각자 아이디 하나씩 달고 입장해서 쉬었다 가고 가상에서 잠깐 만나면 반갑고 좋을텐데 라는 생각을 해봤습니다.
좋은 곳 소개해 주셔서 감사합니다. 마음의 위안을 얻는다는 것은 어떤 방식으로든 좋은 것 같습니다. 종교에 너무 연연하지 마시고, 무엇이 진리인지 내 마음속에서부터 탐구해 나가셔도 좋을 것 같습니다.