การเพิ่มประสิทธิภาพประสิทธิภาพของเว็บไซต์และเส้นทางการแสดงผลที่สำคัญ

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

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

เส้นทางการแสดงผลที่สำคัญ

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

ก่อนอื่น เมื่อเบราว์เซอร์ได้รับการตอบกลับ เบราว์เซอร์จะเริ่มแยกวิเคราะห์ เมื่อพบการขึ้นต่อกันจะพยายามดาวน์โหลด

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

หากเป็นสคริปต์ เบราว์เซอร์จะต้อง: หยุดการแยกวิเคราะห์ ดาวน์โหลดสคริปต์ และเรียกใช้ หลังจากนั้นจึงจะสามารถแยกวิเคราะห์ต่อได้ เนื่องจากโปรแกรม JavaScript สามารถแก้ไขเนื้อหาของหน้าเว็บได้ (โดยเฉพาะ HTML) และนั่นเป็นสาเหตุที่ JS ถูกเรียกว่า parser blocking

เมื่อการแยกวิเคราะห์เสร็จสิ้น เบราว์เซอร์จะสร้าง Document Object Model (DOM) และ Cascading Style Sheets Object Model (CSSOM) เมื่อนำมารวมกันจะทำให้ต้นไม้แสดงผล ส่วนที่ไม่แสดงของหน้าไม่ได้ทำให้เป็นแผนผังการแสดงผล เนื่องจากมีเฉพาะข้อมูลที่จำเป็นในการวาดหน้า

ขั้นตอนสุดท้ายคือการแปล Render Tree เป็น Layout ขั้นตอนนี้เรียกอีกอย่างว่า Reflow นั่นคือที่ที่ทุกตำแหน่งของโหนด Render Tree ทุกโหนด รวมถึงขนาดของมันจะถูกคำนวณ

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

ข้อสรุปเกี่ยวกับการเพิ่มประสิทธิภาพ

อย่างที่คุณเดาได้ กระบวนการเพิ่มประสิทธิภาพเว็บไซต์เกี่ยวข้องกับการเปลี่ยนแปลงเว็บไซต์ที่ลดลง:

• จำนวนข้อมูลที่ต้องโอน
• จำนวนทรัพยากรที่เบราว์เซอร์ต้องดาวน์โหลด (โดยเฉพาะทรัพยากรที่บล็อก)
• ความยาวของ CRP

นอกจากนี้ เราจะเจาะลึกรายละเอียดวิธีการทำ แต่ก่อนอื่น มีกฎสำคัญที่ต้องสังเกต

วิธีวัดประสิทธิภาพ

กฎสำคัญในการเพิ่มประสิทธิภาพคือ: วัดผลก่อน เพิ่มประสิทธิภาพตามต้องการ เครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ส่วนใหญ่มีแท็บที่เรียกว่า Performance และนั่นคือที่มาของการวัด เมื่อปรับให้เหมาะสมสำหรับการเรนเดอร์เริ่มต้น (ครั้งแรก) ที่เร็วที่สุด สิ่งสำคัญที่สุดที่ควรพิจารณาคือเวลาของเหตุการณ์ต่อไปนี้:

• สีแรก
• First Contentful Paint
• สีที่มีความหมายครั้งแรก

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

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

กลยุทธ์การเพิ่มประสิทธิภาพประสิทธิภาพ

จากสิ่งที่เราได้เรียนรู้ข้างต้น มีกลยุทธ์หลักสามประการสำหรับการเพิ่มประสิทธิภาพเว็บไซต์:

1. ลดปริมาณข้อมูลที่จะถ่ายโอนผ่านสายให้น้อยที่สุด
2. ลดจำนวนทรัพยากรทั้งหมดที่จะถ่ายโอนผ่านสายและ
3. ย่อเส้นทางการเรนเดอร์ที่สำคัญ

1. ลดจำนวนข้อมูลที่จะโอนให้น้อยที่สุด

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

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

หลังจากนี้เสร็จแล้ว สิ่งที่เราเหลืออาจเป็นข้อความได้ หมายความว่าเราสามารถใช้อัลกอริธึมการบีบอัดได้อย่างปลอดภัย เช่น GZIP (ซึ่งเบราว์เซอร์ส่วนใหญ่เข้าใจ)

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

