jsong0605
commented
5 years ago Text Content
web page에서 Text가 겁나 중요하다. 개발자의 의도 또는 사용자의 action으로 움직이거나 변화하거나, 나타나거나 사라지도록 할 수 있는데(통틀어서 behavior), 이는 HTML, CSS, JS 등으로 가능하다.
이 behavior는 서버로부터 브라우저에 리소스를 다운로드 받아야 가능한데, 어떤 방법으로 텍스트로딩 속도를 높일 수 있는지 살펴보자(핵띰!!)
Separate Development from Deployment
Minify Your Code
코드의 기능은 바꾸지 않고, 텍스트의 whitespace, 필요없는 character를 줄이면 다운로드 타임을 줄일 수 있다.(minification) 사람이 읽기에는 가독성이 떨어지지만 브라우저가 읽는데는 전혀문제가 없다. ㅓ JS, HTML, CSS 모두 줄일 수 있다.
Frameworks
한번에 하나의 파일에 몽땅 copy&paste 해서 개발하는 것보다, 프레임워크, IDE, 기타 구조화된 환경을 사용하는게 좋다. 빌드 프로세스 동안 파일을 배포와 별개로 가지고 있고, minify와 같은 다양한 변형을 수행할 수 있다...개발환경 오염없이...
Compress Text Resources
Gzip 자동으로 모든 파일을 compress할 수 있게 한다. decompress도 가능하다. 텍스트가아닌(ex.이미지) 이미 개별적으로 압축된 것을 Gzipping하는 것은 효과가 크지 않다. HTTP 요청에 모든 모던 브라우저가 Gzip을 지원한다. *이거 공부해보고 싶어용
Reduce Library Use
유명한 CSS, JS 라이브러리들이 minify, compress 를 하지만 일반적으로 상당량의 bandwidth 를 잡아먹는다. jquery가 그러하다. 한두개의 피쳐를 사용하기위해 라이브러리를 사용하지 말아라. 그러면 많은 다운로드 시간을 절약할 수 있다.
Summary
이미지와 같이 물리적으로 용량이 큰 리소스는 성능(속도)향상 시 주목받지만, 텍스트는 페이지에서 많은 부분을 차지함에도 간과되곤 한다. 페이지 성능향상 시 텍스트 기반의 컨텐츠를(보이거나 보이지 않더라도) 무시하지마라!
(...읽는중)
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) 해결할 수 있으면서, 주요 성능을 개선해준다. (핵띰!)