milliwonkim의 블로그

Layout Shift 네트워크로 이미지를 불러올 때, 폰트 보다 늦게 뜬 후, 이미지가 차지하는 공간만큼 레이아웃이 밀려날 때 나타나는 현상 Layout Shift가 발생하는 원인 1. 크기가 정해지지 않은 이미지, 광고, 임베드 및 iframe 2. 동적인 컨텐츠 3. FOIT/FOUT을 유발하는 웹 폰트 4. DOM 업데이트 전에 네트워크 응답 대기 작업 Layout Shift를 막는 방법 레이아웃 이동은 요소의 사이즈를 미리 정하지 않아서 발생합니다. 따라서 레이아웃 이동을 유발하는 요소의 사이즈를 정하면 됩니다. 이미지 사이즈는 브라우저의 가로 사이즈에 따라 변합니다. 따라서 단순히 너비와 높이를 고정하는 것이 아닌 이미지의 너비, 높이 비율로 공간을 잡아두면 됩니다. 크롬에서 보면 개발자도구를..

크롬 라이트하우스로 검사를 해보았습니다. 그런데 Reduce unused CSS라는 권장사항이 나왔습니다. 이에 대해 사용하지 않는 코드들이 있는지 더 파악하기 위해 라이트하우스의 커버리지를 확인하기로 했습니다. 라이트하우스의 커버리지를 보면 CSS이외에도 파일 별로 사용하지 않는 코드들이 얼마나 있는지 보여줍니다. PurgeCSS를 사용하려고 합니다. yarn add -D purgecss // package.json { ... "scripts": { "start": "npm run build:style && react-app-rewired start", "build": "npm run build:style && react-app-rewired build", "build:style": "postcss s..

크롬 라이트하우스로 평가 시, 진단에서 'Serve static assets with an efficient cache policy'라는 부분이 있습니다. 이 부분은 네트워크를 통해 다운로드하는 리소스에 캐시를 적용하라는 뜻입니다. 실제로 하나를 들어가보면 Cache-Control이 no-cache로 되어있습니다. 이것은 캐시를 사용하지 않는 다는 것은 아니고 사용전에 서버에 캐시된 리소슬극 사용해도 되는지 한 번 체크하도록 하는 옵션입니다. 캐시를 사용하지 않을 땐 Cache-Control: no-store을 보여줍니다. 캐시 종류 - 메모리 캐시: 램에 저장 - 디스크 캐시: 파일 형태로 디스크에 저장 어떤 캐시에 저장할지는 브라우저의 알고리즘이 알아서 처리해줍니다. 캐시 하기 캐시를 적용하려면 응답..

