การใช้งาน Preload, Prefetch, Preconnect ใน WordPress

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

ในฐานะเจ้าของไซต์ ใครที่ไม่ชอบทำให้ทุกอย่างเป็นไปได้เพื่อให้โหลดหน้าเว็บเร็วขึ้น

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

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

พรีโหลด

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

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

คุณสามารถใช้ปลั๊กอินต่อไปนี้เพื่อตั้งค่าคุณสมบัติโหลดล่วงหน้าได้

คำแนะนำทรัพยากรที่ดีกว่า – ปลั๊กอินฟรีสำหรับกำหนดค่าไฟล์ CSS และ JS

WP Rocket – ปลั๊กอินระดับพรีเมียมเพื่อเพิ่มประสิทธิภาพเว็บไซต์ด้วยเทคนิคที่จำเป็นมากมาย รวมถึงการโหลดแคชล่วงหน้าและแผนผังเว็บไซต์

คุณจะทราบได้อย่างไรว่ามีการเปิดใช้การโหลดล่วงหน้า

วิธีที่รวดเร็วที่สุดในการค้นหาคือการดูแหล่งที่มาของหน้า คุณควรเห็นสิ่งที่ต้องการด้านล่าง

 <link rel="preload" as="style" href="IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">

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

เชื่อมต่อล่วงหน้า

คุณโหลดทรัพยากรจากโดเมนอื่นหรือไม่? บางที CDN?

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

เบราว์เซอร์แนะนำการเชื่อมต่อล่วงหน้าเพื่อสร้างการเชื่อมต่อกับโดเมนอื่นในพื้นหลังเพื่อประหยัดเวลาสำหรับการค้นหา DNS, การเปลี่ยนเส้นทาง, TCP handshake, การเจรจา TLS ฯลฯ แนวคิดคือลดเวลาแฝงเพื่อให้โหลดทรัพยากรได้อย่างรวดเร็วจากโดเมนอื่น

อีกครั้งคุณสามารถใช้ปลั๊กอินคำแนะนำทรัพยากรที่ดีกว่าที่กล่าวถึงข้างต้นหรือปลั๊กอินพรีเมียมเช่น perfmatters

เมื่อกำหนดค่าทรัพยากรที่จำเป็นแล้ว คุณควรเห็นทรัพยากรดังกล่าวในแหล่งที่มาของหน้าดังนี้

 <link rel="preconnect" href="https://ANOTHERSITE.com">

หมายเหตุ: หากคุณกำลังโหลดทรัพยากรจากโดเมนที่ต้องใช้ CORS คุณจะต้องระบุว่าเป็น crossorigin และเอาต์พุตควรมีลักษณะดังนี้

 <link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>

การเชื่อมต่อล่วงหน้าเข้ากันได้กับ Chrome, Edge, Firefox, Safari เวอร์ชันล่าสุด

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

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

การดึงข้อมูล DNS ล่วงหน้า – อธิบายด้านล่าง

การ ดึงข้อมูลล่วงหน้าของลิงก์ – กำหนดค่าโดยใช้ <link url ..> ใช้เพื่อดึงข้อมูล HTML หรือทรัพยากรแบบคงที่ล่วงหน้า คุณสามารถดึงทรัพยากรล่วงหน้าโดยใช้ as แอตทริบิวต์

<link rel="prefetch" href="https://somesite.com/articles/page/2/" as="document">

as แอตทริบิวต์รองรับทรัพยากรต่างๆ เช่น เสียง วิดีโอ สคริปต์ แทร็ก สไตล์ แบบอักษร วัตถุ เอกสาร ฯลฯ การดึงข้อมูลล่วงหน้าของลิงก์สามารถกำหนดค่าได้ด้วยความช่วยเหลือของปลั๊กอิน Pre Party Resource Hints

การดึงข้อมูล DNS ล่วงหน้า

กำลังโหลดทรัพยากรจากหลายโดเมนและต้องการแก้ปัญหาในเบื้องหลังใช่หรือไม่

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

สมมติว่าคุณกำลังโหลดทรัพยากรจาก 3 โดเมน และแต่ละโดเมนใช้เวลาประมาณ 100 มิลลิวินาทีในการค้นหา DNS จากนั้นคุณจะประหยัดเวลาในการตอบสนอง 300 มิลลิวินาที

มันไม่เจ๋งเหรอ?

คุณสามารถใช้งานโดยใช้ปลั๊กอิน perfmatters หรือเพิ่มสิ่งต่อไปนี้ในไฟล์ functions.php ของธีมของคุณ หากคุณสะดวกที่จะแก้ไขไฟล์ธีม

 //* DNS Prefetching function dns_prefetch() { echo '<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" /> <link rel="dns-prefetch" href="https://ANDANOTHERONE.com" /> <link rel="dns-prefetch" href="https://AND.SOMEMORE.com" /> } add_action('wp_head', 'dns_prefetch', 0);

คุณสามารถอ่านเพิ่มเติมได้ที่เอกสารเว็บ Mozilla

พรีเรนเดอร์

คุณคาดหวังให้ผู้ใช้เว็บไซต์ของคุณสำรวจหน้าที่เป็นไปได้หรือไม่

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

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

อย่างที่คุณเห็น มีปลั๊กอินหลักสี่ตัวที่เกี่ยวข้องกับการใช้คำแนะนำเบราว์เซอร์ใน WordPress เลือกแบบที่คุณชอบและตรงกับความต้องการ

ปลั๊กอิน Pre Party Resource Hints – ปลั๊กอินฟรีนำเสนอ DNS-prefetch, ลิงก์ล่วงหน้า, แสดงผลล่วงหน้า, เชื่อมต่อล่วงหน้า และโหลดล่วงหน้า

คำแนะนำทรัพยากรที่ดีกว่า – ทางเลือกแทนคำแนะนำข้างต้น

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

WP Rocket – มีชื่อเสียง ได้รับความไว้วางใจจากไซต์มากกว่า 800,000 แห่ง มีค่าใช้จ่าย 49 เหรียญสำหรับเว็บไซต์เดียว

Perfmatters – น้ำหนักเบาและง่ายต่อการติดตาม ราคา 24.95 ดอลลาร์สำหรับไซต์เดียว ขณะที่ฉันเขียน มันมีคุณสมบัติดังต่อไปนี้

นั่นเป็นจำนวนมากของการเพิ่มประสิทธิภาพ

บทสรุป

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

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