วิธีใช้ Rel= โหลดแท็กลิงก์ล่วงหน้าเพื่อปรับปรุงประสิทธิภาพของไซต์ WordPress

หากคุณต้องการปรับปรุงประสิทธิภาพของไซต์ WordPress วิธีหนึ่งที่คุณสามารถทำได้คือการใช้แท็กลิงก์ rel=”preload” แท็กนี้ช่วยให้คุณบอกเบราว์เซอร์ให้เริ่มโหลดเนื้อหาบางอย่างก่อนที่จำเป็นจริงๆ ตัวอย่างเช่น คุณสามารถใช้เพื่อโหลดโลโก้เว็บไซต์ของคุณล่วงหน้าก่อนที่จะโหลดเนื้อหาหลักของหน้า
การเพิ่มแท็ก rel=”preload” ลงในไซต์ WordPress ของคุณนั้นค่อนข้างง่าย คุณเพียงแค่ต้องเพิ่มโค้ดเล็กน้อยลงในส่วนหัวของไซต์ของคุณ ในบทความนี้เราจะแสดงวิธีการดำเนินการดังกล่าว

ฉันจะโหลดคำขอคีย์ล่วงหน้าใน WordPress ได้อย่างไร

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

PageSpeed ​​อาจแนะนำให้โหลดโอกาสที่คุณควรใช้ประโยชน์ มีไฟล์ที่จะแสดงหน้าเว็บของคุณซึ่งเรียกว่าลึก 3 ระดับภายในโค้ดของคุณซึ่งโหลดก่อนที่จะแสดง กล่าวอีกนัยหนึ่ง ไฟล์สิ้นสุดถูกร้องขอโดยไฟล์อื่น และไม่ได้อยู่ภายใน HTML ของไซต์ WordPress โดยตรง เมื่อใช้ PageSpeed ​​คุณสามารถระบุปัญหาใดๆ เกี่ยวกับประสิทธิภาพของไซต์ของคุณได้ เมื่อคุณโหลดแบบอักษรหรือไฟล์ อาจใช้เวลาสักครู่จึงจะปรากฏ เมื่อเราโหลดฟอนต์ล่วงหน้าก่อนที่พวกเขาจะคิดออก เรากำลังบอกว่าพวกเขาต้องการฟอนต์ เมื่อโหลดไฟล์ คุณต้องเพิ่มลงในเพลย์ลิสต์ด้วยรูปแบบเฉพาะ เช่น link rel=preload

เมื่อมีการร้องขอไฟล์ใดไฟล์หนึ่ง เบราว์เซอร์จะตรวจพบแท็กลิงก์พิเศษและเริ่มดาวน์โหลด เมื่อคุณจัดลำดับความสำคัญของไฟล์มากเกินไป อาจส่งผลให้เกิดคอขวดที่ทำให้ไฟล์สำคัญอื่นๆ ล่าช้า ในกรณีนี้ WP Rocket จะโหลดแบบอักษร Google ไว้ล่วงหน้าแล้ว คุณจึงไม่ต้องทำอะไรเป็นพิเศษ คุณจะสามารถโหลดฟอนต์ล่วงหน้าด้วยฟีเจอร์นั้นได้ หากคุณใช้ฟีเจอร์ Remove Unused CSS คุณยังสามารถโฮสต์ไฟล์เหล่านี้ในเครื่องได้หากต้องการ ด้วยเหตุนี้ แทนที่จะให้ Google โฮสต์เว็บไซต์ของคุณ โฮสต์ของคุณจะถูกโฮสต์บนเซิร์ฟเวอร์ที่จัดการโดย Google

ปลั๊กอิน WordPress สามารถโหลดแบบอักษรได้ด้วยตนเองโดยแก้ไขไฟล์ส่วนหัวหรือผ่านปลั๊กอิน WordPress WP Rocket เนื่องจาก Google PageSpeed ​​Insights ไม่ได้ขอแบบอักษรผ่าน WP Rocket ขอแนะนำให้โหลดด้วย WP Rocket

วิธีโหลดลิงก์ล่วงหน้าใน WordPress

ไปที่การตั้งค่าบล็อกของคุณ คลิก 'ลิงก์' และใต้หัวข้อ 'ลิงก์' ให้วางลิงก์ลงใน 'โหลดช่องข้อความล่วงหน้า'

Preload In Link Rel คืออะไร?

โหลดล่วงหน้าในลิงค์ rel เป็นมาตรฐานใหม่ที่นำมาใช้ใน HTML5 ซึ่งช่วยให้นักพัฒนาเว็บแจ้งเบราว์เซอร์เกี่ยวกับไฟล์ที่จำเป็นต้องใช้ในระหว่างการโหลดหน้าเว็บ ด้วยวิธีนี้ เบราว์เซอร์สามารถเริ่มโหลดไฟล์เหล่านี้ได้ทันที แทนที่จะรอให้แยกวิเคราะห์ HTML ซึ่งสามารถปรับปรุงเวลาในการโหลดเพจ โดยเฉพาะอย่างยิ่งสำหรับเพจที่ต้องใช้ไฟล์ภายนอกจำนวนมาก

