วิธีหลีกเลี่ยงการผูกมัดคำขอที่สำคัญ

คุณได้รับคำเตือน "หลีกเลี่ยงการผูกมัดคำขอที่สำคัญ" ทุกครั้งที่เรียกใช้การทดสอบ PageSpeed ​​Insights หรือไม่

เป็นอันจบวันนี้

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

• ข้อใดถือเป็นคำขอสำคัญ
• “หลีกเลี่ยงการผูกมัดคำขอที่สำคัญ” หมายถึงอะไร
• การผูกมัดคำขอที่สำคัญส่งผลต่อประสิทธิภาพการทำงานของคุณอย่างไร
• วิธีหลีกเลี่ยงการผูกมัดคำขอที่สำคัญบน WordPress
• โบนัส: แนวทางปฏิบัติที่ดีที่สุดอื่นๆ เพื่อแก้ไข “หลีกเลี่ยงการผูกมัดคำขอที่สำคัญ”

อ่านต่อ.

ข้อใดถือเป็นคำขอสำคัญ

คำขอที่สำคัญเป็นทรัพยากรที่จำเป็นสำหรับการแสดงมุมมองเริ่มต้นของหน้าเว็บ กล่าวอีกนัยหนึ่ง - ทุกอย่างที่โหลดไว้ครึ่งหน้าบน

ตัวอย่างเช่น นี่คือสิ่งที่ฉันเห็นบนแล็ปท็อปของฉันเมื่อฉันโหลดหน้าแรกของ NitroPack:

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

การหลีกเลี่ยงการผูกมัดคำขอที่สำคัญหมายถึงอะไร

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

ในแง่ของส่วนที่เชื่อมโยงกัน ห่วงโซ่คำขอที่สำคัญคือลำดับของคำขอที่พึ่งพาซึ่งกันและกัน และจำเป็นสำหรับการแสดงหน้า ลำดับที่คำขอถูกแยกวิเคราะห์และดำเนินการถูกกำหนดโดย Critical Rendering Path (CRP)

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

เมื่อเบราว์เซอร์เริ่มแยกวิเคราะห์โค้ด เบราว์เซอร์จะประมวลผลคำขอที่สำคัญตามลำดับความสำคัญที่กำหนด:

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

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

เพื่อแสดงข้อความนี้ ลองมาดูตัวอย่างต่อไปนี้:

ลองนึกภาพหน้าเว็บง่ายๆ ที่มีแหล่งข้อมูลต่อไปนี้:

• index.html – ไฟล์ HTML หลักที่กำหนดโครงสร้างของเพจ
• style.css – กำหนดรูปลักษณ์และเลย์เอาต์ของเพจ
• main.js – มีสคริปต์ที่เพิ่มการโต้ตอบและการทำงานให้กับหน้าเว็บ
• logo.png (ไฟล์รูปภาพ)

พิจารณาสถานการณ์ที่ทรัพยากรแต่ละรายการเป็นส่วนหนึ่งของห่วงโซ่คำขอที่สำคัญที่ยาวนาน ตัวอย่างเช่น ลองจินตนาการว่าไฟล์ HTML อ้างอิงถึงไฟล์ CSS และ JavaScript หลายไฟล์ และแต่ละไฟล์เหล่านั้นก็อ้างอิงถึงทรัพยากรอื่นๆ ซึ่งนำไปสู่ห่วงโซ่ของการพึ่งพากัน

ในสถานการณ์ดังกล่าว ความล่าช้าในการโหลดทรัพยากรใดๆ ในห่วงโซ่จะส่งผลต่อเวลาแฝงของเส้นทางวิกฤตและประสิทธิภาพโดยรวมของเพจของคุณ

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

การผูกมัดคำขอที่สำคัญส่งผลต่อประสิทธิภาพการทำงานของคุณอย่างไร

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

ในแง่ของเมตริกประสิทธิภาพเว็บ สิ่งนี้แปลเป็น First Contentful Paint (FCP) และ Largest Contentful Paint (LCP) ที่ไม่ดี

ล้มเหลวสีเนื้อหาแรก (FCP)

FCP วัดระยะเวลาที่เบราว์เซอร์ใช้เพื่อแสดงภาพเนื้อหา DOM ชิ้นแรก (เช่น รูปภาพ, SVG, องค์ประกอบผ้าใบที่ไม่เว้นว่าง) บนหน้า

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

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

ความล้มเหลวของสีเนื้อหาที่ใหญ่ที่สุด (LCP)

LCP วัดระยะเวลาที่องค์ประกอบครึ่งหน้าบนที่ใหญ่ที่สุดจะโหลดบนหน้า

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

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

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

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

และนี่คือวิธีการทำ…

วิธีหลีกเลี่ยงการผูกมัดคำขอที่สำคัญ (บน WordPress)

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

Render-blocking Resources คือไฟล์ที่เมื่อเบราว์เซอร์พบพวกเขา จะต้องดาวน์โหลด แยกวิเคราะห์ และเรียกใช้งานก่อนที่จะทำสิ่งอื่นใด รวมถึงการแสดงผล

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

เทคนิคต่อไปนี้จะช่วยให้คุณจัดการทั้งสองอย่างได้สำเร็จ:

ลบ CSS ที่ไม่ได้ใช้

