개발 블로깅/Improving Performance
-
웹 성능 최적화를 위한 Image Lazy Loading 기법개발 블로깅/Improving Performance 2020. 11. 29. 10:37
현재 화면에 보여지지 않는 lazy loading된 이미지들은 웹 페이지 초기의 로딩 시간을 단축하여 웹 성능을 향상시킵니다. 이 글은 lazy loading 처리 기법과 관련된 모든 것들을 깊게 다루게 됩니다. 해당 글은 작성자 imagekit.io 의 동의하에 'Lazy Loading Images - The complete Guide'의 아티클을 번역하였습니다. 외국 아티클 번역은 처음으로 도전하다보니, 거의 발 번역 수준입니다.. 하지만 내용 이해에는 문제가 없을 듯 하여, 귀엽게 봐주시면 감사드리겠습니다! 이미지는 모든 웹 사이트와 어플리케이션에서 매우 중요한 요소입니다. 마케팅 배너 혹은 상품 이미지, 로고 등 이젠 웹 사이트 내에서 이미지가 없다는 것은 상상할 수 없을 정도입니다. 그러나 슬프..
-
Netflix의 웹 성능 최적화를 위한 기법 소개개발 블로깅/Improving Performance 2020. 9. 30. 00:21
넷플릭스는 전 세계적으로 유명한 스트리밍 콘텐츠 서비스이다. 그만큼 서비스 내 사용되는 콘텐츠 데이터가 엄청나며 이를 이용하는 대용량 트래픽 또한 만만치 않을 것이다. 그럼에도 불구하고 신기한 점은, 수많은 트래픽 처리 속에서도 저렇게 많은 섬네일 이미지와, 이미지 위에 마우스를 올리면 보여지는 일부 영상이 매우 빠른 로딩 속도를 자랑한다는 것이다. 넷플릭스는 과연 어떻게 이러한 성능을 만들어 낼 수 있었을까? 지금부터 넷플릭스 페이지의 비밀에 대해 알 수 있는 만큼 최대한 파헤쳐 보도록 하자. 섬네일 이미지 사용 우선 개발자 도구-네트워크 탭을 열어, 페이지 로드 시 요청받는 리소스 목록들을 확인해 보았다. 페이지 렌더링이 완료된 후에도 쉬지 않고 계속해서 많은 리소스가 다운로드되며 리스트가 쭉쭉 늘어..