(128 관리 3-2) 프론트-엔드 관점에서의 웹 최적화 방안 6가지

 

최근에는 웹기반 서비스의 증가와 모바일 퍼스트(Mobile First)에 따른
웹기반 서비스의 성능관리가 매우 중요하다.
다음에 대하여 설명하시오.

가. 웹 성능저하 요인
나. 프론트-엔드 관점에서의 웹 최적화 방안 6가지

 

참고 자료

---

참고한 좋은 글에는 우선 감사를 표하며...

 

웹 최적화 방법에 프론트엔드 최적화, 백엔드 최적화, 프로토콜 최적화 3가지가 있다고 합니다. 

각각의 개념과 대표적인 기법 몇 가지는 기억하면 좋을 듯 합니다. 

 

[웹 성능 최적화] 웹 최적화 (tistory.com)

[웹 성능 최적화] 웹 최적화

 

웹 최적화

최고의 웹 성능을 구현하기 위해 최고의 조건을 만드는 다양한 노력을 의미

 

웹 최적화 방법

 

프론트-엔트 최적화, 백-엔드 최적화, 프로토콜 최적화

 

프론트-엔드 최적화 

 

- UI / UX 관련된 최적화
- HTML, JS, CSS, Image 등에 대한 최적화 진행

 

대표적 프론트-엔드 최적화 기술

 

스트립트를 병합하여 브라우저의 호출 개수를 줄인다.	도메인 수를 줄여 DNS조회를 최소화한다.
스크립트 크기를 최소화해 바이트 자체를 줄인다.	DNS 정보를 미리 읽어 온다.
스크립트를 gzip 등으로 압축하여 전달한다.	CSS를 HTML상단에, JS를 HTML하단에 위치시킨다.
WebP 등으로 브라우저 이미지 형식을 최적화한다	page prefetching한다.
이미지 손실, 무손실 압축한다.	타사 스크립트가 웹 성능을 방해하지 않도록 조정한다.
Cache-Control 응답헤더를 통해 브라우저 캐시를 충실히 사용한다.

↓

상기 내용들은 하기 표처럼 3단락으로 구조화하여 표현하는 연습을 하면 좋습니다.

 

내용에 대해서는 선별해서 참조하시길 바라며, 

오늘 포스팅의 목적은 기출 문제 풀이도 중요하지만,

3단락 기반의 구조화 연습이 필요하다는 것입니다.

 

ex)

대상	방법	설명 (효과)
스크립트	병합	브라우저 호출 개수 감소
	크기 최소화	스크립트 용량(바이트) 자체 크기 감소
	압축	gzip 등으로 압축 전달
이미지	형식 최적화	WebP 등으로 브라우저 이미지 형식 최적화
	압축	손실 및 무손실 압축
캐시	Cache-Control 활용	브라우저 캐시 충실히 사용
DNS	도메인수 조정	DNS 조회 최소화
	정보 미리 읽기	DNS 정보 미리 읽기를 통한 최적화
CSS 및 JS	CSS 배치	HTML 상단 배치
	JS 배치	HTML 하단 배치

 

백엔드 최적화

 

웹 서버, 웹 애플리케이션 서버, 데이터베이스, 로드 밸런싱, DNS 서버 등을 최적화

 

서버 자원 증설 또는 콘텐츠의 캐싱을 가능한 많이 해서

응답 성능을 개선 할 수 있도록 하는것이 주요 목적

 

ex) 3단락 구조화에 대한 추가 예시입니다. 내용은 선별해서 참고하시기 바랍니다.

 

대상	방법	설명 (효과)
서버	자원 증설	웹 서버, 웹 애플리케이션 서버, DB 서버등의   CPU, 메모리, NIC 자원 증설 통한 성능 개선
DNS	서버 자원 증설	DNS 응답 개선 위해 서버 자원 증설
	캐싱	DNS 응답 개선 위해 데이터 캐싱 최대화
DB	정규화	DB 정규화 통해 디스크 I/O 최적화
	캐싱	DB 응답 시간 개선 위해 캐싱 최대화
로드밸런서	정책 최적화	로드밸런서 분배 정책 최적화 통한 응답 성능 개선
웹 애플리케이션 서버	웹 로직 개선	웹 애플리케이션 로직을 가볍고 빠르게 개발하여 성능 개선
프록시 서버	캐싱	프록시 서버 설정 통한 웹 콘텐츠 캐싱

 

프로토콜 최적화

 

 HTTP 프로토콜 자체의 효과를 극대화하면 콘텐츠를
최고 속도와 최저 지연 시간으로 전달할 수 있다.
즉 프로토콜 최적화는 웹 콘텐츠를 더 빠르게 요청하고 응답하도록
프로토콜을 업그레이드하는 과정이다.

 

---

웹 최적화란? (tistory.com)

웹 최적화란?