วิธีปรับปรุง First Contentful Paint (FCP) ใน WordPress (การเพิ่มประสิทธิภาพฝั่งเซิร์ฟเวอร์และส่วนหน้า)

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

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

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

FCP คืออะไรและเหตุใดจึงสำคัญ?

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

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

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

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

คะแนน FCP ที่ดีคืออะไร?

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

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

นี่คือรายละเอียด:

0-1.8 วินาที: ดี! ผู้ใช้มองว่าไซต์ของคุณรวดเร็วปานสายฟ้า
1.8-3 วินาที: ยังดีอยู่ แต่มุ่งเป้าไปที่การปรับปรุงเพื่อหลีกเลี่ยงไม่ให้ผู้ใช้เกิดความคับข้องใจ
3+ วินาที: แย่! ผู้เยี่ยมชมอาจตีกลับเนื่องจากการรับรู้ถึงความเชื่องช้า

– ที่มา: web.dev

การวินิจฉัยปัญหา FCP ของคุณ

เครื่องมือเช่น Lighthouse, Google PageSpeed ​​Insights และ GTmetrix สามารถวิเคราะห์เว็บไซต์ของคุณและระบุองค์ประกอบเฉพาะที่ทำให้ FCP ของคุณล่าช้าได้ ค้นหาผู้กระทำผิดเช่น:

• รูปภาพขนาดใหญ่หรือไม่ได้เพิ่มประสิทธิภาพ
• ทรัพยากรการบล็อกการแสดงผล
• แบบอักษรเฮฟวี่เวท
• JS และ CSS ที่ซับซ้อนเกินไป

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

เปิด Google PageSpeed ​​Insights ป้อน URL เว็บไซต์ของคุณในแถบค้นหา แล้วคลิกวิเคราะห์

• สิ่งนี้จะสร้างรายงานโดยละเอียดที่เน้นส่วนที่สามารถทำการปรับปรุงเพื่อปรับปรุง FCP และประสิทธิภาพโดยรวม

• จับตาดูตัวชี้วัด FCP โดยจะบอกคุณว่าต้องใช้เวลานานเท่าใดก่อนที่เนื้อหาจริงชิ้นแรกจะปรากฏบนหน้าจอของผู้เยี่ยมชม

• จากนั้น โปรดดูส่วนการวินิจฉัย ใน PageSpeed ​​Insightsโดยจะแสดงวิธีเฉพาะในการปรับปรุง FCP บนไซต์ของคุณ

กลยุทธ์ในการปรับปรุง FCP

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

การเพิ่มประสิทธิภาพฝั่งเซิร์ฟเวอร์

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

1. ลดเวลาตอบสนองของเซิร์ฟเวอร์ (TTFB)

Time to First Byte (TTFB) คือการวัดที่ใช้เป็นตัวบ่งชี้การตอบสนองของเว็บเซิร์ฟเวอร์หรือทรัพยากรเครือข่ายอื่นๆ

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

1.1. เลือกผู้ให้บริการโฮสติ้งที่ดีกว่า

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

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

1.2. เพิ่มประสิทธิภาพซอฟต์แวร์เซิร์ฟเวอร์

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

1.3. ใช้เครือข่ายการจัดส่งเนื้อหา (CDN)

CDN คือเครือข่ายเซิร์ฟเวอร์ที่กระจายไปตามสถานที่ต่างๆ ทั่วโลก

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

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

2. ใช้ประโยชน์จากแคชระดับเซิร์ฟเวอร์

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

2.1. ปลั๊กอิน WP สำหรับการแคชระดับเซิร์ฟเวอร์

มีปลั๊กอิน WordPress หลายตัวที่สามารถช่วยคุณใช้แคชระดับเซิร์ฟเวอร์ได้ ซึ่งรวมถึง:

1. W3 Total Cache: ปลั๊กอินนี้นำเสนอชุดตัวเลือกการแคชที่ครอบคลุม รวมถึงการแคชหน้า การแคชอ็อบเจ็กต์ และการแคชเบราว์เซอร์
2. WP Super Cache: ปลั๊กอินที่ใช้งานง่ายนี้สร้างไฟล์ HTML แบบคงที่จากไซต์ WordPress แบบไดนามิกของคุณ เว็บเซิร์ฟเวอร์จะใช้ไฟล์ HTML เหล่านี้แทนการประมวลผลสคริปต์ PHP ที่หนักกว่า

