데브허브 | DEVHUB | 못생긴 웹사이트가 매출과 전환율이 높은 이유 (속도와 성능 높이는 방법 6가지)
잘 만드러진 웹사이트는 어떤 웹사이트일까요? 당연히 로딩 속도가 빠르고 성능이 높은 웹사이트입니다.
요즘 웹개발에 안 좋은 트렌드가 속속히 등장하고 있습니다. 형식(form)이 기능(function) 보다 우선시 되고 있습니다.
리소스 잡아먹는 이미지나 애니메이션이 남용되고 있습니다.
저는 이 트렌드가 웹개발, 웹디자인의 허영과 겉멋이라고 생각합니다.
그 이유가 이번 영상 주요 논점입니다:
1. 웹사이트의 본질적 기능과 목적은 무엇일까요? 리소스 잡아먹는 애니메이션 효과는 과연 방문자 전환율 높이는데 효과적일까요?
파일 크기가 큰 아름다운 배경 이미지는 방문자의 인터페이스 클릭 유도에 효과적일까요?
2. 웹사이트 스피드와 퍼포먼스 테스트에서 100점을 받은 어느 한 기업의 웹사이트가 화제입니다.
1901년에 설립 McMaster-Carr Supply Company 홈페이지를 본보기 삼아 높은 성능의 배경 기술을 살펴봅니다.
3. 어떤 웹사이트 개발이 진정으로 제작 의뢰한 고객을 위한 웹개발인지 설명합니다.
4. 홈페이지 제작 의뢰한 고객은 정말 자신이 원하는 게 뭔지 알고 있을까요? 고객의 주장과 생각은 항상 맞을까요?
5. 왜 못생겼지만 빠르고 성능 높은 웹사이트가 최고의 웹사이트인지 그 이유를 설명합니다.
6. 형식(form) 보다 기능(function), 이러한 트렌드는 잘못됐습니다. 항상 기능이 형식보다 우선시해야 합니다. Function over form.
맥마스터-카(McMaster-Carr) 웹사이트가 성능(performance) 최고 점수를 받을 수 있게 한 웹 기술 6가지를 설명합니다.
1. 서버 사이드 렌더링(Server-side rendering).
2. HTML 선인출(HTML prefetching).
3. 적극적인 캐싱(Aggressive Caching): CDN을 사용한 캐시(cache) 방법이 포함됩니다.
4. 서비스 워커 캐싱(Service Worker Caching): 웹 브라우저의 HTML 캐시를 위한 자바스크립트 파일에 대해 설명합니다.
5. 리소스 사전 로드(Preloading Resources). HTML 링크 태그에서 rel="preload" 속성을 이용한 방법입니다. DNS 선인출(DNS prefetching)도 함께 사용합니다.
6. 인라인(inline)으로 크리티컬 CSS 사용(Serving Critical CSS Inline) 방법을 설명합니다.
#웹개발 #코딩 #홈페이지
![[U Day Seoul 2024] Unity 6, 그 이후: Unity 엔진 및 서비스 로드맵](https://i4.ytimg.com/vi/g2K5qpNesCU/hqdefault.jpg)
