프론트엔드디테일 (5) 썸네일형 리스트형 웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 4장 단계 이미지 갤러리 최적화 이 장에서는 이미지 갤러리 서비스로 다양한 주제의 이미지를 격자 형태로 보여준다. 마치 인스타그램 사진 보기 처럼 배열이 되어있다. 그리고 클릭시 큰 이미지로 나타나고 배경색은 이미지 색상과 비슷한 색으로 맞춰진다.이 장에서 학습할 최적화 기법이미지 지연로딩레이아웃 이동 피하기리덕스 렌더링 최적화병목 코드 최적화이미지 지연로딩은 3장에서는 Intersection Observer API를 이용했고 이번에는 npm에 있는 이미지 지연 라이브러리를 사용해보자.레이아웃 이동 피하기는 일단 레이아웃 이동(Layout shift)에 대해서 알아야하는데 이는 화면상의 요소 변화로 레이아웃이 갑자기 밀리는 현상을 의미한다. 특히 이미지 로딩 과정에서 레이아웃 이동이 많이 발생하는데 이 경험은 좋지 않은 경험을 준다. .. 웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 3장 홈페이지 최적화 이번 장에서는이미지 지연 로딩이미지 사이즈 최적화폰트 최적화캐시 최적화불필요한 css 제거에 대해서 학습하자.이미지 지연로딩이미지 지연 로딩은 말 그래도 첫 화면에 당장 필요하지 않은 이미지가 먼저 로드되지 않도록 지연시키는 기법이다. 이렇게 함으로써 사용자에게 가장 먼저 보이는 콘텐츠를 더 빠르게 로드할 수 있다.이미지 사이즈 최적화1장에서는 CDN에서 로드되었기 때문에 url만 수정하면 쉽게 이미지 사이즈를 조절할 수 있다. 이번 장에서는 CDN 이미지가 아닌 서버에 저장되어 있는 정적 이미지를 최적화해 볼 것이다.폰트 최적화폰트는 FE 개발에서 빠질 수 없는 주제이다. 커스텀 폰트를 적용하려고 할때 몇가지 성능 문제를 야기할 수 있는데 커스텀 폰트를 적용할 때 발생할 수 있는 문제를 알아보고 최적화.. 웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 2장 올림픽 통계 서비스 최적화 이 장에서 학습할 최적화 기법CSS 애니메이션 최적화브라우저가 어떻게 화면을 그리는지 학습하고, 이를 바탕으로 해결책을 찾아 적용컴포넌트 지연 로딩1장에서 코드 분할 기법을 배워 이 기법을 이용해 분할된 코드를 필요한 시점에 로드되도록 적용. 이번에도 비슷하지만 페이지 코드 자체를 분할하는 대신 단일 컴포넌트를 분할하여 컴포넌트가 쓰이는 순간에 불러오도록 변경컴포넌트 사전 로딩컴포넌트를 분할하여 지연 로딩을 적용하면, 첫 화면 진입 시 분할된 코드 중 당장 필요한 코드만 다운로드 하기때문에 첫 화면을 더 빠르게 그릴 수 있다. 하지만 서비스 이용 과정에서 분할된 컴포넌트를 사용하려고 할 때, 다운로드 되어 있지 않은 코드를 추가로 다운로드하는 시간만큼 서비스 이용에 지연이 생긴다. 이를 위해 첫 화면에는.. 웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 1장 블로그 서비스 최적화 이미지 사이즈 최적화코드 분할텍스트 압축병목 코드 최적화앞의 3개는 로딩 성능을 최적화이고 병목 코드 최적화는 렌더링 성능을 최적화하는 방법이다.이미지 사이즈 최적화너무 큰 사이즈의 이미지를 무분별하게 사용하면 네트워크 트래픽이 증가해 서비스 로딩이 오래 걸린다.코드 분할spa 특성상 모든 react 코드가 하나의 자바스크립트 파일로 번들링되어 로드되기 때문에, 첫 페이지 진입 시 당장 사용하지 않는 코드가 다소 포함되어 있다. 이때 코드 분할을 통해 필요없는 코드를 떼어내고, 해당 코드를 필요한 시점에 따라 로드할 수 있다.텍스트 압축웹페이지를 접속하면 다양한 리소스를 내려받는데, 그중 html, css, js 가 포함되어 있다. 이런 리소스는 다운로드 전에 서버에서 미리 압축할 수 있다. 그러면 원래.. 웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 0 2년전에 책을 구입하고 실습과 함께 진행해야해서 미뤄두었다가 추석때 시간을 내서 읽기 시작하였다. 정리하며 읽어보자. 머리말에 인상깊은 말들이 있는데웹 성능의 향상이 사용자를 서비스에 머무르게 하여 서비스의 성공을 가져온다.실력의 차이를 만드는 프론트엔드 개발자의 디테일웹 개발에 어느정도 익숙한 개발자라면 원하는 기능을 구현하는 데 큰 어려움이 없을 것이다. 하지만 한 끗 차이를 만드는 건, 정확한 기능 구현을 넘어 사용자 경험까지 생각하는 섬세함이다. 콘텐츠 사이즈 최적화, 컴포넌트 지연로딩과 사전로딩, 병목코드 최적화, 캐시 최적화 등 더 향상된 로딩 성능과 렌더링 성능으로 경쟁력을 높여보자.구글의 주장하는 핵심은 “성능이 저하되면 사용자가 떠나고 매출이 감소한다”웹 성능을 결정하는 요소는 크게 로딩.. 이전 1 다음
