วิธีโหลดคำขอคีย์ล่วงหน้าใน WordPress

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

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

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

“คำขอคีย์โหลดล่วงหน้า” หมายถึงอะไรใน WordPress

เมื่อมีผู้เยี่ยมชมเว็บไซต์ของคุณ เบราว์เซอร์ของพวกเขาจะส่งคำขอ HTTP หลายรายการไปยังเซิร์ฟเวอร์ของไซต์ของคุณ โดยขอไฟล์ที่ประกอบขึ้นเป็นเนื้อหาของคุณ เซิร์ฟเวอร์จะใช้เวลาระยะหนึ่งเพื่อเริ่มตอบสนองคำขอเหล่านี้และส่งข้อมูลไปยังเบราว์เซอร์ ซึ่งเรียกว่า Time to First Byte (TTFB)

ถัดไป เบราว์เซอร์จะเริ่มดาวน์โหลดเนื้อหา (PHP, JavaScript และ CSS) จากไฟล์ไซต์ของคุณและแสดงผลเพื่อแสดงหน้าที่ดูได้ (HTML) ที่ส่วนหน้า เมื่อกระบวนการนี้เสร็จสิ้น ผู้เข้าชมจะเห็นหน้าเว็บที่โหลดเต็มของคุณ

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

โดยพื้นฐานแล้ว 'การโหลดล่วงหน้า' หมายถึงการบอกเบราว์เซอร์ของผู้ใช้ให้ดาวน์โหลดไฟล์ที่จำเป็นก่อน แทนที่จะรอจนกว่ากระบวนการโหลดจะสิ้นสุด โดยทั่วไปจะเป็นฟอนต์ (โดยเฉพาะเว็บฟอนต์), CSS, JavaScript และบางครั้งก็เป็นรูปภาพ

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

ประโยชน์ของการโหลดคำขอคีย์ล่วงหน้าคืออะไร

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

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

เหล่านี้คือ Core Web Vitals สามรายการ:

• Largest Contentful Paint (LCP): ใช้เวลานานเท่าใดในการโหลดองค์ประกอบที่ใหญ่ที่สุดในเพจของคุณ
• First Input Delay (FID): ใช้เวลานานเท่าใดสำหรับเบราว์เซอร์ในการตอบสนองต่อการโต้ตอบของผู้ใช้กับเนื้อหาของคุณ
• Cumulative Layout Shift (CLS) : จำนวนองค์ประกอบที่เคลื่อนไปรอบๆ ขณะที่กำลังโหลดหน้า

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

นอกจากนี้ การโหลดล่วงหน้าอาจส่งผลต่อคะแนน First Contentful Paint (FCP) ของคุณ เมตริกนี้วัดว่าองค์ประกอบ HTML แรกบนหน้าเว็บของคุณใช้เวลานานเท่าใดจึงจะแสดงผล หากคุณโหลดองค์ประกอบนั้นไว้ล่วงหน้าได้ เบราว์เซอร์จะสามารถแสดงส่วนเริ่มต้นของเนื้อหาของคุณได้รวดเร็วยิ่งขึ้น

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

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

มีข้อเสียของการโหลดคำขอคีย์ไว้ล่วงหน้าหรือไม่

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

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

ดังนั้นจึงคุ้มค่าที่จะเลือกอย่างรอบคอบว่าองค์ประกอบใดควรโหลดไว้ล่วงหน้าเพื่อให้ได้ผลลัพธ์มากที่สุด ในกรณีส่วนใหญ่ สิ่งเหล่านี้จะเป็นเว็บฟอนต์, CSS และ JavaScript เนื่องจากสิ่งเหล่านี้มักจะเป็นไฟล์ที่หนักที่สุด

วิธีตรวจสอบว่าไซต์ของคุณกำลังโหลดคำขอคีย์ไว้ล่วงหน้าหรือไม่

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

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

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

