Open jsong0605 opened 5 years ago
web page에서 Text가 겁나 중요하다. 개발자의 의도 또는 사용자의 action으로 움직이거나 변화하거나, 나타나거나 사라지도록 할 수 있는데(통틀어서 behavior), 이는 HTML, CSS, JS 등으로 가능하다.
이 behavior는 서버로부터 브라우저에 리소스를 다운로드 받아야 가능한데, 어떤 방법으로 텍스트로딩 속도를 높일 수 있는지 살펴보자(핵띰!!)
코드의 기능은 바꾸지 않고, 텍스트의 whitespace, 필요없는 character를 줄이면 다운로드 타임을 줄일 수 있다.(minification) 사람이 읽기에는 가독성이 떨어지지만 브라우저가 읽는데는 전혀문제가 없다. ㅓ JS, HTML, CSS 모두 줄일 수 있다.
한번에 하나의 파일에 몽땅 copy&paste 해서 개발하는 것보다, 프레임워크, IDE, 기타 구조화된 환경을 사용하는게 좋다. 빌드 프로세스 동안 파일을 배포와 별개로 가지고 있고, minify와 같은 다양한 변형을 수행할 수 있다...개발환경 오염없이...
Gzip 자동으로 모든 파일을 compress할 수 있게 한다. decompress도 가능하다. 텍스트가아닌(ex.이미지) 이미 개별적으로 압축된 것을 Gzipping하는 것은 효과가 크지 않다. HTTP 요청에 모든 모던 브라우저가 Gzip을 지원한다. *이거 공부해보고 싶어용
유명한 CSS, JS 라이브러리들이 minify, compress 를 하지만 일반적으로 상당량의 bandwidth 를 잡아먹는다. jquery가 그러하다. 한두개의 피쳐를 사용하기위해 라이브러리를 사용하지 말아라. 그러면 많은 다운로드 시간을 절약할 수 있다.
이미지와 같이 물리적으로 용량이 큰 리소스는 성능(속도)향상 시 주목받지만, 텍스트는 페이지에서 많은 부분을 차지함에도 간과되곤 한다. 페이지 성능향상 시 텍스트 기반의 컨텐츠를(보이거나 보이지 않더라도) 무시하지마라!
(...읽는중)
텍스트와 달리 이미지는 다운로드, 렌더링에 상당한 시간과 대역폭이 필요 일반적으로 그래픽 컨텐츠가 60~85퍼 차지 따라서, 이미지 로드 타임이 성능향상의 중요
필요한 이미지만 로드해. 당장 필요한 이미지만 로드해
일반적으로 PNG: lossless compression format JPG: lossy compression format
하지만, lossy라고 해도 품질 자체가 차이가 없는 경우도 있음
메타데이터를 지우는 것만으로도 10%가량 용량을 줄일 수 있음
의도에 적합한 사이를 사용하자. 작은 사이즈로 보여줄거면 구지 용량큰거 보여줄 필요없긔
필요한 부분만 크롭해서 쓰자
2
Measuring Performance
Lighthouse
You can run it against any web page, public or requiring authentication
It has audits for performance, accessibility, progressive web apps, and more
You can run Lighthouse as a Chrome Extension, from the command line, or as a Node module
You give Lighthouse a URL to audit...and then it generates a report on how well the page did
& 크롭 개발자도구에서 사용할 수 있다.
PageSpeed Insights
It provides separate reports for mobile and desktop devices
WebPageTest
Similar to Pingdom
Pingdom
좋다 -_-;
Summary
You should try to test your page with as many different tools as possible and compare the analyses for both common factors and unique outliers
보통 이미지 사이즈, HTTP 요청, minify, zipping, cache 같은 문제들이 대다수이고 계속해서 불쑥불쑥 생겨난다. 이 이슈들이 비교적 간단히(modest) 해결할 수 있으면서, 주요 성능을 개선해준다. (핵띰!)