Link rel=”preload” ใช้เพื่อระบุว่าลิงก์ใดมีแอตทริบิวต์นี้ในการจัดลำดับความสำคัญ พรีโหลดเป็นสิ่งที่เบราว์เซอร์ต้องทำเพื่อใช้พรีโหลด ซึ่งเป็นสิ่งที่สามารถตัดสินใจได้ว่าจะต้องทำหรือไม่ นี่คือคำอธิบายโดยละเอียดของ คีย์เวิร์ดโหลดล่วงหน้า ในข้อมูลจำเพาะของ W3C

มีเหตุผลมากมายที่คุณอาจใช้การดึงข้อมูลล่วงหน้า การเลือกดึงทรัพยากรที่ใช้บ่อยในหน้าล่วงหน้าล่วงหน้าจะลดโอกาสที่ทรัพยากรจะไม่โหลดจากเครือข่าย คุณยังอาจต้องการดึงทรัพยากรล่วงหน้าซึ่งจำเป็นในช่วงเวลาสั้นๆ เท่านั้น เพื่อบรรเทาอาการหน่วยความจำบวม การดึงข้อมูลล่วงหน้าสามารถทำได้สองวิธี: การดึงทรัพยากรล่วงหน้าและการดึงข้อมูลแคชล่วงหน้า ทรัพยากรการดึงข้อมูลล่วงหน้าของเอกสารหมายถึงทรัพยากรที่เอกสารใช้ในการประมวลผลเอกสารล่วงหน้า นอกจากนี้ยังมีสคริปต์และโมดูลที่สามารถใช้สร้างไฟล์รูปภาพและสไตล์ชีต ตลอดจนไฟล์และอ็อบเจ็กต์ประเภทอื่นๆ ในทางกลับกัน การดึงข้อมูลล่วงหน้าหมายถึงการดึงทรัพยากรล่วงหน้าที่เบราว์เซอร์ใช้ในแคช ประกอบด้วยทรัพยากรเช่น HTML5 และการเรียก AJAX ที่ยังคงแคชไว้ อัลกอริทึมการดึงข้อมูลล่วงหน้าสามารถใช้ได้หลายวิธี อัลกอริธึมที่ใช้น้อยที่สุด (LRU) เป็นหนึ่งในวิธีการทั่วไปในการเลือกทรัพยากรที่ใช้น้อยที่สุด อัลกอริธึม Random Early Release (RER) เป็นอีกหนึ่งอัลกอริธึมการดึงข้อมูลล่วงหน้าทั่วไปที่เลือกทรัพยากรตามชื่อไฟล์ ผลที่ตามมาอย่างหนึ่งของการดึงข้อมูลล่วงหน้าคือประสบการณ์ของผู้ใช้ที่ลดลง โดยทั่วไป การดึงทรัพยากรล่วงหน้าที่อาจจำเป็นจะลดระยะเวลาที่เบราว์เซอร์ต้องใช้ในการรอให้พร้อมใช้งาน ส่งผลให้ผู้ใช้มีเวลารอโหลดหน้าน้อยลงโดยใช้วิธีนี้ เมื่อ หน้าโหลด ผู้เขียนสามารถระบุวิธีการโหลดสื่อโดยกำหนดแอตทริบิวต์พรีโหลด พรีโหลดเป็นวิธีการที่ผู้เขียนแจ้งให้เบราว์เซอร์ทราบถึงรูปลักษณ์และความรู้สึกของเว็บไซต์ การดึงข้อมูลล่วงหน้ามีประโยชน์ในหลากหลายวิธี แคชเป็นพรีเฟ็ค

การโหลดทรัพยากรล่วงหน้าเพื่อการโหลดเพจที่เร็วขึ้น

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

ฉันจะเพิ่มตัวโหลดลงในไซต์ WordPress ของฉันโดยไม่มีปลั๊กอินได้อย่างไร