위 이미지의 경우, 폰트가 다 다운로드가 되지 않아 폰트가 적용되지 않았습니다. FOUT, FOIT은 브라우저에 따라 커스텀 폰트를 적용하기 전까지의 적용 과정을 말합니다. 어쨌든 두 개 모두 커스텀 폰트가 다운로드가 완전히 되지 않을 경우, 기본 폰트를 보여줍니다. 예를 들면, 처음에는 Noto Sans로 보여주다가, 특정 회사의 폰트가 다운로드 되면 그제서야 그 폰트 스타일을 반영하는 것입니다. 이럴 때 최적화 방법은 다음과 같습니다. 폰트 적용 시점 제어 한마디로 CSS의 font-display 속성으로 FOUT, FOIT 방식 중에 하나를 고르게끔 하는 것입니다. @font-face { font-family: BMYEONSUNG; src: url('./assets/fonts/BMYEONSUNG.t..

영상은 사진에 비해 용량이 큽니다. 예를 들어 png 사진 파일의 경우, 5MB이지만, 영상의 경우 짧아도 50MB는 합니다. 그래서 웹에서 영상을 다 업로드하지 않고, 아래의 이미지와 당장 필요한 부분을 잘라서 필요할 때 다운로드하는 형식입니다. 영상은 다음과 같이 다운로드 한 이후에 바로 재생이 되는 것이 아니라 시간이 지나고 나서 재생이 됩니다. 여기서는 Media.io라는 서비스를 이용해서 동영상 용량을 낮춰보도록 하겠습니다. 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..

png, jpg, webp 비교 png 무손실압축 방식 알파채널(투명도) 지원 => 배경색을 투명하게 해서 뒤의 요소가 보이는 이미지 만들기 가능 고화질 혹은 투명도 정보가 필요하면 png 사용 jpg 압축 시 손실 많이 발생 더 작은 사이즈로 줄일 수 있음 => 고화질 혹은 투명도 정보가 필요한게 아니면 jpg 사용 webp 무손실압축, 손실압축 모두 제공(최신이미지 포맷) => png, jpg 비해서 효율적인 이미지 압축 (png 대비 26%, jpg 대비 25~34% 고효율) 하지만 최신 포맷(2010년 발표)이라서 지원하지 않는 브라우저가 있을 수 있음 - 사이즈: png > jpg > webp - 화질: png === webp > jpg - 호환성: png === jpg > webp 압축해보기 ..

이미지나 영상을 처음에 모두 띄울 필요는 없습니다. 첫 로딩을 빠르게 하고, 그 이후에 뷰포트가 이미지가 필요한 곳으로 들어왔을 때 그 때 로딩하는 방법도 성능 향상에 좋은 요소가 됩니다. 스크롤 이벤트에 LazyLoading을 할당할 경우, 수많은 콜을 부를 것입니다. 따라서 Intersection Observer를 이용해서 특정 뷰포트에 들어올 때만 Lazy Loading을 트리거하게끔 합니다. import React, { useEffect, useRef } from "react"; function Card(props) { const imgRef = useRef(null); useEffect(() => { const options = {}; const callback = (entries, observ..

전문성 트랙에 있어서 좋은 글이 있어 링크를 가져왔습니다 https://steady-study.super.site/frontend-engineer-career-roadmap 프론트엔드 엔지니어 커리어 로드맵: 주니어를 위한 3가지 전문성 트랙 ‘웹 개발자’는 1990년대부터 있어왔지만 ‘프론트엔드 엔지니어’가 독립적인 직업군으로 불리게 된 것은 불과 10년도 채 안 됐다. 자바스크립트 생태계가 웹에 끼치는 영향이 급격히 커지고 U steady-study.super.site

Lazy로딩을 할 경우, 필요할 때 로딩할 수 있다는 장점이 있지만 초기 렌더링에는 효과적일지 몰라도, 모달 자체를 렌더링할 때, 모달의 용량이 클 경우 띄울 때 오히려 이부분에서는 시간이 오래 걸릴 수 있다. import React, { lazy, Suspense, useState } from "react"; import styled from "styled-components"; import Header from "./components/Header"; import InfoTable from "./components/InfoTable"; import SurveyChart from "./components/SurveyChart"; import Footer from "./components/Footer";..

애니메이션이 발생 시, 쟁크현상이 일어나는 이유? 애니메이션은 여러 이미지를 빠르게 보여줌으로써 움직임을 표현 => 만약 브라우저가 60FPS(Frame Per Second)를 그려야하는 애니메이션이 40FPS, 20FPS로 그려낸다면 끊김현상이 발생 쟁크(Jank) 현상 애니메이션이 뚝뚝 끊기는 현상 쟁크현상을 방지하는 방법? 리플로우, 리페인트를 막는 CSS 속성으로 애니메이션을 표현한다(= GPU 가속(하드웨어 가속)을 이용해서) 리플로우, 리페인트란? 리플로우, 리페인트를 이해하기 위해 브라우저에 렌더링되는 과정을 살펴볼 필요가 있습니다. 리퀘스트/리스폰스 및 로딩 서버로부터 HTML 파일을 요청해서 HTML파일을 로딩합니다. 스크립팅 HTML파일을 DOM으로, CSS 파일을 CSSOM으로 변환하..