Как сократить время загрузки FontAwesome и повысить скорость сайта

В этой статье я покажу вам, как можно сократить время загрузки FontAwesome, откладывая загрузку таблиц стилей.

Font Awesome — это популярная библиотека значков, которая предоставляет широкий спектр масштабируемых векторных значков, которые можно легко настроить и использовать в проектах веб-разработки. Когда веб-сайт использует таблицы стилей шрифта awesome для значков, это обычно значительно снижает скорость, поскольку браузеру необходимо загрузить шрифт со стороннего сервера. В этом процессе он блокирует загрузку критических ресурсов в первую очередь и снижает оценку скорости страницы.

Возможно, вы видели такие ошибки, как «Уменьшить количество неиспользуемых CSS» , «Уменьшить ресурсы, блокирующие рендеринг », или «Избегайте объединения критических запросов в цепочки из-за кода шрифта awesome».

Таким образом, решение состоит в том, чтобы либо заменить значки с потрясающим шрифтом на значки SVG, либо отложить их загрузку. Не всегда возможно полностью поменять местами значки с значками SVG, но мы можем легко отсрочить загрузку таблицы стилей шрифта awesome и увеличить скорость загрузки веб-сайта.

Как задержать значки с потрясающим шрифтом в Blogger?

Чтобы отложить шрифт Awesome Icons, вам нужно сначала определить версию, используемую на вашем сайте.

Вы можете просто найти ( CTRL + F ) для font-awesome в коде темы и удалить его из своей темы.

Теперь используйте приведенный ниже скрипт и замените его исходным кодом 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>

Теперь используйте один из этих скриптов прямо над закрывающим тегом body и сохраните код. Теперь значки с потрясающим шрифтом загружаются лениво или, можно сказать, с задержкой на 3 секунды. Вы можете настроить это значение в скрипте выше.

Загружать библиотеку Font Awesome асинхронно с помощью 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>

В этом примере CSS-файл Font Awesome загружается асинхронно с помощью JavaScript. Настройте URL-адрес внутри атрибута link.href , чтобы он указывал на CSS-файл Font Awesome, который вы хотите использовать.

Благодаря такому подходу критически важный контент вашей веб-страницы будет загружаться первым, не дожидаясь значков 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, заменяем заполнитель фактическим элементом значка и прекращаем наблюдать за этим элементом.

Настройте URL-адрес внутри атрибута link.href , чтобы он указывал на CSS-файл Font Awesome, который вы хотите использовать. Кроме того, измените атрибут data-icon каждого элемента-заполнителя, чтобы указать нужный класс значков Font Awesome.

С помощью API « Intersection Observer » значки Font Awesome будут загружаться только тогда, когда они вот-вот станут видимыми, что сокращает время первоначальной загрузки страницы и повышает скорость веб-сайта.

Я надеюсь, что эта статья поможет вам сократить время загрузки FontAwesome и повысить скорость загрузки сайта. Таким образом, вы можете сделать свой веб-сайт удобным для основных веб-сайтов.