해당 내용은 세션을 듣고 와서 같은 커뮤니티에 있는 분들께 내용을 공유한 것을 다시 정리한 글입니다.
구글 I/O Extends 송도를 참석했다.
솔직히 가벼운 마음으로 갔기 때문에 점심쯤 부터 시작하는 세션을 한 세개정도 들었다.(플러터 뉴 기능, 웹성능개선, LLM)
개인적으로는 솔직히 웹..부분을 가장 흥미있게 들었고, 조금이나마 이해할수있었다. 🙂
물론 플러터와 LLM도 모두 재미있긴했다.
플러터와 LLM에 대한 후기는 차차 (언젠가) 남겨보도록 하고, 개인적으로 인상깊었던 웹 프론트엔드 세션에서 들은 성능개선 부분 을 정리해보았다.
1. LCP : 뷰포트 내에있는 가장큰 오브젝트가 로드될때 걸리는 시간 줄이기(가장 개선 어려움)
2. CLS : 페이지내의 리소스가 비동기적으로 로드 되는 경우 타파하기(예를들어..모달이 떴는데 갑자기 모달안에 광고가 나와서 버튼이아닌 광고를 잘못 누르는경우)
3. FID(INP): 사용자가 페이지와 처음 상호작용한 시간 / 브라우저가 응답한 시점까지의 시간차 줄이기
세가지 부분의 성능개선에 관한 이야기었다.
1번의 경우
=> preload로 이미지 미리 가져오기
SSR사용하기 (CSS in JS도 어쨌거나 랜더링 시간 발생하므로) / fetchPriority API사용하기(대신 남용금지, 브라우저가 헷갈려함)/
CDN사용하여 소스가져오는 물리적 거리 줄이기
2번의 경우
=> explicit sizes : 이미지의 정확한 사이즈 제공, 비디오는 aspect-ratio 로 크기 자동추론 /
BF cache : 페이지 전체의 스냅샷을 저장하여 로드가 완료된 이미지자체를 뒤로가기를 했을때 보여주는 등 활용 (lighthouse 10.0.0 부터 제공, 브라우저도 기본제공 / 주의하여 사용)
Layout inducing : 애니메이션 이동시 top left 사용 지양, compositor(transform등) 사용해야함
3번의 경우
=> 자바스크립트가 싱글쓰레드인점을 감안하여 task쪼개기
사족
사실 일부분은 이미 활용하고 있는, 구현시 당연시 하는 것 일 수 있지만 이렇게 정리해서 발표해주시니 좀 더 와닿았다는 생각도 들고, 스스로의 공부가 부족하다는 생각도 들었다.
또, 이렇게 성능지표가 다양하다니! 발전시킬 부분이 많으면서도 방법이 정말 다양하겠구나..또 쉽게 고칠수 없는 부분도 있겠구나..하는 생각 역시 들었던 좋은 세션이었다.
