웹 프런트엔드 최적화 방법

현재 웹 사이트 시스템, OA 플랫폼 등의 개발을 포함하여 인터넷 BS 모델의 적용이 점점 더 광범위해지고 있습니다. 그렇다면 이를 어떻게 잘 수행하고, 사용자에게 좋은 경험을 선사할 수 있을까요? 웹 프런트엔드 최적화에 대한 내 경험을 공유하겠습니다. 이러한 경험은 업무 실무에서 더욱 실용적인 기술입니다.
1. HTTP 요청 수를 최소화하세요. 절충이 필요합니다.

이미지 병합( 예를 들어 CSS 스프라이트), 내장 이미지 사용 데이터), CSS와 JS를 병합하는 것은 매우 중요하지만 병합된 파일의 크기를 고려해야 합니다.

　2. 콘텐츠를 캐시할 수 있도록 파일 헤더에 Expires 또는 Cache-Control을 지정합니다.

향후 페이지 방문 시 불필요한 HTTP 요청을 방지하려면 정적 콘텐츠와 동적 콘텐츠를 구별하세요.

3. 빈 src 및 href를 피하세요

link, script, img, iframe 등과 같은 두 가지 속성이 있는 태그에 주의하세요

4. gzip을 사용하세요. 콘텐츠 압축

Gzip은 가능한 모든 파일 형식을 압축하여 파일 크기를 줄입니다

5. CSS를 맨 위에 배치

페이지에 적합한 순서대로 페이지를 로드합니다. 더 많은 콘텐츠 웹 페이지와 인터넷 속도가 느린 사용자에게는 더 중요합니다. 동시에 HTML 사양에는 스타일 시트가 페이지에 포함된 영역 내에 배치되어야 한다고 명시되어 있습니다.

　6. JS를 맨 아래에 배치

HTTP/1.1 사양에서는 브라우저가 호스트 이름당 두 개 이하의 콘텐츠를 병렬로 다운로드하도록 권장합니다. 문제는 호스트 이름이 있더라도 스크립트가 페이지의 병렬 다운로드를 방지한다는 것입니다.

　7. CSS 표현식 수식 사용을 피하세요

페이지가 표시되고 확대/축소되거나 스크롤되거나 심지어 마우스를 움직일 때 CSS 표현식의 계산 빈도에 주의해야 합니다. 일회성 표현식을 고려하거나 CSS 표현식 대신 이벤트 핸들러를 사용하세요.

8. CSS와 JS를 외부 파일에 넣기

내장 코드로 인한 HTTP 요청 감소와 외부 파일을 사용하여 캐싱하는 이점 사이의 절충안을 고려해야 합니다.

9. CSS 및 JS 간소화

다운로드한 파일의 크기를 줄이는 것이 목적입니다. 압축 도구인 JSMin 및 YUI Compressor를 고려할 수 있습니다.

10. 중복된 JS 및 CSS 제거

스크립트에 대한 반복 호출은 추가 HTTP 요청을 추가할 뿐만 아니라 여러 작업에 시간을 낭비하게 됩니다. IE와 Firefox에서는 스크립트의 캐시 가능 여부에 관계없이 모두 JavaScript를 재평가하는 문제가 있습니다.

11. AJAX를 캐시 가능하게 만들기

타임스탬프를 사용하면 보다 정교한 방식으로 응답을 서버 데이터와 동기적으로 캐시하고 업데이트할 수 있습니다.

12. 출력 버퍼를 최대한 빨리 새로 고침

특히 CSS의 경우 js 파일의 병렬 다운로드가 더 의미가 있습니다

13. GET을 사용하여 AJAX 요청 완료

XMLHttpRequest를 사용할 때 브라우저의 POST 메서드는 "2단계" 프로세스입니다. 먼저 파일 헤더가 전송되고 데이터가 전송됩니다. URL이 2K 미만일 때 데이터를 가져오기 위해 GET을 사용하는 것이 더 합리적입니다.

14. 레이지 로딩

페이지가 정상적으로 실행되는지 확인한 후 드래그 앤 드롭과 애니메이션을 구현하는 스크립트를 로드하거나, 컨텐츠의 일부를 숨기고 컨텐츠를 접습니다.

15. 사전 로딩

무조건 로딩, 조건 로딩, 예상 로딩에 주의하세요.

16. iframe 수를 최소화하세요

콘텐츠가 비어 있어도 로드하는 데 시간이 걸리므로 페이지가 로드되지 않으며 의미상 의미가 없다는 점을 고려하세요. 1- 다른 DOM 요소보다 2배 높은 오버헤드로 일반적인 방식으로 onload 이벤트를 차단하며 IE 및 Firefox의 기본 페이지 스타일시트는 해당 다운로드를 차단합니다.

17. 404 방지

HTTP 요청 시간 소모가 매우 큽니다. 일부 사이트에서는 404 오류 응답 페이지를 "*를 찾고 계십니까?"로 변경했습니다. 이로 인해 사용자 경험이 향상되었습니다. 또한 서버 리소스(예: 데이터베이스 등)도 낭비됩니다.

18. 쿠키 크기 줄이기

불필요한 쿠키를 제거하고, 사용자 응답에 미치는 영향을 줄이기 위해 쿠키 크기를 최대한 작게 만들고, 합리적인 만료 시간을 설정합니다. 만료 시간을 앞당기고 쿠키를 너무 일찍 지우지 않으면 사용자 응답 시간이 향상됩니다.

19. 이미지 최적화

GIF 형식을 PNG 형식으로 변환하여 공간이 절약되는지 확인해 보세요. 모든 PNG 이미지에 대해 pngcrush(또는 기타 PNG 최적화 도구)를 실행합니다.

20. HTML에서 이미지 크기를 조정하지 마세요 – 장단점

HTML에서 높이와 너비를 설정하기 위해 비율을 사용하지 마세요 실제로는 더 큰 사진이 필요합니다.