웹 성능을 위한 초보자 가이드: 최적화 글꼴 굉장 아이콘

나는 글꼴 아이콘을 사용하면 즉시 아이콘을 업데이트하거나 추가하는 것이 훨씬 쉬워지기 때문에 글꼴 아이콘의 열렬한 팬입니다. 저는 사용자 정의 디자이너가 만든 아이콘과 해당 아이콘의 호버 상태로 구성된 거대한 이미지인 스프라이트시트를 만들어야 했습니다. 스프라이트시트에서 특정 아이콘을 원하면 동일한 이미지를 호출하지만 CSS의 배경 위치를 스프라이트시트의 위치로 설정합니다. 이제 SVG에서 사용자 정의 아이콘을 훨씬 쉽게 제공할 수 있지만 방대한 표준 아이콘 세트를 원하는 경우 글꼴 아이콘이 매우 편리합니다.

그러나 성능을 최대화하려면 사이트에 전체 글꼴 아이콘 파일을 덤프하는 것이 가장 좋은 방법은 아닙니다. FontAwesome의 CSS/SVG 구현을 최적화하는 방법에 대해 논의하겠습니다. 이것들은 또한 아이콘과 그 호버 상태를 의미하는 기본적인 아이콘 사용이 될 것입니다.

FontAwesome 및 글꼴 아이콘

Download FontAwesome Files and Serve Locally

Using FontAwesome like a Font

Understanding the CSS Files

FontAwesome Free

FontAwesome Pro

Preload the Necessary Font Files

Ditch the Files and Use FontAwesome SVGs

FontAwesome 파일을 다운로드하고 로컬에서 제공

Font Awesome gives you a huge number of icons for free and the ability to download and serve the files from your own server, so start with downloading the zip folder (version 5.15.4 as of this post) CDN 링크를 사용하는 대신 일반적인 글꼴 최적화의 경우와 마찬가지로 글꼴을 제공하기 위해 외부 서버에 액세스할 필요가 없기 때문에 사이트 속도에 도움이 됩니다.

FontAwesome을 글꼴처럼 사용하기

If you are planning to use a lot of icons and need the ability to style them differently depending on their use (or need them to inherit the text styling of their parents), then it will be easier to use them as normal fonts using the <i> tags.

Since we're treating FontAwesome like any other external text font that needs to load locally, then you will need the actual font files (woff, woff2, etc). These are located in the webfonts folder. Place that folder in your directory at the same level as your css folder (or wherever your stylesheets are located).

CSS 파일 이해하기

This is where FontAwesome gets very confusing because there are a lot of individual files that come in the zip folder. Which files do you actually need in your project? Here's an explanation of the files:

min is the respective minified version of the regular file. You should always load this file instead of the regular one to save space.
all.min.css contains fontawesome.min.css (which stores the unicode value of the fonts) AND all the specific font families that tell the browser which font files to load ( regular.min.css , solid.min.css , etc.)
The font family CSS files are also separated out into individual files and cannot be used just by themselves. They will need to be used in combination with all.min.css or fontawesome.min.css

FontAwesome 무료

Using the free version is simpler to optimize mainly because your options are much more limited compared to Pro. You'll call one minimized file in your CSS before your own custom CSS file:

<!-- Allows you to use all the free font icons -->
<link href="./css/all.min.css" rel="stylesheet">

Theoretically, if you only used one type of icon on your entire site (for example: Brands), you should only load that type in combination with the base FontAwesome CSS, which would look like this:

<!-- Doesn't save that much data on the free version -->
<link href="./css/fontawesome.min.css" rel="stylesheet">
<link href="./css/brands.min.css" rel="stylesheet">

Notice we are no longer loading the all.min.css because the all file loads additional font types like Solid and Regular which aren't being used. However with the free version, because there are fewer types of icons, this doesn't save much space. The file fontawesome.min.css is only 2 KB smaller than all.min.css, and if you add brands.min.css , it's only about 1.3 KB less.

So if you're using the free version, you should be fine with using the all file and not have an issue with calling any of the free icons like so:

<head>
  <link href="./css/all.min.css" rel="stylesheet">
