8 วิธีดำเนินการเพื่อปรับปรุง FCP ใน WordPress

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

FCP คืออะไร?

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

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

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

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

การทดสอบและทำความเข้าใจกับ Paint ที่มีเนื้อหาครบถ้วนเป็นครั้งแรก

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

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

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

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

มุ่งเน้นที่เวลาเป็นไบต์แรก

สิ่งแรกและนำไปดำเนินการได้มากที่สุดที่คุณสามารถทำได้เพื่อลดเวลา FCP ของคุณและเพิ่มคะแนนนี้คือการมุ่งเน้นที่ Time To First Byte ของคุณ เว็บไซต์หลายแห่งมี TTFB ที่ช้ามาก หรือเวลาที่เบราว์เซอร์ใช้ในการรับเนื้อหาหน้าเว็บคำแรก TTFB คือผลรวมของเวลาที่ใช้ในการรับคำขอ HTTP ประมวลผลคำขอนั้น และเวลาตอบสนองของคำขอ HTTP เอง

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

FCP เป็นตัวชี้วัดแรกที่ปรากฏขึ้น ดังนั้นจึงเกือบเกี่ยวข้องโดยตรงกับ TTFB สองวิธีหลักในการปรับปรุง Time To First Byte บนเว็บไซต์ WordPress การเพิ่มคะแนน First Contentful Paint โดยตรงคือการเลือกโฮสต์ WordPress ที่รวดเร็ว และใช้ CDN ที่มีคุณภาพ

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

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

ดังนั้น สิ่งแรกที่คุณสามารถดำเนินการได้เพื่อปรับปรุง FCP ของคุณคือการดูที่โฮสต์ที่ดี โฮสต์ที่ดีที่สุดที่มี CDN แบบบูรณาการ (องค์กร Cloudflare ซึ่งรวมถึงการเพิ่มประสิทธิภาพแพลตฟอร์มอัตโนมัติ) คือ Rocket.net

นี่คือโฮสต์ WordPress ที่เราเคยให้บริการบล็อกของเราแก่ผู้เยี่ยมชมเกือบ 100,000 คนต่อเดือน และเนื่องจากการผสานรวมกับ CDN ระดับพรีเมียมและฮาร์ดแวร์ที่รวดเร็วในการเริ่มต้น เช่นเดียวกับแคชแบบเต็มหน้า TTFB จึงต่ำอย่างไม่น่าเชื่อ หมายความว่า FCP ของเราไม่ถูกจำกัด

ขจัดทรัพยากรการบล็อกการแสดงผล

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

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

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

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

CSS วิกฤติแบบอินไลน์

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

กำจัด CSS ที่ไม่ได้ใช้

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

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

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

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

ลบองค์ประกอบสคริปต์ครึ่งหน้าบน (เช่น JS Ads)

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

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

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

การแทนที่ด้วย HTML ที่โหลดเร็วขึ้น จะเป็นการปรับปรุง First Contentful Paint อย่างจริงจัง เนื่องจากธรรมชาติของเทคโนโลยี HTML และ CSS

ปิดการใช้งาน Lazy Load Above The Fold (บ้า ฉันรู้)

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

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

ดังนั้น ให้ปิดการใช้งานการโหลดแบบ Lazy Loading ของภาพที่โหลดครึ่งหน้าบน แต่ตรวจสอบให้แน่ใจว่ามีการเพิ่มประสิทธิภาพอย่างเหมาะสม ซึ่งจะรวมถึงการแปลงเป็นรูปแบบ WebP (ใช้ ShortPixel) รวมทั้งบีบอัดให้มีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ในขณะที่ยังคงความชัดเจน

รูปภาพแบบอินไลน์ (SVG หรือ Base64)

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

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

อย่างไรก็ตาม การใช้โลโก้ SVG และฐาน 64, ไอคอนการค้นหา, ไอคอนโซเชียลมีเดีย และพื้นหลัง อาจเป็นประโยชน์สำหรับ First Contentful Paint ของคุณ ปรับปรุงคะแนนเว็บไซต์ WordPress ของคุณบน Google และเป็นประโยชน์ต่อการจัดอันดับและประสบการณ์ผู้ใช้ของคุณ

เน้น DOM Size

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

ดังนั้น div ใดๆ ภายในเนื้อหา, span wrappers, ย่อหน้า, headers, metalinks และอื่นๆ จะถือเป็นองค์ประกอบ DOM ยิ่งมีองค์ประกอบบนหน้ามาก เวลาในการเรนเดอร์ก็จะยิ่งมากขึ้น และ First Contentful Paint ของคุณก็จะยิ่งช้าลง

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

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

บทสรุป

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

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