2.2. กำหนดค่ากฎการแคชฝั่งเซิร์ฟเวอร์

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

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

การเพิ่มประสิทธิภาพส่วนหน้า

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

3. กำจัดทรัพยากรที่ปิดกั้นการเรนเดอร์

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

3.1. ระบุ CSS ที่สำคัญและโหลดก่อน

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

3.2. เลื่อนหรือโหลด Async ที่ไม่สำคัญ JavaScript

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

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

 <script src="non-critical.js" เลื่อนออกไป</script>

หรือใช้แอตทริบิวต์ async เพื่อโหลดสคริปต์แบบอะซิงโครนัส:

 <script src="non-critical.js" async></script>

3.3 ลบสคริปต์และสไตล์ที่ไม่ได้ใช้

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

1. PurifyCSS: เครื่องมือนี้สามารถใช้เพื่อลบ CSS ที่ไม่ได้ใช้ จะตรวจสอบไฟล์ต้นฉบับของคุณและลบตัวเลือกที่ไม่ได้ใช้ออกจาก CSS ของคุณ
2. UnCSS: เช่นเดียวกับ PurifyCSS UnCSS ยังลบสไตล์ที่ไม่ได้ใช้ออกจากสไตล์ชีตของคุณ
3. Chrome DevTools: แท็บความครอบคลุมใน Chrome DevTools สามารถช่วยระบุโค้ด JavaScript และ CSS ที่ไม่ได้ใช้

4. เพิ่มประสิทธิภาพโครงสร้าง CSS ของคุณ

การเพิ่มประสิทธิภาพ CSS อาจทำให้เวลาในการเรนเดอร์เร็วขึ้นและประสบการณ์ผู้ใช้ดีขึ้น มีวิธีดังนี้:

4.1. ย่อขนาดและลดขนาดไฟล์ CSS

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

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

แอตทริบิวต์ โหลดล่วงหน้า ในแท็ก <link>ช่วยให้เบราว์เซอร์ดาวน์โหลดไฟล์ CSS ที่สำคัญโดยเร็วที่สุด ซึ่งสามารถลดเวลาในการแสดงผลหน้าเว็บได้ นี่คือตัวอย่างวิธีใช้แอตทริบิวต์ preload เพื่อโหลด ไฟล์ CSS ล่วงหน้า:

 <link rel="preload" href="styles.css" as="style">

ซึ่งจะเป็นการบอกให้เบราว์เซอร์เริ่มดาวน์โหลดไฟล์ styles.css ทันที เนื่องจากมีแนวโน้มว่าจะต้องใช้เร็วๆ นี้แอตทริบิวต์as=”style” มีความสำคัญเนื่องจากช่วยให้เบราว์เซอร์ตั้งค่าลำดับความสำคัญที่ถูกต้องสำหรับการดาวน์โหลดทรัพยากร

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

5. หลีกเลี่ยงองค์ประกอบที่ขึ้นกับ JavaScript ที่อยู่ครึ่งหน้าบน

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

5.1. ใช้โซลูชันทางเลือกสำหรับแอนิเมชั่นและสไลเดอร์

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

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

นี่คือตัวอย่างของภาพเคลื่อนไหว CSS แบบง่าย:

 @keyframes สไลด์ {
  จาก { แปลง: แปล X (0); }
  ถึง { แปลง: TranslateX(100px); }
}

.myElement {
  แอนิเมชั่น: สไลด์ 2s ไม่มีที่สิ้นสุด;
}

วิดีโอ HTML5 สามารถใช้เพื่อสร้างเนื้อหาไดนามิกที่สมบูรณ์โดยไม่ต้องอาศัย JavaScript ได้รับการสนับสนุนโดยเบราว์เซอร์สมัยใหม่ทั้งหมด และสามารถควบคุมได้โดยใช้ API วิดีโอ HTML5 มาตรฐาน

 <video width="1080" height="720" ตัวควบคุม>
  <แหล่งที่มา src="movie.mp4" type="video/mp4">
  เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ
</วิดีโอ>

5.2. ชะลอการดำเนินการ JavaScript ที่ไม่จำเป็น

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