• หากคุณใช้ CDN ตรวจสอบให้แน่ใจว่าการแคชได้รับการสนับสนุนและตั้งค่าไว้อย่างถูกต้อง
• แทนที่จะรอให้ถึงวันที่หมดอายุของทรัพยากร คุณอาจต้องการหาวิธีอัปเดตก่อนหน้านี้จากฝั่งของคุณ ฝัง "ลายนิ้วมือ" ของไฟล์ลงใน URL เพื่อให้แคชในเครื่องใช้งานไม่ได้

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

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

2. ลดจำนวนทรัพยากรที่สำคัญทั้งหมด

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

สไตล์ชีต

เพื่อบอกเบราว์เซอร์ว่าไม่จำเป็นต้องใช้ไฟล์ CSS ใด เราควรตั้งค่าแอตทริบิวต์ media ให้กับลิงก์ทั้งหมดที่อ้างอิงถึงสไตล์ชีต ด้วยวิธีนี้ เบราว์เซอร์จะปฏิบัติต่อทรัพยากรที่ตรงกับ media ปัจจุบันเท่านั้น (ประเภทอุปกรณ์ ขนาดหน้าจอ) ตามความจำเป็น ในขณะที่ลดลำดับความสำคัญของสไตล์ชีตอื่นๆ ทั้งหมด (อย่างไรก็ตาม สิ่งเหล่านี้จะได้รับการประมวลผล แต่ไม่ใช่ส่วนหนึ่งของการแสดงผลที่สำคัญ เส้นทาง). ตัวอย่างเช่น หากคุณเพิ่มแอตทริบิวต์ media="print" ลงในแท็ก style ที่อ้างอิงถึงสไตล์สำหรับการพิมพ์หน้า สไตล์เหล่านี้จะไม่รบกวนเส้นทางการแสดงผลที่สำคัญของคุณเมื่อไม่มี print (เช่น เมื่อแสดง หน้าในเบราว์เซอร์)

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

สคริปต์

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

ในการดำเนินการดังกล่าว แท็กสคริปต์ทั้งหมดจะต้องทำเครื่องหมายด้วยแอตทริบิวต์ ไม่ว่าจะเป็น async หรือ defer

สคริปต์ที่มีเครื่องหมายอะซิงโครนัสจะไม่บล็อกการสร้าง DOM หรือ async เนื่องจากสามารถทำงานได้ก่อนที่จะสร้าง CSSOM อย่างไรก็ตาม โปรดทราบว่าสคริปต์อินไลน์นั้นจะบล็อก CSSOM ต่อไป เว้นแต่คุณจะวางไว้เหนือ CSS

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

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

3. ลดความยาวเส้นทางการแสดงผลที่สำคัญให้สั้นลง

สุดท้ายควรลดความยาว CRP ให้สั้นที่สุดเท่าที่จะเป็นไปได้ ส่วนหนึ่ง วิธีการที่อธิบายไว้ข้างต้นจะทำเช่นนั้น

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

การลดขนาด การบีบอัด และการเก็บถาวรทรัพยากรด้วย GZIP จะลดขนาดของข้อมูลที่ถ่ายโอน (ซึ่งจะช่วยลดเวลาในการถ่ายโอนข้อมูลด้วย)

การใส่สไตล์และสคริปต์บางอย่างลงในอินไลน์สามารถลดจำนวนการไปกลับระหว่างเบราว์เซอร์และเซิร์ฟเวอร์ได้

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

บทสรุป: การเพิ่มประสิทธิภาพครอบคลุมทั้ง Stack

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

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

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

แหล่งข้อมูลที่เป็นประโยชน์และอ่านเพิ่มเติม:

• PageSpeed ​​Insights
• รายการตรวจสอบแคช
• วิธีทดสอบว่าเปิดใช้งาน GZIP สำหรับเว็บไซต์ของคุณหรือไม่
• เครือข่ายเบราว์เซอร์ประสิทธิภาพสูง: หนังสือโดย Ilya Grigorik