คำว่า Unused CSS หมายถึงกฎ CSS ที่ไม่ได้ใช้ในหน้าปัจจุบัน

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

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

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

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

ลบ CSS ที่ไม่ได้ใช้ด้วยการคลิกปุ่ม ติดตั้ง NitroPack และปรับแต่งเว็บไซต์ของคุณโดยอัตโนมัติ →

เลื่อน JavaScript

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

คุณสามารถโหลดไฟล์ JS ของคุณโดยใช้async และ เลื่อนออกไป คุณลักษณะ.

• ซิงค์

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

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

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

• ผัดผ่อน

แอตทริบิวต์ defer เช่น async ยังโหลดสคริปต์แบบอะซิงโครนัส แต่จะแตกต่างกันในวิธีดำเนินการ

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

ใช้แอตทริบิวต์deferเมื่อคุณต้องการรักษาลำดับการทำงานของสคริปต์ตามที่ปรากฏใน HTML

การบีบอัดรหัสและการย่อขนาด

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

และวิธีทำคือบีบอัดและย่อขนาดไฟล์ของคุณ

การใช้การบีบอัด จะเขียนรหัสไบนารีของไฟล์ใหม่และเข้ารหัสข้อมูลโดยใช้บิตน้อยกว่าต้นฉบับ

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

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

ที่มา:KeyCDN

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

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

• ซีเอสเอสนาโน
• ตัวย่อ Toptal JavaScript
• รหัสเสริมสวย

แนวทางปฏิบัติที่ดีที่สุดอื่นๆ เพื่อแก้ไข "หลีกเลี่ยงการผูกมัดคำขอที่สำคัญ"

การตั้งค่าย่อยแบบอักษร

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

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

เพื่อหลีกเลี่ยงไม่ให้คุณต้องลดขนาดเพื่อให้เบราว์เซอร์สามารถโหลดได้ทันที

ป้อนการตั้งค่าย่อยแบบอักษร

การตั้งค่าฟอนต์ย่อยเป็นเทคนิคการเพิ่มประสิทธิภาพที่จะลบร่ายมนตร์ (อักขระ) ที่ไม่ได้ใช้ออกจากฟอนต์เพื่อลดขนาดลงอย่างมาก

ตัวอย่างเช่น ลองนึกถึงจำนวนอักขระพิเศษที่หน้าแรกของคุณใช้ เรายินดีพนันว่าไม่เกิน 100

ในแง่นี้ Font Awesome ฟอนต์ที่ใช้มากเป็นอันดับสอง (7% ของเว็บไซต์ทั้งหมดใช้)มี 26,107 ตัวอักษร

ที่มา:เว็บปูม

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

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

นอกจากนี้ คุณต้องแน่ใจว่าได้ดำเนินการตามขั้นตอนทุกครั้งที่อัปเดตเนื้อหาของคุณ

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

เซ็ตฟอนต์ของคุณแบบไร้ความเสี่ยง ลดขนาดได้ถึง 70% โดยติดตั้ง NitroPack →

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

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

ในการระบุคำขอที่สำคัญที่สุดของคุณ ให้เรียกใช้ไซต์ของคุณผ่าน PageSpeed ​​Insights และตรวจสอบคำเตือน "คำขอคีย์โหลดล่วงหน้า":

จากนั้น ไปที่โค้ดของคุณและเพิ่ม ลิงก์ rel=preload tag ไปยังแหล่งข้อมูลเฉพาะ:

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

แหล่งข้อมูลเพิ่มเติม: ตรวจสอบรายการค่าทั้งหมด

วิธีหลีกเลี่ยงการผูกมัดคำขอที่สำคัญด้วย NitroPack

การเพิ่มประสิทธิภาพห่วงโซ่คำขอที่สำคัญของคุณอาจเป็นงานที่น่าเบื่อหากคุณไม่มีเครื่องมือที่เหมาะสม

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

แต่การแก้ไขคำเตือน PSI เดียวไม่ควรเป็นเรื่องที่น่าปวดหัว

หรืออย่างน้อยก็ไม่ใช่กับ NitroPack

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

• ลบ CSS ที่ไม่ได้ใช้
• เลื่อน JavaScript
• การตั้งค่าย่อยแบบอักษร

และอีก 32+ เทคนิคการเพิ่มประสิทธิภาพที่พิสูจน์แล้ว สำหรับคุณ

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

ฟังดูดีเกินจริง?

มาดูหนึ่งในเว็บไซต์ของลูกค้าของเราที่มีและไม่มี NitroPack

นี่คือผลลัพธ์ที่ไม่มี NitroPack:

41 คะแนนประสิทธิภาพบนมือถือ 47 เชน และเวลาแฝงของเส้นทางวิกฤตที่ 3,781 มิลลิวินาที

ไม่มี NitroPack

และนี่คือผลลัพธ์ของ NitroPack:

คะแนนประสิทธิภาพ 95, 1 เชน, เวลาแฝงของเส้นทางวิกฤตที่สั้นกว่ามากกว่า 2 เท่า:

ด้วย NitroPack

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

เข้าร่วม 1% แรกของเว็บไซต์ที่มีประสิทธิภาพดีที่สุด ติดตั้ง NitroPack ฟรี →