วิธีเพิ่มความเร็วเว็บไซต์ด้วยแท็ก
"มองเห็น"เบราว์เซอร์คืออนาคตของการท่องอินเทอร์เน็ตความเร็วสูง, นำทรัพยากรมาให้เราตามที่เราต้องการ แม้กระทั่งก่อนที่เราจะรู้ว่าเราต้องการพวกเขา. เบราว์เซอร์ของวันนี้แล้ว ทำ บาง การคาดการณ์ ตอนนี้และจากนั้นเพื่อเพิ่มความเร็วในการดึงและการแสดงผลเอกสาร ในการทำสิ่งนี้ในขั้นตอนต่อไปเราจะไม่มองข้ามใครนอกจากนักพัฒนาเว็บ.
นักพัฒนามี ความคิดที่ดีงาม ของ วิธีการนำทางเว็บไซต์ของพวกเขา, และสิ่งที่ มีการร้องขอทรัพยากรบ่อยที่สุด และพวกเขาสามารถคาดการณ์การดำเนินการในอนาคตของเบราว์เซอร์สำหรับเว็บไซต์ สิ่งที่จำเป็นสำหรับนักพัฒนาในการหาหนทาง ถ่ายทอดสิ่งเหล่านี้ การคาดการณ์ ไปยังเบราว์เซอร์ และ ใช้ให้เป็นประโยชน์. นี่คือที่มาของ "ลิงก์ HTML" พิเศษ.
ทบทวนทบทวนคำขอ HTTP
ก่อนที่จะดูลิงค์เหล่านี้ถึงเวลาที่ต้องรีเฟรชหน่วยความจำของเราเกี่ยวกับการดำเนินการดึงไฟล์ที่ HTTP ร้องขอโดยทั่วไป สมมติว่ามีคนชื่อโจต้องการเยี่ยมชมเว็บไซต์.
นี่คือสิ่งที่เกิดขึ้นต่อไป:
- Joe พิมพ์ที่อยู่ที่เรียกคืนได้ของมนุษย์ในเว็บไซต์ในแถบที่อยู่ของเบราว์เซอร์และกด "Enter".
- เมื่อได้รับที่อยู่นั้นเบราว์เซอร์จะถามเซิร์ฟเวอร์ DNS (คำชมเชยของ ISP) สำหรับที่อยู่ IP ของที่อยู่ที่ระบุโดย Joe.
- เซิร์ฟเวอร์ DNS จำเป็นต้องใช้.
- เมื่อเบราว์เซอร์รู้ที่อยู่ IP แล้วจะส่งข้อความ (เป็นภาษา TCP) ไปยังเซิร์ฟเวอร์ของเว็บไซต์เพื่อขอการเชื่อมต่อ.
- หากเซิร์ฟเวอร์ยังมีชีวิตอยู่และดีแล้วก็จะส่งคำตอบตอบรับคำขอของเบราว์เซอร์และเบราว์เซอร์ตอบสนองและยอมรับข้อความของเซิร์ฟเวอร์ (บันทึก: ใช่นี่เป็นเวอร์ชั่นของการจับมือ TCP ที่กันน้ำได้มากระหว่างไคลเอนต์และเซิร์ฟเวอร์)
- เมื่อ handshakes สิ้นสุดลงจะมีการเชื่อมต่อระหว่างทั้งสอง.
- ตอนนี้เบราว์เซอร์เปลี่ยนรูปแบบภาษาเป็น HTTP และขอให้เซิร์ฟเวอร์หาเว็บไซต์.
- เซิร์ฟเวอร์รู้ว่าหน้าแรกของเว็บไซต์กลับมาแค่นั้นซึ่งได้รับจากเบราว์เซอร์และแสดงต่อโจที่รออย่างอดทนอยู่หน้าคอมพิวเตอร์.
คำขอ HTTP ทั่วไปต้องผ่าน ทั้งหมด ที่ (และอื่น ๆ ) เพื่อดึงเอกสารผ่านทางอินเทอร์เน็ต ดังนั้นหากกระบวนการใด ๆ เหล่านี้ สามารถเริ่มต้นได้เมื่อเป็นไปได้, เราทำได้ ลดเวลาที่เราต้องรอการส่งมอบทรัพยากรที่เราต้องการ.
ความสัมพันธ์ลิงค์ HTML
W3C ระบุความสัมพันธ์ลิงก์ HTML 4 รายการ (rel สำหรับความสัมพันธ์) DNS-prefetch, preconnect, prefetch, และ Prerender. ร่วมกันพวกเขาถูกเรียก (โดย W3C)คำแนะนำทรัพยากร". ตอนนี้เราจะเห็น พวกเขาทำอะไรได้ และ พวกเขาสามารถใช้ที่ไหน.
1. การดึงข้อมูล DNS ล่วงหน้า
ในการดึงข้อมูล DNS ล่วงหน้า การแก้ไขชื่อโดเมน (aka การรับที่อยู่ IP ที่ตรงกันจากเซิร์ฟเวอร์ DNS) เสร็จสิ้นก่อนเวลา.
สมมติว่ามีหน้าอ้างอิงในเว็บไซต์ที่มีลิงค์อ้างอิงจำนวนมากไปยังเว็บไซต์น้องสาว เมื่อผู้ใช้เยี่ยมชมหน้าอ้างอิงมี ความน่าจะเป็นสูง ว่าผู้ใช้จะนำทางไปยังเว็บไซต์น้องสาว ดังนั้น ค้นหา DNS ต้น สำหรับเว็บไซต์น้องสาวสามารถลดเวลาที่ใช้ในการเปิดเว็บไซต์ (ซึ่งจะช่วยปรับปรุงประสบการณ์ผู้ใช้).
นี้ ลดความหน่วงแฝงผ่านการดึงข้อมูล DNS ล่วงหน้า สามารถทำได้โดยการเพิ่มรหัสนี้ในหน้าอ้างอิง.
เมื่อเบราว์เซอร์ประมวลผลรหัสนี้ในหน้าอ้างอิงมันจะเพิ่มการค้นหา DNS ของเว็บไซต์น้องลงในคิวงานของมันและเมื่อปราศจากงานที่มีลำดับความสำคัญสูงอื่น ๆ ในคิวมันจะเริ่มการแก้ปัญหา DNS ของ เว็บไซต์น้องสาว.
ดังนั้นเมื่อผู้ใช้คลิกที่ลิงค์ใดลิงค์หนึ่งที่พาพวกเขาไปยังเว็บไซต์น้องสาวการแก้ไข DNS ของไซต์นั้นอาจเสร็จสมบูรณ์แล้วและเบราว์เซอร์สามารถเริ่มสร้างการเชื่อมต่อ TCP ไคลเอ็นต์ - เซิร์ฟเวอร์กับไซต์น้องได้ทันที เซิร์ฟเวอร์ทำให้หน้านั้นโหลดเร็วขึ้น.
คุณลักษณะนี้มีอยู่ในเบราว์เซอร์ที่ทันสมัยเกือบทั้งหมดยกเว้น Safari ณ เดือนมีนาคม 2559.
2. เชื่อมต่อล่วงหน้า
การเชื่อมต่อล่วงหน้าเป็นอีกขั้นตอนหนึ่งจากการดึง DNS ล่วงหน้าซึ่งจะสร้างการเชื่อมต่อไปยังเซิร์ฟเวอร์ซึ่งอาจมีการร้องขอที่ส่งในภายหลังในอนาคต.
W3C แสดงกรณีการใช้งานที่เหมาะสมที่สุดสำหรับการเชื่อมต่อล่วงหน้า: การเปลี่ยนเส้นทาง. นักพัฒนาซอฟต์แวร์ใช้การเปลี่ยนเส้นทางด้วยเหตุผลหลายประการ.
ในกรณีนี้คำขอถัดไปของเบราว์เซอร์ (ไซต์ที่ถูกเปลี่ยนเส้นทาง) คือ คาดการณ์ได้ 100%, และสามารถ เชื่อมต่อกับ, ไปยัง ลดเวลาในการนำทาง.
ลองนึกภาพมีหน้าเว็บไซต์ตัวกลางที่เปลี่ยนเส้นทางไปที่ "xyzsite"ลิงก์ HTML ต่อไปนี้จะทำให้เบราว์เซอร์เชื่อมต่อกับเซิร์ฟเวอร์ xyzsite ล่วงหน้าเมื่อเข้าสู่หน้าตัวกลาง.
ตั้งแต่เดือนมีนาคม 2559 มีให้บริการใน Chrome, Opera และ Firefox.
3. โหลดล่วงหน้า
กับ prefetch, สำหรับทรัพยากรเบราว์เซอร์ เริ่มใช้การแก้ไข DNS ของชื่อโดเมนของทรัพยากร, แล้วก็ ทำการเชื่อมต่อ TCP กับเซิร์ฟเวอร์ของทรัพยากร, ทำให้คำขอ HTTP และในที่สุด ดึงข้อมูลและเก็บทรัพยากรที่ดึงมาล่วงหน้า ในแคชเบราว์เซอร์.
หากคุณแน่ใจว่าต้องการใช้ทรัพยากรใดในภายหลังนั่นคือทรัพยากรที่จะดึงข้อมูลล่วงหน้า ณ ที่จับนั้น. การดึงข้อมูลล่วงหน้าต้องใช้การคาดเดา, และถ้าคุณเดาผิดคุณอาจจะชะลอตัวลงแทนที่จะเร่งเว็บไซต์ของคุณ.
สำหรับหนังสือออนไลน์แกลเลอรี่หรือพอร์ตโฟลิโอหากผู้ใช้ส่วนใหญ่มีแนวโน้มที่จะเรียกดูหน้าถัดไปให้ดึงทรัพยากรเช่น ภาพ, สามารถเร่งความเร็วสิ่งต่าง ๆ อย่างมีนัยสำคัญ นี่คือรหัสที่ต้องทำ.
รองรับการดึงข้อมูลล่วงหน้าใน Chrome, Firefox และ Opera.
4. Prerender
เฉพาะหน้า HTML เท่านั้นที่สามารถแสดงผลล่วงหน้าได้ หน้า HTML ที่แสดงผลล่วงหน้าคือ แสดงผลแบบออฟไลน์, และถูกทาสีลงบนหน้าจอเมื่อผู้ใช้ต้องการจริงๆ การแสดงผล ใช้จ่ายในการคำนวณและทรัพยากรหน่วยความจำที่สูงขึ้น; นอกจากนี้เพื่อที่จะแสดงหน้าเบราว์เซอร์อาจต้องการแหล่งข้อมูลเพิ่มเติม (เช่นภาพที่เพิ่มให้กับหน้า) ซึ่งจะนำไปสู่ คำขอที่ตามมาเพิ่มเติม โดยเบราว์เซอร์.
ดังนั้น, Prerender จะต้องมี ใช้ด้วยความระมัดระวัง, และไม่ใช้มากเกินไป การเพิ่มรหัสต่อไปนี้จะแสดงผลล่วงหน้าหน้า "เกี่ยวกับ" ล่วงหน้า.
Prerender มีให้บริการแล้วใน Chrome, IE และ Opera ในเดือนมีนาคม 2559.
สิ่งเล็ก ๆ น้อย ๆ ที่ควรทราบ
(1) คำแนะนำทรัพยากรข้างต้นไม่รับประกันการดำเนินการและการดำเนินการตามขั้นตอนต่าง ๆ ของคำขอเสร็จสมบูรณ์เพราะเมื่อเบราว์เซอร์กำลังยุ่งอยู่กับการประมวลผลคำขอที่จำเป็นสำหรับการดำเนินงานของหน้าปัจจุบันที่ผู้ใช้อยู่ดำเนินการเพิ่มประสิทธิภาพเหล่านี้ สามารถขัดขวางงานปัจจุบันของผู้ใช้.
ดังนั้นทุกอย่างคือ เข้าคิวและดำเนินการเมื่อเบราว์เซอร์รู้สึกว่างพอที่จะทำ.
คำแนะนำทรัพยากรเหล่านี้ไม่จำเป็นต้องมีอยู่ในหน้าแม้ก่อนที่จะโหลดหน้า พวกเขาสามารถเป็น เพิ่มในภายหลังโดย JavaScript, และคำแนะนำทรัพยากรจะทำงานของพวกเขาตามปกติ.
(2) W3C ระบุ คุณลักษณะการเชื่อมโยง HTML เรียกว่า ความน่าจะเป็นคำใบ้, ราคา (มีค่า 0 ถึง 1) สำหรับคำแนะนำทรัพยากรเหล่านี้ซึ่งสามารถใช้เพื่อให้โอกาสในการร้องขอที่จะเกิดขึ้นในอนาคต ฉันยังไม่เห็นคุณลักษณะนี้ใช้งานโดยเบราว์เซอร์ใด ๆ ตัวอย่างเช่นรหัสต่อไปนี้ระบุว่ามี xyzsite โอกาส 80% ที่จะถูกขอในอนาคตและ 30% สำหรับหน้าเกี่ยวกับ.
นอกจากนี้เรายังสามารถเพิ่มแอตทริบิวต์ตัวเลือก crossorigin ลงในคำแนะนำทรัพยากรเพื่อแจ้งเบราว์เซอร์ของข้อมูลประจำตัว CORS ของคำขอที่เชื่อมโยง.
