Async of TypeKit :: 그것은 그만한 가치가 있거나 그것을 사용하지 않는 것이 좋습니다.

Question

페이지로드 시간을 가져 오려고합니다.

r> "nofollow"> 비동기 적으로 TypeKit JavaScript를로드합니다.

작업을 수행하려면 글꼴을 사용하는 각 요소에 .wf-loading #some-element {visibility: hidden;}를 추가하고 1) 설정된 시간 (1 초) 후에 글꼴이 표시됩니다.

가는 CSS가 작동하는 글꼴이 약 200 개의 요소로 지정되므로 .wf-loading{ }의 200 요소가 200 개 요소입니다 (참고 :이 CSS를 쓰지 않았습니다).

나는 이것이로드 시간을 정기적으로로드하는 것 이상으로로드 시간을 더 늦출 것으로 느낍니다.이것이 사실이라면, 나는 그냥 도끼 TypeKit을 완전히 송신하고 정기적 인 글꼴로 이동할 것입니다.

이런 종류의 물건에 대한 성능 테스트를 실행하는 데 사용할 수있는 도구가 있습니까?또는 누군가 가이 일을 테스트 한 것입니까?

Answer 1

이 방법으로 단일 DOM 요소 (루트) 이상의 실제로 수정하지 않습니다.즉, 우리의 현대 브라우저는 슈퍼 빠른 CSS 엔진에 의존 할 것이므로 관련된 요소 수는 페이지 하중에 눈에 띄는 영향을 미치지 않습니다.

페이지 하중 및 깜박임만큼 네트워크 대기 시간은 일반적으로 DOM 조작보다 크기가 더 나쁜 순서입니다.브라우저가 글꼴을 다운로드 할 때까지 항상 첫 번째 (UNCHIRIMED) 페이지로드에 항상 일부 플리커가있을 것입니다.재사용을 위해 글꼴을 캐시하고 파일 크기를 가능한 한 작게 유지하려고 시도하십시오.

나는 몇 년 전에 Cufon 으로이 길을 갔다.결국, 나는 허용 가능한 성능으로 가장 간단한 경로를 선택하고 거기에서 멈췄습니다.페이지 하중을 최적화하는 데 쉽게 잡을 수는 있지만 개선 기능, 버그, 리팩토링 등의 유망한 영역이 있습니다.

Answer 2

문제는 "Nofollow"> Blog 드문 경우는 드문 경우입니다 (그러나 일은 분명히 일어납니다 - TypeKit CDN이 실패하고 사용자가 빈 페이지를 볼 수 있습니다.이것은 당신이 비동기 로딩을 사용하기를 바랍니다.