웹사이트 성능 개선하기¶
TL;DR
M2Live는 성공적인 웹 경험 을 위한 토탈 패키지를 제공한다.
Google은 무슨 생각을 할까?¶
Google의 주요 활동을 간단히 정리해 보자.
검색엔진 (=Search Engine Optimization의 사실상 표준)
Chrome브라우저와 개발자 도구HTML5표준 제정 및 개선HTTP/2,HTTP/3전송 프로토콜HTTPS웹 보안 촉진 및 Let’s Encrypt 지원V8 엔진 제공 및 TC39 참여
Web.dev 사이트
Google은 2019년부터 web.dev 를 통해 웹의 기술적 지향점을 아주 구체적으로 이야기하고 있다. 그들의 펀치라인에서도 목표가 잘 드러난다.
Let’s build the future of the web, together
한마디로 web.dev 의 지침을 충실히 이행하는 것이 Google이 이끌어가는 인터넷 환경에서 도태되지 않고 성공하기 위한 핵심 전략이라 할 수 있다.
페이지 성격 이해하기¶
웹사이트는 인덱스 페이지 와 콘텐츠 페이지 로 나눌 수 있다.
인덱스 페이지메인, 카테고리, 검색 등 웹사이트의 다양한 섹션으로 연결되는 페이지콘텐츠 페이지글, 동영상, 상품 상세정보 등 사이트 방문 목적이 달성되는 페이지
E-Commerce의 경우 메인 페이지, 대/중/소분류, 검색등은 모두 인덱스 페이지 로 분류될 수 있다.
디자인은 각기 다르지만 목적은 효과적인 상품 선별/노출이다.¶
콘텐츠 페이지 는 모든 사이트가 대동소이하며 대부분 Long Scrolling 스타일이다.
페이지의 성격이 상이하기 때문에 적용되는 정책이나 처리하는 방식도 최적화되어야 한다.
두 페이지 스타일의 특성 비교¶
주요 개선포인트¶
페이지의 성격은 달라도 web.dev 가 공통적으로 제안하는 개선 포인트는 다음과 같다.
Warning
압니다. 모두에게 시간, 인력, 인프라 가 부족하다는 것을요!
문제 |
제안 |
|---|---|
|
|
고용량 애니메이션 |
|
선제적 전체로딩 |
|
|
|
느리거나 경제적이지 못한 전송전략 |
|
안전하지 않은 웹사이트 |
|
낡은 비디오 전송전략 |
|
모니터링 전략 부재 |
우리의 모든 문제 접근방식은 아래와 같다.
고객사 백엔드의 복잡도를 올리지 않는다.
모든 기능은
on the fly실시간으로 처리된다.모든 최신 기술은 검증된 호환성에 기반한다.
모든 것을 측정하고 시각적으로 노출한다.
영원히 업데이트한다.
이미지 포맷 전환¶
WebP 와 AVIF 포맷은 JPEG 에 비해 더 작은 파일 크기로 동일한 품질의 이미지를 제공하여 페이지 로딩 속도를 향상시킨다.
이는 사용자 경험을 개선하고, 페이지 로딩 속도가 빨라져 SEO(Search Engine Optimization) 에도 긍정적인 영향을 미친다.
Lazy Loading¶
사용자가 스크롤할 때 필요한 이미지나 콘텐츠만 로드하여 초기 로딩 시간을 줄이고, 서버 및 네트워크 리소스를 절약한다. 이는 사용자 경험을 개선하고 페이지 이탈률을 줄이는 데 기여한다.
Hint
http 페이지 엔진은 노출되지 않는 모든 이미지라 지연로딩되어 체감속도를 향상시킨다.
콘텐츠 전송 네트워크(CDN)¶
전 세계에 분산된 서버를 통해 콘텐츠를 제공하여 로딩 시간을 단축하고, 트래픽 급증 시에도 안정적인 성능을 유지할 수 있다. 콘텐츠 최적화를 통해 CDN 전송비용을 현저히 낮출 수 있다.
Hint
http 엔진으로 모든 요청/응답을 통제할 수 있다.
HTTP 요청 최소화¶
불필요한 HTTP 요청을 줄여 페이지 로딩 속도를 개선한다. 이는 웹사이트 성능을 향상시키고 사용자 만족도를 높인다.
Hint
cache 엔진을 이용하면 백엔드 요청을 드라마틱하게 절감할 수 있다.
코드 압축 및 최소화¶
CSS , JavaScript 파일을 압축 및 최소화하여 페이지 로딩 속도를 향상시킨다.
이는 데이터 전송량을 줄이고, 웹사이트의 반응성을 높인다.
Hint
compression 기능은 표준 HTTP 압축기능을 지원한다.
브라우저 캐싱¶
정적 리소스를 캐싱하여 반복 방문 시 로딩 시간을 단축한다. 이는 사용자 경험을 개선하고 서버 부하를 줄인다.
Hint
cache 엔진을 이용하면 CDN, 브라우저로 적절한 캐싱전략을 전달할 수 있다.
모바일 최적화¶
반응형 디자인을 통해 다양한 기기에서 최적의 사용자 경험을 제공한다. 모바일 트래픽이 증가하는 추세에 대응하여 전환율을 높일 수 있다.
Hint
pagefx 페이지 엔진은 데스크탑 기준으로 하드코딩된 페이지라도 반응형으로 동작하게 만든다.
보안 강화 (HTTPS 사용)¶
HTTPS를 통해 데이터 전송을 암호화하여 사용자 데이터를 보호하고, SEO 순위를 개선할 수 있다. 이는 신뢰성을 높이고 사용자 신뢰를 확보하는 데 기여한다.
Hint
pagemixed 페이지 엔진은 Mixed Contents 위험을 해결한다.
SEO 최적화¶
키워드 최적화, 메타 태그 활용 등을 통해 검색 엔진 가시성을 높이고, 더 많은 유기적 트래픽을 유도한다. 이는 브랜드 인지도와 전환율을 높이는 데 도움을 준다. 이러한 기술들을 통해 전자상거래 웹사이트는 더욱 빠르고, 안전하며, 사용자 친화적으로 개선될 수 있다. 이러한 개선은 고객 만족도를 높이고, 비즈니스 성과를 극대화하는 데 기여한다.
Hint
이상의 모든 기능이 결합하여 온라인 비지니스 성공의 발판이 된다.
No Silver Bullet¶
Warning
지금까지의 이야기들이 너무 좋게만 들릴 수도 있다. 물론 그런 목표를 위해 제품을 개발하지만, 솔루션의 범위와 한계를 명확히 고지해야 하는 것도 솔루션의 의무이다.
클라이언트 네트워크 환경¶
클라이언트 환경은 많이 개선되었지만, 여전히 음영지역은 존재한다. 단말기 요금제나 각 이통사마다의 트래픽 제한정책, 저성능의 모바일기의 근본적이 제한은 환경적 요인으로 점진적으로 개선된다.
데이터베이스 가용량¶
읽기 데이터에 대한 캐시등 데이터 소비패턴의 분석을 통해 데이터베이스 사용량을 최소화할 수 있지만, 여전히 모든 서비스의 중심은 데이터베이스이다. 데이터베이스와의 직접 연결 및 통신은 지원되지 않으며, 지향하지도 않는다.
스토리지 가용량¶
이미지/비디오 실시간 변환은 미래의 스토리지 사용량을 드라마틱하게 낮춘다. 하지만 지금까지 스토리지에 저장된 콘텐츠를 삭제할 수는 없다. “읽기” 만 수행하며 더 많은 “쓰기”가 발생하지 않는 구조를 제안한다.
복잡한 비지니스 로직¶
비지니스 로직은 엔트로피가 증가하는 것과 같은 성격을 가진다. 인원과 과정은 때와 제약사항등 여러 이유로 필연적인 부분이 있다. 우리는 API호출의 결과에만 집중한다.