คุณลักษณะdefer ในแท็ก <script>ช่วยให้เบราว์เซอร์สามารถรันสคริปต์ได้หลังจากที่เอกสาร HTML ได้รับการแยกวิเคราะห์อย่างสมบูรณ์แล้ว

 <script src="script.js" เลื่อนออกไป</script>

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

 <script src="script.js" async></script>

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

 window.addEventListener('โหลด', ฟังก์ชั่น() {
  // รหัสของคุณที่นี่
});

6. หลีกเลี่ยงการขี้เกียจโหลดรูปภาพครึ่งหน้าบน

การโหลดเมื่อจำเป็นสามารถปรับปรุงประสิทธิภาพได้โดยการโหลดรูปภาพเท่าที่จำเป็นเท่านั้น อย่างไรก็ตาม สิ่งสำคัญคือต้องหลีกเลี่ยงการโหลดรูปภาพแบบ Lazy Loading ที่ปรากฏครึ่งหน้าบน มีวิธีดังนี้:

6.1. โหลดรูปภาพสำคัญล่วงหน้า

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

• ใช้ค่าโหลดล่วงหน้า ของแอตทริบิวต์ relในองค์ประกอบลิงก์ใน HTML ของคุณ ซึ่งจะเป็นการบอกให้เบราว์เซอร์เริ่มดาวน์โหลดทรัพยากรที่ระบุโดยเร็วที่สุด
• หากเซิร์ฟเวอร์ของคุณรองรับ HTTP/2 คุณสามารถใช้ Server Push เพื่อส่งทรัพยากรไปยังไคลเอนต์ก่อนที่จะมีการร้องขอ ซึ่งจะมีประสิทธิภาพเป็นพิเศษสำหรับการโหลดรูปภาพสำคัญล่วงหน้า

6.2. ใช้เทคนิคการเพิ่มประสิทธิภาพรูปภาพครึ่งหน้าบน

ปรับรูปภาพที่ปรากฏครึ่งหน้าบนให้เหมาะสมโดยการบีบอัด ปรับขนาดให้เหมาะสม และใช้รูปแบบรูปภาพสมัยใหม่ เช่น WebP

7. ปรับให้เหมาะสมและบีบอัดรูปภาพ

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

7.1. เลือกรูปแบบภาพและระดับการบีบอัดที่เหมาะสม

สามารถใช้รูปแบบภาพและระดับการบีบอัดที่แตกต่างกันได้ ขึ้นอยู่กับเนื้อหาของภาพ ตัวอย่างเช่น ใช้ JPEG สำหรับภาพถ่าย PNG สำหรับกราฟิกที่มีสีน้อย และ SVG สำหรับภาพเวกเตอร์

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

• ขั้นแรก ติดตั้งปลั๊กอิน Imagify บนไซต์ WordPress ของคุณแล้วเปิดใช้งาน
• ใช้ที่อยู่อีเมลของคุณเพื่อสร้างคีย์ API เมื่อสร้างแล้ว ให้คัดลอกคีย์นี้และวางลงในพาธต่อไปนี้:WordPress Dashboard > การตั้งค่า > Imagify
• ไปที่ แดชบอร์ด WordPress → การตั้งค่า → Imagify → ส่วนการเพิ่มประสิทธิภาพ

ในส่วนการปรับให้เหมาะสม ให้เลือกตัวเลือก แสดงรูปภาพในรูปแบบ WebP บนไซต์ และ ใช้แท็ก <picture>

7.2. ใช้เทคนิคภาพที่ตอบสนอง

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

8. ลดขนาด DOM ของคุณ

การลดขนาดของ Document Object Model (DOM) ของคุณอาจทำให้ประสิทธิภาพดีขึ้น นี่คือกลยุทธ์บางส่วน:

8.1. ย่อมาร์กอัป HTML ให้เล็กสุด

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

เพื่อให้ HTML ของคุณสะอาดและไม่ซับซ้อน คุณสามารถ:

• ใช้โปรแกรมตรวจสอบ HTML เช่น W3C Markup Validation Service เพื่อระบุและลบแท็กที่ไม่จำเป็น
• ใช้องค์ประกอบ HTML เชิงความหมาย เช่น <article>, <section> และ <nav> เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาของคุณ
• ใช้สไตล์ชีต CSS ภายนอกหรือ CSS ภายในในส่วน <head> แทนสไตล์อินไลน์

 <!-- ดี -->
<หัว>
    <สไตล์>
        .ห้องเรียนของฉัน {
            สี: สีฟ้า;
        }
    </สไตล์>
