วิธีเพิ่มความเร็วเว็บไซต์ด้วยแท็ก
"มองเห็น"เบราว์เซอร์คืออนาคตของการท่องอินเทอร์เน็ตความเร็วสูง, นำทรัพยากรมาให้เราตามที่เราต้องการ แม้กระทั่งก่อนที่เราจะรู้ว่าเราต้องการพวกเขา. เบราว์เซอร์ของวันนี้แล้ว ทำ บาง การคาดการณ์ ตอนนี้และจากนั้นเพื่อเพิ่มความเร็วในการดึงและการแสดงผลเอกสาร ในการทำสิ่งนี้ในขั้นตอนต่อไปเราจะไม่มองข้ามใครนอกจากนักพัฒนาเว็บ.
นักพัฒนามี ความคิดที่ดีงาม ของ วิธีการนำทางเว็บไซต์ของพวกเขา, และสิ่งที่ มีการร้องขอทรัพยากรบ่อยที่สุด และพวกเขาสามารถคาดการณ์การดำเนินการในอนาคตของเบราว์เซอร์สำหรับเว็บไซต์ สิ่งที่จำเป็นสำหรับนักพัฒนาในการหาหนทาง ถ่ายทอดสิ่งเหล่านี้ การคาดการณ์ ไปยังเบราว์เซอร์ และ ใช้ให้เป็นประโยชน์. นี่คือที่มาของ "ลิงก์ 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 ของคำขอที่เชื่อมโยง.