fix(view): Author Image #268
Conversation
…mage size optimization
|
|
||
| return ( | ||
| <div className="name" data-tooltip-text={name}> | ||
| <img src={imgSrc} onError={onError} alt="" /> | ||
| <img ref={imgRef} src={src} onError={onError} alt="profileImage" /> |
There was a problem hiding this comment.
alt 정의가 필요한 것은 알지만 해당 값 설정시 onError로 fallback 이미지가 로드되기 전에 alt 값이 보이더라구요. 이부분은 일단 빈 값으로 두는 것은 어떠실까요?
2022-11-15.6.06.21.mov
There was a problem hiding this comment.
alt에 유저 이름이 아니라 profileImage가 들어가면 한슬님 말씀하신 대로 ""로 두어도 될 것 같아요!
|
정말 사소하지만 merge 시 squash merge 잊지 않아주시면 감사하겠습니다🙂 |
@hanseul-lee (궁금) 혹시 fallback url에서 md5를 사용하시는 이유가 있을까요??? |
#258 |
해당 문제 확인해보니 gravatar 이미지는 디스크 캐시를 사용하여 5분정도 캐싱을 유지합니다. 하지만 해당 코드에서 , 해당 이슈 관련해서 상위 컴포넌트에서 src 정보를 저장하여 author component에 렌더링할 src 값만 넘겨주는 방식으로 해당 이슈를 해결할 수 있을 것 같습니다. |
jin-Pro
force-pushed
the
enhance/authorAvatar
branch
from
21498e1
to
2d4c7a1
Compare
|
와,, squash merge를 못했습니다.. ㅜㅜ |
related Issue
Description
이미지 최적화
해당 이슈 #258 에서 profile Image의 error 발생시 fallback 이미지가 느리게 로딩되는 이슈가 존재하였습니다.
하지만 네트워크 요청 속도를 '제한없음' , '빠른 3g' , '느린 3g'를 사용하여 측정해보아도 fallback 이미지가 느리게 로딩되는 이슈를 발견할 수 없었습니다.
하지만, fallback 이미지라 하면, 기존 로딩 이후 에러 발생하여 요청하는 이미지인데, 오히려 성공적으로 요청하는 이미지의 요청 속도가 느린 결과를 확인하게 되었습니다.
아래 gif 영상은 빠른 3g 요청으로 네트워크 속도를 조절하여 확인한 영상입니다.
네트워크 탭과 성능 측정을 확인한 결과, ( 네트워크 환경은 빠른 3g 입니다. )
위 이미지를 통해 실패한 이미지 로딩에 대한 fallback을 불러오나, 성공한 이미지 로딩에 대해서는 redirect를 시켜 한번더 요청을 보내는 것을 확인하실 수 있습니다.
동시에
md5를 사용한 fallback src의 갯수 또한 커넥션 수의 부족 발생이 큰 문제를 야기하지 않음을 알 수 있습니다.이미지 로딩을 최적화 하기 위해서는 fallback 갯수 제한 또한 도움이 되겠지만, redirect하는 profile Image를 최적화 하는게 시급하다 느꼈습니다.
그 결과, redirect를 방지하기 위해서는 user 고유 값이 필요하나 값이 존재하지 않아
이미지 사이즈 최적화를 통해 이미지 로딩 최적화를 진행하였습니다.기존 사용자의 profile Image의 크기는 460px이나 view에 보이는 이미지의 크기는 30px로 고정된 크기 였기에
?size=30을 추가하여 이미지 크기를 리사이징 하였습니다.해당 결과는 아래 이미지와 같습니다.
결과적으로 11개의 onError 발생과 13개의 redirect 요청에 대하여 '빠른 3g' 환경에서
2300ms 에서 1800ms로 감축하는 효과를 확인할 수 있었습니다.
useState 제거 후 useRef 적용
author image src 값을 상태로 관리하였습니다.
해당 로직을 useRef로 변경하여
onError 발생시 리렌더링을 방지하였습니다.
결과는 아래 이미지와 같습니다.
추가 내용 22.11.17
기존
fallback src의 이미지는 profile image 보다 느리게 렌더링되는 이슈에 대해서Author Component에서 리렌더링 시, onError를 호출하여 fallback src를 렌더링하기때문에 더 느리게 렌더링되는 이슈를 확인하였습니다.캐시가 되지 않는 것이 아니라, load를 늦게 하는 것으로 확인하였습니다. ( gravatar 의 이미지의 경우 disk cache로 300s 진행되는 것을 확인할 수 있습니다. )
따라서,
Author Component에 렌더링할src값을 주입하고자Summary Component에서 사용자에 대한 img src 를 찾기 위해usePreLoadAuthorImg을 구현하여 위 문제를 해결하였습니다.