วิธีปรับปรุงการระบายสีเนื้อหาครั้งแรกใน WordPress ด้วยปลั๊กอิน

เมื่อพูดถึง ประสิทธิภาพของ WordPress หนึ่งในตัวชี้วัดหลักคือ First Contentful Paint (FCP) นี่เป็นการวัดเวลาที่ใช้ในการแสดงเนื้อหาแรกบนหน้าเว็บ และเป็นตัวบ่งชี้ที่ดีว่าหน้าเว็บโหลดได้เร็วเพียงใด มีหลายวิธีในการปรับปรุง FCP แต่วิธีที่ง่ายที่สุดคือการใช้ปลั๊กอิน ในบทความนี้ เราจะแสดงวิธีปรับปรุง First Contentful Paint ใน WordPress ด้วยปลั๊กอิน เราขอแนะนำให้ใช้ปลั๊กอิน W3 Total Cache ปลั๊กอินนี้มีคุณลักษณะหลายอย่างที่สามารถช่วยปรับปรุง FCP ได้ รวมถึงการผสานรวมและการลดขนาดเครือข่ายการส่งเนื้อหา (CDN) เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอินแล้ว คุณจะต้องกำหนดค่า เราขอแนะนำให้ใช้การตั้งค่าต่อไปนี้: เปิดใช้งานการแคช: การดำเนินการนี้จะแคชหน้าและโพสต์ของคุณเพื่อให้สามารถให้บริการได้รวดเร็วยิ่งขึ้น เปิดใช้งาน CDN: สิ่งนี้จะรวม CDN เข้ากับเว็บไซต์ของคุณ ซึ่งสามารถปรับปรุง FCP ได้ เปิดใช้งานการลดขนาด: สิ่งนี้จะย่อไฟล์ HTML, CSS และ JavaScript ของคุณ ซึ่งสามารถลดขนาดของเพจและปรับปรุง FCP เมื่อคุณบันทึกการเปลี่ยนแปลงแล้ว คุณควรเห็นการปรับปรุงที่สำคัญใน FCP

เป็นไปไม่ได้ที่จะวัดประสิทธิภาพของเว็บไซต์ด้วยเมตริกสองแบบ: เวลาในการโหลดและเวลาในการคลิก เมื่อผู้ใช้เยี่ยมชมเว็บไซต์ First Contentful Paint (FCP) จะแสดงภาพประกอบว่าต้องใช้เวลานานแค่ไหนสำหรับองค์ประกอบแรกตามรูปภาพหรือข้อความจึงจะปรากฏ โดยเฉลี่ย เวลาที่ใช้ในการโหลดแต่ละองค์ประกอบในหน้าเดียวจะวัดเป็น LCP ในบทความนี้ เราจะพูดถึง FCP คืออะไรและจะวัดค่าทั้งสองอย่างไร PageSpeed ​​Insights เป็นเครื่องมือที่ยอดเยี่ยมที่ให้คุณทดสอบประสิทธิภาพของเว็บไซต์ของคุณและรับคำแนะนำในการทำให้ดีขึ้น เมื่อคุณเปิดใช้งานการแคชไซต์ คุณจะไม่ต้องโหลดองค์ประกอบทั้งหมดของไซต์ทุกครั้งที่ผู้เยี่ยมชมเข้าชมอีกต่อไป เนื่องจากไฟล์มีเดียเป็นหนึ่งในองค์ประกอบที่ใหญ่ที่สุดในเว็บไซต์ การบีบอัดจึงมีประโยชน์ในการลดเวลาในการโหลด

คุณสามารถบีบอัดรูปภาพก่อนหรือระหว่างอัปโหลดไปยังไซต์ของคุณโดยใช้เครื่องมือออนไลน์ เช่น TinyPNG นอกจากนี้ยังมีปลั๊กอิน WordPress ที่ยอดเยี่ยมที่สามารถช่วยเหลือคุณได้ เช่น Fast Velocity Minify และ Autoptimize เว็บไซต์สมัยใหม่ส่วนใหญ่สร้างด้วย JavaScript และ CSS สำหรับการออกแบบและการใช้งาน เนื่องจากมีช่วงเวลาหน่วงระหว่างเวลาที่ภาพถูกเรนเดอร์และเมื่อผู้ใช้เลื่อนลงมา จึงไม่สามารถมองเห็นภาพบางภาพได้ หากคุณโหลดเฉพาะองค์ประกอบที่ถูกต้อง คุณจะไม่สามารถลดเวลา FCP ของคุณได้ ที่จริงแล้ว คุณสามารถบันทึกเป็นไฟล์ขนาดใหญ่ได้ หากคุณไม่ต้องการใช้สำหรับรูปภาพพื้นหลัง

คุณจะปรับปรุงสีแรกที่น่าพึงพอใจในประภาคารได้อย่างไร?

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

