Web/Optimization
-
렌더링 성능 최적화 수업 정리Web/Optimization 2021. 9. 24. 18:12
※ Jank(화면 버벅거림) 일반적인 스크린의 주사율은 60FPS(Frame Per Second)이다. 60FPS = 1초에 60프레임 = 1프레임 당 16.67ms 컨텐츠가 업데이트되는 주기도 물리적인 스크린이 업데이트되는 주기와 맞춰져야 끊겨보이지 않는 화면 업데이트가 가능해진다. 이를 위해 requestAnimationFrame을 사용하는 것. 만약 브라우저의 Main Thread에 일이 넘쳐나게되면 1초에 60프레임을 맞추지 못하고 화면이 버벅거리게 된다. 그러면, Main Thread가 일을 너무 많이 하지 않게 도와주는 방법은 어떤 게 있을까? 1. reflow, repaint가 생각보다 너무 많이 일어나는 것을 개선한다. 2. 똑같은 작업을 매번 새로하지 않도록 개선한다. 3. 일을 여러명이..
-
이미지 프리로딩(Image Preloading)Web/Optimization 2021. 9. 23. 19:38
갤러리와 같은 형태의 페이지, 즉 이미지가 많이 필요한 페이지의 경우에는 종종 이미지 최적화가 곧 해당 페이지의 성능 최적화 그 자체인 경우가 많다. 이번에 프로젝트로 진행한 Babble 웹페이지도 마찬가지. 이런 경우에 이미지 로딩을 최적화하기 위해 자주 사용되는 방법 중에 하나가 바로 Image Preloading이다. Image Preloading은 유저가 이미지를 요청하기 전에 미리 이미지를 다운받아 캐시에 저장하고, 필요할 때 캐시에서 바로바로 꺼내쓰는 것을 의미한다. 브라우저가 해당 페이지에서 요청한 이미지, CSS, JS 등을 캐싱하여 사용한다는 특징을 이용한 테크닉이다. 초기 페이지에 보여질 이미지 로딩과 관련된 테크닉은 아닌 것 같고, 유저가 특정 버튼을 클릭하거나 다른 페이지로 갈 때 ..
-
로딩 성능 최적화 수업 정리Web/Optimization 2021. 9. 22. 19:38
#1. 요청 크기 줄이기 어떤 타입의 요청이 크기가 큰지를 파악하고, 해당 요청의 크기를 줄인다. 1. 텍스트 컨텐츠 (소스 코드) ■ Minify & Uglify - 번들러에서 빌드 옵션으로 제공 - Webpack 5부터 production mode에서는 기본으로 최적화 - CSS 파일은 별도로 minify - CSS in JS는 Babel transpile 과정에서 minify ■ GZIP 압축 - 모던 브라우저에는 모두 내장되어있는 압축 프로그램 - AWS, 스프링 등 서버에서 설정할 수 있음 - Brotli는 더 효율적으로 압축, 그러나 아직까진 지원이 미비 2. 이미지 평균적으로 웹페이지 용량에서 이미지가 파지하는 비율은 60% 이상. 이미지 용량만 잘 관리해도 어느 정도의 성능은 잡고갈 수 있..
-
프론트엔드 웹 로딩 최적화Web/Optimization 2021. 8. 16. 19:38
웹 성능 최적화는 사용자 경험뿐만 아니라, 매출과도 거의 직접적으로 연결이 될 정도로 굉장히 중요하다. 웹 성능 최적화를 위해서 필요한 기본 지식과 함께, 최적화 방법에 관해서도 간단히 알아보도록 하자. 브라우저의 로딩 과정 웹 로딩 최적화를 위해서는, 브라우저의 로딩이 어떤 식으로 이루어지는지에 관해 알고있는 것이 도움이 많이 된다. 브라우저의 로딩은 크게 파싱, 스타일, 레이아웃, 페인트, 합성의 과정을 거친다. 좀 더 자세한 내용은 TOAST UI의 '성능 최적화' 글을 참조하길 바란다. 성능 최적화 애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께 사용자 경험 ui..