웹 성능을 향상시키는 5가지 실행 가능한 팁

웹사이트가 성공하고 Google에서 좋은 순위를 차지하려면 웹사이트가 빠르고 효율적으로 로드되는지 확인해야 합니다. 웹 성능은 웹 페이지가 얼마나 빨리 로드되고 사용자 입력에 얼마나 잘 응답하는지 측정한 것입니다. 파일 크기, 서버 응답 시간 및 코드 효율성을 포함하여 웹 성능에 영향을 줄 수 있는 여러 요인이 있습니다. 이 게시물에서는 웹 성능을 개선하고 사이트를 더 빠르게 실행하는 방법에 대한 몇 가지 팁을 제공합니다.
부분적으로는 Google에서 100% 페이지 속도를 갖도록 웹사이트를 최적화하는 방법입니다: https://www.kezios.fr/

1 - 이미지 개선

지연 로딩 이미지는 사용자가 페이지를 스크롤할 때만 이미지를 로드할 수 있는 기술입니다. 즉, 사용자가 페이지 끝에 도달하지 않으면 이미지가 전혀 로드되지 않습니다.

이미지를 디코딩한다는 것은 이미지를 사이트에 표시할 수 있는 형식으로 변환하는 것을 의미합니다. 이 프로세스는 브라우저에서 수행되며 이를 수행하는 데 약간의 시간이 걸립니다. 이 프로세스가 여러 번 발생하지 않도록 하려면 한 번 디코딩한 다음 나중에 사용할 수 있도록 저장하는 것이 좋습니다. 품질 이미지 위에 표시하지 않음

이미지는 필요와 목적에 따라 사용되는 PNG, JPEG, GIF 등과 같은 다양한 형식을 가지고 있지만 때로는 이미지에 잘못된 형식을 사용하여 브라우저에서 이미지가 흐리거나 픽셀화되어 보입니다. 여기서 사용할 수 있는 간단한 트릭은 각 이미지에 적절한 크기와 여러 형식(webp 및 jpg)을 제공하여 사용자의 화면과 브라우저 간에 차이가 있는 경우에도 제대로 표시되도록 하는 것입니다.

<picture>
  <source srcset="assets/img/yourImage.webp" type="image/webp">
  <source srcset="assets/img/yourImage.jpg" type="image/jpeg"> 
  <img src="assets/img/yourImage.jpg" alt="Your image !">
</picture>

2 - 사전 로드 및 프리페치

미리 로드는 리소스를 더 빠르게 로드하기 위해 웹 브라우저에서 사용하는 기술입니다. 일반적으로 사용자가 요청하기 전에 이미지 및 JavaScript 파일을 로드하므로 페이지를 로드하는 데 걸리는 시간이 줄어듭니다.

<link rel="preload" href="yourJsFile.js" as="script" />

프리페치는 또한 나중에 보게 될 일부 콘텐츠를 프리페치하여 웹사이트에 가치를 추가하는 데 사용할 수도 있습니다. 이는 다음 보기 페이지에서 사용할 파일을 미리 가져오는 데 특히 유용합니다.

<link rel="prefetch" href="yourJsFile.js" as="style" />

3 - 리소스 축소 및 압축

최소화는 기능을 변경하지 않고 소스 코드에서 불필요한 문자를 제거하는 프로세스입니다. 이를 수행하는 가장 일반적인 방법은 공백 및 기타 서식 지정 문자를 제거하는 것이지만 변수 이름 단축, 여러 명령문을 하나로 병합 또는 기타 변경을 포함할 수도 있습니다.

압축은 파일의 크기를 줄이는 과정입니다. 파일을 압축하는 몇 가지 방법이 있습니다. 이들은 RFC 1952에서 DEFLATE(GZIP의 기본 압축 방법) 및 BZIP2, LZMA/LZMA2 및 XZ로 정의되어 있습니다.

4 - CDN은 리소스를 제공하고 캐싱 시스템을 사용합니다.

콘텐츠 전송 네트워크 또는 CDN은 인터넷을 통해 여러 데이터 센터에 배포된 서버의 대규모 분산 시스템입니다. CDN의 목표는 고가용성과 고성능으로 최종 사용자에게 콘텐츠를 제공하는 것입니다.

캐싱 시스템은 시스템의 속도와 응답성을 향상시키기 위해 웹 성능에 사용됩니다. 캐싱 시스템은 자주 액세스하는 데이터를 빠른 액세스 메모리에 저장하므로 필요할 때 빠르게 검색할 수 있습니다. 이렇게 하면 데이터에 액세스하는 데 필요한 시간이 줄어들어 시스템 성능이 향상될 수 있습니다.

5 - 글꼴 최적화

웹 성능을 향상시키는 한 가지 방법은 글꼴을 최적화하는 것입니다. 이것은 글꼴의 수를 줄이고, 글꼴을 비동기적으로 로드하기 위해 font faceobserver를 사용하고, 브라우저가 글꼴을 렌더링하는 방법을 제어하기 위해 font-display를 사용하여 수행할 수 있습니다. 이를 통해 브라우저는 페이지를 더 빨리 렌더링할 수 있고 사용자는 콘텐츠를 더 빨리 볼 수 있습니다.