웹 퍼포먼스를 최적화하는 방법

1. 이미지 최적화

 

 

• 이미지 파일 포맷을 선택할 때는 WebP 또는 JPEG 2000을 사용해야 한다.
• 이미지 파일 크기를 줄이기 위해 압축 툴을 사용하고, 레이아웃 요소에 따라 이미지 사이즈를 조절해야 한다.
• 여러 버전의 이미지를 생성해 브라우저에 맞는 이미지를 제공해야 한다.
• 이미지를 레이지 로딩하여 페이지 로딩 속도를 향상시켜야 한다.
• 이미지에 대체 텍스트를 추가하여 시각 장애인이나 검색 엔진이 인식하도록 해야 한다.

 

 

2. CSS와 JavaScript 압축

 

 

• 불필요한 공백 제거: CSS와 JavaScript 코드 내의 불필요한 공백을 제거하여 파일 크기를 줄이고 로딩 속도를 향상시킬 수 있습니다.
• CSS 스프라이트 활용: 여러 이미지를 하나의 파일로 합치고 CSS의 background 속성을 이용하여 필요한 이미지만 보여주는 방식으로 HTTP 요청 수를 줄일 수 있습니다.
• 외부 CSS, JavaScript 파일의 압축: 파일 크기를 줄이기 위해 CSS와 JavaScript 파일을 압축하는 방법을 사용하면 파일 다운로드 시간을 단축할 수 있습니다.

 

 

3. 렌더링 최적화

 

 

```

• 이미지 최적화: 이미지 파일을 압축하고 웹프로젝트에 필요한 크기로 조절하여 불필요한 데이터를 줄입니다.
• CSS 및 JavaScript 최소화: 필요없는 부분을 정리하고 불필요한 스크립트를 줄여서 빠른 로딩을 도와줍니다.
• 렌더링 지연 최소화: 렌더링 시작 전 요소들을 사전에 로딩하고, 필요한 리소스를 지연시키지 않고 로드합니다.
• 폰트 최적화: 폰트 용량을 최소화하고 필요한 글꼴만 로드하여 성능을 향상시킵니다.

```

 

 

4. 서버 응답 시간 최소화

 

 

• 서버 응답 시간을 빠르게 하는 방법중 가장 간단하면서도 효과적인 것은 캐시를 활용하는 것이다.
• 또한, CDN(Content Delivery Network)을 이용하여 사용자들에게 빠른 응답 속도를 제공할 수 있다.
• 인라인 CSS 및 자바스크립트 코드를 최소화하고, 외부 파일로 분리하여 불필요한 요청을 줄이는 것도 중요하다.
• 파일 압축을 통해 파일 크기를 줄이고, 이미지 최적화를 통해 로딩 시간을 단축시키는 것 또한 필요하다.

 

 

5. 캐싱 활용

 

 

• 정적 캐싱: 정적 리소스들에 대한 캐싱 지정
• 동적 캐싱: 동적 콘텐츠도 캐싱하여 서버 부하 감소
• 브라우저 캐싱: 클라이언트 측에서 캐시를 활용하여 네트워크 요청 횟수 감소
• 컨텐츠 캐싱: CDN과 같은 서비스를 통해 콘텐츠를 캐싱하여 전 세계적으로 속도 향상
• 서버 캐싱: 서버에서 캐시를 생성하여 다시 사용할 수 있도록 관리

 

 

6. 사용자 경험 개선을 위한 웹 퍼포먼스 체크리스트

 

 

• 로딩 시간: 웹 사이트 로딩 속도를 최적화하여 사용자 기다림 시간을 최소화한다.
• 모바일 최적화: 모바일 환경에서도 웹 사이트가 깔끔하게 보이고 잘 작동하는지 확인한다.
• 반응성 디자인: 웹 사이트가 다양한 디바이스와 화면 크기에 대해 반응적으로 보이도록 한다.
• 내비게이션: 사용자가 쉽게 정보를 찾을 수 있도록 직관적인 내비게이션을 제공한다.
• 콘텐츠 최적화: 텍스트, 이미지 등 콘텐츠를 최적화하여 빠르게 로딩되도록 한다.
• 시각적 일관성: 일관된 디자인과 색상을 유지하여 사용자의 시각적 편의성을 높인다.