เมตริก First Contentful Paint เป็นหนึ่งในเมตริกหลักของ Lighthouse เวลาที่ใช้ในการแสดงองค์ประกอบ DOM ที่มนุษย์รับรู้จะแสดงในการสาธิตนี้ บนหน้าเว็บ นี่อาจเป็นรูปภาพ บล็อกข้อความ หรือองค์ประกอบแคนวาสที่ไม่ใช่สีขาว เมตริกสามารถปรับปรุงได้โดยปรับขั้นตอนทั้งหมดให้เหมาะสมก่อนนำไปใช้จริง เมื่อเราบล็อกกิจกรรมระหว่างการ โหลดหน้าเว็บ เราอาจไม่สามารถดำเนินการตามขั้นตอน First Contentful Paint ให้เสร็จสิ้นได้ทันเวลา Time To First Byte (TTFB) คือระยะเวลาที่เซิร์ฟเวอร์ใช้ในการรับข้อมูลแรกที่เว็บไซต์สร้างขึ้น ทั้งหมดที่ต้องเกิดขึ้นก่อนที่โค้ด html ใน TTFB จะมีผลกระทบในทางลบ

จากภาพประกอบ ฉันพยายามทำให้การรันโค้ดช้าลง 1,500 มิลลิวินาที การตรวจสอบ Lighthouse ครั้งล่าสุดของเราให้คะแนนรวม 35 คะแนนและ 8.6 FCP ขณะนี้คำขอเดิมใช้เวลา 0.6 วินาทีจึงจะเสร็จสมบูรณ์ และ FCP ได้เปลี่ยนจากการประทับเวลา 4831 มิลลิวินาทีเป็น 3492 มิลลิวินาที ทรัพยากร Render-Blocking คือไฟล์ที่ป้องกันไม่ให้มีการแสดงผลหน้าจนกว่าจะโหลด วิธีที่ง่ายที่สุดคือการใช้แท็กปิดด้านล่าง ในตัวอย่างนี้ ฉันใช้ Critical CSS NPM เพื่อสร้าง CSS ที่สำคัญ ตอนนี้ ให้คัดลอกและวาง CSS นี้ลงในส่วน >head> โดยใช้แท็ก >style>

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

เคล็ดลับของ Google ในการปรับปรุงเวลาระบายสีที่มีความหมายครั้งแรก

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

First Contentful Paint Google

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

การทดสอบโฟลว์อย่างรวดเร็ว (FFT) วัดระยะเวลาที่เบราว์เซอร์ใช้ในการแสดงส่วนแรกของหน้า DOM หลังจากที่ผู้ใช้ไปยังส่วนนั้น ด้วยการใช้ข้อมูลจาก HTTP Archive คุณสามารถคำนวณคะแนน FCP ของคุณ ซึ่งขึ้นอยู่กับความแตกต่างของเวลาและเวลาระหว่าง FCP ของหน้าเว็บของคุณกับเวลาสำหรับเว็บไซต์จริง ตัวอย่างเช่น หากไซต์ดำเนินการในตลาด 90% อันดับแรก จะแสดง FCP ใน 1.2 วินาที

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

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

First Contentful Paint Fix

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

การใช้ First Contentful Paint (FCP) เพื่อตรวจสอบความเร็วในการโหลดหน้าเว็บเป็นวิธีที่ดีในการทราบว่าหน้าเว็บโหลดเร็วเพียงใด Google และผู้เยี่ยมชมของคุณจะต้องพอใจกับคุณภาพของ Final Cut Pro (FCP) ของคุณ หากผู้เยี่ยมชมของคุณไม่คลิกบนหน้าอื่นหลังจากเห็นหน้าบนหน้าจอ หน้านั้นก็จะใช้เวลานานขึ้นจึงจะปรากฏ หน้า HTML สามารถแสดงผลได้ในเวลาน้อยกว่าหนึ่งวินาทีโดยใช้ First Contentful Paint (FCP) เมื่อเริ่มต้นไบต์ เป็นการดีที่สุดที่จะเริ่มต้นที่ความเร็วน้อยกว่า 600 มิลลิวินาที วิธีแก้ปัญหาที่แสดงด้านล่างเป็นวิธีที่ฉันปรับปรุง FCP บ่อยๆ ก่อนทำการเปลี่ยนแปลงใดๆ ในเว็บไซต์ของคุณ โปรดปรึกษาผู้เชี่ยวชาญ PageSpeed

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

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

นอกจากนี้ยังมีความเป็นไปได้ที่สิ่งนี้จะบล็อกการแสดงหน้า แต่มักจะปรากฏบนหน้าจอแล้ว ในการประกาศแบบอักษร CSS คุณสามารถระบุลำดับที่ต้องการสำหรับแบบอักษรเว็บของคุณได้ แบบอักษรประเภทนี้มักจะไม่แสดงข้อความจนกว่าจะโหลดแบบอักษร แทนที่จะแสดงข้อความในแบบอักษรเริ่มต้นของเบราว์เซอร์ คุณสามารถสลับกับข้อความอื่นโดยใช้เครื่องมือ font-display:swap

ระบายสีเนื้อหาที่ใหญ่ที่สุด วิธีการปรับปรุง

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

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

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

