웹 사이트 성능을 21% 향상시킨 방법은 다음과 같습니다!

P.S.: A lot of updates have been made on this post from the comments and feedback on this article

그래서 며칠 동안 저는 이 웹사이트의 성능을 어떻게 높일 수 있을지에 대해 열심히 고민하다가 여기에서 논의할 매우 간단하고 중요한 트릭을 발견했습니다.

폰어썸

SVG를 html 파일에 직접 추가하거나 호출하기 위해 이미지 태그를 사용하는 것이 정말 즐겁지 않았습니다. 최근에 페이지 성능 측정을 발견했을 때까지 이것에 대한 최선의 수단은 항상 멋진 cdn 글꼴이었습니다. 전체 FontAwesome CDN은 다중 페이지 웹 사이트에서 사용되는 몇 가지 아이콘에 대해 실제로 끔찍합니다.

FontAwesome을 로컬로 로드 중입니다.

저는 FontAwesome에 대한 몇 가지 기사를 읽고 로컬에서 로드하다가 저자가 실제로 찬사를 보낼 만한 특정 솔루션을 발견했습니다. 🎉 Balasubramani M .

FontAwesome을 로컬에서 올바르게 로드하는 방법

솔루션을 읽은 후 구현에 착수했습니다. 여러분도 할 수 있는 몇 가지 단점이 있습니다.

FontAwesome 패키지 v5.1을 다운로드합니다. 또는 더 높게
총 FontAwesome 패키지 v5.1은 약 12mb입니다(걱정하지 마십시오. 모두 사용하지 않습니다!)

파일의 압축을 풀거나 압축을 풉니다.
다운로드가 완료되면 zip 파일을 추출하는 도구를 사용하여 파일의 압축을 풀거나 추출해야 합니다(다운로드한 파일을 마우스 오른쪽 버튼으로 클릭하면 창 기본 추출 옵션 사용 가능).

이제 추출된 폴더를 엽니다.
추출이 완료되면 모든 FontAwesome v5.1 파일과 종속성이 포함된 새 폴더가 생성된 것을 볼 수 있습니다.

all.min.css를 CSS 폴더에 복사합니다.
파일을 포함하는 모든 하위 폴더를 보려면 폴더를 두 번 클릭합니다. CSS 폴더를 두 번 클릭하면 all.min.css라는 파일이 표시됩니다. 이 파일을 복사하고 프로젝트 디렉토리로 이동하여 기존 CSS 파일이 있는 위치로 이동하여 붙여넣습니다.

Webfonts 폴더를 프로젝트 디렉토리에 복사합니다.
FontAwesome v5.1 추출 폴더로 다시 이동하여 두 번 클릭하여 폴더를 보고 web fonts라는 폴더를 복사합니다. 프로젝트 디렉토리로 이동하여 웹 글꼴 폴더를 직계 하위로 CSS 파일도 포함하는 디렉토리에 붙여넣으십시오. 아래 이미지의 샘플 작업 트리,
public
CSS를 포함하는 상위 디렉토리입니다.

6. 프로젝트 디렉토리에 복사한 all.min.css의 이름을 fontawesome.min.css로 변경합니다.
이는 이 스타일시트를 HTML 파일로 호출할 때 쉽게 식별하는 데 특히 유용합니다.
7. HTML/PHP 파일을 변경합니다.
이전 단계를 모두 성공적으로 수행한 후에는 로컬에서 font-awesome을 사용하도록 HTML 파일을 변경해야 합니다. FontAwesome CDN이 호출되는 모든 파일을 탐색하고 다음에서 변경합니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

프로젝트 디렉토리의 fontawesome.min.css를 붙여넣은 위치로. 코드 샘플:

<!-- FONTAWESOME -->
  <link rel="stylesheet" href="./public/css/fontawesome.min.css"/>

그게 다야!

나는 이것을 성공적으로 구현하는 것에 대한 귀하의 의견을 읽는 것을 좋아합니다.

🎉 참여해주셔서 감사합니다!

자원

솔루션에 대한 참조 게시물: https://stackoverflow.com/a/52296664

FontAwesome v5.1 다운로드: https://use.fontawesome.com/releases/v5.3.1/fontawesome-free-5.3.1-web.zip