Mong dev blog

😃 이번시간에는 웹폰트 로딩을 최적화하는 5가지 방법을 알아보았다! (참고1, 참고2, 참고3) 1. 들어가기에 앞서 1) FOIT, FOUT ? 우리가 처음 사이트에 진입했을 때, 글자가 늦게 뜨거나 폰트가 나중에 적용되는 현상이 일어난다. 이 두 현상은 각각 지칭하여 FOIT, FOUT라고 부르는데, Flash of Invisible Text (FOIT)란, 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 현상이며, Flash of Unstyled Text (FOUT)란, 브라우저가 폰트를 다운로드하기 전까지 폰트가 적용되지 않는 현상을 말한다. 그런데 이 두 현상은 왜 일어나는걸까? 브라우저 동작과 함께 살펴보자! 2) 브라우저 동작과 웹 폰트 폰트에서 FOIT, FOUT가 일어나는 이유를..

🙂 이번 시간에는 이미지 로딩 시간을 줄이는 3가지 방법에 대해 알아보았다! 1. 이미지 압축하기 첫번째는 이미지를 압축하는 방법으로, 이미지를 압축하여 이미지 로딩 시간을 줄일 수 있다. 이미지를 압축하는 방법으로 Imagemin를 사용할 수 있다. (1) imagemin으로 이미지 압축하기 압축할 파일 위치, 압축된 파일 저장 위치 등을 지정하여 이미지를 압축할 수 있다. import imagemin from 'imagemin'; import imageminJpegtran from 'imagemin-jpegtran'; import imageminPngquant from 'imagemin-pngquant'; const files = await imagemin( ['images/*.{jpg,png}'],..