หากคุณไม่ต้องการนำทางไปมาระหว่างไซต์ของคุณกับ PageSpeed ​​Insights ให้ลองติดตั้งส่วนขยาย Chrome ของ Google Lighthouse ช่วยให้คุณสร้างรายงานจากภายในเบราว์เซอร์และดูเมตริกประสิทธิภาพของเพจได้

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

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

วิธีโหลดคำขอคีย์ล่วงหน้าใน WordPress

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

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

1. แบบอักษร

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

หากต้องการโหลดคำขอล่วงหน้าด้วยแบบอักษรใน WordPress ให้คัดลอกและวางโค้ดนี้ลงในส่วน <head> ของเพจของคุณ:

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

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

2. Google แบบอักษร

Google Fonts มีไลบรารีโอเพ่นซอร์สที่มีตระกูลฟอนต์เกือบ 1,500 ตระกูล หากคุณกำลังมองหาแบบอักษรบนเว็บที่กำหนดเองเพื่อใช้ในไซต์ของคุณ คุณสามารถค้นหาได้จากที่นั่น

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

เมื่อโหลด Google Fonts ล่วงหน้า คุณควร 'เชื่อมต่อล่วงหน้า' ก่อน ขั้นตอนนี้จะบอกเบราว์เซอร์ล่วงหน้าว่าจะต้องเชื่อมต่อกับไซต์ของบุคคลที่สาม (เช่น Google Fonts) เพื่อดึงทรัพยากร

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

เพียงเพิ่มโค้ดต่อไปนี้ลงในส่วน <head> ของเพจของคุณ:

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

ภายในโค้ดของคุณ คุณจะต้องแทนที่ “$fontURL” สำหรับลิงก์ไปยัง Google Font ของคุณ ตัวอย่างเช่น อาจมีลักษณะดังนี้:

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

จากนั้นอย่าลืมบันทึกการแก้ไขของคุณ!

3. แบบอักษรที่ยอดเยี่ยม

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

เช่นเดียวกับ Google Fonts การโหลดไอคอน Font Awesome ไว้ล่วงหน้าอาจเป็นแนวคิดที่ดีในการเร่งเวลาในการโหลดหน้าเว็บที่รับรู้ เพียงเพิ่มโค้ดนี้ในส่วน <head> ของหน้า:

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

คุณจะต้องเปลี่ยนเส้นทางไฟล์สำหรับแบบอักษรหรือไอคอนที่คุณใช้บนเว็บไซต์ของคุณ จากนั้น บันทึกการเปลี่ยนแปลงของคุณ!

4. ซีเอสเอส

Cascading Style Sheets (CSS) เป็นภาษาการออกแบบที่ทำงานร่วมกับ HTML เพื่อกำหนดรูปแบบและการนำเสนอของหน้าเว็บ ด้วย CSS แบบกำหนดเอง คุณสามารถเปลี่ยนรูปลักษณ์ขององค์ประกอบต่างๆ ได้อย่างรวดเร็ว

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

โชคดีที่มีวิธีง่ายๆ ในการโหลด CSS ไว้ล่วงหน้า เพียงเพิ่มโค้ดนี้ในส่วน <head> ของเพจของคุณ:

 <head>  <link rel="preload" href="styles.css" as="style" /> </head>

อย่าลืมแทนที่ "styles.css" เป็นชื่อของสไตล์ชีต นอกจากนี้ โปรดจำไว้ว่าแม้ว่ารหัสนี้จะทำงานใน Google Chrome แต่บางเบราว์เซอร์ก็ไม่รองรับ

5. จาวาสคริปต์

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

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

เช่นเดียวกับ CSS คุณแค่ต้องเพิ่มโค้ดง่ายๆ นี้ลงในส่วน <head> ของหน้า:

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

เช่นเดิม ให้แทนที่ “ui.js” เป็นชื่อไฟล์ JavaScript แล้วบันทึกการเปลี่ยนแปลงของคุณ

โบนัส: ติดตั้งปลั๊กอินฟรีเพื่อปรับปรุง Core Web Vitals

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

