글꼴 문제로 인해 성능 문제가 발생합니다.

Question

내 사이트를로드 할 때 브라우저에 글꼴이 표시된 텍스트가 표시되기 전에 몇 초가 지나면 글꼴이있는 텍스트가 즉시 표시됩니다.

나는 10 초의 동결을 경험하는 사용자로부터 불만을 제기하고 있습니다.

어떻게해야합니까?

@font-face{ 
    font-family:'GillSans'; 
    src:url('../fonts/GIL_____.eot'); 
    src:url('../fonts/GIL_____.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/GIL_____.woff') format('woff'), 
     url('../fonts/GIL_____.ttf') format('truetype'), 
     url('../fonts/GIL_____.svg#GillSans') format('svg'); 
} 
@font-face{ 
    font-family:'GillSansB'; 
    src:url('../fonts/GILB____.eot'); 
    src:url('../fonts/GILB____.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/GILB____.woff') format('woff'), 
     url('../fonts/GILB____.ttf') format('truetype'), 
     url('../fonts/GILB____.svg#GillSansB') format('svg'); 
} 
@font-face{ 
    font-family:'GillSansBI'; 
    src:url('../fonts/GILBI___.eot'); 
    src:url('../fonts/GILBI___.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/GILBI___.woff') format('woff'), 
     url('../fonts/GILBI___.ttf') format('truetype'), 
     url('../fonts/GILBI___.svg#GillSansBI') format('svg'); 
} 
@font-face{ 
    font-family:'GillSansI'; 
    src:url('../fonts/GILI____.eot'); 
    src:url('../fonts/GILI____.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/GILI____.woff') format('woff'), 
     url('../fonts/GILI____.ttf') format('truetype'), 
     url('../fonts/GILI____.svg#GillSansI') format('svg'); 
} 

Answer 1

압축 및 글꼴을 캐시보십시오 : 여기

내가 글꼴을 삽입하는 방법입니다. 아파치를 사용하는 경우, 당신은 당신이 아파치를 사용하는 가정 및 모듈 여기

을 매우 helpful overview 성능 전문가 스티브 사운 더스

추가 정보 및 자원

에서됩니다 htaccess로 사용하여이 구성 할 수 있습니다 mod_expires 및 mod_deflate는 ABO를 추가 한 후에 당신이 당신의 .htaccess

<IfModule mod_expires.c> 
    Header set cache-control: public 
    ExpiresActive on 

    ExpiresByType font/ttf  "access plus 1 month" 
    ExpiresByType font/woff  "access plus 1 month" 
    ExpiresByType image/svg+xml "access plus 1 month" 
</IfModule> 

<IfModule mod_deflate.c> 
    <FilesMatch "\.(ttf|otf|eot|svg)$" > 
    SetOutputFilter DEFLATE 
    </FilesMatch> 
</IfModule> 

에 다음과 같은 규칙을 추가 할 수 있습니다, 사용 가능 .htaccess에 확인하려면 관련 헤더 필드를 관찰하십시오.

자세히 알아 보려면 cache control 및 compression에 대한 속도 팁을 확인하십시오.