기본 콘텐츠로 건너뛰기

폰트 preload시 두 번 다운로드 하는 문제

스태틱 리소스에 대해서 preload 를 사용하면 초기 로딩 속도를 최적화시킬 수 있다. css와 font 파일들은 렌더링 블럭을 발생시키기 때문에 이 파일들을 모두 다운받기 전까지는 렌더링을 하지 않게 된다.

<link rel="preload" href="some-font.woff2" as="font" type="font/woff2>


기본적으로 위와 같은 형식으로 쓰면 페이지 진입과 동시에 font를 로딩하게 된다.

그런데 네트워크 탭을 살펴보면 같은 폰트를 두 번 다운로드 받게 되는것을 볼 수 있다.

<link rel="preload" href="some-font.woff2" as="font" type="font/woff2 crossorigin>


이를 해결하기 위해 아래와 같이 crossorigin attribute를 추가해 준다.
라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

Nodemailer를 이용해서 mail 전송

Nodemailer Nodemailer는 이름에서 알 수 있듯이 node 기반의 메일을 쉽게 보낼 수 있는 라이브러리다. 설치 yarn을 이용하는 경우 yarn add nodemailer npm을 이용하는 경우 npm install --save nodemailer 메일을 보내보자 /* mail.js */ var nodemailer = require('nodemailer'); var smtpConfig = { host: ${SMTP Server 주소}, port: ${SMTP SErver 포트}, secure: true, // use SSL auth: { user: ${SMTP ID}, pass: ${SMTP 비밀번호} } }; var mailOptions = { from: ${받는사람 메일 주소}, to: ${보내는사람 메일 주소}, subject: ${제목}, text: ${본문 내용} }; var smtpTransport = nodemailer.createTransport(smtpConfig); smtpTransport.sendMail(mailOptions, function (error/*, response*/) { if (error) { console.log(error); } else { console.log('Complete'); } smtpTransport.close(); }); 실행 node mail.js 위 코드에 ${} 형태로 된 부분만 각자 입맛에 맛게 채워주면 끝이다. 파일을 첨부해보자 메일을 보낼 때 파일을 첨부하고 싶은 경우 mailOptions에 attachments 값을 넣어 주면 끝이다. node에서 파일을 읽기 위해서는 fs를 사용한다. /* mail.js */...
댓글 쓰기
자세한 내용 보기

CSS autoprefixer 사용시 스타일 제거 될 경우

Autoprefixer 는 CSS 사용 시 최신 프로퍼티에  vendor prefix를 붙여주는 역할을 한다. ::-webkit-input-placeholder { color : gray ; } ::-moz-placeholder { color : gray ; } :-ms-input-placeholder { color : gray ; } ::-ms-input-placeholder { color : gray ; } ::placeholder { color : gray ; } 그런데 사용중인 Autoprefixer 버전에서 지원하지 않는 프로퍼티를 제거해버리는 경우가 있다. 실제로 Autoprefixer 6.7.7 버전에서는 backdrop-filter 라는 프로퍼티를 사용하게 될 경우 그대로 감쪽같이 지워지는 현상이 있다. 이런 현상을 방지하기 위해 autoprefixer 기능을 잠시 꺼두면 된다. .some-selector { /* autoprefixer: off */ backdrop-filter: blur(2px); /* autoprefixer: on */ } 물론 Autoprefixer 최신 버전을 사용하면 왠만한 경우 해결이 된다. 혹시나 버전을 올리기 힘든 상황인 경우 위 방식을 사용하고, 그렇지 않다면 최신 버전을 사용하는 것을 추천한다.
댓글 쓰기
자세한 내용 보기