1. CSS @import 사용을 피하세요 @import선언을 찾기 위해 이 선언이 포함된 CSS파일을 먼저 다운로드해야 하기 때문에 Request chain이 발생하여 처음 렌더링 시간을 지연 시킵니다. <link rel="stylesheet"> 방법으로 대체할 수 있습니다. CSS 전처리기(SASS, LESS등)를 사용한다...

1. <table> 태그의 너비 관리하는 방법 table { width: 400px; /* 100%; */ table-layout: fixed; /* 고정 너비 레이아웃 */ table-layout: auto; /* 자동 너비 레이아웃 (기본값) */ } table th, td { width: 100px; /* 25%; *...

1. FOIT(Flash of Invisible Text)와 폰트 로딩시 폰트로딩 최적화 방법 FOIT란, 웹 페이지 로딩 시 텍스트가 표시되기 전까지 일시적으로 보이지 않는 현상을 말합니다. 이는 웹 폰트가 아직 로드되지 않아 발생하는 문제입니다. css의 font-display 속성 활용 swap: 폰트 로딩 동안 시스...

1.doctype 명시하기 브라우저 렌더링 모드 설정 최신 브라우저는 HTML5를 기본 렌더링 모드로 사용하기 때문에, DOCTYPE 선언이 없어도 대부분의 경우 정상적으로 작동합니다. doctype을 명시하여 이전 버전의 브라우저와의 호환성을 유지하고, 문서가 정확하게 렌더링되도록 합니다. 문서 유효성 검...

앞선 포스팅에서 렌더링과정 최적화에 대해 알아보았고 렌더링을 차단하는 리소스의 일부(CSS - 렌더링 차단, Javasript - 파서 차단)를 알아보았습니다. 이번에는 Critical Rendering을 최적화하는 몇가지 기법을 더 알아보겠습니다. Preload Scanner 사용 Preload Scanner는 HTML 파서가 리소스를 발견하기 ...

앞선 포스팅에서 웹 사이트 요청 후 첫번째 응답인 TTFB를 빠르게 하는 방법에 대해 알아 보았습니다. 이 과정을 통해 HTML 및 여러 데이터를 응답받고 브라우저에서 렌더링 과정이 시작됩니다. 브라우저는 점진적으로 렌더링을 한다. 브라우저에서 웹 페이지를 렌더링하는 것은 데이터가 있는 웹사이트에 의존할 수 밖에 없기 때문에 점진적으로 렌더링할 수...

성능 최적화가 중요한 이유 웹사이트 방문자는 머무를지 떠날지를 결정하기 전에 웹페이지에서 평균 15초를 보낸다고 합니다. 더 많은 사람들이 디지털 컨텐츠를 소비하기 위해 웹에 의존하고 서비스가 다양해지며 어느 때 보다 소비자들의 요구가 까다로워지고 있습니다. 비즈니스의 성공은 방문자를 유지하는 것에 달려있다고 할 수 있습니다. 이런 상황에서 웹사...

웹 브라우저? 웹 브라우저는 인터넷에 접속하여 콘텐츠에 엑세스 할 수 있는 소프트웨어 입니다. 사용자의 요청이 있을 때 마다 웹사이트의 파일이 저장된 서버에서 웹 페이지, 이미지, 비디오, 문서 및 기타 파일을 사용자의 장치에 표시합니다. 웹 브라우저는 지난 수십년간 인터넷 이용자의 사용을 도우며 인터넷이 발전하는데...

2023년 현재 프론트엔드 개발을 위해 가장 많이 쓰이는 프레임워크 중 하나는 React입니다. 저도 프론트엔드 개발을 해오면서 대부분의 프로젝트에 React를 사용해왔습니다. 오늘은 React를 중심으로 웹 프론트엔드 개발할 때 알아야 할 Tradeoff에 대해 이야기해보겠습니다. 웹사이트는 HTML, CSS, JS의 조합으로 만들어진다. 사...

서면 앉고 싶고, 앉으면 눕고 싶다는 말을 한 번쯤은 들어보셨을 것 같습니다. 그 말처럼 눕는 것은 편하고, 편하고 싶은 것은 또 인간의 본능이라고 생각합니다. 사회에 나와 어느 기간 이상 일하다 보면 처음에는 어렵고 낯설던 것이 어느 순간부터는 익숙해지고 편해지곤 합니다. 그런데 저는 일이 편해지면 내가 업무를 잘 알고 있다는 착각을 할 확률도...