Question

我在优化网页时遇到了一些麻烦。我已关闭缓存并检查Chrome中谷歌开发者工具的性能。每个页面加载大约需要17秒才能开始渲染页面，然后3-4秒加载所有其余页面，大约需要10-15秒来加载自定义字体。我看一下网络面板和瀑布：

所以问题是页面中使用的字体。这里是@ font-face在CSS外部文件中的外观：

@font-face {
font-family: 'belwehbold';
src: url('../fonts/Belwe-ExtraBold-webfont.eot');
src: url('../fonts/Belwe-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/Belwe-ExtraBold-webfont.woff2') format('woff2'),
     url('../fonts/Belwe-ExtraBold-webfont.woff') format('woff'),
     url('../fonts/Belwe-ExtraBold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
main {
font-family: 'Helvetica';
font-size: 20px;
position: relative;
text-align: center;
width: 1230px;
margin: auto;
padding: 10px;
background: transparent;
}
.fonts-loaded main {
  font-family: 'belwehbold';
}

在每个页面中，我使用fontFaceObserver以这种方式“延迟”问题：

 <!doctype html>
<html lang="en">

<head>
<title></title>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="preload" as="style" type="text/css" href="css/style.css" onload="this.rel='stylesheet'">

<script src="js/fontfaceobserver.js"></script>
<script>
var font = new FontFaceObserver('belwehbold');

font.load().then(function () {
  console.log('Font is available');}, function () {
      console.log('Font is not available');
});
</script>
</head>
<body>
</body>

在新检查之后，结果是相同的，但是“字体不可用”，如控制台所述。字体大约是25kb，在.htaccess中，所有文件都是这样压缩的：

<IfModule mod_deflate.c>

# Komprimiere HTML, CSS, JavaScript, Text, XML und fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/javascript text/text font/opentype font/truetype font/eot


  # Browser bugs entfernen (nur fÃƒÆ’Ã†â€™Ãƒâ€šÃ‚Â¼r wirklich alte Browser)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

任何人都可以帮我解决这个问题吗？

等待（TTFB）太高而涉及字体延迟？

0 个答案: