ผ่านการทดสอบ CWV และ PageSpeed ​​Insights ทุกครั้งด้วยเทคนิคการพัฒนา WordPress เหล่านี้

ในปี 2021 ที่ StrategiQ ซึ่งเป็นหน่วยงานด้านดิจิทัลเต็มรูปแบบในสหราชอาณาจักร เราได้ตั้งเป้าหมายของเราที่จะเริ่มพัฒนาเว็บไซต์ทุกแห่งที่เราพัฒนาและเปิดตัวเพื่อให้ผ่านประสิทธิภาพ Core Web Vitals (CWV) และ PageSpeed ​​Insights (PSI) ของ Google รายงาน.

Core Web Vitals แสดงให้เห็นว่าเว็บไซต์ของคุณมีประสิทธิภาพเป็นอย่างไรในหลากหลายรูปแบบ ซึ่งรวมถึงความเร็วในการโหลดเนื้อหาแรกบนหน้าเว็บ (First และ Largest Contentful Paint) ความเร็วของเวลาที่ผู้ใช้ต้องรอก่อนที่จะโต้ตอบกับเนื้อหาได้ (Time to Interactive) และการเปลี่ยนเลย์เอาต์ (Cumulative Layout Shift) .

การทดสอบ CWV ของคุณนั้นง่ายพอๆ กับวงกลม เพียงตรงไปที่ https://pagespeed.web.dev/ และป้อนที่อยู่ของคุณ พื้นที่ด้านบนสุดแสดงข้อมูลล่าสุดในโลกแห่งความเป็นจริงในช่วง 28 วันที่ผ่านมา ในขณะที่ส่วนล่าง (คะแนนเต็ม 100 ทั้งบนมือถือและเดสก์ท็อป) เป็นข้อมูลที่สร้างโดยห้องปฏิบัติการ

ทำไมเรื่องนี้? เพราะ Google พูดอย่างนั้น

ในเดือนกรกฎาคม 2018 Google ประกาศว่าความเร็วเป็นปัจจัยที่ทำให้เว็บไซต์ปรากฏในผลการค้นหาโดยเฉพาะบนมือถือ แหล่งที่มา.

ในปี 2020 พวกเขายังประกาศว่าเมตริกประสบการณ์ผู้ใช้ (ซึ่งประกอบเป็น Core Web Vitals / CVW) ถูกนำมาใช้ในการจัดอันดับเว็บไซต์ แหล่งที่มา.

ง่าย: ยิ่งไซต์เร็วและทำงานได้ดีขึ้นเท่าใด ก็ยิ่งมีแนวโน้มที่จะมีอันดับดีขึ้นเท่านั้น

ดังนั้นทีมพัฒนาที่ StrategiQ จึงตัดสินใจว่าถึงเวลาที่เราจะช่วยแผนก SEO ผู้เชี่ยวชาญด้าน SEO สามารถจัดการกับปัญหาเล็กๆ น้อยๆ ของตนได้อย่างเต็มที่ แต่เว็บไซต์ที่ดำเนินการอย่างเลวร้ายสามารถทำอันตรายมากกว่าผลดีได้ อย่างไรก็ตาม เว็บไซต์ที่ผ่าน CWV และ PSI จะทำให้แน่ใจว่าผลงานที่ยอดเยี่ยมของพวกเขานั้นมีจุดเริ่มต้นที่ยอดเยี่ยม

ที่น่าสังเกตคือ CWV และ PSI นั้นผ่านยาก เว็บไซต์ส่วนใหญ่ไม่มี แม้แต่เว็บไซต์ที่มีชื่อเสียงมากที่สุด ในโลก คิดว่า YouTube, BBC, แม้แต่ WP Engine เองก็พยายามดิ้นรนเพื่อให้ได้ผ่านทั้งมือถือและเดสก์ท็อป ( ขอโทษด้วย )

เราทำอะไรเพื่อให้แน่ใจว่าเห็นโดนัทสีเขียวที่น่ายินดีเหล่านั้น?

เราถอดทุกอย่างกลับคืนมาและทำงานเป็นมนต์ง่ายๆ อย่างหนึ่ง:

โหลดให้น้อยที่สุดโดยเร็วที่สุด

