장바구니 담기 close

장바구니에 상품을 담았습니다.

장바구니로 계속쇼핑하기
프론트엔드 성능 최적화 가이드
미리보기

프론트엔드 성능 최적화 가이드

  • 유동균
  • |
  • 인사이트
  • |
  • 2022-11-15 출간
  • |
  • 244페이지
  • |
  • 172 X 225mm
  • |
  • ISBN 9788966263745
판매가

22,000원

즉시할인가

21,780 원

배송비

2,300원

(제주/도서산간 배송 추가비용:3,000원)

추가상품
상품선택
독서대 7,900원 독서대 선택안함 0원
수량
+ -
총주문금액
21,780원
장바구니 구매하기

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

북스크린영상으로 만나보는 한 권의 책 이야기

출판사서평

"내 웹은 왜 느릴까?"답답한 웹 서비스에 사이다가 되어 주는 책!똑같아 보이는 웹 서비스라도 성능에 따라 사용자 만족도가 달라진다. 개발한 웹사이트에서 콘텐츠가 너무 느리게 표시되거나, 레이아웃이 갑자기 바뀌어 원치 않는 요소를 클릭하게 한다면 사용자는 떠나가고 말 것이다. 정성 들여 구현한 기능이 사용자에게 잘 전달되길 바란다면 "성능 최적화"가 필수다.핀터레스트는 로딩 시간을 40% 줄임으로써 검색 유입률과 가입자 수를 15% 늘렸고, COOK은 평균 페이지 로딩 시간을 850밀리초로 줄여 이탈률을 7% 줄였다. 즉, 웹 성능의 향상이 사용자를 서비스에 머무르게 하여 서비스의 성공을 가져온다는 뜻이다. 서비스 성능 저하의 원인을 찾고 싶다면 이 책에서 권하는 최적화 포인트를 점검해 보자. 이 책은 답답한 고구마 같은 웹 서비스를 시원하게 만드는 사이다가 되어 줄 것이다.웹이 가벼워지면 구글 검색 순위도 올라간다사용자의 부담을 줄이는 웹 미니멀리즘 실천 습관!구글에서는 로딩 속도가 빠른 웹 페이지의 검색 결과를 상위에 표시한다. 사람들은 질문에 대한 답을 가능한 한 빨리 찾고자 하며, 실제로 페이지 속도에 신경을 쓴다는 것이다. 구글은 오래전부터 "웹 성능"이라는 주제에 관심을 갖고 성능 향상을 위한 다양한 시도를 해 왔다. 그 과정에서 Lighthouse와 AMP 같은 기술이 탄생하기도 했다. 더불어 성능 관련 정책을 주기적으로 업데이트하며, 구글에 검색되길 원하는 페이지의 성능을 높이도록 권장하고 있다.PM, 디자이너뿐만 아니라 개발자도 사용자 경험을 필수로 고려해야 한다. 내가 만든 웹 서비스를 사용자가 기분 좋게 이용하길 바란다면 사용자 성능 부담을 줄이는 미니멀리스트가 되어야 한다. 불필요하게 많은 코드가 로드되지는 않는지, 캐시 설정은 적절하게 되어 있는지, 콘텐츠 크기가 필요 이상으로 크진 않은지 이 책의 최적화 포인트를 꼼꼼히 체크해 보자.

목차

1장 블로그 서비스 최적화실습 내용 소개____이 장에서 학습할 최적화 기법____분석 툴 소개서비스 탐색 및 코드 분석____코드 다운로드____서비스 실행____서비스 탐색____코드 분석Lighthouse 툴을 이용한 페이지 검사____Lighthouse로 검사하기____Lighthouse 검사 결과이미지 사이즈 최적화____비효율적인 이미지 분석____이미지 CDN____적절한 이미지 사이즈로 최적화병목 코드 최적화____Performance 패널 살펴보기____페이지 로드 과정 살펴보기____병목 코드 개선____최적화 전후 비교코드 분할 & 지연 로딩____번들 파일 분석____코드 분할이란____코드 분할 적용하기텍스트 압축____production 환경과 development 환경____텍스트 압축이란____텍스트 압축 적용2장 올림픽 통계 서비스 최적화실습 내용 소개____이 장에서 학습할 최적화 기법 ____분석 툴 소개서비스 탐색 및 코드 분석____코드 다운로드____서비스 실행____서비스 탐색____코드 분석애니메이션 최적화____문제의 애니메이션 찾기____애니메이션의 원리____브라우저 렌더링 과정____리플로우와 리페인트____하드웨어 가속(GPU 가속)____애니메이션 최적화____최적화 전후 비교 컴포넌트 지연 로딩 ____번들 파일 분석 ____모달 코드 분리하기 컴포넌트 사전 로딩 ____지연 로딩의 단점 ____컴포넌트 사전 로딩 타이밍이미지 사전 로딩 ____느린 이미지 로딩____이미지 사전 로딩3장 홈페이지 최적화 실습 내용 소개 ____이 장에서 학습할 최적화 기법____분석 툴 소개 서비스 탐색 및 코드 분석____코드 다운로드 ____서비스 실행 ____서비스 탐색____코드 분석이미지 지연 로딩____네트워크 분석____Intersection Observer____Intersection Observer 적용하기 이미지 사이즈 최적화____느린 이미지 로딩 분석____이미지 포맷 종류____Squoosh를 사용하여 이미지 변환____최적화 전후 비교동영상 최적화____동영상 콘텐츠 분석____동영상 압축____압축된 동영상 적용____최적화 전후 비교____팁폰트 최적화____FOUT, FOIT____폰트 최적화 방법캐시 최적화____캐시란?____Cache-Control____캐시 적용____적절한 캐시 유효 시간 불필요한 CSS 제거____PurgeCSS4장 이미지 갤러리 최적화실습 내용 소개____이 장에서 학습할 최적화 기법____분석 툴 소개서비스 탐색 및 코드 분석____코드 다운로드____서비스 실행 ____서비스 탐색____코드 분석레이아웃 이동 피하기____레이아웃 이동이란?____레이아웃 이동의 원인____레이아웃 이동 해결이미지 지연 로딩리덕스 렌더링 최적화____리액트의 렌더링____리렌더링의 원인____useSelector 문제 해결병목 코드 최적화____이미지 모달 분석____getAverageColorOfImage 함수 분석
추천포스트

교환 및 환불안내

도서교환 및 환불
  • ㆍ배송기간은 평일 기준 1~3일 정도 소요됩니다.(스프링 분철은 1일 정도 시간이 더 소요됩니다.)
  • ㆍ상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • ㆍ고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • ㆍ상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • ㆍ이미 발송된 상품의 취소 및 반품, 교환요청시 배송비가 발생할 수 있습니다.
  • ㆍ반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • ㆍ주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • ㆍ상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • ㆍ반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • ㆍ스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • ㆍ군부대(사서함) 및 해외배송은 불가능합니다.
  • ㆍ오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 1800-7327
교환/반품주소
  • 경기도 파주시 문발로 211 1층 / (주)북채널 / 전화 : 1800-7327
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.