Joyful 개발 (14) 썸네일형 리스트형 [최적화] 이미지 압축과 사이즈 조절로 웹 사이트 최적화하기,로딩속도와 TBT 개선 (+이미지 압축 사이트 추천) 현재 개발 중인 예약관리 서비스에 이미지 최적화를 적용해보려고 한다. 사이트 첫화면 로그인 컴포넌트 아래에 서비스에 대해 설명하는 부분이 있다. 보다 효과적으로 서비스를 어필하기 위해 스크롤에 반응하는 애니메이션 효과를 입힌 이미지와 설명을 넣어 구현했는데... 최적화 전 - 사이트 화면 화면이 버벅이면서 뭔가 매끄럽지 않은 느낌이 든다 - 개발자 도구를 켰을 때 화면 크롬 개발자도구를 켜놓고 보면 더욱 눈에 잘 보인다 상단에 있는 대표 배경이미지가 다시 로드되는 게 눈에 보이고 이미지 애니메이션이 버벅이는 건 물론 폰트가 뒤늦게 적용되는 모습까지 다 보인다... 이대로는 안 되겠다 😫 개선해보자...! 이미지 최적화 하기 현재 서비스 첫 화면에서 사용하고 있는 이미지들이다 이미지의 크기를 보니 작게는 .. [Naming] register? create? 회원가입 컴포넌트 네이밍 register? create? 회원가입 시 사용할 단어 계정 로그인/로그아웃 컴포넌트명을 login,logout으로 결정하면서 회원가입 컴포넌트 명 후보 중 sign up은 탈락했다. (지금 생각해보니 sign up / sign in / sign out 으로 관리하는 것도 나쁘지 않은 것 같다.) register account ? create account ? 둘 중에 어떤 단어를 써야할까 고민하며 여러 글을 읽어보던 중 아래와 같은 글을 발견했다. I faced this topic in for several projects and I’ve to say that is stil not 100% clear if, as UXs, we have to pay attention to it. In terms of .. [Webpack] file-loader와 url-loader 비교 차이점 정리 file-loader와 url-loader? 웹팩 설정 중 둘의 차이가 궁금해 알아보며 공부했던 내용을 정리해봅니다 file-loader The file-loader resolves import/require() on a file into a url and emits the file into the output directory. - 파일에 import/requrie 구문을 만들어주고, 파일을 output 폴더에 생성해주는 로더 → 파일 자체를 가져옴 url-loader A loader for webpack which transforms files into base64 URIs. ->The url-loader works like the file-loader, but can return a DataURL .. [최적화] lazy loading 레이지 로딩으로 로딩 속도를 개선해보자 지난 프로젝트 때 만들었던 에어비엔비 클론 사이트 날짜, 인원, 요금 범위를 지정해 원하는 조건의 숙소를 검색하는 기능을 가지고 있다. 처음 메인 화면에서 전체 숙소를 보여주는데, 서버에서 총 2999개의 숙소 데이터가 한번에 넘어온다. 3000개에 가까운 데이터가 한번에 화면에 나오니 당연하게도 로딩 속도가 굉장히 느렸다. Lazy Loading 적용 전 기나긴 로딩.. 중간에 잠깐 멈추는 듯 하더니 폭발적으로 request를 보낸다.. 총 3010개의 request를 보내고 데이터를 전부 로드하는데 42.11s가 걸렸다 내가 유저라도 이정도로 느린 사이트는 안 쓸 것 같다. 이대로는 안 되겠다. 사용자가 보는 첫화면의 이미지만 미리 로드하고 이후의 이미지는 나중에 로드하는 Lazy Loading(레이.. 이전 1 2 다음
