วิธีกำจัดทรัพยากรการบล็อกการแสดงผล | บัฟ WP

เผยแพร่แล้ว: 2021-12-10

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

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

การแสดงผลคืออะไร?

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

สิ่งที่เบราว์เซอร์ทำก่อนแสดงผล

รูปภาพเบราว์เซอร์เดสก์ท็อป firefox
เบราว์เซอร์เดสก์ท็อป FireFox

การป้อน URL ของเว็บไซต์จะทำให้เกิดกระบวนการต่อไปนี้:

  1. การนำทางจะสมบูรณ์เมื่อผู้ใช้ร้องขอ URL เฉพาะ
    1. การค้นหา DNS เกิดขึ้น ซึ่งเซิร์ฟเวอร์ให้ที่อยู่ IP
    2. เบราว์เซอร์และเซิร์ฟเวอร์เว็บไซต์ดำเนินการ TCP Handshake เพื่อทำการเชื่อมต่อ
    3. คำขอเชื่อมต่อที่ปลอดภัยจะได้รับการเจรจา TLS หรือการแลกเปลี่ยนแฮนด์เชคครั้งที่สอง
  2. เบราว์เซอร์ได้รับการตอบกลับ และได้รับรหัสของเว็บไซต์
    1. ได้รับแพ็กเก็ตข้อมูลชุดแรกใน TCP Slow Start เพื่อควบคุมการรับส่งข้อมูลเครือข่าย
    2. ผู้ใช้ส่งการตอบรับ (ACK) ไปยังเซิร์ฟเวอร์เพื่อสร้างข้อจำกัดในการเชื่อมต่อและอัตราการส่ง
  3. เบราว์เซอร์จะแยกวิเคราะห์ข้อมูลและเปลี่ยนข้อมูลให้เป็น CSS Object Model (CSSOM) และ Document Object Model (DOM)
    1. สร้าง DOM tree (โครงสร้างเว็บไซต์และเพจ)
    2. เครื่องสแกนโหลดล่วงหน้าจะรวบรวมทรัพยากรภายนอก เช่น สคริปต์และรูปภาพ
    3. CSSOM ได้รับการสร้างขึ้น (แผนผังสไตล์)
    4. JavaScript ได้รับการคอมไพล์ในขณะที่ CSSOM builds
    5. Accessibility Object Model (AOM) สร้างขึ้นสำหรับอุปกรณ์ช่วยเหลือในการตีความเนื้อหา
  4. การแสดงผลเกิดขึ้นโดยใช้แผนผัง CSSOM และ DOM ที่สร้างไว้ก่อนหน้านี้

จะเกิดอะไรขึ้นเมื่อคุณแสดงหน้า

รูปภาพของเครื่องมือตรวจสอบเบราว์เซอร์ FireFox
เครื่องมือตรวจสอบเบราว์เซอร์ FireFox

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

สไตล์

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

เค้าโครง

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

เว็บไซต์ได้รับการจัดวางในโครงสร้างกล่อง กล่องเหล่านี้สามารถปรับให้เข้ากับขนาดวิวพอร์ตต่างๆ ได้ไม่จำกัดจำนวน เมื่อโครงสร้างกล่องเปลี่ยนขนาด จะเรียกว่า reflow

สี: First Paint และ First Contentful Paint (FCP)

ช่วงเวลาที่เบราว์เซอร์เว็บไซต์ทำการเรนเดอร์หน้าใด ๆ เรียกว่า "First Paint" First Paint อาจเป็นสีพื้นหลังทึบ ขึ้นอยู่กับโค้ดของหน้าเท่านั้น

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

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

ภาพรายงานประสิทธิภาพความเร็วบัฟ WP ใน GTmetrix
รายงานประสิทธิภาพความเร็วบัฟ WP ใน GTmetrix

คอมโพสิต

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

การรีโฟลว์จะทริกเกอร์การรวมใหม่เนื่องจากการวางตำแหน่งออบเจ็กต์มักจะเปลี่ยนแปลงในรีโฟลว์

ทรัพยากรการบล็อกการแสดงผลคืออะไร

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

  • CSS
  • JavaScript ใน <head> ส่วน
  • แบบอักษรที่โหลดจากเซิร์ฟเวอร์หรือเครือข่ายการจัดส่งเนื้อหา
  • การนำเข้า HTML (หน้าเดิม)

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

JavaScript และ CSS ที่บล็อกการแสดงผลคืออะไร

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

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

สคริปต์บนเว็บไซต์ WordPress ของคุณอาจมาจากธีม งานที่กำหนดเอง หรือปลั๊กอินที่เพิ่มสำหรับฟังก์ชันต่างๆ

รูปภาพเป็นทรัพยากร Render-Block หรือไม่?

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

เหตุใดจึงต้องกำจัดทรัพยากรการบล็อกการแสดงผล

รูปภาพของรายงาน WP Buffs Waterfall ใน GT Metrix ที่แสดงตัวอย่างเพื่อขจัดทรัพยากรการบล็อกการเรนเดอร์
รายงานน้ำตก WP Buffs

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

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

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