หากคุณต้องการให้เว็บไซต์ของคุณทำงานได้ดีที่สุด คุณควรปรับ JavaScript ให้เหมาะสม เพื่อใช้ประโยชน์จากเทคนิคนี้ คุณต้องใช้ Critical CSS ที่หลากหลาย ขึ้นอยู่กับประเภทของอุปกรณ์ Web.dev มีบทความดีๆ เกี่ยวกับการแยกโค้ด ในทางกลับกัน การแคชมีส่วนช่วยในประสิทธิภาพของเว็บ พนักงานบริการมีหน้าที่ในการลดขนาดของเพย์โหลด HTML โดยหลีกเลี่ยงการทำซ้ำขององค์ประกอบทั่วไป สามารถแคช HTML ที่เป็นสแตติกได้ ซึ่งสามารถลด TTFB ได้อย่างมาก เมื่อใช้ HTTP/2 Server Push และ link rel=preload คุณสามารถเร่งการส่งมอบทรัพยากรที่สำคัญได้

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

First Contentful Paint Vs Largest Contentful Paint

First Contentful Paint แตกต่างจาก Core Web Vitals Largest Contentful Paint (LCP) เนื่องจาก LCP คำนึงถึงเวลาที่ใช้สำหรับองค์ประกอบขนาดใหญ่บนเว็บไซต์เพื่อให้มองเห็นได้ ต้องโหลดองค์ประกอบแรกก่อนในกรณีของ FCP อย่างไรก็ตาม องค์ประกอบแรกไม่จำเป็นต้องเป็นองค์ประกอบที่ใหญ่ที่สุด

เหตุใด Fcp และ Lcp จึงมีความสำคัญสำหรับเว็บไซต์ของคุณ

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

First Contentful Paint Wp Rocket

First Contentful Paint (FCP) วัดเวลาตั้งแต่เมื่อหน้าเริ่มโหลดจนถึงเมื่อเบราว์เซอร์แสดงเนื้อหาบิตแรกจากหน้านั้น นี่เป็นตัวชี้วัดที่สำคัญสำหรับการวัดประสบการณ์ผู้ใช้ของเว็บไซต์ เนื่องจากเป็นตัวชี้วัดระยะเวลาที่ผู้ใช้ต้องรอก่อนที่จะเห็นเนื้อหาใดๆ บนหน้า WP Rocket เป็นปลั๊กอิน WordPress ที่อ้างว่าเพิ่มความเร็วเว็บไซต์ของคุณโดยเพิ่มประสิทธิภาพไฟล์ HTML, CSS และ JavaScript ของคุณ นอกจากนี้ยังมาพร้อมกับคุณสมบัติต่างๆ เช่น การโหลดแคชล่วงหน้า การ โหลดแบบ Lazy Loading และการลดขนาด

First Contentful Paint (FCP) กำหนดระยะเวลาที่เนื้อหาจะปรากฏบนเว็บไซต์ ใช้การวัดมิลลิวินาทีเพื่อคำนวณความเร็วในการโหลดของไซต์ เว็บไซต์ควรมีรูปแบบคลิปภาพเคลื่อนไหว (ACF) สูงสุด 1.8 วินาที สาเหตุที่พบบ่อยที่สุดของความคืบหน้าช้าคือสคริปต์และสไตล์ชีตที่บล็อกการแสดงผล หากคุณใช้แบบอักษรเว็บกับ First Contentful Paint (FCP) จะแย่กว่าการไม่ใช้แบบอักษรของเว็บเลย หากคุณกำลังโหลดสคริปต์ลงในเว็บไซต์ของคุณ ตรวจสอบให้แน่ใจว่าสคริปต์เหล่านี้ไม่ได้เป็นเพียงการดาวน์โหลดเท่านั้น แต่ยังแยกวิเคราะห์ รวบรวม และดำเนินการด้วย หากต้องการลดจำนวนไฟล์ในระบบของคุณ ให้พยายามรักษาเวลาตอบสนองของเซิร์ฟเวอร์ให้ต่ำกว่า 600 มิลลิวินาที

เซิร์ฟเวอร์ให้ ประสิทธิภาพที่ดีขึ้น โดยการแสดงเนื้อหาเร็วขึ้นและหลีกเลี่ยงการเดินทางในเครือข่ายที่ไม่จำเป็น ด้วยคะแนน 10% ใน Lighthouse 9.1 คุณจะมาถึงจุดที่คุณต้องการประสบการณ์ที่สมบูรณ์แบบเพื่อไปให้ถึงจุดสูงสุด ระยะเวลาที่เซิร์ฟเวอร์ใช้ในการประมวลผลข้อมูลจาก ISP ไปยังศูนย์ข้อมูลของคุณไม่รวมอยู่ในตัวเลขนี้ สามารถใช้ DevTools เพื่อบันทึกประสิทธิภาพของคุณสำหรับ FCP โดยใช้ Paint Timing API

วิธีปรับปรุงคะแนนการระบายสีเนื้อหาครั้งแรกของไซต์ของคุณ

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