วิธีลดเวลาในการโหลด FontAwesome และเพิ่มความเร็วเว็บไซต์

ในบทความนี้ ฉันจะแสดงวิธีลดเวลาในการโหลด FontAwesome โดยการชะลอการโหลดสไตล์ชีต

Font Awesome เป็นไลบรารีไอคอนยอดนิยมที่มีไอคอนเวกเตอร์ที่ปรับขนาดได้หลากหลาย ซึ่งสามารถปรับแต่งและใช้ในโครงการพัฒนาเว็บได้อย่างง่ายดาย เมื่อเว็บไซต์ใช้ฟอนต์สไตล์ชีตที่ยอดเยี่ยมสำหรับไอคอน โดยทั่วไปความเร็วจะช้าลงอย่างมากเนื่องจากเบราว์เซอร์จำเป็นต้องดาวน์โหลดฟอนต์จากเซิร์ฟเวอร์ของบริษัทอื่น ในกระบวนการดังกล่าว จะบล็อกเนื้อหาที่สำคัญไม่ให้โหลดก่อน และลดคะแนนข้อมูลเชิงลึกเกี่ยวกับความเร็วของหน้าเว็บ

คุณอาจเห็นข้อผิดพลาด เช่น ลด CSS ที่ไม่ได้ใช้ , ลดทรัพยากรการบล็อก Render หรือ หลีกเลี่ยงการผูกมัดคำขอที่สำคัญ เนื่องจากโค้ดแบบอักษรที่ยอดเยี่ยม

ดังนั้น วิธีแก้ไขคือคุณเปลี่ยนไอคอนฟอนต์สุดเจ๋งเป็นไอคอน SVG หรือชะลอการโหลด ไม่สามารถสลับไอคอนกับไอคอน SVG ได้อย่างสมบูรณ์เสมอไป แต่เราสามารถชะลอการโหลดฟอนต์ Awesome Stylesheet และเพิ่มความเร็วในการโหลดเว็บไซต์ได้อย่างง่ายดาย

จะเลื่อนไอคอนแบบอักษรที่ยอดเยี่ยมใน Blogger ได้อย่างไร

หากต้องการเลื่อนไอคอนแบบอักษรที่ยอดเยี่ยม คุณต้องระบุเวอร์ชันที่ใช้บนเว็บไซต์ของคุณก่อน

คุณสามารถค้นหา ( CTRL + F ) เพื่อหาแบบอักษรที่ยอดเยี่ยมในโค้ดธีมและลบออกจากธีมของคุณ

ตอนนี้ใช้สคริปต์ด้านล่างและแทนที่ด้วยซอร์สโค้ดของฟอนต์ที่ยอดเยี่ยมด้วยเวอร์ชันที่ถูกต้อง

 <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>

ตอนนี้ ใช้หนึ่งในสคริปต์เหล่านี้เหนือแท็กปิดเนื้อหาและบันทึกรหัส ตอนนี้ไอคอนฟอนต์เจ๋งๆ กำลังโหลดแบบ lazyloaded หรือคุณสามารถพูดได้ว่าล่าช้าไป 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>

ในตัวอย่างนี้ ไฟล์ Font Awesome CSS ถูกโหลดแบบอะซิงโครนัสโดยใช้ JavaScript ปรับ URL ภายในแอตทริบิวต์ link.href ให้ชี้ไปที่ไฟล์ Font Awesome CSS ที่คุณต้องการใช้

เมื่อใช้แนวทางนี้ เนื้อหาที่สำคัญของหน้าเว็บของคุณจะโหลดก่อน โดยไม่ต้องรอไอคอน 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 CSS แบบไดนามิก แทนที่ตัวยึดตำแหน่งด้วยองค์ประกอบไอคอนจริง และหยุดสังเกตองค์ประกอบนั้น

ปรับ URL ภายในแอตทริบิวต์ link.href ให้ชี้ไปที่ไฟล์ Font Awesome CSS ที่คุณต้องการใช้ นอกจากนี้ ให้แก้ไขแอตทริบิวต์ data-icon ของแต่ละองค์ประกอบตัวยึดเพื่อระบุคลาสไอคอน Font Awesome ที่ต้องการ

เมื่อใช้ API ' Intersection Observer ' ไอคอน Font Awesome จะถูกโหลดเฉพาะเมื่อกำลังจะมองเห็นเท่านั้น ลดเวลาในการโหลดเริ่มต้นของหน้าและปรับปรุงความเร็วเว็บไซต์

ฉันหวังว่าบทความนี้จะช่วยให้คุณลดเวลาในการโหลด FontAwesome และเพิ่มความเร็วในการโหลดเว็บไซต์ ด้วยวิธีนี้ คุณสามารถทำให้เว็บไซต์หลักของเว็บไซต์ของคุณเป็นมิตร