속도 감사: 워드프레스의 발목을 잡는 요소 찾기

일부 워드프레스 사이트 관리자는 페이지스피드 인사이트나 GTmetrix에 집착합니다. 저를 비롯한 많은 전문가들의 조언은 이러한 메트릭을 실제보다 더 중요하게 생각하지 말라는 것입니다.

인지된 로딩 속도가 좋다면 모든 것을 '녹색'으로 설정할 필요는 없습니다. 많은 경우 지나친 최적화에 빠지거나 한 가지를 고치려다 다른 것을 망칠 수 있기 때문에 오히려 비생산적일 수도 있습니다.

하지만 WPO 애호가, 최적화 애호가 또는 사이트의 응답성을 개선하려는 사용자라면 이러한 도구는 거의 필수적입니다. 문제는 외부 서버에서 가져온 '정지 사진'을 제공한다는 점입니다. 하지만 관리자가 사이트를 탐색할 때 늦게 로드되는 광고나 클릭하려는 순간 메뉴가 튀어나오는 광고는 어떻게 될까요?

원산지

Speed Auditor는 간단하지만 강력한 로컬 진단 도구가 필요했던 개인적인 필요에 대한 응답으로 탄생했습니다. 최적화 플러그인이 아니라(코드에서 아무것도 변경하지 않음) 실시간 감사 플러그인입니다.

변경 및 미세 조정을 할 수 있는 좋은, 아마도 최고의 WPO용 유료 플러그인을 찾고 있다면 Perfmatters를 살펴보세요. 반면에 설정과 조정으로 머리를 복잡하게 만들지 않으면서도 다양한 가능성을 가진 무료 플러그인을 찾고 있다면 워드프레스 저장소에서 제공되는 Fernando Tellado의 WPO Rocket Tweaks를 사용해 볼 수 있습니다.

DOM 노드나 지연 시간 메트릭이 무엇인지 모르더라도 걱정하지 마세요. Speed Auditor는 웹사이트를 한 눈에 파악할 수 있도록 설계되었습니다:

• 스마트 표시기: 색이 바뀌는 아이콘이 관리 표시줄에 나타납니다. 녹색이면 LCP(가장 중요한 내용을 보는 데 걸리는 시간)가 최적 상태입니다. 주황색 또는 빨간색으로 바뀌면 주의가 필요한 사항입니다.

• 탐색하는 동안 감사하세요: 복잡한 설정을 할 필요가 없습니다. 플러그인을 활성화하면 글을 확인하는 동안 백그라운드에서 이미지가 너무 무겁거나 서버가 느리게 응답하는지를 분석합니다.
• 더 많은 사람 보고서: 클릭 한 번으로 .txt 파일을 다운로드하여 개발자에게 보내거나 저장하여 변경 사항을 적용한 후 결과를 비교할 수 있습니다.

보닛 아래

버전 1.1.8은 브라우저 콘솔에서 시간을 절약할 수 있도록 심층적인 진단 기능을 제공하려고 시도합니다.

• 정확한 LCP 식별: 플러그인은 어떤 요소(이미지 또는 텍스트 블록)가 가장 큰 콘텐츠풀 페인트를 트리거했는지 정확히 감지합니다.
• DOM 깊이 분석: "DOM 크기 초과"를 피하는 것이 중요합니다. 속도 감사기는 영역(헤더, 콘텐츠, 바닥글)별로 노드 수를 세분화하여 중첩이 15~20레벨을 초과하는 경우 경고를 표시합니다.
• 미디어 지연 시간 모니터: 이미지의 실제 전송 시간(리소스 타이밍 API)을 측정합니다. 이미지 다운로드에 500ms가 걸리면 플러그인은 이를 중요로 표시합니다.
• 서버에 미치는 영향이 전혀 없습니다: 모든 처리는 클라이언트(브라우저) 측에서 이루어집니다. 사이트 속도를 저하시키는 과도한 데이터베이스 쿼리나 PHP 프로세스가 없습니다.

큰 도약. 곧 출시됩니다: Speed Auditor 1.1.9('레이더 CLS' 포함)

지금까지 누적 레이아웃 이동(CLS) 은 보고서에서 추상적인 수치였습니다. 무언가가 움직이고 있다는 것은 알았지만, 항상 어떤 것인지 알 수는 없었습니다. 곧 버전 1.1.9에서는 이 점이 바뀝니다.

레이더 또는 시각적 CLS "형광펜" 버튼이 도입됩니다.

