웹 성능에 대한 고객의 관심을 유도하는 방법: 사례 연구
9051 단어 webperfdevtoolscssjavascript
때때로, 그들이 네트워크 성능에 관심을 가지도록 설득하는 것은 결코 쉬운 일이 아니다. 우리가 투입한 노력에 비해, 우리는 어떤 이익을 얻을 수 있을지 영원히 알 수 없다. 네가 이미 알고 있는 바와 같이, 네트워크 성능은 완전히 평가 기준이다.
우리가 고객을 위해 기능을 실시하기로 결정했을 때, 우리는 그것의 실제 응용을 보고, 최종적으로 개선을 평가할 수 있는 몇 주가 걸릴 수도 있고, 이러한 위험은 우리가 기대하는 것이 아니라는 것이다.
나는 우리의 한 고객에게 우리가 그들의 페이지
<head> 부분에서 발생한 일을 최적화하는 데 중점을 두어야 한다는 것을 보여주고 싶지만, 나는 여전히 나의'느낌'을 인정할 수 없다. 즉, 이것은 그들의 행동에 도움이 될 수 있다는 것이다.나는 그들에게 진실한 숫자를 보여 주고 내가 그들을 설득하는 데 도움을 주고 싶다. 이것은 중요한 화제이다.다행히도, 오늘 나는 내가 목표를 실현하는 것을 도울 수 있는 도구를 찾을 수 있었다.
개념 증명(PoC) 구축
웹 성능과 관련될 때 가장 먼저 해야 할 일은 현재 상태를 이해하는 것이다. 그러면 우리는 업무 전후의 비교를 쉽게 볼 수 있다.
Chrome DevTools Performance(Chrome 개발 도구의 성능) 탭은 매우 흥미로운 정보를 제공하지만 간혹 이해하기 어려울 때가 있습니다. 특히 기술을 잘 모르는 사람에게는 모든 정보를 제공합니다.
비기술자에게 실적 보고는 항상 이해하기 쉬운 것이 아니다
그래서 나는 내가 심사 중인 페이지의 소모 시간을 대체적으로 파악하기 위해 Performance API의 사용자 정의 지표를 사용하기로 결정했다.
첫 번째 단계는 우리 고객의 홈페이지에 들어가서 크롬의 덮어쓰기 기능을 사용하여 나의 자바스크립트를 주입하는 것이다.
먼저opened Chrome DevTools 소스 탭으로 이동한 다음 [덮어쓰기] 패널로 이동합니다.
소스에 액세스하는 방법→ 덮어쓰기 패널
여기서 '+ 덮어쓸 폴더 선택' 을 누르고 새로 만든 빈 폴더를 선택했습니다. 대화상자에서 직접 새 폴더를 만들 수도 있습니다.
선택하면 Chrome에서 이 폴더에 대한 액세스를 허용하라는 메시지를 표시하므로 [허용] 버튼을 클릭하는 것을 잊지 마십시오.
Chrome에서 덮어쓰기 폴더에 대한 액세스 요청을 표시합니다.
그런 다음 [소스] 탭에서 [페이지] 패널로 들어가 기본 HTML 파일을 엽니다(예: en.HTML).
원본 탭에서 볼 수 있는 HTML 원본
오른쪽에서, 나는 나의 사용자 정의 지표에 자바스크립트를 주입할 수 있다.나는 두 가지 함수를 사용했다. performance.mark() 와 performance.measure().
성능 API는 다음과 같이 사용하기 쉽습니다.
// Start your measure
performance.mark('begin');
// Put everything you want to measure between the marks
// Stop your measure
performance.mark('end');
// Calculate the time difference between your 2 marks
performance.measure('diff', 'begin', 'end');
// View the results in the Performance tab
// or output the results in the console using:
console.log(performance.getEntriesByType("measure"));
콘솔에서 다음과 같은 내용을 보아야 합니다.
Chrome 콘솔에서의 측정 결과
마지막으로 코드의 페이지 구조는 다음과 같습니다.
성능 태그 추가 후 페이지 구조
HTML에 성능 플래그를 입력한 후 성능 탭으로 전환하여 빠른 3G 네트워크 및 CPU에 대한 4x 감속 이 선택되었는지 확인한 다음 평가 시작 및 페이지 다시 로드 를 클릭합니다.
성능 보고서를 실행하기 전에 구성
몇 초 후에 나는 나의 보고서와 재미있는 정보를 보았다.내가 검사하고 싶은 부분은 '시간 계산' 패널이다. 그곳에서 나는 나의 사용자 정의 지표와 크롬이 제공하는 기본 사용자 지표, 예를 들어 First Contentful Paint (FCP), First Meaningful Paint (FMP), Largest Contentful Paint (LCP) 를 찾을 수 있다.
[타이머] 패널에는 사용자 지정 및 기본 지표가 표시됩니다.
내가 본 것은 해석<head> 부분은 4.40s(CSS 1.85s+JS 2.55s) 약 50줄을 써야 하고 해석<body> 부분은 0.97s 약 1300줄만 써야 한다는 것이다.
이런 것들이 있으면 나는 자신의 진보를 가늠할 기준이 생긴다.최적화할 때가 됐어!
내가 테스트한 첫 번째 최적화는 나의 자바스크립트 파일에 defer 속성을 추가하는 것이다.
내 스크립트에 지연 속성 추가
그래서 제'원본'옵션으로 돌아가서 HTML 파일을 열고 defer 속성을 추가했고 새로운'성능'테스트를 실행했습니다.
지연 속성을 추가한 후 [타이밍] 패널
다시 한 번 '시간 계산' 패널을 보았는데, 나는 지금 JS 해석 시간을 거의 볼 수 없고, 이 시간은 8.66밀리초로 떨어졌다.전체<head> 부분도 1.65초로 낮아졌고, 이 중 대부분은 현재 CSS에만 쓰인다.
나는 지금 CSS에 쓰이는 시간을 줄일 수 있는지 없는지를 보고 싶다.그래서 나는 '덮어쓰기' 옵션 카드(cmd+shift+p)를 보고 그것을 열고 '덮어쓰기 검사 시작 및 페이지 다시 불러오기' 를 눌렀다.
분석을 시작하기 전에 무시율 탭을 엽니다.
나는 CSS의 덮어쓰기 범위만 보고 싶어서 필터.css를 사용했다. 내가 불러온 CSS 중 92%가 사용하지 않은 것을 볼 수 있다.(페이지와의 상호작용을 시작할 때 사용하지 않은 바이트는 실시간으로 변경됩니다):
사용되지 않은 바이트 수가 92% 이상
이것은 대량의 데이터를 무료로 불러오는 과정입니다. 사용하지 않은 CSS를 삭제하면 얻는 것이 있는지 알고 싶습니다.이를 실현하기 위해 저는 Purgecss, uncss 또는 PurifyCSS 등 해결 방안과 도구를 가지고 있습니다. 홈페이지에 사용되지 않은 CSS를 모두 삭제하는 데 도움을 줄 수 있습니다.나는 마지막 것을 사용하기로 결정했다. 왜냐하면 그것은 간단한 사용자 인터페이스를 제공했기 때문이다. 이것은 나의 Poc에 있어서 이미 충분하다.
이 도구의 경우 웹 사이트의 URL을 입력하고 'CSS 정리' 를 클릭하면 됩니다.(나는 이 공구의 정확도를 검사하지 않았다. 왜냐하면 나는 단지 나의 상황을 대체적으로 이해하고 싶었기 때문이다.
완성된 후에, 나는 '깨끗한 css 코드 보이기' 단추를 누르고 새 css를 복사했다.
내 DevTools와 '원본' 옵션 카드, '페이지' 패널로 돌아가서, 나는 나의 CSS 파일을 선택했고, 내가 이전에 정리한 CSS 코드를 붙여넣고, 나의 변경 사항을 저장했다. (ctrl+s)
마지막으로 나는 또 다른 성능 테스트를 진행했다.
최적화된 모든 성능 보고서 적용
마지막으로 이 두 번의 최적화 후에만 해석<head> 부분은 0.63초가 걸리고 대부분의 시간은 CSS(0.61밀리초)에 걸린다.우리의 기본 지표가 4.40초라는 것을 알면 이것은 약 85%의 전체적인 개선이다!
결론
이 Poc의 목표는 내부 개발 과정을 거치지 않고 웹 성능에 전념하도록 고객을 설득하는 것입니다. 이는 몇 주가 걸리고 수익 보장도 필요하지 않습니다.
Poc는 내가 준비하는 데 두 시간이 걸렸지만, 진정한 개발은 몇 주가 걸릴 것이다.우리는 이미 모든 기선 측정을 완성했고 이것도 우리로 하여금 상위권에 오를 준비를 하고 최종 실제 수익을 본 후에 다시 측정을 진행하게 한다.
Reference
이 문제에 관하여(웹 성능에 대한 고객의 관심을 유도하는 방법: 사례 연구), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/armelpingault/how-to-convince-your-client-to-focus-on-web-performance-a-case-study-3ma7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
// Start your measure
performance.mark('begin');
// Put everything you want to measure between the marks
// Stop your measure
performance.mark('end');
// Calculate the time difference between your 2 marks
performance.measure('diff', 'begin', 'end');
// View the results in the Performance tab
// or output the results in the console using:
console.log(performance.getEntriesByType("measure"));
이 Poc의 목표는 내부 개발 과정을 거치지 않고 웹 성능에 전념하도록 고객을 설득하는 것입니다. 이는 몇 주가 걸리고 수익 보장도 필요하지 않습니다.
Poc는 내가 준비하는 데 두 시간이 걸렸지만, 진정한 개발은 몇 주가 걸릴 것이다.우리는 이미 모든 기선 측정을 완성했고 이것도 우리로 하여금 상위권에 오를 준비를 하고 최종 실제 수익을 본 후에 다시 측정을 진행하게 한다.
Reference
이 문제에 관하여(웹 성능에 대한 고객의 관심을 유도하는 방법: 사례 연구), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/armelpingault/how-to-convince-your-client-to-focus-on-web-performance-a-case-study-3ma7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