แม้ว่าฉันจะไม่พูดถึงเรื่องเล็ก ๆ น้อย ๆ แต่ฉันจะทำตามขั้นตอนหลักของเราเพื่อให้ธีม WordPress ของเรามีความคล่องตัวมากที่สุด

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

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

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

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

ฉันรู้ว่าคุณคิดอะไร – ไปหาสิ่งที่ดี!

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

มาเข้าเรื่องกันเลย

วิธีที่ 1: ก้อน & enqueue

มันเกิดขึ้นมากมาย: โปรเจ็กต์มีไฟล์ css เพียงไฟล์เดียว และไฟล์ js หนึ่งไฟล์ และจบลงด้วยขนาดเท่าดาวเคราะห์น้อย อะไรต่อไป? Google ถามคุณว่า "ทำไมคุณโหลดสไตล์และ javascript ไม่ได้ใช้ในหน้านี้" ทำไม ทำไม?!

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

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

สำหรับแต่ละบล็อก เราสร้างไฟล์ css และ js แยกกันสำหรับไฟล์นั้นเท่านั้น (ถ้าจำเป็น) สิ่งเหล่านี้จะถูกย่อเล็กสุด (ดูจุดถัดไปสำหรับข้อมูลเพิ่มเติม) และจัดคิวแบบบล็อกต่อบล็อก

ผลลัพธ์? เราโหลดเฉพาะสิ่งที่มีอยู่จริงในแต่ละหน้าเท่านั้น

วิธีที่ 2: ใช้ตัวดำเนินการเช่นอึกเพื่อรวมและลดขนาดทรัพย์สินของคุณ

สินทรัพย์ทั้งหมดที่สร้างขึ้นจะถูกย่อให้เล็กสุดโดยฟังก์ชันอึก เป็นที่น่าสังเกตว่าหลายเดือนก่อน Google ต้องการให้มีการต่อกันเพื่อลดขนาด (คำขอขนาดใหญ่หนึ่งคำขอน่าจะดีกว่า 5 คำขอขนาดเล็ก) แต่เนื่องจากการเพิ่มขึ้นของ HTTP/2 (ซึ่งทวีคูณหลายคำขอในครั้งเดียว) สิ่งนี้จะไม่ใช่อีกต่อไป ปัญหา.

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

วิธีที่ 3: หยุดการบล็อกการเรนเดอร์สินทรัพย์

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

เรายังยกเลิก jQuery ที่มาพร้อมกับ WordPress และจัดคิวเวอร์ชันใหม่ (เวอร์ชันที่ไม่มีช่องโหว่ด้านความปลอดภัย) ที่ด้านล่างของหน้าด้วย

แต่สิ่งที่เกี่ยวกับ FOUC (Flash of Unstyled Content) ฉันได้ยินคุณพูด?

วิธีที่ 4: ครึ่งหน้าบน css

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

ในการแก้ไขปัญหานี้ เราแยกสไตล์ครึ่งหน้าบนออกและเพิ่มเป็นแท็ก <style> แบบอินไลน์ในส่วนหัว ไม่ใช่สินทรัพย์ที่ปิดกั้นการแสดงผล และเราไม่ได้รับ FOUC

วิธีที่ 5: WP Rocket

ชิ้นสุดท้ายของปริศนาคือปลั๊กอิน WP Rocket ที่มีประสิทธิภาพดีที่สุด สร้างขึ้นร่วมกับวิศวกร WP Engine เป็นปลั๊กอินแคชเพียงตัวเดียวที่อนุญาตบนแพลตฟอร์มโฮสติ้งของพวกเขา

ผลลัพธ์?

คะแนนพูดเพื่อตัวเอง

SportsAidEastern เป็นองค์กรการกุศลที่สนับสนุนนักกีฬาชาวอังกฤษ ตาม PSI ไซต์ที่เราพัฒนาขึ้นสำหรับพวกเขาได้คะแนน 97/100 บนมือถือและ 100/100 บนเดสก์ท็อป

Calligo นำเสนอบริการข้อมูลที่เปลี่ยนแปลงได้ และคะแนนเว็บไซต์ของพวกเขานั้นดีกว่า SportsAid; มาเกือบสมบูรณ์แบบ 99/100 บนมือถือและ 100/100 บนเดสก์ท็อป

บทสรุป

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

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