FontAwesome 로드 시간을 줄이고 웹사이트 속도를 높이는 방법

이 기사에서는 스타일시트 로딩을 지연시켜 FontAwesome 로딩 시간을 줄이는 방법을 보여드리겠습니다.

Font Awesome은 웹 개발 프로젝트에서 쉽게 사용자 지정하고 사용할 수 있는 다양한 확장 가능한 벡터 아이콘을 제공하는 인기 있는 아이콘 라이브러리입니다. 웹사이트에서 아이콘에 멋진 글꼴 스타일시트를 사용하는 경우 브라우저가 타사 서버에서 글꼴을 다운로드해야 하므로 일반적으로 속도가 크게 느려집니다. 이 프로세스에서 중요한 자산이 먼저 로드되는 것을 차단하고 페이지 속도 통찰력 점수를 줄입니다.

사용하지 않는 CSS 줄이기 , 렌더링 차단 리소스 줄이기 또는 멋진 글꼴 코드로 인한 중요한 요청 연결 방지와 같은 오류를 본 적이 있을 것입니다.

따라서 해결책은 멋진 글꼴 아이콘을 SVG 아이콘으로 전환하거나 로딩을 지연시키는 것입니다. 아이콘을 SVG 아이콘으로 완전히 교체하는 것이 항상 가능한 것은 아니지만 Font Awesome 스타일시트의 로딩을 쉽게 지연시키고 웹사이트 로딩 속도를 높일 수 있습니다.

Blogger에서 멋진 글꼴 아이콘을 지연시키는 방법은 무엇입니까?

멋진 글꼴 아이콘을 지연하려면 먼저 웹사이트에서 사용되는 버전을 식별해야 합니다.

테마 코드에서 font-awesome을 검색( CTRL + F )하여 테마에서 제거할 수 있습니다.

이제 아래 스크립트를 사용하고 올바른 버전의 font-awesome 소스 코드로 교체하십시오.

 <script> setTimeout(function() { // Add the Font Awesome stylesheet dynamically var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'; document.head.appendChild(link); }, 3000); // Delay of 3 seconds </script>

멋진 글꼴 코드가 여러 개 있는 경우 가져오기 및 스타일시트를 모두 사용하면 소스 링크와 함께 아래 스크립트를 사용해야 합니다.

 <script> setTimeout(function() { // Add the Font Awesome stylesheet dynamically var link1 = document.createElement('link'); link1.rel = 'stylesheet'; link1.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'; document.head.appendChild(link1); var link2 = document.createElement('link'); link2.rel = 'stylesheet'; link2.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css'; document.head.appendChild(link2); }, 3000); // Delay of 3000 milliseconds (3 seconds) </script>

이제 닫는 본문 태그 바로 위에 이 스크립트 중 하나를 사용하고 코드를 저장합니다. 이제 멋진 글꼴 아이콘이 지연 로드되거나 3초 지연되었다고 말할 수 있습니다. 위의 스크립트에서 이 값을 조정할 수 있습니다.

JavaScript를 사용하여 비동기식으로 Font Awesome 라이브러리 로드

멋진 글꼴 아이콘을 지연시키고 싶지 않다면 JavaScript를 사용하여 비동기적으로 글꼴 멋진 라이브러리를 로드할 수 있습니다. 이렇게 하면 페이지의 중요한 콘텐츠가 로드된 후 아이콘을 가져와 렌더링합니다. 이것은 지연 방법만큼 효과적이지는 않지만 기본 방법보다 확실히 향상됩니다.

 <!-- Place this script tag in the head section of your HTML --> <script> // Asynchronous loading of Font Awesome (function() { var link = document.createElement('link'); link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'; // Replace with your Font Awesome CSS URL link.rel = 'stylesheet'; link.type = 'text/css'; var script = document.getElementsByTagName('script')[0]; script.parentNode.insertBefore(link, script); })(); </script>

이 예에서 Font Awesome CSS 파일은 JavaScript를 사용하여 비동기식으로 로드됩니다. 사용하려는 Font Awesome CSS 파일을 가리키도록 link.href 속성 내부의 URL을 조정합니다.

이 접근 방식을 구현하면 웹페이지의 중요한 콘텐츠가 Font Awesome 아이콘을 기다리지 않고 먼저 로드됩니다. 그러면 아이콘이 비동기식으로 로드되어 초기 로드 시간이 단축되고 전체 웹 사이트 속도가 향상됩니다.

고급 방법

틀림없이! Font Awesome 아이콘의 로딩을 지연시키는 또 다른 방법은 Intersection Observer API를 사용하는 것입니다. 이 접근 방식을 사용하면 아이콘이 뷰포트에 표시될 때만 아이콘을 로드하여 초기 페이지 로드 시간을 줄일 수 있습니다. 구현 방법은 다음과 같습니다.

이전 방법에서 언급한 대로 기본 Font Awesome 스타일시트를 제거합니다.

각 Font Awesome 아이콘에 대한 자리 표시자 요소를 추가합니다. 간단한 <span> 또는 <div> 요소일 수 있습니다.

Intersection Observer API를 사용하여 자리 표시자 요소가 뷰포트에 표시되는 시기를 감지합니다. 요소가 표시되면 Font Awesome CSS를 로드하고 자리 표시자를 실제 아이콘으로 바꿉니다.

다음은 JavaScript를 사용한 구현 예입니다.

 <!-- Place this script tag in the head section of your HTML --> <script> // Intersection Observer callback function function loadFontAwesome(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { // Load Font Awesome CSS var link = document.createElement('link'); link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'; // Replace with your Font Awesome CSS URL link.rel = 'stylesheet'; link.type = 'text/css'; document.head.appendChild(link); // Replace placeholder with Font Awesome icon var placeholder = entry.target; var iconClass = placeholder.getAttribute('data-icon'); var iconElement = document.createElement('i'); iconElement.className = iconClass; placeholder.parentNode.replaceChild(iconElement, placeholder); // Stop observing this element observer.unobserve(entry.target); } }); } // Set up Intersection Observer var options = { root: null, rootMargin: '0px', threshold: 0.1 }; var observer = new IntersectionObserver(loadFontAwesome, options); // Start observing the placeholder elements var placeholders = document.querySelectorAll('.font-awesome-placeholder'); placeholders.forEach(function(placeholder) { observer.observe(placeholder); }); </script> <!-- Place the placeholder elements wherever needed --> <p>Some content...</p> <span class="font-awesome-placeholder" data-icon="fas fa-heart"></span> <p>Some more content...</p>

이 예에서는 Intersection Observer API를 사용하여 font-awesome-placeholder 클래스가 있는 자리 표시자 요소가 뷰포트에 표시되는 시기를 감지합니다. 요소가 표시되면 Font Awesome CSS를 동적으로 로드하고 자리 표시자를 실제 아이콘 요소로 바꾸고 해당 요소 관찰을 중지합니다.

사용하려는 Font Awesome CSS 파일을 가리키도록 link.href 속성 내부의 URL을 조정합니다. 또한 각 자리 표시자 요소의 data-icon 속성을 수정하여 원하는 Font Awesome 아이콘 클래스를 지정하십시오.

' Intersection Observer ' API를 사용하면 Font Awesome 아이콘이 표시되기 직전에만 로드되어 페이지의 초기 로드 시간이 단축되고 웹 사이트 속도가 향상됩니다.

이 기사가 FontAwesome 로드 시간을 줄이고 웹 사이트 로딩 속도를 높이는 데 도움이 되기를 바랍니다. 이러한 방식으로 웹 사이트 핵심 웹 바이탈을 친숙하게 만들 수 있습니다.