나는 이러한 개념을 알기 전까지 페이지 속도 최적화에 어려움을 겪었습니다.-JS 튜토리얼-php.cn

페이지 최적화에 대한 나의 어려움: 그것을 극복한 방법

저는 몇 페이지에 대한 페이지 최적화 작업을 맡았습니다. 고객이 사이트에 머물게 하고 SEO 순위도 향상시키려면 페이지 최적화가 매우 중요합니다. Google 연구에 따르면 로드하는 데 3초 이상 걸리면 모바일 사이트의 53%가 아예 포기되는 것으로 나타났습니다.

이러한 모든 혜택을 이용하기 위해 내 페이지를 Google PageSpeed Insights로 처리했습니다. 점수가 나빴고, 페이지 곳곳에 알 수 없는 용어들이 즐비했습니다.

이 모든 새로운 용어는 나에게 매우 낯설었고 어떻게 해야 할지 몰랐습니다.

많은 사람들이 이런 상황에 자주 직면하는데, 사람들은 이 새로운 단어들이 무엇을 의미하는지 모릅니다. 하지만 이 단어를 잠금 해제하면 페이지 속도 진단에 많은 새로운 의미가 부여된다는 것을 깨달았습니다.

그래서 이 글에서는 Pagespeed 최적화 여정을 다시 시작하기 위해 알아야 할 용어를 보여드리겠습니다.

Pagespeed 분석 도구를 통해 페이지를 실행하면 다음 분석이 표시됩니다.

이러한 용어는 페이지 성능을 파악하는 데 도움이 되므로 아는 것이 중요합니다.
이를 기억하는 쉬운 방법은 다음과 같습니다. FLTCS는 "Flat-Tics"로 발음됩니다.

FLTCS를 하나씩 살펴보겠습니다.

연극을 보러 극장에 왔다고 상상해 보세요. FCP(First Contentful Paint)는 무대 조명이 켜지고 첫 번째 배우나 소품이 보이는 순간과 같습니다.

쇼가 시작된다는 첫 번째 신호이며, 의미 있는 일이 나타날 것입니다. 조명이 빠르게 켜지면 공연이 진행 중이라는 뜻이며 공연을 즐길 준비가 된 것입니다.

마찬가지로 웹페이지에서 FCP는 도착 후 첫 번째 콘텐츠를 얼마나 빨리 보는지에 관한 것입니다. 이러한 일이 빠르게 발생한다면 귀하의 페이지가 즉시 사용자의 관심을 끌고 있다는 의미입니다.

I Struggled with Page Speed Optimization until I Found Out about These oncepts

위 이미지에서는 콘텐츠가 로드될 때 두 번째 프레임에서 FCP가 발생하는 것을 볼 수 있습니다.

이 용어를 더 잘 이해하기 위해 여러 부분으로 나눌 수 있습니다.

첫 번째: FCP는 웹페이지를 탐색한 후 표시되는 콘텐츠가 웹페이지에 처음 나타나는 것을 표시합니다.

콘텐츠풀: 텍스트, 이미지, 그래픽 등 의미 있는 콘텐츠가 사용자에게 표시되는 경우를 나타냅니다.

페인트: 아티스트가 캔버스에 그림을 그리기 시작하는 것과 마찬가지로 FCP는 브라우저가 웹페이지의 초기 요소를 렌더링 및 표시

시작하는 순간입니다.

FCP에서 특히 중요한 문제 중 하나는 사용자 정의 글꼴인 경우 글꼴 로드 시간입니다.
사용자 정의 글꼴은 로드 시간이 느린 대용량 파일인 경우가 많습니다. 일부 브라우저에서는 글꼴이 로드될 때까지 텍스트를 숨겨 보이지 않는 텍스트가 깜박입니다.

새 매장에서 가장 크고 중요한 간판이 지나가면서 완전히 눈에 띄는 순간을 LCP라고 생각해보세요.

당신이 상점을 지나가고 있는데 그 상점이 무엇인지 알려주는 가장 큰 간판을 보기 위해 간절히 기다리고 있다고 상상해 보십시오. 저 큰 간판이 나오는데 시간이 너무 오래 걸리면 좌절감과 흥미를 잃을 수도 있어요.

쇼핑객의 참여를 유지하려면 매장에서는 큰 간판을 신속하게 게시하고 눈에 띄게 해야 합니다.

웹페이지와 마찬가지로 콘텐츠가 포함된 최대 페인트는 콘텐츠의 가장 크고 중요한 부분이 완전히 로드되어 사용자에게 최대한 빨리 표시되도록 하는 것입니다.

느린 서버 응답 시간
Javascript 및 CSS 렌더링 차단
- 웹페이지의 모양과 동작을 제어하는 파일입니다. 최적화되지 않았거나 기본 콘텐츠보다 먼저 로드되면 브라우저가 사용자가 먼저 보고 싶어하는 중요한 내용을 렌더링하지 못하게 될 수 있습니다.
- 예를 들어 할 일 목록이 있는 웹페이지가 있는데 새 항목을 추가하는 버튼이 JavaScript 파일에 의해 제어된다고 상상해 보세요.
- 해당 JavaScript가 렌더링을 차단하는 경우 브라우저는 목록이나 버튼을 표시하기 전에 스크립트를 다운로드하고 이해할 때까지 기다립니다.
느린 리소스 로드 시간
- 큰 이미지나 동영상과 같은 콘텐츠는 로드하는 데 시간이 오래 걸릴 수 있습니다. 페이지에서 가장 큰 콘텐츠인 경우 LCP 속도가 느려질 수 있습니다.
클라이언트 측 렌더링
- 브라우저가 렌더링을 시작하기 전에 페이지 코드 일부를 다운로드하고 처리하는 경우입니다.

정의: LCP는 화면에 표시되는 가장 큰 콘텐츠 요소가 완전히 렌더링되는 시점을 측정합니다.
측정항목: 사용자 경험에 중요한 이미지, 동영상, 텍스트 블록과 같은 중요한 콘텐츠 요소를 나타냅니다.
포함 사항: img 요소, SVG 내부 이미지, 비디오 요소, url()을 사용하여 로드된 배경 이미지가 있는 요소, 큰 텍스트 블록, 블록 수준 요소.
제외: 뷰포트 외부의 콘텐츠 또는 아직 로드되지 않은 이미지.
목적: 브라우저가 뷰포트에서 가장 큰 콘텐츠 요소의 렌더링을 완료하여 사용자에게 완전히 표시되는 시점을 나타냅니다.
최적 시간: 좋은 사용자 경험을 위해 2.5초 이하의 LCP를 목표로 하세요. 2.5~4초 사이의 LCP는 웹 사이트에 개선이 필요함을 의미하고, 4초를 초과하는 LCP는 상당한 개선이 필요한 성능 저하를 나타냅니다.