วิธีแก้ไข “ตรวจสอบให้แน่ใจว่าข้อความยังคงปรากฏในระหว่างการโหลด webfont” Error ใน PageSpeed

คุณได้รับข้อผิดพลาด "ตรวจดู ให้แน่ใจว่าข้อความยังคงมองเห็นได้ในระหว่างการโหลด Webfont " ขณะตรวจสอบข้อมูลเชิงลึกเกี่ยวกับความเร็วหน้าเว็บของ Google และไม่ทราบวิธีแก้ปัญหานี้หรือไม่ โดยทั่วไปแล้ว ฉันรู้วิธีแก้ปัญหานี้บนเว็บไซต์ที่ใช้ PHP หรือ HTML แบบกำหนดเอง แต่เมื่อพูดถึง WordPress ฉันก็ประสบปัญหาเช่นกัน

ดังนั้นในคู่มือนี้ เราจะพูดถึงวิธีที่เราสามารถแก้ปัญหานี้ใน WordPress (ฉันจะแบ่งปันขั้นตอนในการแก้ไขปัญหานี้ในไซต์ที่ใช้ PHP และ HTML แบบกำหนดเอง) และเพิ่มคะแนนความเร็วหน้าเว็บของคุณโดยลบข้อผิดพลาดนี้

เหตุใดจึงแสดงข้อผิดพลาด “ตรวจสอบให้แน่ใจว่าข้อความยังคงปรากฏในระหว่างการโหลด Webfont” ใน PageSpeed

เมื่อทดสอบเว็บไซต์ของคุณบน PageSpeed ​​Insight ของ Google คุณอาจพบปัญหาข้อผิดพลาด “ตรวจสอบให้แน่ใจว่าข้อความยังคงปรากฏในระหว่างการโหลด Webfont” และเมื่อคลิกที่ข้อผิดพลาด ระบบจะแสดง URL ที่สมบูรณ์ของไฟล์แบบอักษร

ดังที่คุณเห็นในภาพด้านบน ฉันยังได้รับข้อผิดพลาด “ตรวจสอบให้แน่ใจว่าข้อความยังคงปรากฏในระหว่างการโหลด Webfont” บนเว็บไซต์นี้ และเมื่อฉันคลิกที่มัน มันจะแสดง URL ที่สมบูรณ์ของไฟล์ Google Font

เหตุใดจึงแสดงข้อผิดพลาด

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

วิธีแก้ไข Flash ของข้อความที่มองไม่เห็น

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

คุณสามารถแก้ไขปัญหานี้ได้โดยการเพิ่ม

 แสดงแบบอักษร: สลับ;

รหัสปัจจุบันของคุณ

 @ แบบอักษรหน้า {

}

คุณสมบัติ CSS

แต่ @font-face คืออะไร?

@font-face เป็นกฎ CSS ง่ายๆ ซึ่งคุณสามารถใช้แบบอักษรที่กำหนดเองกับข้อความได้ มีนามสกุลต่างๆ เช่น woff2, woff, ttf เป็นต้น ตัวอย่างเช่น @font-face code จะมีลักษณะดังนี้:

 @ แบบอักษรหน้า {

ตระกูลแบบอักษร: Roboto,sans-serif;

แสดงแบบอักษร: สลับ; // ---> มันจะแก้ไขปัญหานี้

ตัวอักษรสไตล์: ปกติ;

ตัวอักษร-น้ำหนัก: 400;

src: url(Roboto.woff2);

}

ตอนนี้เราใช้แบบอักษรนี้ในย่อหน้าโดยใช้

 พี {

ตระกูลแบบอักษร: Roboto, sans-serif;

ขนาดตัวอักษร: 18px;

}

เมื่อเว็บไซต์โหลดขึ้น แสดงว่าแท็กย่อหน้ามีการใช้แบบอักษร " Roboto " และเริ่มดาวน์โหลดแบบอักษรที่ใช้ในแท็กย่อหน้าทันที จนกว่าจะดาวน์โหลดแบบอักษร ข้อความจะยังมองไม่เห็น

นี่คือเหตุผลที่แสดงข้อผิดพลาด " ให้แน่ใจว่าข้อความยังคงมองเห็นได้ในระหว่างการโหลด webfont " ใน pagespeed และเพิ่ม font-display: swap; ใน CSS @font-face ปัจจุบันของคุณสามารถแก้ปัญหานี้ได้

วิธีแก้ไขปัญหานี้ใน WordPress

หากคุณกำลังใช้ WordPress และแสดงข้อผิดพลาดนี้ในข้อมูลเชิงลึกเกี่ยวกับความเร็วของหน้า คุณสามารถแก้ไขปัญหานี้ได้อย่างง่ายดายโดยใช้ขั้นตอนง่ายๆ ฉันได้แชร์ขั้นตอนในการแก้ไขข้อผิดพลาดนี้ทั้งแบบอักษรภายในเครื่องและแบบอักษรของ Google

โซลูชันสำหรับ Google Fonts

ในขั้นต้น Google Fonts จะไม่เพิ่มการ แสดงแบบอักษร: swap; กฎกับแบบอักษร แต่ตอนนี้สนับสนุนพารามิเตอร์การค้นหาใหม่เพื่อใช้ font-display: swap; โดยเพิ่มพารามิเตอร์ &display=swap ที่ส่วนท้ายของไฟล์ฟอนต์ Google