การเพิ่มตัวโหลดลงในไซต์ WordPress ของคุณโดยไม่มีปลั๊กอินเป็นขั้นตอนง่ายๆ ขั้นแรก คุณจะต้องสร้างไฟล์ใหม่ชื่อ ” loader.php ” ในโฟลเดอร์ธีมของ WordPress ถัดไป คัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์ใหม่ของคุณ:
/**
* ตัวโหลด
*
* @แพ็คเกจ WordPress
* @subpackage Loader
* @author ชื่อของคุณที่นี่
*
* @internal รหัสนี้มีไว้สำหรับโหลดสคริปต์ลงในไซต์ WordPress ของคุณ
* โดยไม่ต้องใช้ปลั๊กอิน
*/
/**
* สคริปต์ Enqueue
*
* ลงทะเบียนและจัดคิวสคริปต์สำหรับส่วนหน้าของ WordPress
*/
ฟังก์ชั่น wp_enqueue_scripts () {

// ลงทะเบียนสคริปต์
wp_register_script( 'jquery-ui-core', '//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js', อาร์เรย์ ( 'jquery' ), '1.9.1' , จริง );

// สคริปต์ลำดับ
wp_enqueue_script( 'jquery-ui-core' );
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_scripts' );
? >
รหัสนี้จะลงทะเบียนและจัดคิวสคริปต์ jQuery UI Core บนไซต์ WordPress ของคุณ จากนั้นคุณสามารถใช้สคริปต์ jQuery UI Core ในเว็บไซต์ WordPress ของคุณโดยไม่ต้องใช้ปลั๊กอิน

คุณโหลดหน้าล่วงหน้าใน Html ได้อย่างไร?

คุณสามารถดาวน์โหลดและแคชทรัพยากร (เช่น สคริปต์หรือสไตล์ชีต) โดยเร็วที่สุดโดยใช้ *link rel=preload สิ่งนี้มีประโยชน์เมื่อคุณต้องการทรัพยากรนั้นภายในไม่กี่วินาทีหลังจากโหลดหน้า คุณต้องการเร่งความเร็วของหน้า หลังจากดาวน์โหลดทรัพยากร เบราว์เซอร์จะไม่ดำเนินการใดๆ กับมัน

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

การโหลดล่วงหน้าเป็นคุณสมบัติที่ยอดเยี่ยมในการเร่งความเร็วเว็บไซต์ของคุณ แต่ควรใช้ในบางโอกาสเท่านั้น เป็นการดีที่จะโหลดไฟล์ที่ต้องโหลดไว้ล่วงหน้าเพื่อโหลดครึ่งหน้าบน คุณจะสามารถเพิ่มความเร็วของเว็บไซต์ของคุณได้ใน Google PageSpeed ​​Insights นอกจากนี้ พรีโหลดสามารถใช้ร่วมกับการพุชเซิร์ฟเวอร์ HTTP/2 โหลดฟอนต์ล่วงหน้า, CSS, JS และทรัพยากรอื่นๆ ได้ เมื่อไฟล์ถูกค้นพบในขณะที่กำลังแสดงไฟล์อื่น ไฟล์นั้นอาจเร่งความเร็วในการโหลดเว็บไซต์ของคุณโดยรวม ไฟล์มาตรฐานบางประเภทสามารถเติมไว้ล่วงหน้าได้โดยใช้ไวยากรณ์ที่แสดงด้านล่าง ในกรณีนี้ การโหลดล่วงหน้าจะไม่แนะนำให้เว็บเบราว์เซอร์ใช้ไฟล์เฉพาะกับหน้าเว็บ

โหลด WordPress ล่วงหน้า

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

เว็บไซต์ของคุณจะเร็วขึ้นหากคุณติดตั้ง Preload, Prefetch และ Preconnect ใน WordPress หากผู้ใช้ของคุณต้องเข้าชมหลายหน้าบนอุปกรณ์หลายเครื่อง การโหลดล่วงหน้าเป็นความคิดที่ดี การเชื่อมต่อล่วงหน้าช่วยให้คุณสร้างการเชื่อมต่อขาออกไปยังโดเมนอื่นในเบื้องหลังได้ เป้าหมายคือเพื่อลดเวลาในการตอบสนองเพื่อโหลดทรัพยากรได้เร็วขึ้นจากโดเมนอื่น การเชื่อมต่อล่วงหน้าใช้ได้กับ Chrome, Edge, Firefox และ Safari ทุกรุ่น การดึงข้อมูล DNS ล่วงหน้าทำได้โดยใช้อาร์เรย์ linkurl คุณสามารถใช้เพื่อส่งคืน HTML หรือทรัพยากรแบบคงที่ไปยังระบบ

การแสดงผลล่วงหน้าทำให้คุณสามารถโหลดภาพเหล่านั้นในพื้นหลังขณะที่ยังใช้งานอยู่ ทำได้โดยใช้ปลั๊กอิน Pre Party Resource Hints หากคุณต้องการเนื้อหาที่มีน้ำหนักเบา ให้แสดงผล แต่ระวังอย่าแสดงผลเกินทั้งไซต์หรือทรัพยากรขนาดใหญ่ นอกจากนี้ยังควรพิจารณาแคชและส่งมอบเนื้อหาให้ผู้ใช้ทั่วโลกเร็วขึ้นด้วยการใช้ CDN มีบริษัทไม่กี่แห่งที่ให้บริการ CDN และการรักษาความปลอดภัย แต่ฉันแนะนำ SUCURI ซึ่งมีทั้งสองอย่าง

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

WordPress Preloader ไม่มีปลั๊กอิน

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

ลิงก์ Rel=preload> ต้องมีค่าที่ถูกต้อง

as value ขององค์ประกอบ link rel=preload> ต้องเป็นค่าที่ถูกต้อง

โหลดล่วงหน้าและดึงข้อมูลล่วงหน้า: เร่งประสบการณ์ผู้ใช้ของคุณ

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