페이지를 빠르게 실행할 수 있도록 5회 최적화

우리는 모두 현대 인터넷이 이미 극도로 팽창해졌다는 것을 안다.인터넷에서 대량의 데이터를 불러오고 다운로드하는 데 시간이 오래 걸리기 때문에 사용자 체험에 큰 문제를 가져올 수 있다.
사실 2020년의 페이지 크기는 2MB로 꾸준히 증가하고 있다.

더 심각한 것은 상호작용 시간이나 사용자가 사이트와 상호작용을 할 수 있는 데 걸리는 시간이 10초이며 시간이 갈수록 길어진다는 것이다.만약 이 지표가 절반으로 줄어들면 사이트를 더욱 쉽게 사용할 수 있을 것이라고 상상해 보세요.
본고는 페이지 불러오는 시간을 최적화하는 데 전단 성능 지표를 사용하는 방법을 가르쳐 드리겠습니다.

최적화 1: 먼저 컨텐츠 로드

많은 "점진적 웹 응용 프로그램"이나 PWA는 HTML을 먼저 불러오고 후자는 Javascript를 불러오고 후자는 내용을 불러옵니다.분명히 당신의 사이트가 이렇게 설계되었다면 사용자가 당신의 사이트를 사용하는 데 필요한 시간은 필요한 시간을 훨씬 초과할 것이다.
더 좋은 시스템은 페이지 내용을 HTML과 함께 보내는 것이다.이것은 분명히 들릴 수 있지만, 그것은 사이트를 더욱 가용성을 가지게 한다.사용자는 페이지를 불러올 때 Javascript를 불러왔는지에 대해 진정으로 관심을 가지지 않지만, 내용이 몇 초 안에 불러오지 않았는지에 관심을 갖는다.
이것은 여러 가지 방법으로 실현할 수 있지만 가장 간단한 두 가지 방법은 다음과 같다.

사용server-side rendering 페이지를 최초로 보여줍니다.

각 페이지의 템플릿에 다음을 추가합니다.

<script>var data = { ... };</script>

그리고 페이지가 불러올 때 사용자는 Javascript가 불러오기만 기다리면 됩니다. Javascript는 페이지의 내용을 포함하고 있습니다.

최적화 2: 이미지 최적화

대부분의 로딩이 느린 사이트는 보통 커다란 이미지를 가지고 있기 때문에 완전히 로딩하는 데 시간이 오래 걸린다.이미지를 최적화할 수 있지만 주로 다음과 같습니다.

이미지 저장에 webp 같은 효율적인 용기 사용

이미지 크기를 효과적으로 조정합니다(작은 이미지만 필요하면 큰 이미지를 로드하지 마십시오.)

Load images lazily(페이지가 로드될 때 로드되는 것이 아니라 페이지가 로드된 후에 로드됨)

또한 (면책 고지: 내 서비스) PageCheck 또는 Lighthouse 등의 서비스를 사용하여 최적화된 이미지를 검사할 수 있습니다.

최적화 3: 창 앞에서 Javascript를 실행하지 마십시오.공재

브라우저는 페이지의 상호작용을 허용하기 전에 모든 스크립트를 실행합니다. 따라서 스크립트 태그에서 직접 실행되는 스크립트가 있다면, 페이지를 불러온 후에 실행해야 할 수도 있습니다.
예:

<script>
// simulates a resource intensive script
var x = 0;
while (x < 10000) x++;
</script>

다음과 같은 작업을 보다 효과적으로 수행할 수 있습니다.

<script>
window.onload = function () {
  // simulates a resource intensive script
  var x = 0;
  while (x < 10000) x++;
}
</script>

이렇게 하면 리소스 집약적 작업을 수행하기 전에 페이지를 로드할 수 있습니다.
스크립트를 비동기적으로 로드할 수도 있습니다.

<script src='/js/jquery.min.js' async></script>
<!--- or -->
<script src='/js/main.js' defer></script>

간단히 말하면, 페이지가 불러올 때까지 기다린 후에 모든 스크립트를 실행합니다.

최적화 4: 인라인 핵심 리소스

모든 스타일과 스크립트를 연결하면 의미가 없지만 페이지를 표시하기 전에 필요한 주요 스크립트와 스타일은 HTML 문서의 <style> 및 <script> 태그에 있어야 합니다.
물론 가능한 한 작아야 합니다. 관건적인 부분만 불러와야 하지만, 만약 페이지가 일부 CSS나 Javascript를 불러오기 전에 사용할 수 없거나 보기에 좋지 않다면, 반드시 이 자원을 HTML 문서와 함께 보내야 합니다.
Chrome 개발 도구는 커버율이라고 불리는 기능이 있습니다. 코드의 어떤 부분이 관건이고 어떤 것이 관건이 아닌지 확인하는 데 도움을 줄 수 있습니다.

최적화 5: HTTP/2 지원

HTTP/2는 프런트엔드 성능에 큰 도움이 됩니다.HTTP Server Push를 사용하면 서버가 HTML 페이지를 로드할 때 브라우저 리소스를 보내지 않고 브라우저 요청 리소스를 기다릴 수 있습니다.

대부분의 현대 브라우저는 HTTP/2를 지원합니다. 만약 응용 프로그램 앞에 Nginx나 Apache 역방향 프록시가 있다면 HTTP/2는 매우 쉽게 설정할 수 있습니다.

Nginx는 서버 푸시here 설정 가이드를 제공합니다.

Apache는 설정 가이드here를 제공합니다.

결론

비록 네트워크가 갈수록 비대해지지만, 신기술은 코드를 삭제하지 않거나 너무 많은 변경을 하지 않는 상황에서 속도를 높일 수 있다.
가장 중요한 정보를 웹 브라우저에 먼저 가져오는 데 집중함으로써 사용자 체험을 무료로 개선할 수 있다.
파렴치한 플러그인: 전방 성능을 추적하고 가속에 대한 조언을 얻으며 사이트에서 흔히 볼 수 있는 안전 문제가 있는지 확인하기 위해 제 도구PageCheck를 보실 수 있습니다.
만약 피드백이 있거나 내가 흥미를 느낄 수 있는 특정한 용례가 있다면, 트위터를 보내거나 이메일을 보내면, 피드백을 바꾸기 위해 무료로 사용해 보겠습니다.
읽어주셔서 감사합니다!