นี่คือลักษณะที่ปรากฏ;

หากคุณเป็นผู้พัฒนาธีมหรือรู้วิธีแก้ไขไฟล์ธีมใน WordPress คุณสามารถเพิ่มพารามิเตอร์ &display=swap ในไฟล์ฟอนต์ Google ของคุณได้อย่างง่ายดาย

แต่ถ้าคุณไม่สะดวกที่จะแก้ไขไฟล์ธีมของ WordPress คุณยังคงสามารถใช้ปลั๊กอินต่างๆ เช่น การ ล้างข้อมูลสินทรัพย์ เพื่อเพิ่มพารามิเตอร์นี้และแก้ไขปัญหา "ตรวจสอบให้แน่ใจว่าข้อความยังคงปรากฏอยู่ในระหว่างการโหลด Webfont"

วิธีแก้ไขปัญหานี้โดยใช้ปลั๊กอิน “การล้างข้อมูลสินทรัพย์”

ในการใช้พารามิเตอร์ display=swap ในไฟล์ Google Fonts คุณต้องดาวน์โหลดและติดตั้งปลั๊กอิน Asset CleanUp จากไลบรารี WordPress ซึ่งให้บริการฟรี

เมื่อคุณดาวน์โหลดและเปิดใช้งานปลั๊กอินแล้ว ให้คลิกที่ตัวเลือก "การ ล้างข้อมูลสินทรัพย์ " ในแผงการดูแลระบบ WordPress ของคุณ > จากนั้นคลิก " การตั้งค่า " ใต้ "การล้างข้อมูลสินทรัพย์" เพื่อเปิดหน้าการเพิ่มประสิทธิภาพ

เมื่อคุณอยู่ในหน้า การตั้งค่า ให้คลิกที่ตัวเลือก “ Google Fonts ” เมื่อคุณคลิกที่ตัวเลือก Google Fonts ระบบจะเปิดการตั้งค่าเพิ่มเติมจากที่ซึ่งคุณสามารถจัดการการตั้งค่าต่างๆ เพื่อเพิ่มประสิทธิภาพไฟล์แบบอักษรของ Google ได้อย่างง่ายดาย

การตั้งค่าเหล่านี้บางส่วนอาจรวมถึง

เมื่อคุณใช้การตั้งค่าไฟล์ฟอนต์ของ Google ในการตั้งค่า “ Apply font-display: CSS property value ” และเปลี่ยนจาก “ Do not apply (default) ” เป็น “ swap (most used) ” และจะเพิ่ม &display= สลับพารามิเตอร์เป็นไฟล์ฟอนต์ Google ทั้งหมดของคุณ

โซลูชันสำหรับฟอนต์ธีมและปลั๊กอิน

ส่วนใหญ่แล้ว ธีม WordPress หรือปลั๊กอินของคุณจะโหลดฟอนต์อื่นๆ เช่น ฟอนต์เจ๋งๆ หรือฟอนต์ไอคอน และยังแสดงปัญหาเดียวกันใน Google PageSpeed ​​Insight

นอกจากนี้ยังเป็นการแก้ไขที่ง่าย แต่ต้องใช้ความรู้ในการแก้ไข WordPress เล็กน้อย หากคุณไม่สะดวกใจในการแก้ไขโค้ด คุณยังสามารถใช้ปลั๊กอิน " Asset CleanUp Pro " เวอร์ชันพรีเมียมเพื่อเพิ่มการ แสดงแบบอักษรโดยอัตโนมัติ: swap; คุณสมบัติ CSS ในสไตล์ชีตของธีมหรือปลั๊กอินของ WordPress

ในการแก้ปัญหานี้โดยใช้ Asset CleanUp Pro ให้คลิกที่ตัวเลือก " Asset CleanUp " ในแผงการดูแลระบบ WordPress ของคุณ > จากนั้นคลิก " การตั้งค่า " ใต้ "Asset Cleanup" เพื่อเปิดหน้าการเพิ่มประสิทธิภาพ

เมื่อคุณอยู่ในหน้า "การ ล้างข้อมูลสินทรัพย์ " > " การตั้งค่า " ให้คลิกที่ตัวเลือก " แบบอักษรใน เครื่อง" เพื่อเปิดการตั้งค่าการปรับแต่งสำหรับแบบอักษรภายในเครื่อง

เมื่อเปิดการตั้งค่าการปรับแต่ง " แบบอักษรท้องถิ่น " ในเบราว์เซอร์ของคุณแล้ว ให้เลือก " สลับ (ใช้มากที่สุด) " จากตัวเลือกการเลือกที่กำหนดภายใต้ " ใช้การแสดงแบบอักษร: ค่าคุณสมบัติ CSS " เพื่อเพิ่มการแสดงแบบอักษร: สลับ; ในสไตล์ชีตทั้งหมดของคุณ

ห่อ

ในคู่มือนี้ เราได้พยายามอย่างดีที่สุดเพื่ออธิบายวิธีแก้ไขปัญหา "ตรวจสอบให้แน่ใจว่าข้อความยังคงมองเห็นได้ในระหว่างการโหลดเว็บฟอนต์" หรือ "แฟลชของข้อความที่มองไม่เห็น" ในข้อมูลเชิงลึกของ PageSpeed

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

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