</head>
<body>
  <i class="fab fa-dev"></i>
</body>

폰트어썸 프로

If you're using the Pro version you have a lot of options and probably more than you need. The CSS files are much larger compared to the free version. The instructions are the same as for the free version except you can maximize performance if you are not using Duotone icons.

If you do not need Duotone, then load the fontawesome CSS file and any of the styles needed:

<!-- Load the fontawesome min and only the font styles you're using -->
<link href="./css/fontawesome.min.css" rel="stylesheet">
<link href="./css/brands.min.css" rel="stylesheet">
<link href="./css/regular.min.css" rel="stylesheet">
<!-- add any additional font style css files needed -->

The Duotone CSS specifically adds 80 KB of page-blocking rendering time, so it makes sense to not load it for the Pro version if you don't need it.

필요한 글꼴 파일 미리 로드

Regardless of whether you're using the Free or Pro version, now we need to optimize the display of the fonts on the page. In my on web performance for fonts, I recommended using display: swap on externally loaded fonts in order to load a fallback while the preferred font is loading. This unfortunately doesn't work for font icons as there is no built-in browser font to display while FontAwesome or any other font icon loads. So font icons will either display the icon or display nothing while they load.

What this means is that if you have font icons that need to display immediately on the web page, you should preload the font files so that they load immediately for the user, and there is minimal CLS (cumulative layout shift). You will need a preload attribute for every type of icon style used:

<!-- loading FontAwesome Brands and Regular using Pro version-->
<link rel="preload" href="./webfonts/fa-brands-400.woff2" as="font" crossorigin>
<link rel="preload" href="./webfonts/fa-regular-400.woff2" as="font" crossorigin>
<link href="./css/fontawesome.min.css" rel="stylesheet">
<link href="./css/brands.min.css" rel="stylesheet">
<link href="./css/regular.min.css" rel="stylesheet">

파일을 버리고 FontAwesome SVG 사용

What if you just need to load a few icons or don't mind adding new CSS rules for new icons? You can ditch the CSS and font files files entirely and only use the /svgs folder. This is what I did for my personal portfolio site where I only used icons in a social media bar and in a few other buttons. Fortunately FontAwesome provides all the svg files for their icons.

글꼴을 이미지로 삽입

SVG 파일을 이미지 소스로 사용하여 아이콘을 이미지로 직접 로드할 수 있습니다.

<img src="./svgs/brands/dev.svg" alt="" />

호버 상태가 필요하지 않고 아이콘이 표시 목적으로만 사용되지만 색상을 제어할 수 없는 경우에는 괜찮습니다.

SVG 코드 직접 삽입

이 방법을 사용하면 스타일 지정을 더 잘 제어할 수 있으며 호버 상태를 설정할 수 있습니다. 코드 편집기에서 직접 SVG 파일을 연 다음 코드를 사이트에 붙여넣어야 합니다. 다음은 링크의 일부로 개발자 아이콘을 사용하는 예입니다.

<a href="#" class="icon__dev" aria-label="Visit My Dev.to">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58l-38.46 144.8z"/></svg>
</a>

이제 SVG 코드를 사용하고 있으므로 다음과 같이 아이콘의 크기와 색상에 스타일을 지정할 수 있습니다.

.icon__dev svg {
  height: 1rem;
  fill: blue;
}

이 경우 코드를 HTML에 직접 붙여넣기 때문에 SVG 파일이 전혀 필요하지 않지만 나중에 아이콘을 더 추가해야 하는 경우 참조용으로 SVG를 어딘가에 보관하십시오.

결론

글꼴 아이콘은 사이트에 많은 수의 아이콘을 로드할 수 있는 편리한 방법이지만 편리함은 부풀려집니다. 필요한 것만 로드하면 사이트에서 소중한 첫 번째 페인트 차단 시간을 최소화하는 데 도움이 됩니다.

Reference

이 문제에 관하여(웹 성능을 위한 초보자 가이드: 최적화 글꼴 굉장 아이콘), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dianale_dev/beginners-guide-to-web-performance-optimizing-fontawesome-icons-1h7

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)