[HTML] 📈최적화 하는 방법

▷ 브라우저 이미지 최적화

🌃 이미지 스프라이트

여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고
CSS의 background-position 속성을 사용하여 이미지의
일정 부분만 클래스 등으로 구분하여 사용하는 방법이다.

---

🌃 아이콘 폰트 사용

Font Awesome
Font Awesome에서 키트를 html의 head에 넣어주거나,
React에서는 직접 설치를 해서 사용할 수 있다.

불러온 아이콘은 클래스명을 직접 붙이거나
Font Awesome이 정해준 방법을 사용하여 스타일링 해주면 됨.

// 핵심 패키지 설치
npm i --save @fortawesome/fontawesome-svg-core

// 아이콘 패키지 설치 (해당 코드는 무료 아이콘들입니다. 유료 아이콘을 사용할 경우 추가로 설치가 필요합니다.)
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

// Font Awesome React 구성 요소 설치
npm i --save @fortawesome/react-fontawesome@latest

-------
// 가져오기
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faReact } from '@fortawesome/free-brands-svg-icons'

const element = <FontAwesomeIcon icon={faReact} />

Boxicons
로그인을 하지 않고 사용할 수 있는 Boxicons도 있다.

---

🌃 WebP 또는 AVIF 이미지 포맷

// picture: img 요소의 다중 이미지 리소스를 위한 컨테이너를 정의할 때 사용한다.
// 만약 접속한 브라우저에서 <source>태그 내의 srcset에 정의한
// WebP 포맷을 지원하지 않는다면 해당 <source> 태그는 무시된다.
<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

---

▷ CDN 사용

Content Delivery Network

인터넷 사용자들에게 웹 콘텐츠를 빠르게 제공하기 위한 기술이다.
(웹 사이트 속도와 안정성을 향상시키고, 사용자 경험을 개선하기 위해 사용됨)

CDN은 세계 곳곳에 분포한 분산된 서버에 콘텐츠를 저장하고 있다.
유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져오기에
데이터가 전달되기 위해 거쳐야하는 서버의 갯수를 크게 줄여 로딩 속도가 빨라진다.

대표적인 CDN 서비스로는 Amazon CloudFront, Akamai, Cloudflare, Fastly 등이 있다.

---

▷ 캐시

캐시 유효 시간은 지났지만, 서버에서 다시 받아와야 하는 파일이 캐시에 저장되어 있는 파일과 완전히 동일한 경우라면? 굳이 똑같은 파일을 다시 받아올 필요 없이, 서버의 파일과 캐시의 파일이 동일한지 확인해서 재사용할 수 있는 HTTP 헤더인 캐시 검증 헤더와 조건부 요청 헤더가 존재한다.

💴 캐시 검증 헤더

캐시에 저장된 데이터와 서버의 데이터가
동일한지 확인하기 위한 정보를 담은 응답 헤더이다.

Last-Modified
데이터가 마지막으로 수정된 시점을 의미하는 응답 헤더로,
조건부 요청 헤더인 If-Modified-Since 와 묶어서 사용한다.

Etag
데이터의 버전을 의미하는 응답 헤더로,
조건부 요청 헤더인 If-None-Match 와 묶어서 사용한다.

💴 조건부 요청 헤더

캐시의 데이터와 서버의 데이터가 동일하다면
재사용하게 해달라는 의미의 요청 헤더이다.

If-Modified-Since
캐시된 리소스의 Last-Modified 값 이후에 서버 리소스가
수정되었는지 확인하고, 수정되지 않았다면 캐시된 리소스를 사용한다.

If-None-Match
캐시된 리소스의 ETag 값과 현재 서버 리소스의
ETag 값이 같은지 확인하고, 같으면 캐시된 리소스를 사용한다.

---

▷ 트리쉐이킹

🥛 import

import React from 'react' 가 아니라
import { useState, useEffect } from 'react'로 필요한 것만 뽑아 쓰기

🥛 Babelrc

// Babel은 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리임.
// ES5문법은 import를 지원하지 않아서 require로 변경시킴.
// But, require는 export 되는 모든 모듈을 불러옴.
// 이를 방지하기 위해 웹팩 설정 시 아래처럼 설정해 주어야 한다.
{
  “presets”: [[“@babel/preset-env”, { "modules": false }]]
   // 이제 import가 require로 변경되지 않는다.
}

🥛 sideEffects

웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우,
사용하지 않는 코드라도 트리쉐이킹 대상에서 제외 시킨다.

아래처럼 설정하면 사이드 이펙트가 발생하지 않으니
코드를 제외해도 된다는 것을 웹팩에게 알려줄 수 있다.

/* package.json */
{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": false
}

-------또는
// 특정 파일에서는 발생하지 않을 것임을 알려줄 수 있다.
{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": ["./src/components/NoSideEffect.js"]
}

---

▷ Lighthouse

다양한 지표를 이용해 웹페이지의
성능 검사를 해주며, 그에 대한 개선책도 제공해 준다.

개발자 도구에서 확인 할 수 있으며,
Node CLI에서도 실행이 가능하다.

Lighthouse 노드모듈을 이용해 동적으로 프로그래밍하여
페이지 검사 리포트를 생성할 수도 있다. (성능 테스트 자동화 가능)

// 전역 모듈로 설치
npm install -g lighthouse

// 검사를 실행
lighthouse <url>
  
// 모든 옵션을 볼 수 있다.
lighthouse --help 

---

🔍 분석 결과 항목

Performance - 웹 성능을 측정
화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지,
표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지,
화면에 불안정한 요소는 없는지 등을 확인한다.

Accessibility - 웹 접근성을 잘 갖추고 있는지 확인
대체 텍스트를 잘 작성했는지,
배경색과 콘텐츠 색상의 대비가 충분한지,
적절한 WAI-ARIA 속성을 사용했는지 등을 확인한다.

Best Practices - 웹 표준 모범 사례를 잘 따르고 있는지 확인
HTTPS 프로토콜을 사용하는지,
사용자가 확인할 확률은 높지 않지만
콘솔 창에 오류가 표시 되지는 않는지 등을 확인

SEO - 검색 엔진 최적화 확인
애플리케이션의 robots.txt가 유효한지,
meta 요소는 잘 작성되어 있는지,
텍스트 크기가 읽기에 무리가 없는지 등을 확인한다.

PWA (Progressive Web App) - 모바일 애플리케이션으로서도 잘 작동하는지 확인
앱 아이콘을 제공하는지, 스플래시 화면이 있는지,
화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을
점수가 아닌 체크리스트로 확인한다.

---

🔍 Performance 측정 메트릭