on&on

목차 Nginx란? 포트포워딩(Port Forwarding) 설정 HTTP redirect to HTTPS 📍 Nginx란? Nginx란 웹사이트의 서버를 도와주는 경량화 웹 서버이다. 클라이언트로부터 요청을 받았을 때 요청에 맞는 정적 파일을 전달하는 HTTP Web Server 또는 reverse proxy server로 활용하여 WAS의 부하를 줄일 수 있는 로드 밸런서 역할을 하기도 한다. Nginx는 요청에 응답하기 위해 비동기 이벤트 기반 구조를 가진다. 이것은 아파치 HTTP 서버의 스레드/프로세스 기반 구조를 가지는 것과는 대조적이다. 이러한 구조는 서버에 많은 부하가 생길 경우의 성능을 예측하기 쉽게 해준다. Apache의 C10K(동접자 수가 만 명이 넘어갈 때 효율적 방안) 문제점 해..

목차 Reduce unused JavaScript webpack Code Splitting lazy-loading(지연 로딩) Reduce unused JavaScript Lighthouse 검사를 받으면 performance 부분에서 Reduce unused JavaScript라는 문구를 많은 페이지에서 볼 수 있다. 직역하면 사용하지 않는 JavaScript 줄이기라는 의미로, 사용하지 않는 Javascript는 페이지 로드 속도를 느리게 만들기 때문에 이에 대한 경고 문구를 출력하는 것이다. Chrome Developer에서는 사용하지 않는 Javascript의 문제에 대해 이렇게 말하고 있다. 페이지가 로드될 때마다 브라우저는 페이지에서 무엇이든 렌더링하기 전에 JavaScript 파일을 다운로드..

목차 WebP(Web + Picture) SVG 형식 사용 이미지 스프라이트(Image Sprite) SVG 스프라이트(SVG sprite) WebP(Web + Picture) WebP란? WebP은 인터넷에서 이미지가 로딩되는 시간을 단축하기 위해 Google이 출시한 파일 포맷 WebP를 사용하면 웹 사이트에서 고품질 이미지를 표현할 수 있지만 PNG, JPEG 등 기존 포맷보다 파일 크기가 작아진다. WebP 파일을 저장할 때 압축 방식(무손실 압축, 손실 압축)을 선택할 수 있으므로 데이터 손실 없이 또는 중요하지 않은 정보의 일부만 손실하면서 이미지를 압축할 수 있다. WebP 파일을 사용해야 하는 이유 이미지는 서버에서 많은 공간을 차지한다. WebP를 사용하면 PNG, JPEG보다 크기가 작..

웹폰트 적용 성능 최적화 웹 폰트 렌더링 과정 CSSOM을 생성하는 과정에서 웹 폰트 링크로 정의된 부분을 만나면 해당 폰트 파일을 다운로드한다. 하지만 paint 과정에서 파일이 다운로드되지 않은 상태라면 브라우저는 해당 자원을 사용하는 콘텐츠의 렌더링을 하지 않는다. 이러한 과정 때문에 Mitt Romney 기사에서 NOT이 보이지 않는 사례가 발생한 것이다. 폰트 용량 최적화 WOFF2(Web Open Font Format 2.0) WOFF형식과 WOFF2은 압축된 폰트 형식이다. 이 중, WOFF2 형식이 30~50% 더 압축된 형식이다 폰트는 형식별로 크기와 지원되는 브라우저가 다르다. 아래는 내가 프로젝트에 적용했던 글꼴 Pretendard의 각 형식별 크기다. 보다시피 .woff2 확장자의 ..