วิธีกำจัดทรัพยากรการบล็อกการแสดงผล

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

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

ทดสอบว่าเว็บไซต์ของคุณมีทรัพยากรการบล็อกการแสดงผลหรือไม่

รูปภาพของรายงาน Google PageSpeed ​​Insights การทดสอบทรัพยากรการบล็อกการแสดงผล
รายงาน Google PageSpeed ​​สำหรับผู้ชื่นชอบ WP

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

วิธีการกำจัด JavaScript การบล็อกการแสดงผลและ CSS

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

นักพัฒนามืออาชีพยังสามารถสร้างปลั๊กอินหรือธีมแบบกำหนดเองที่สร้างกระบวนการเหล่านี้ลงในโค้ดได้

ลบ Render-Blocking Javascript ด้วย Code

สามวิธีในการจัดการกับทรัพยากรการบล็อกการแสดงผลผ่านโค้ด ได้แก่:

  1. ย้ายแท็กสำหรับ <script> และ <link> ไปที่ด้านล่างของโค้ด HTML
  2. เพิ่มแอตทริบิวต์ async หรือ defer ให้กับแท็กสำหรับสคริปต์ที่ไม่สำคัญ
  3. ลบโค้ด JavaScript ที่ไม่ได้ใช้

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

ขจัดสไตล์ชีตการบล็อกการแสดงผล

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

  1. แยก CSS ตามประเภทสื่อ (มือถือ แท็บเล็ต เดสก์ท็อป ฯลฯ)
  2. เพิ่มประสิทธิภาพเส้นทางการแสดงผลที่สำคัญ
  3. รวมไฟล์ CSS

เมื่อใช้ WordPress และโปรแกรมสร้างภาพ คุณอาจไม่สามารถควบคุมวิธีการสร้างหน้าได้โดยตรง แต่มีวิธีแก้ไขปัญหาต่างๆ ได้

การบล็อกการแสดงที่อยู่โดยใช้ปลั๊กอินหรือส่วนขยายของ WordPress

ปลั๊กอินและส่วนขยายของ WordPress ใช้ในการจัดระเบียบสคริปต์บนหน้า ปลั๊กอินจะตรวจสอบแท็ก <script> และ <link> ของหน้าเว็บของคุณ และใช้แอตทริบิวต์ defer หรือ async ตามหลักเกณฑ์เฉพาะ

เราได้ผ่านการทดสอบและทดสอบปลั๊กอินต่างๆ สำหรับ WordPress แล้ว และยังคงแบ่งปันสิ่งที่มีประโยชน์ เช่น ปลั๊กอินที่เราชื่นชอบสำหรับการเพิ่มประสิทธิภาพความเร็วบนบล็อก

ให้มืออาชีพด้าน WordPress กำจัดทรัพยากรการบล็อกการแสดงผลให้กับคุณ

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

แนวทางปฏิบัติที่ดีที่สุดในการเพิ่มประสิทธิภาพการแสดงผล

  1. รวมทรัพยากรการบล็อกการแสดงผลของคุณเพื่อลดผลกระทบต่อการโหลดหน้าเว็บ
  2. ลดขนาดของทรัพยากร ดังนั้นจำนวนไบต์ที่จะโหลดจึงลดลง
  3. เลื่อนการดาวน์โหลดทรัพยากรการบล็อกที่ไม่แสดงผล
  4. อย่าเพิ่ม CSS ด้วยกฎ @import เนื่องจากเป็นภาระภายนอก
  5. ใช้ปลั๊กอิน WordPress ที่ออกแบบมาเพื่อแคชสคริปต์และเพิ่มประสิทธิภาพ JavaScript และ CSS ของคุณ
  6. โหลดแบบอักษรที่กำหนดเองในเครื่อง
  7. ระบุ CSS และ JavaScript ที่สำคัญและไม่สำคัญ
  8. ทำเครื่องหมายโค้ดการบล็อกการแสดงผลที่ไม่สำคัญด้วยแอตทริบิวต์ async หรือ defer
  9. รหัสที่ไม่ได้ใช้ควรถูกลบออก

ขจัดอาการปวดหัวและให้ผู้เชี่ยวชาญ WordPress ช่วยเหลือ

รูปภาพของหน้าบริการเพิ่มประสิทธิภาพความเร็วเพื่อขจัดทรัพยากรการบล็อกการแสดงผลโดย WP Buffs
บริการเพิ่มประสิทธิภาพความเร็วเพื่อขจัดทรัพยากรการบล็อกการแสดงผล โดย WP Buffs

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

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

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

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

คำถามที่พบบ่อย

  • “กำจัดทรัพยากรการบล็อกการแสดงภาพคืออะไร”

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

  • ฉันจะแก้ไขทรัพยากรการบล็อกการแสดงผลได้อย่างไร

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

  • ฉันจะกำจัดทรัพยากรการบล็อกการแสดงผลบนเว็บไซต์ของฉันได้อย่างไร

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

  • คุณจะแก้ไข/กำจัดทรัพยากรการบล็อกการแสดงผลโดยไม่มีปลั๊กอินได้อย่างไร

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