한 걸음/프론트엔드 최적화
레이아웃 쉬프트(Layout shift) 늦은 이미지 로딩으로 인해 레이아웃이 밀리거나 변경되는 현상 화면 상에서 위치 등을 다시 계산해야 하기 때문에 리소스가 소모되고 사용자 경험에 좋지 않은 영향을 미친다. 웹사이트 효율 측정하기 개발자도구 > light house에서 레이아웃 시프트에 대한 효율을 측정할 수 있다. 발생 원인 - 이미지의 사이즈가 정해져있지 않아서 - 콘텐츠가 동적으로 삽입되어서 - 웹폰트 때문 (브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 보이지 않는 FOIT, 브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 대체 글꼴로 렌더링되는 FOUT) 해결방법 컴포넌트들의 사이즈를 미리 설정해준다(동적으로 로드되는 경우에는 최대한 예측하여).
사용하지 않는 css를 제거하여 웹페이지 성능을 개선할 수 있다. 1. F12로 개발자도구 켠 뒤 ESC 누르기 2. more에서 coverage 탭 선택 3. coverage 탭 안에 여러 항목들이 뜨는데, 만약 안뜨면 새로고침 누르면 많은 것들이 좌라락 뜬다. 4. 빨간 막대의 비율이 사용하고 있지 않는 리소스의 비율(44%를 사용하고 있지 않다) 5. Type이 CSS 인 파일을 클릭하면(지금 내 화면에는 없다) 소스코드가 쭉 나오는데, 빨간색으로 표시된 코드가 '불러들였으나 사용한 적이 없다'는 부분이다. 6. 퍼지CSS (https://purgecss.com) 라는 툴을 사용하여 정리할 수 있다. purge css는 스태틱한 파일을 읽어서(동적인 부분을 지원하기도 한다) 사용하지 않는 부분을 제..
* 캐시란? 데이터, 값 등을 미리 복사해두는 임시장소 또는 그러한 동작 - 메모리캐시 : RAM에 데이터를 저장해두고 읽는 방식 - 디스크캐시 : 파일에 데이터를 저장해두고 읽는 방식 👉 둘 중에 어떤 방식이 사용되는가는 파일 사이즈에 따라 브라우저 자체의 알고리즘으로 결정됨 F12로 개발자도구를 열고, main.chunk.js 나 기타 리소스 파일을 열어서 header 부분을 확인해본다. cache-control이라는 항목의 내용이 헤더에 들어있어야 캐시 관리가 되고있다는 의미이다. - no cache : 캐시 사용 전 서버 검사 후 사용결정 (사용하지 않는다는 의미가 아니다! 헷갈리지 말기~) - no-store : 캐시 사용 X - public: 모든 환경에서 캐시 사용 가능 - private :..
폰트 포맷 TTF / OTF 거의 압축이 되지 않은 형태 WOFF TTF / OTF 형식의 큰 용량을 줄이고, 효율적으로 사용하기 위해 만들어짐 WOFF2 위의 WOFF 방식보다 더 효율적인 사용을 위해 만들어짐 EOT IE에서만 지원 폰트 포맷 변환 사이트 https://transfonter.org/ Online @font-face generator The @font-face CSS rule allows web developers to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on th..
FOUT (Flash of Unstyled Text) - 텍스트를 일단 기본 글꼴로 먼저 띄우고, 폰트가 로딩되면 다시 적용한다. - 사용자는 '깜빡'하며 새 폰트가 적용되는 모습을 목격한다 - IE, edge 등에서 웹폰트를 보여주는 방식 FOIT (Flash of Invisible Text) - 폰트가 완전히 로딩되지 않으면 아예 보여주지 않는다 - 사용자는 처음부터 폰트가 적용된 텍스트를 본다 - Chrome, safari 등에서 웹폰트를 보여주는 방식 우리는 웹폰트 최적화를 통해 FOUT, FOIT 현상 발생을 방지해야 한다. - 웹폰트가 적용되는 시점을 컨트롤하는 방법 (CSS의 font-display 속성 이용) - 웹폰트의 용량 자체를 줄이는 방법 1. 웹폰트 적용 시점 컨트롤 https:/..
https://www.media.io/ Media.io - Online Free Video Editor, Converter, Compressor Use Media.io free online tools to edit, convert, or compress video/audio/image files in 3 easy steps. Its video editor comes with handy features you need to create a compelling video. Give it a try today! www.media.io ▲ 워터마크 없이 동영상 압축해주는 무료 사이트 위 사이트를 이용하여 해상도를 30%로 줄였더니(사이트에서 제공하는 최저 화질) 용량이 52mb → 14mb로 극적으로 줄었다. ..
https://squoosh.app/ Squoosh Simple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files. squoosh.app 위 사이트(squoosh)에 접속해서 손쉽게 이미지 용량을 줄일 수 있다. 우측의 quality, width, height 등을 조정하면 된다. 좌측이 비포, 우측이 애프터로 양쪽을 비교하며 수치를 조정할 수 있다. 예시 사진으로는 육안으로는 확인하기 힘들 정도로 미미한 화질 저하만 일어났는데, 용량은 무려 3.78mb에서 40.9kb로 99% 감소시킬 수 있었다. 조금이라도 더 적은 용량, 조..
네트워크 탭을 통해 어떤 리소스들이 다운로드 되는지 살펴본다. 이를 위해 임의로 느린 네트워크 환경을 설정해준다. 1. 크롬 개발자도구(F12) - Network 탭 - SlowDown 2. Custom 설정으로 아래와 같이 생성 (preset에 있는 Fast3G, Slow3G, offline은 너무 극단적으로 느리기 때문에 커스텀 옵션을 사용한다) 3. Disable cache 체크 세팅을 마친 후 새로고침하면, 아래와 같이 느린 환경에서 어떤 리소스들이 어떤 속도로 로딩되는지 확인할 수 있다. 히어로 콘텐츠(메인 동영상)는 pending 상태로, 앞의 작은 이미지들이 어느 정도 로딩되고 나서야 매우 느리게 로딩되는 것을 확인할 수 있다. 가장 나중에 로드하게 되면 사용자는 첫 화면에서 아무런 화면을 ..
