중요한 분석
기능 구현을 정당화하기 위해 글로벌 브라우저 사용 통계에만 집중하는 것은 오해의 소지가 있습니다. 진정으로 중요한 것은 특정 웹 사이트의 브라우저 사용법이며 크게 다를 수 있습니다. 이 원칙은 단순히 구형 브라우저와 호환되지 않는 기능을 피하는 것 이상으로 확장됩니다. 사이트의 성공과 직접 관련된 메트릭의 우선 순위를 정하는 것입니다.
이 사이트 별 성능 추적 개념은 최근에 내 마음에 있습니다. 레거시 브라우저 지원으로 인해 CSS 그리드를 피하는 것이 아닙니다. 사용자 에게 진정으로 영향을 미치는 메트릭을 측정하는 것입니다.
성능 테스트는 종종 자동화 된 브라우저가 사이트를로드하고 자산 크기,로드 시간 및 요청 수와 같은 메트릭을 기록하는 합성 테스트 에 의존합니다. 유용하지만이 데이터는 실제 사용자 경험을 반영하지 않습니다. 우리는 JavaScript 번들 크기, LCP (Last Conctentful Paint) 및 등대 점수에 집착하지만 사용자 인식의 직접적인 측정이 아니라 프록시입니다.
Google 웹 로그 분석과 같은 일반적인 웹 사이트 분석을 고려하십시오. 페이지 인기, 세션 기간 및 트래픽 소스에 대한 데이터를 제공하는 동안이 정보는 여전히 일반적입니다.
진정으로 통찰력있는 분석을 위해서는보다 타겟팅 된 접근 방식이 필요합니다. 스스로에게 물어보십시오 : 사이트 성능의 특정 측면이 중요합니까? 기능 X가 얼마나 자주 사용됩니까? 매주 얼마나 많은 파일을 업로드합니까? 몇 개의 메시지가 전송됩니까? 스타 버튼이 얼마나 자주 클릭됩니까? 이 질문들은이 데이터를 캡처하고보고 할 맞춤형 자바 스크립트가 필요하다는 것을 강조합니다. 일반적인 분석 도구는 충분하지 않습니다. 능동적 인 개발이 필요합니다.
이 원칙은 성능 툴링에도 적용됩니다. 일반적인 합성 테스트에만 의존하는 대신 실제 사용자 모니터링 (Rum)을 채택하십시오. 실제 장치에서 실제 사용자를 추적하여 귀중한 통찰력을 얻으십시오. 이 접근법은 집중된 분석의 논리와 완벽하게 일치하며 중요한 데이터를 잠금 해제합니다.
예를 들어, 주요 Google 웹 코어 활력 SEO 인 FID (First Input Delay)에는 JavaScript 기반 데이터 수집이 필요합니다 . 마찬가지로, LCP는 더 의미있는 지표를 영리하게 시도하지만 여전히 추정을 포함합니다. Google은 광범위한 적용 가능성에 대한 가정을해야하지만 사이트의 중요한 요소를 정확히 찾아서 렌더링 시간을 직접 추적 할 수 있습니다. Speedcurve의 영웅 렌더링 시간 사용 : 예를 들어 :
<main elementtiming="article"></main>
이것은 일반적인 숫자뿐만 아니라 사이트 에 중요한 것을 직접 측정합니다.
또한 FID는 가치가 있지만 사용자 타이밍 (W3C 표준)을 사용하여 중요한 사이트 작업을 표시하는 JavaScript 이벤트를 트리거하는 것을 고려하십시오. 예를 들어, Codepen과 같은 플랫폼에서 편집기 준비를 추적 할 수 있습니다.
editors.init (); Performance.mark ( "편집자가 초기화됩니다.");
이 사전 예방 적은 약간 더 관여하지만 분석에 대한 접근 방식은 표준 방법을 능가합니다. JavaScript 크기를 200KB로 제한하는 성능 예산은 도움이되지만 예산은 1.1 초 이내에 (1.4 초 느린 대신) 1.1 초 이내에 핵심 기능로드를 보장하는 것이 훨씬 더 큰 영향을 미칩니다.
¹ 이것은 세 가지 웹 코어 활력의 SpeedCurve 차트를 작성하려면 FID 데이터를 포함하기 위해 럼 솔루션 인 Lux가 필요하기 때문입니다. 약어 과부하에 대한 사과!
위 내용은 중요한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

Google Fonts가 새로운 디자인 (트윗)을 출시 한 것을 볼 수 있습니다. 마지막 큰 재 설계와 비교할 때 이것은 훨씬 더 반복적 인 느낌이 듭니다. 차이를 간신히 말할 수 있습니다

프로젝트에 카운트 다운 타이머가 필요한 적이 있습니까? 그런 것은 플러그인에 도달하는 것이 당연하지만 실제로는 훨씬 더 많습니다.

새로운 프로젝트가 시작될 때, Sass 컴파일은 눈을 깜박이게합니다. 특히 BrowserSync와 짝을 이루는 경우 기분이 좋습니다.

타탄은 일반적으로 스코틀랜드, 특히 세련된 킬트와 관련된 패턴의 천입니다. tartanify.com에서 우리는 5,000 개가 넘는 타탄을 모았습니다

Inline-Template 지시문을 사용하면 기존 WordPress 마크 업에 대한 진보적 인 향상으로 풍부한 VUE 구성 요소를 구축 할 수 있습니다.

PHP 템플릿은 종종 서브 파 코드를 용이하게하는 데 나쁜 랩을 얻지 만, 그렇지 않아야합니다. PHP 프로젝트가 기본을 시행 할 수있는 방법을 살펴 보겠습니다.

우리는 항상 웹에 더 액세스 할 수 있도록하고 있습니다. 색상 대비는 수학 일 뿐이므로 Sass는 디자이너가 놓친 에지 케이스를 다룰 수 있습니다.
