챕터 1. 웹 성능이란 무엇인가?

[yujo11]

챕터 1. 웹 성능이란 무엇인가?

[ritajeong]

http://yslow.org/ 의 Web Performance Best Practices and Rules을 같이 구경하면 좋을 것 같습니다. 책에서도, '위 내용 중 중요한 기술적 항목은 이 책의 나머지장에서 다룬다'라고 써있네요. 수미상관으로, 나중에 스터디를 마치고 다시 봤을 때 책에서 다룬 내용과, 그렇지 않는 걸 비교해봐도 재밌을 듯해요 ~~

[ritajeong]

https://bearjin90.tistory.com/21 이 블로그에서 yslow 내용을 간략히 번역했습니다. 하단에 레퍼런스가 잘 정리되어있어서 나중에 살펴보면 좋아보입니다.
https://d2.naver.com/helloworld/303083 이건 조금 오래된 글이지만 naver D2 블로그 글입니다. 최근 글을 찾아보고 싶네요.

[ritajeong]

WebPageTest와 PageSpeed 등 테스트 툴마다 성능 지표가 다른데요, 그 중에 공통적인 지표도 있어서 정리해보면 좋을 것 같습니다.
예를 들면 WebPageTest는 First Bite Time 웹 서버에서 받은 콘텐츠의 '첫 번 째 바이트가 얼마 만에 도착하는지'를 평가항목으로 정합니다.
비슷하게 PageSpeed는 First Contentful Paint 첫번째 텍스트 또는 이미지가 표시되는데 걸린 시간을 평가한다고 하네요.

[al-bur]

수많은 웹 성능 테스트 툴중에서 실제로 프론트엔드 개발자들은 어떤 툴을 주로 사용하는 지 궁금하긴 하네요

[yujo11]

개인적으로는 Ligthouse랑 WebPageTest 를 많이 이용합니다

[Tanney-102]

시간지표에 대해서는 크롬 개발자도구의 네트워크랑 성능 탭 활용해봐도 좋을 것 같아요!

[yujo11]

• 개발자도구

[al-bur]

웹 성능을 개선시켜본 적 있으신 분들의 경험담도 살짝 들어보면 좋을 것 같아요!
뭔가 책으로만 봤을 때는 아직까지는 강 건너 불 구경인 느낌이라서 생생한 경험담 듣고 싶습니다🎀

[ritajeong]

태은님 경험 : split chunk, 이미지 최적화, dynamic import 되고 있는 파일을 분리, node modules 중에서 react dom을 가진 번들과 가지지 않은 번들을 분리.
태은님 풀리퀘 참고

[Tanney-102]

https://otenotion.notion.site/3f0275237769426b884fca11604c419f

[Tanney-102]

구글 RAIL 모델에 대해 함께 살펴봐도 좋을 것 같아요

[ritajeong]

전체 시간 = response time + idle time. 적어도 100ms 안에 수행되도록.
response : 사용자 입장에서 즉각적인 반응.
animation : 60frame, 10ms 기준으로. 브라우저가 화면을 그리는데 6ms정도로 소비함.
idle : idle time은 비동기 요청, 로직 수행 시간. 먼저 사용자에게 반응하고, 진행함. 50ms를 넘기지 말자.
load : 느린 3G 환경에서 FCP를 5초 이내로.

[Tanney-102]

인스타나 핀터레스트 같은 서비스들은 메인 피드에 보여지는 이미지 용량을 어느 정도로 제한하는지, 어떻게 최적화하는지 궁금하네요.

[Tanney-102]

https://ko.wikipedia.org/wiki/JPEG_XR

[ritajeong]

인스타 : 반응형에 따라 리사이징이 됨.
giphyu : gif, webp 등 확장자가 다양함. 리사이징은 x, 반응형 x.

[yujo11]

https://github.com/woowacourse/perf-basecamp

한번 해봐도 좋을거 같아용