웹 성능
-
CSS 성능을 높일 수 있는 CSS BEM 방법론html, css/css 2018. 5. 9. 17:10
하단의 참고 사이트를 읽고 이해한 것을 정리 하였으며, 천천히 차근 차근히 정독 하셔야 이해가 될 것이라 예상 됩니다, 그리고 혹시 잘못 이해한 것이 있으면 댓글로 알려주시면 정말 감사 하겠습니다. bem 스타일에 대해서 소개하기 앞서 오늘날 대부분의 기기는 초당 60회의 빈도로 화면을 새로 고칩니다. 각 프레임에는 16ms 가량의 시간만 할당 되는데(1초/60 = 16.66ms) 실제로 브라우저는 실행준비를 해야하므로 10ms 내에 모든 작업을 완료해야 합니다. 제한 시간을 충족 하지 못하면 버벅거림 현상이 발생하며 사용자에게 거부감을 줍니다. 완전 간단하게 이야기를 하자면 브라우저가 렌더링을 하는데 여러가지의 과정들을 거쳐서 렌더링이 되는데 그 과정중에서 스타일을 재계산 하고 페이지 또는 페이지 일부..
-
디자이너를 위한 웹 성능 최적화 기법 (1)Book/디자이너를 위한 웹 성능 최적화 기법 2017. 8. 22. 10:28
책 - "디자이너를 위한 웹 성능 최적화 기법" 을 읽고 정리하는 포스트 입니다. 페이지 속도의 원리와 프론트단에서 성능 최적화를 해야하는 중요성과 최적화 방법들, 성능 최적화 관련 툴들을 소개 하고 있는데, 새로 알게 된 것들이 많았습니다. html,css 코딩을 하시는 분이라면 한번은 봐야 될 책이라고 생각합니다. 이미지 포맷 고르기 대부분의 사이트에서 페이지 용량의 대부분을 이미지가 차지합니다. 이미지 최적화는 사이트 내의 페이지 로딩 시간을 개선할 때 가장 쉬우면서도 큰 효과를 낼 수 있는 방법입니다.다음의 작업을 통해서 주요 콘텐츠 이미지 뿐만 아니라 사이트를 구성하는 이미지들도 상당 부분 개선 할 수 있습니다. 1. 각 이미지 파일의 크기와 품질 사이의 균형점 찾기2. 사이트의 이미지 요청 횟..