</หัว>
<ร่างกาย>
    <div class="myClass">สวัสดีชาวโลก!</div>
</ร่างกาย>

<!-- แย่ -->
<ร่างกาย>
    <div>สวัสดีชาวโลก!</div>
</ร่างกาย>

8.2. หลีกเลี่ยงองค์ประกอบที่ซ้อนกันโดยไม่จำเป็น

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

เพื่อหลีกเลี่ยงการทำให้ DOM มีขนาดใหญ่และซับซ้อนมากขึ้น คุณสามารถ:

• ใช้ CSS Flexbox หรือ Grid เพื่อวัตถุประสงค์ในการจัดวางแทนการใช้ตารางหรือ div ที่ซ้อนกัน
• ใช้ตัวผสม CSS เพื่อจัดสไตล์องค์ประกอบโดยไม่เพิ่มความซับซ้อนของ HTML

ใช้Document.querySelector() หรือ Document.querySelectorAll()เพื่อเข้าถึงองค์ประกอบที่ซ้อนกันแบบลึกโดยตรง

 <!-- ดี -->
<div class="คอนเทนเนอร์">
    <div class="item">รายการที่ 1</div>
    <div class="item">รายการที่ 2</div>
</div>

<!-- แย่ -->
<div>
    <div>
        <div>รายการที่ 1</div>
    </div>
    <div>
        <div>รายการที่ 2</div>
    </div>
</div>

9. ตรวจสอบให้แน่ใจว่าข้อความยังคงมองเห็นได้ในระหว่างการโหลด Webfont

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

9.1. ใช้ตัวเลือกการแสดงแบบอักษรเช่น "Swap" หรือ "Fallback"

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

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

หากต้องการใช้ตัวเลือกการแสดงแบบอักษร เช่น "swap" หรือ "fallback" คุณสามารถเพิ่มคุณสมบัติ การแสดงแบบอักษร ให้กับกฎ @font-faceใน CSS ของคุณได้ ต่อไปนี้คือวิธีที่คุณสามารถทำได้:

 @ แบบอักษรหน้า {
  ตระกูลแบบอักษร: 'MyFont';
  src: url('/path/to/myfont.woff2') รูปแบบ('woff2'),
       url('/path/to/myfont.woff') รูปแบบ('woff');
  การแสดงแบบอักษร: สลับ; /* หรือทางเลือกสำรอง */
}

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

9.2. โฮสต์ Webfonts ในเครื่องหรือบน CDN

การโฮสต์เว็บฟอนต์ในเครื่องหรือบนเครือข่ายการจัดส่งเนื้อหา (CDN) สามารถเพิ่มความเร็วในการโหลดได้โดยการลดจำนวนคำขอ HTTP การใช้ประโยชน์จากแคชของเบราว์เซอร์ และปรับปรุงความเร็วในการจัดส่งเนื้อหา

หากต้องการโฮสต์เว็บฟอนต์ในเครื่องหรือบน CDN คุณสามารถทำตามขั้นตอนเหล่านี้:

• คุณสามารถดาวน์โหลดไฟล์ webfont ได้จากแหล่งต่างๆ เช่น Google Fonts, Font Squirrel ฯลฯ
• หากคุณโฮสต์เว็บฟอนต์ไว้ในเครื่อง ให้อัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ของคุณ หากคุณใช้ CDN ให้ทำตามคำแนะนำของ CDN เพื่ออัปโหลดไฟล์
• ใช้กฎ @font-face ใน CSS ของคุณเพื่อชี้ไปยังตำแหน่งของไฟล์ฟอนต์

 @ แบบอักษรหน้า {
  ตระกูลแบบอักษร: 'MyFont';
  src: url('/path/to/myfont.woff2') รูปแบบ('woff2'),
       url('/path/to/myfont.woff') รูปแบบ('woff');
}

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

สรุป

โดยสรุป การปรับปรุง First Contentful Paint (FCP) ของไซต์ WordPress ของคุณนั้นเป็นกระบวนการที่หลากหลายซึ่งเกี่ยวข้องกับกลยุทธ์ทั้งฝั่งเซิร์ฟเวอร์และส่วนหน้า การปรับปรุงการตอบสนองของเซิร์ฟเวอร์ การใช้แคชของเซิร์ฟเวอร์ การลบบล็อกการเรนเดอร์ และการปรับปรุง CSS ทั้งหมดนี้ทำให้ FCP เร็วขึ้น

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