หากคุณกำลังมองหาโซลูชันที่ครอบคลุมมากขึ้น (และฟรี!) ให้ลองติดตั้ง Jetpack Boost เครื่องมือนี้พัฒนาโดย Automattic ซึ่งเป็นบริษัทเดียวกับ WordPress.com

ปลั๊กอินที่เป็นมิตรต่อผู้ใช้นี้จะสแกนเว็บไซต์ของคุณทั้งหมดและให้คะแนนบนเดสก์ท็อปและอุปกรณ์พกพา นอกจากนี้ Jetpack Boost ไม่ได้มีประโยชน์สำหรับ Core Web Vitals ทั้งสามเท่านั้น วิธีการเพิ่มประสิทธิภาพสามารถปรับปรุงเมตริกอื่น ๆ รวมถึงเวลาในการโต้ตอบ (TTI) และเวลาบล็อกรวม (TBT)

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

หรืออีกทางหนึ่ง Jetpack Complete สามารถนำเว็บไซต์ WordPress ของคุณไปสู่ระดับใหม่ทั้งหมด แผนนี้มีเครื่องมือหลายอย่างสำหรับประสิทธิภาพ รวมถึงการเข้าถึง Image Content Delivery Network (CDN) ของ Jetpack ซึ่งสามารถประหยัดแบนด์วิธและปรับปรุงเวลาในการโหลดหน้าเว็บของคุณ นอกจากนี้ คุณจะได้รับเครื่องมือด้านความปลอดภัยและการเติบโตของ WordPress ขั้นสูง

คำถามที่พบบ่อยเกี่ยวกับการโหลดคำขอคีย์ล่วงหน้า

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

คำขอโหลดล่วงหน้าช่วยปรับปรุงประสบการณ์ของผู้ใช้หรือไม่

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

คำขอโหลดล่วงหน้าช่วยปรับปรุง Core Web Vitals หรือไม่

การโหลดคำขอคีย์ล่วงหน้าใน WordPress สามารถปรับปรุงคะแนน Core Web Vitals ของคุณ โดยเฉพาะอย่างยิ่งเมื่อพูดถึง Largest Contentful Paint (LCP) ในความเป็นจริง เมื่อคุณตัดสินใจว่าจะโหลดองค์ประกอบใดไว้ล่วงหน้า คุณควรรวมเนื้อหาที่ 'ใหญ่ที่สุด' หรือ 'หลัก' ของคุณไว้ด้วย เพราะนี่คือสิ่งที่น่าจะได้ประโยชน์สูงสุดจากองค์ประกอบนั้น

โหลดคำขอคีย์ล่วงหน้าเทียบกับโหลดเนื้อหาสำคัญล่วงหน้า

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

โหลดล่วงหน้า เทียบกับ เชื่อมต่อล่วงหน้า เทียบกับ ดึงข้อมูลล่วงหน้า

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

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

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

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

ฉันสามารถทำอะไรได้อีกเพื่อปรับปรุงประสิทธิภาพไซต์ของฉัน

งานต่างๆ สามารถช่วยปรับปรุงประสิทธิภาพไซต์ WordPress ของคุณได้ รวมถึง:

• การใช้ CDN เพื่อให้บริการเนื้อหาของคุณแก่ผู้เข้าชมทั่วโลก
• เลื่อน (หรือลบ) CSS ที่ไม่ได้ใช้
• กำจัดทรัพยากรการปิดกั้นการเรนเดอร์
• ย่อขนาด CSS และทรัพยากรอื่นๆ
• สร้างคำขอ HTTP น้อยลง

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

ปรับปรุงประสิทธิภาพไซต์ WordPress ของคุณด้วยการโหลดคำขอคีย์ไว้ล่วงหน้า

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

เมื่อคุณโหลดคำขอคีย์ไว้ล่วงหน้าภายในเพจของคุณ เบราว์เซอร์ของผู้เข้าชมจะมีทรัพยากร (เช่น ฟอนต์, CSS และ JavaScript) พร้อมใช้งาน จากนั้นจะไม่เกิดความล่าช้าขณะโหลดเนื้อหาและทำให้ผู้ใช้เข้าถึงได้

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