Web 사이트를 개발·운용해 가는데 있어서, 피해서는 통과할 수 없는 것이 퍼포먼스. 계측 툴도 많이 있으므로, 요구에 맞추어 최적인 것을 사용해 가고 싶다.

요전날의 「어플리케이션 퍼포먼스 2018」의 이벤트에 참가를 했을 때에, 몇가지 소개를 받았으므로, 비망록을 겸해.

Lighthouse

Chrome 확장 프로그램
Lighthouse로 웹 앱 감사
↑에서 설치 가능

이번에는 내가 좋아하는 사이트 "amazon"에서 시도해 보았습니다.
종합 평가는 이런 식으로 표시됩니다.

Performance, PWA, Accessibility, Best Practices, SEO의 5가지 관점에서 평가된다. 100점 만점에서 채점.

또한 각 항목마다 미세한 결과도 나옵니다.

#Performance

자세한 판정 지표(First Contentful Paint나 Speed ​​Index 등)와 함께 「Opportunities」로서 개선 제안도 나옵니다.

#PWS(Progressive Web App)

These checks validate the aspects of a Progressive Web App.


이쪽은, PWA의 관점에서의 체크입니다.
· 모바일 환경에서는 조금 느립니다.
・오프라인에서는 볼 수 없다.
라고 하는 지적을 하고 있습니다.
각 항목이 아코디언으로 열리므로 그 안을 보면 대응책도 써주고 있습니다.

#Accessibility

These checks highlight opportunities to improve the accessibility of your web app. Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.


여기서는
・Elements Have Discernible Names(요소에 식별 가능한 이름이 붙어 있는?)
· Page Specifies Valid Language (제대로 언어 설정되어 있습니까?)
・Meta Tags Used Properly(메타 태그, 적정하게 사용하고 있는?)
같은 관점에서의 확인 결과입니다.
물론 각 항목이 아코디언으로 열리므로 그 안에서 대책을 확인할 수 있습니다.

#Best Practices

추가 개선 항목, 그래서 아마존의 경우는 거의 지적이 없습니다.
모바일 등에서의 스크롤 막힘(Scroll Jank)을 해결하기 위해 Passive 리스너를 넣으면? 라는 제안뿐입니다.
이 항목에서는
・Uses HTTPS(SSL 사용하고 있지?)
・Avoids document.write()(document.write는 사용하고 있지 않지요?)
・Page has the HTML doctype(doc 선언하고 있지?)
같은 체크 항목이 있습니다.

#SEO

These checks ensure that your page is optimized for search engine results ranking. There are additional factors Lighthouse does not check that may affect your search ranking.


SEO 관점에서의 체크군요.
・Page is mobile friendly(모바일 친화적인가?)
・Document has a element (타이틀 넣고 있죠?)
・Document has a meta description(메타태그 정의하고 있지?)
・Links have descriptive text(링크에 텍스트를 넣고 있지?)
라고 하는 기본적인 요소의 확인입니다.
amazon씨는 100점, 훌륭하다.
라고 말하면서, 이 항목만은 내 관련 웹사이트도 100점이었습니다. 그 외는 흩어져 있다・・・.

요약

라고 하는 형태로, Lighthouse에서는 간편하게 사이트의 체크를 할 수 있으므로, 자기 평가의 생각으로 해 보는 것이 추천입니다.
물론, 지적 사항은 열심히 고쳐 나가려고 생각합니다. 좋은 웹사이트를 제공하기 위해.