스크롤하는 동안 움직이는 모든 요소 위에 빨간색 상자를 그리는 '레이더' 모드를 활성화한다고 상상해 보세요. 일부 확장 프로그램에서 이미 어느 정도 성공을 거둔 이 기능은 가끔 눈에 띄지 않는 '오버플로'를 포착하는 데 매우 유용한 시각적 보조 기능입니다.

• 콘텐츠를 푸시하는 애드센스 배너인가요? 빨간색 상자로 표시됩니다. 여기에서 이 문제에 대해 자세히 알아볼 수 있습니다.
• 정의된 치수가 없는 이미지인가요? 레이더가 잡아낼 것입니다.
• 완전한 지속성: 레이더를 켠 상태에서 전체 웹사이트를 탐색할 수 있으며, 플러그인은 사용자가 구석구석을 계속 시각적으로 감사하기를 원한다는 것을 기억합니다.

이번 업데이트에는 짧은 기술 용어집도 포함되며, 이 용어집은 팁과 튜토리얼을 포함하도록 확장되어 워드프레스 대시보드에 통합될 예정이므로 인, iframe 또는 그림과 같은 용어가 더 이상 수수께끼가 되지 않을 것입니다.

다양한 시나리오에서 테스트하고 개선 제안이나 오류 경고를 받으면 분석의 응답과 생성된 보고서를 모두 개선하기 위한 것입니다.

이제 메트릭 정리를 위한 1.1.8 버전을 사용할 수 있으며, 곧 1.1.9를 통해 워드프레스의 시각적 안정성을 더욱 쉽게 수정할 수 있습니다. 지금 설치하면 곧 업데이트를 받을 수 있습니다.

어떻게 작동하나요?

코드는 다음 세 단계를 따릅니다:

1. 성능 관찰자

브라우저(Chrome, Edge, Opera)에는 Performance API라는 기본 API가 있습니다. 플러그인은 레이아웃 시프트 입력 유형에 맞게 특별히 구성된 PerformanceObserver라는 '감시자'를 등록합니다.

화면이 처음 그려진 후 화면에서 무언가가 움직일 때마다 브라우저는 이벤트를 생성합니다. 플러그인은 해당 이벤트를 트래핑하고 두 가지 주요 데이터를 추출합니다:

• 오프셋 값: (0.0145와 같은 숫자).
• 범인 요소: 브라우저는 플러그인에 정확히 어떤 HTML 노드가 이동되었는지 알려줍니다.

2. '최근 상호작용' 필터

이 부분에서 플러그인이 영리해지려고 노력합니다. 모든 움직임이 "나쁜" 것은 아닙니다. 드롭다운 메뉴를 클릭했을 때 콘텐츠가 아래로 스크롤되는 것은 사용자가 예상한 동작입니다.

플러그인은 hadRecentInput이라는 속성을 확인합니다. 지난 500밀리초 동안 키를 터치하거나 클릭한 적이 있으면 브라우저는 해당 동작을 '예상'으로 표시하고 플러그인은 오탐지를 방지하기 위해 이를 무시합니다. 갑자기 광고가 표시되는 등 예기치 않게 발생하는 움직임만 감지합니다.

3. 시각적 렌더링(빨간색 상자)

플러그인에 이동된 요소가 있으면 시각적인 부분이 작동합니다:

1. 좌표 계산: getBoundingClientRect()라는 함수를 사용하여 해당 요소가 화면에서 정확한 순간(위쪽 픽셀, 왼쪽 픽셀)에 어디에 있는지 알아냅니다.
2. 프레임 주입: 절대 위치, 2px 빨간색 테두리, 매우 높은 z-인덱스를 가진 div를 만들어 모든 것 위에 그립니다.
3. 레이블: 빨간색 상자의 왼쪽 상단에 레이블 이름(ins, img, div)과 누적된 CLS 값이 있는 작은 상자를 추가합니다.

이것이 외부 보고서보다 나은 이유는 무엇인가요?

PageSpeed와 같은 도구는 하단으로 스크롤하지 않거나 특정 광고가 로드될 때까지 기다리지 않기 때문에 CLS를 감지하지 못하는 경우가 있습니다.

이 플러그인은 지속성을 사용하여 실제 사용자의 브라우징 세션 동안 누적된 CLS를 측정합니다. 요소가 처음에 조금 움직이고 스크롤할 때 조금 움직이면 플러그인은 이를 합산하여 강조 표시하여 Google이'Chrome 사용자 경험'(CrUX) 보고서에 표시할 가장 근사한 실제 수치를 제공합니다.