Web Performance

Creator

Creator

Alan Jo

Created

Created

2021 Mar 21 13:0

Editor

Editor

Alan Jo

Edited

Edited

2024 Apr 13 6:36

Refs

Refs

Code Optimization

Software Performance

Web Performance Notion

Web Render Performance

Web JS Performance

Web Speed Index

Used Code Coverage

Web Performance Measure

Methods

[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리

그동안 경험상 전반적 구조 파악에는 퍼포먼스 개선하는게 짱짱이라 적게되었습니다. 이 문서는 완전히 완성된 상태가 아니라 시간이 나면 업데이트 중. 혹시 이외에도 재미있는 팁을 아시는 분이 있다면 댓글로 알려주세요. 모바일이나 기타 프로그래밍/전공 경험과 지식을 살려봤습니다. 제 블로그 글들을 보면 알겠지만 상당히 장문으로 이루어져 있지만..

[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리

https://black7375.tistory.com/72

[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리

애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께 사용자 경험에 안 좋은 영향을 끼친다. Pinterest는 긴 로딩 시간으로 인해 사용자가 페이지를 나가는 비율이 높았는데, 최적화를 통해 사용자 이탈률을 줄이고 매출은 40%로 증가시켰다.

https://ui.toast.com/fe-guide/ko_PERFORMANCE

https://ui.toast.com/fe-guide/ko_PERFORMANCE

내 웹페이지 성능을 어떻게 올릴까? - 예제

parser blocking을 일으키는 사진을 다시 보면 evaluate script가 HTML parsing 중간에 막고 있다. 여기서 한 가지 이상한 점은 우리가 배운 것은 CSSOM이 생성될 때까지 script는 실행되지 않는다는 것이었는데 반해 CSSOM 생성 시 표시되는 recalculate style 이전에 script가 실행되고 있다는 점이다.

내 웹페이지 성능을 어떻게 올릴까? - 예제

https://haragoo30.medium.com/%EB%82%B4-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%84%B1%EB%8A%A5%EC%9D%84-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%98%AC%EB%A6%B4%EA%B9%8C-%EC%98%88%EC%A0%9C-a1800d10d4ed

내 웹페이지 성능을 어떻게 올릴까? - 예제

브라우저 동작원리를 알아야 하는 이유가 무엇인가요?

프론트엔드 주니어 개발자가 꼭 알아야 하는 기본지식 중 하나로 많이 소개되고 있는 '브라우저 동작 원리' 취업이나, 이직 준비를 해봤다면 무조건 들여다봤을 내용인 만큼, 브라우저가 어떻게 동작하는지에 대해서는 프론트엔드 개발자라면 이미 어느 정도는 알고 있을 것이라 생각한다. 그러나 개발자에게 필요한 기본 지식이라고 해서 어찌어찌 들여다보고 이해는 했는데... 도대체 이게 왜 필요한 걸까?

브라우저 동작원리를 알아야 하는 이유가 무엇인가요?

https://helloinyong.tistory.com/320

브라우저 동작원리를 알아야 하는 이유가 무엇인가요?

Backend performance important all time

My biggest React App performance boost was a backend change | Swizec Teller

Performance lives in the unlikliest of places. Follow the metrics.

My biggest React App performance boost was a backend change | Swizec Teller

https://swizec.com/blog/my-biggest-react-app-performance-boost-was-a-backend-change/

My biggest React App performance boost was a backend change | Swizec Teller

Gap between devices

The Performance Inequality Gap, 2024 - Infrequently Noted

How much HTML, CSS, and JavaScript can we afford? More than in years past, but much less than frontend developers are burdening users with.

The Performance Inequality Gap, 2024 - Infrequently Noted

https://infrequently.org/2024/01/performance-inequality-gap-2024/

The Performance Inequality Gap, 2024 - Infrequently Noted

Recommendations

///////