สุดยอดคู่มือการเพิ่มประสิทธิภาพความเร็วเพจสำหรับ WordPress

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

บทนำ

ผู้ใช้อินเทอร์เน็ตไม่ค่อยมีความอดทนเมื่อต้องโหลดหน้าเว็บ เราคลิกที่ลิงค์หรือป้อน URL แล้วรอสักครู่ สอง สาม และนั่นก็เท่านั้น สถิติของ Google ระบุว่า 50% ของผู้ใช้คาดหวังว่าไซต์บนมือถือจะโหลดได้ภายใน 2 วินาที และผู้ใช้ 53% มีแนวโน้มที่จะละทิ้งหน้าเว็บ หากไซต์โหลดนานกว่า 3 วินาที นั่นเป็นช่วงเวลาที่สั้นมาก หากคุณพิจารณาว่าเวลาโหลดเฉลี่ยของหน้าแรกบนอุปกรณ์มือถือคือ 19 วินาที (บนเครือข่าย 3G) เวลาในการโหลดบนคอมพิวเตอร์จะเร็วขึ้นและเวลาในการโหลดโดยเฉลี่ยคือ 5 วินาที แต่ก็ยังนานเกินไป

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

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

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

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

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

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

สารบัญ

• ฐานราก
  • โฮสติ้ง WordPress
    • แชร์โฮสติ้ง
    • โฮสติ้งที่มีการจัดการ
    • VPS หรือเซิร์ฟเวอร์เฉพาะ
  • ธีมเวิร์ดเพรส
  • ปลั๊กอิน WordPress
• ขั้นตอนการเพิ่มประสิทธิภาพความเร็วเพจของ WordPress
  • เครื่องมือ Page Speed
    • Google PageSpeed ​​Insights
    • GTMetrix
    • การทดสอบความเร็วเว็บไซต์ Pingdom
    • การทดสอบหน้าเว็บ
  • การเพิ่มประสิทธิภาพภาพ
    • คู่มือฉบับย่อสำหรับการเพิ่มประสิทธิภาพภาพ
    • Google PageSpeed ​​​​Optimized รูปภาพ
    • การปรับปรุงภาพอื่นๆ
    • การปรับปรุงกรณีศึกษา
  • การแคชเบราว์เซอร์
  • การบีบอัดทรัพยากร (Gzip หรือ Deflate)
  • ลบไฟล์ JS หรือ CSS ที่ไม่จำเป็น
  • Render-blocking JavaScript และ CSS ในเนื้อหาครึ่งหน้าบน
  • การแคชฝั่งเซิร์ฟเวอร์
    • WP Rocket (ปลั๊กอินแคชฝั่งเซิร์ฟเวอร์)
  • เครือข่ายการจัดส่งเนื้อหา
    • คลาวด์แฟลร์
• ผลลัพธ์สุดท้าย
• บทสรุป

ฐานราก

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

• โฮสติ้ง
• ธีมเวิร์ดเพรส
• ปลั๊กอิน WordPress

โฮสติ้ง WordPress

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

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

แชร์โฮสติ้ง

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

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

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

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

ฉันไม่สามารถแนะนำโฮสติ้งที่ใช้ร่วมกันสำหรับเว็บไซต์ธุรกิจใด ๆ ได้ แต่ถ้าจำเป็น ฉันต้องบอกว่าเหมาะที่สุดสำหรับไซต์ที่มีการเข้าชมต่ำมาก

โฮสติ้งที่มีการจัดการ

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

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

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

แนะนำให้ใช้โฮสติ้ง WordPress ภายใต้การจัดการสำหรับเว็บไซต์ที่มีการเข้าชมต่ำถึงปานกลาง

VPS หรือเซิร์ฟเวอร์เฉพาะ

หากเรายึดติดกับการเปรียบเทียบพิซซ่า ด้วย VPS (Virtual Private Server) คุณจะได้รับพิซซ่าสองสามชิ้น แต่ไม่ใช่พิซซ่าทั้งหมด และด้วยเซิร์ฟเวอร์เฉพาะ คุณจะได้พิซซ่าทั้งหมด

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

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

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

การเพิ่มประสิทธิภาพเว็บไซต์ฟรี ซึ่งทุกข้อเสนอของโฮสติ้งที่ดีในตอนนี้ คือการอัพเกรดเวอร์ชัน PHP เป็น 7.x หากไซต์ WordPress ของคุณทำงานบน PHP ต่ำกว่า 7 เช่น 5.6 หรือเก่ากว่านั้น โปรดติดต่อฝ่ายสนับสนุนโฮสติ้งของคุณและขอให้พวกเขาอัปเดตเป็นเวอร์ชันเสถียรล่าสุด หากคุณกำลังมองหาโฮสติ้งใหม่ คุณสามารถขอการสนับสนุนหากมี PHP เวอร์ชัน 7.x พวกเขาทั้งหมดควรตอบกลับด้วยคำว่า "ใช่" แต่ถ้าพวกเขาไม่มีตัวเลือกให้ใช้ PHP 7.x ฉันขอแนะนำให้อยู่ห่างจากพวกเขา เมื่อเปรียบเทียบกับเวอร์ชันเก่าแล้ว PHP 7 เป็นการปรับปรุงที่ยอดเยี่ยมทั้งในด้านความเร็วและประสิทธิภาพ และมันง่ายมากที่จะเปลี่ยนไปใช้ ดังนั้นจงใช้ประโยชน์จากมัน

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

ธีมเวิร์ดเพรส

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

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

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

ปลั๊กอิน WordPress

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

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

สิ่งที่ฉันอยากจะแนะนำคืออย่าติดตั้งและเปิดใช้งานปลั๊กอินแต่ละตัวที่คุณคิดว่าคุณต้องการ

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

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

ขั้นตอนการเพิ่มประสิทธิภาพความเร็วเพจของ WordPress

ก่อนที่เราจะเริ่มต้นกับการเพิ่มประสิทธิภาพ ฉันอยากจะพูดถึงบางสิ่ง

ประการแรก คุณควรสร้างข้อมูลสำรองของไซต์ WordPress ของคุณ นี่คือคำแนะนำเกี่ยวกับวิธีการดำเนินการดังกล่าวด้วยปลั๊กอิน WordPress ปลอดภัยดีกว่าเสียใจ!

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

ทำไมถึงไม่ควรไป 100/100? หากคุณทำตามคำแนะนำของเครื่องมือวัดความเร็วหน้าเว็บและเพิ่มประสิทธิภาพทุกอย่างตามที่กล่าวไว้ เว็บไซต์ของคุณอาจทำงานไม่ถูกต้อง หากคุณย้ายไฟล์ JS หรือ CSS ที่บล็อกทั้งหมดไปที่ส่วนท้าย การกะพริบของ CSS จะปรากฏขึ้น (เนื้อหาที่ไม่มีสไตล์จะปรากฏขึ้นก่อน และเมื่อ CSS โหลด ไซต์จะ "แฟลช" เข้าที่) เช่นเดียวกันจะเกิดขึ้นกับโค้ด JS ซึ่งจะแก้ไของค์ประกอบ DOM หลังจากโหลดโค้ด JS

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

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

ฉันได้ติดตั้ง WordPress เวอร์ชันล่าสุด ธีม MedicPress ปลั๊กอินแนะนำธีมทั้งหมด และฉันได้นำเข้าเนื้อหาสาธิตแล้ว นี่คือจุดเริ่มต้นของเราสำหรับไซต์ทดสอบ

เครื่องมือ Page Speed

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

กฎข้อแรกในการเพิ่มประสิทธิภาพ WordPress เพื่อความเร็วคือ: วัดผลเสมอ!

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

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

เครื่องมือความเร็วหน้าเว็บที่เราจะพิจารณาคือ:

• Google PageSpeed ​​Insights
• GTmetrix
• การทดสอบความเร็วเว็บไซต์ Pingdom
• การทดสอบหน้าเว็บ

มีเครื่องมืออื่น ๆ แต่เครื่องมือเหล่านี้เป็นที่นิยมมากที่สุด และเราจะใช้มันต่อไป

Google PageSpeed ​​Insights

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

หากคุณมีรูปภาพหรือไฟล์ทรัพยากรที่ไม่ได้รับการปรับแต่ง (JS หรือ CSS) ไฟล์นั้นจะสร้างไฟล์ zip พร้อมกับไฟล์คู่ที่ปรับให้เหมาะสม ซึ่งคุณสามารถแทนที่บนเซิร์ฟเวอร์ของคุณได้ สวยเรียบร้อยใช่มั้ย? เราจะดูที่การเพิ่มประสิทธิภาพรูปภาพและโค้ดในภายหลัง เพียงแค่รู้ว่า Google PageSpeed ​​สามารถช่วยคุณได้

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

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

• เปิดใช้งานการบีบอัด (บีบอัดทรัพยากรด้วย gzip หรือยุบ)
• ปรับภาพให้เหมาะสม
• ลดเวลาตอบสนองของเซิร์ฟเวอร์
• กำจัด JavaScript และ CSS ที่บล็อกการแสดงผลในเนื้อหาครึ่งหน้าบน
• ลดขนาด JavaScript

GTmetrix

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

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

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

ฉันได้ใช้เครื่องมือ GTmetrix (สถานที่: แวนคูเวอร์, แคนาดา) บนไซต์ทดสอบของเรา และฉันได้คะแนน PageSpeed ​​ที่ 77 และคะแนน YSlow เท่ากับ 71 ด้วยเครื่องมือนี้ เรายังได้รับข้อมูลที่เป็นประโยชน์นี้อีกด้วย:

• เวลาโหลดเต็มที่: 3.1s,
• ขนาดหน้าทั้งหมด: 803KB
• คำขอ: 54

ฉันชอบเครื่องมือ GTmetrix มากที่สุด เนื่องจากคุณได้รับข้อมูลที่เกี่ยวข้องมากมายในที่เดียว เราจะใช้เครื่องมือ GTmetrix เป็นหลักในการวัดความคืบหน้าในการเพิ่มประสิทธิภาพของเราในคู่มือนี้

การทดสอบความเร็วเว็บไซต์ Pingdom

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

Pingdom ยังแสดงตารางที่น่าสนใจ เช่น ขนาดเนื้อหาหรือจำนวนคำขอ กรองตามประเภทเนื้อหาหรือตามโดเมน และยังมีรายงานน้ำตกอีกด้วย

การทดสอบหน้าเว็บ

เครื่องมือ WebPageTest มีตัวเลือกการกำหนดค่ามากกว่าเครื่องมือก่อนหน้า มีสถานที่ให้เลือกมากกว่า สามารถเลือกความเร็วอินเทอร์เน็ตได้ คุณสามารถเปิด/ปิดตัวเลือกเบราว์เซอร์สองสามตัว และคุณสามารถทดสอบอุปกรณ์เฉพาะได้

เป็นเครื่องมือที่ดี ซึ่งจะแสดงรายงาน Waterfall โดยละเอียดสำหรับการวิ่งแต่ละครั้ง (โดยค่าเริ่มต้นจะทำ 3 รอบ แต่คุณสามารถเปลี่ยนได้ในการตั้งค่า) และจะแสดงระดับ A ถึง F สำหรับปัจจัยการปรับความเร็วแต่ละอย่างเหล่านี้:

• เวลาไบต์แรก (เวลาตอบสนอง),
• เปิดใช้งาน Keep-alive,
• การถ่ายโอนการบีบอัด (gzip),
• บีบอัดภาพ,
• แคชเนื้อหาคงที่
• การใช้ CDN อย่างมีประสิทธิภาพ

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

ฉันใช้เครื่องมือนี้สำหรับไซต์ทดสอบของเรา คุณสามารถเห็นผลลัพธ์ในภาพหน้าจอด้านล่าง:

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

• Google PageSpeed ​​Insights
  • มือถือ: 67
  • เดสก์ท็อป: 71
• GTmetrix
  • PageSpeed: 77
  • YSlow: 71

การเพิ่มประสิทธิภาพภาพ

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

การอัปโหลดรูปภาพขนาดใหญ่ที่ไม่ได้ปรับให้เหมาะสมซึ่งใช้ในสถานที่เล็กๆ ในเว็บไซต์ของคุณถือเป็น "ไม่ ไม่" ครั้งใหญ่ ตัวอย่าง: คุณมีช่องรูปภาพที่จะไม่เกิน 600 x 400 px บนไซต์ของคุณ และคุณอัปโหลดรูปภาพขนาด 1920 x 1080 px (หรือใหญ่กว่านั้นอีก!) ตอนนี้ คุณทำผิดซ้ำสองสามครั้ง และเว็บไซต์ของคุณจะช้า มาก

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

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

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

คู่มือฉบับย่อสำหรับการเพิ่มประสิทธิภาพภาพ

เลือกรูปแบบภาพที่เหมาะสม – รูปแบบภาพ ที่ได้รับความนิยมสูงสุดสำหรับการใช้งานออนไลน์ ได้แก่ JPEG และ PNG คุณสามารถประหยัดขนาดไฟล์ภาพได้มาก โดยการเลือกรูปแบบภาพที่ถูกต้อง (Marko บันทึกไว้ 45% ในบทความของเขา) คุณควรใช้:

• รูปแบบ .jpg สำหรับภาพถ่าย รูปภาพที่มีการไล่ระดับสี และรูปภาพที่มีสีนับล้าน
• รูปแบบ . png สำหรับรูปภาพที่มีสีจำกัด (โลโก้) และรูปภาพที่มีความโปร่งใส

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

บีบอัดรูปภาพของคุณ – สามารถทำได้ด้วยเครื่องมือบีบอัดรูปภาพออนไลน์หรือด้วยปลั๊กอิน WordPress:

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

ปลั๊กอินบีบอัดรูปภาพ WP : อีกครั้ง มาร์โคทดสอบปลั๊กอินการบีบอัดรูปภาพยอดนิยมอีกครั้งและประกาศผู้ชนะ: ShortPixel Image Optimizer หลังจากที่คุณติดตั้งปลั๊กอิน คุณจะต้องขอคีย์ API เพื่อใช้ปลั๊กอิน (กระบวนการที่ง่ายมาก) การตั้งค่าเริ่มต้นของปลั๊กอินนั้นยอดเยี่ยม ดังนั้นคุณไม่จำเป็นต้องตั้งค่าใดๆ เพียงไปที่ Media -> Bulk ShortPixel แล้วคลิกปุ่ม “เริ่มการเพิ่มประสิทธิภาพ” ภาพที่อัปโหลดใหม่จะถูกปรับให้เหมาะสมด้วย หมายเหตุ: ปลั๊กอินเวอร์ชันฟรีนี้อนุญาตให้ปรับแต่งภาพได้ 100 ภาพต่อเดือน หากคุณต้องการมากกว่านี้ คุณจะต้องเปลี่ยนไปใช้แผนชำระเงินของพวกมัน เราต้องการให้ลูกค้าของเราเข้าถึงเครื่องมือที่ดีที่สุด เราจึงได้ร่วมมือกับ ShortPixel และตอนนี้ สมาชิก ProteusClub ของเรา ยังได้รับ 1,000 เครดิตฟรีเพื่อใช้กับปลั๊กอิน ShortPixel WordPress

สุดท้ายนี้ ฉันไม่สามารถแนะนำให้คุณอ่านบทความทั้งหมดเกี่ยวกับการเพิ่มประสิทธิภาพรูปภาพใน WordPress ได้มากพอ

Google PageSpeed ​​​​Optimized รูปภาพ

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

ฉันได้กล่าวถึงในการแนะนำเครื่องมือ Google PageSpeed ​​ว่า Google สร้างไฟล์ zip พร้อมไฟล์ที่ปรับให้เหมาะสมซึ่งคุณสามารถใช้บนไซต์ของคุณ คุณสามารถดาวน์โหลดไฟล์ zip โดยคลิกที่ลิงค์นี้:

ในไฟล์ zip นี้ คุณมีโฟลเดอร์ชื่อ image ซึ่งมีรูปภาพที่ปรับให้เหมาะสม คุณสามารถอัปโหลดผ่าน FTP หรือตัวอัปโหลดไฟล์โฮสต์ของคุณ แทนที่/เขียนทับรูปภาพในโฟลเดอร์อัปโหลดที่ถูกต้อง (…/wp-content/uploads/…) หลังจากนั้น คุณควรสร้างเวอร์ชันที่เล็กกว่า (ภาพขนาดย่อ) ของรูปภาพเหล่านี้ในไซต์ WordPress ของคุณ คุณสามารถทำได้ด้วยปลั๊กอิน Regenerate Thumbnails

การปรับปรุงภาพอื่นๆ

ในส่วนนี้ เราจะดูการปรับปรุงเพิ่มเติมบางอย่างเกี่ยวกับรูปภาพ ที่เราสามารถใช้ประโยชน์ได้ เพื่อบีบประสิทธิภาพพิเศษบางอย่าง

ขี้เกียจโหลดรูปภาพ

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

การโหลดแบบ Lazy สามารถทำได้ด้วยโค้ดที่กำหนดเองหรือปลั๊กอิน WP เราจะใช้ปลั๊กอินแคช WP Rocket ในภายหลังและมีคุณสมบัติการโหลดแบบสันหลังยาวเช่นกัน

รูปภาพ Hotlinking

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

นี่ไม่ใช่การเพิ่มประสิทธิภาพความเร็วหน้าโดยตรง แต่เป็นการปรับเซิร์ฟเวอร์ให้เหมาะสม คุณสามารถแก้ปัญหาการเชื่อมโยงด่วนด้วยรหัสบางส่วนในไฟล์ .htaccess คุณสามารถก้าวไปอีกขั้นได้ (ทำตัวชั่วร้ายหน่อย) และแทนที่รูปภาพที่ถูกขโมยด้วยรูปภาพอื่น อาจจะไม่สวยนัก :) ที่สามารถทำได้ในไฟล์ .htaccess เปิดไฟล์ .htaccess บนเซิร์ฟเวอร์ของคุณและเพิ่มรหัสนี้เข้าไป แทนที่ your-website.com ด้วยโดเมนของคุณ google.com เป็นโดเมนอื่นที่คุณต้องการอนุญาตให้เข้าถึงรูปภาพของคุณและแทนที่ http://replacing-stolen-image-url-goes-here.jpg ด้วย URL รูปภาพที่คุณต้องการแสดงสำหรับรูปภาพที่ถูกขโมย

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

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

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

การปรับปรุงกรณีศึกษา

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

ดังนั้นฉันจึงติดตั้งปลั๊กอิน ShortPixel และเรียกใช้เครื่องมือเพิ่มประสิทธิภาพจำนวนมาก ปลั๊กอินรายงานการปรับภาพให้เหมาะสมโดยเฉลี่ย 38% ที่ที่ดี!

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

หลังจากจัดเรียงรูปภาพแล้ว ผลลัพธ์ของเครื่องมือความเร็วหน้าคือ:

• Google PageSpeed ​​Insights
  • มือถือ: 72
  • เดสก์ท็อป: 77
• GTmetrix
  • PageSpeed: 81
  • YSlow: 71

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

การแคชเบราว์เซอร์

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

Proper caching headers and expiration dates should be set on your server, to allow static resources (JS, CSS and other files) to be stored in the browser's cache. This greatly improves the performance for returning visitors or for visitors who look at more than one page on your site.

Usually, the hosting servers have that already configured. If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. It's much easier!

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. ทำได้ดีมาก!

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. นี่เป็นเรื่องยุ่งยาก Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? How dare you!” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

Server Side Caching

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

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

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

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

ล้างแคช

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

แคชมีอายุการใช้งานที่สามารถตั้งค่าได้ในแท็บ "พื้นฐาน" ของการตั้งค่า WP Rocket ฉันแนะนำให้ตั้งค่านี้เป็น 1 วัน

โหลดแคชล่วงหน้า

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

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

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

LazyLoad

ฉันได้อธิบายการโหลดรูปภาพแบบ Lazy Loading ในส่วนการปรับแต่งรูปภาพของบทความนี้แล้ว แต่ตอนนี้เราได้ติดตั้ง WP Rocket แล้ว เราสามารถเปิดใช้งานคุณสมบัตินี้ได้จริงๆ ไปที่แท็บ "พื้นฐาน" ของการตั้งค่า WP Rocket และเปิดใช้งาน LazyLoad สำหรับรูปภาพ และหากคุณใช้วิดีโอหรือ iframes ใดๆ คุณสามารถเปิดใช้งานได้เช่นกัน

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

ย่อไฟล์

คำแนะนำ GTMetrix บางส่วนที่เรายังคงปรับปรุงได้คือการลดขนาดไฟล์ HTML, CSS และ JS เนื่องจากธีม WordPress ของเราและปลั๊กอินที่แนะนำส่วนใหญ่นั้นใช้เวอร์ชันย่อเล็กสุดสำหรับไฟล์ JS/CSS และเราได้เปิดใช้งาน Gzip บนเซิร์ฟเวอร์ของเราแล้ว การปรับให้เหมาะสม WP Rocket นี้จะไม่นำมาซึ่งการปรับปรุงที่สำคัญใดๆ สำหรับไซต์ทดสอบของเรา แต่กรณีของคุณอาจ แตกต่าง. ไปที่แท็บ "ไฟล์คงที่" ในการตั้งค่า WP Rocket และเลือกทั้ง 3 ตัวเลือกภายใต้ตัวเลือก ลดขนาดไฟล์ บันทึกการตั้งค่าแล้วไปตรวจสอบเว็บไซต์ของคุณในแท็บที่ไม่ระบุตัวตน/ส่วนตัว ดังนั้นคุณจึงสามารถค้นหาปัญหาที่อาจนำตัวเลือกเหล่านี้มาสู่ไซต์ของคุณได้ ในการทดสอบไซต์ WordPress ของฉัน การลดขนาด CSS จะทำให้ไฟล์ flexbox css ของตัวสร้างเพจขัดข้อง ดังนั้นฉันจึงต้องปิดการใช้งานตัวเลือกไฟล์ CSS minify ตัวเลือก HTML และ JS ทำงานได้ดี

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

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

รวมไฟล์ JS และ CSS

แท็บ YSlow ในเครื่องมือ GTmetrix กำลังบอกให้เรา "สร้างคำขอ HTTP น้อยลง" มันบอกว่า WordPress ของเราใช้สคริปต์ JS ภายนอก 9 ตัว และเราควรพยายามรวมพวกมันเป็น 1 และหน้านั้นใช้ไฟล์ CSS ภายนอก 4 ไฟล์ และเราควรพยายามรวมพวกมันเป็น 1 ไฟล์เช่นกัน หากคุณจำได้ เราได้ลบไฟล์ JS และ CSS ที่ไม่จำเป็นออกแล้ว ในส่วน Remove JS หรือ CSS ที่ไม่จำเป็น ของบทความนี้

การรวมไฟล์ JS และ CSS ทั้งหมดไว้ในไฟล์เดียวไม่ใช่ความคิดที่ดี เพราะเบราว์เซอร์สามารถดาวน์โหลดไฟล์ขนาดเล็กลงได้ 6 ไฟล์พร้อมกัน ซึ่งเร็วกว่าไฟล์ขนาดใหญ่ 1-2 ไฟล์ อีกสาเหตุหนึ่งคือ ไฟล์บางไฟล์รวมอยู่ในส่วนหัวของเอกสาร HTML และส่วนอื่นๆ ที่ส่วนท้ายของเอกสาร ดังนั้นคุณต้องแยกไฟล์ออกเป็นอย่างน้อย 2 ไฟล์

หากต้องการรวมไฟล์กับ WP Rocket ให้ไปที่แท็บ "ไฟล์คงที่" ในการตั้งค่าปลั๊กอินและเปิดใช้งานตัวเลือกภายใต้ รวมไฟล์ และเช่นเคย ให้ตรวจสอบไซต์ของคุณในแท็บเบราว์เซอร์ที่ไม่ระบุตัวตน/ส่วนตัว เพื่อตรวจสอบปัญหาใดๆ

ในตัวอย่างของเรา WP Rocket มีปัญหาอีกครั้ง เนื่องจากปัญหาการกำหนดค่าโฮสติ้งวานิชที่ใช้ร่วมกันที่กล่าวถึงข้างต้น ดังนั้นฉันจึงต้องปิดใช้งานตัวเลือกไฟล์รวม JS

อีกครั้ง หากคุณมีปัญหาบางอย่างเกี่ยวกับการต่อไฟล์ CSS หรือ JS คุณสามารถเพิ่ม URL ของไฟล์ที่ทำให้เกิดปัญหาในกล่องของไฟล์ JS หรือ CSS ที่ยกเว้นได้ เช่นเดียวกับในขั้นตอนการลดขนาดด้านบน

ลบสตริงการสืบค้นจากทรัพยากรแบบคงที่

GTMetrix แนะนำให้เราลบสตริงการสืบค้นออกจากทรัพยากรแบบคงที่ เนื่องจากพร็อกซีเซิร์ฟเวอร์บางตัวไม่แคชทรัพยากรที่มีสตริงการสืบค้น

สตริงการสืบค้นในทรัพยากรแบบคงที่ (โดยปกติคือไฟล์ JS หรือ CSS) เป็นแอตทริบิวต์ URL ซึ่งทำเครื่องหมายเวอร์ชันของไฟล์ดังกล่าว ดูเหมือนว่านี้: ?ver=2.5.8 และถูกต่อท้าย URL: http://domain.com/css/front-flex.css?ver=2.5.8

เราสามารถลบสตริงการสืบค้นเหล่านี้ได้อย่างง่ายดายด้วย WP Rocket ไปที่แท็บ "ไฟล์คงที่" ของการตั้งค่าปลั๊กอินและเปิดใช้งานตัวเลือก ลบสตริงการสืบค้น

หลังจากเปิดใช้งานตัวเลือกนี้ คะแนน GTmetrix PageSpeed ​​ของเราเปลี่ยนเป็น 98 แต่เวลาในการโหลดหน้าเว็บไม่เปลี่ยนแปลง

CSS/JS . ที่บล็อกการแสดงผล

คำแนะนำเครื่องมือ Google PageSpeed ​​Insights เพียงอย่างเดียวที่เหลืออยู่คือ "กำจัด JavaScript ที่บล็อกการแสดงผลและ CSS ในเนื้อหาครึ่งหน้าบน" ซึ่งหมายความว่ามีไฟล์ JS หรือ CSS บางไฟล์ที่บล็อกการโหลดหน้าในเนื้อหาครึ่งหน้าบน สิ่งที่เครื่องมือต้องการให้เราทำคือเลื่อนหรือโหลดทรัพยากรการบล็อกเหล่านี้แบบอะซิงโครนัส

อีกครั้งที่ปลั๊กอิน WP Rocket เข้ามาช่วยเหลือ ไปที่แท็บ "ไฟล์คงที่" และมองหาตัวเลือก CSS/JS ที่บล็อกการ แสดงผล คุณสามารถเปิดใช้งานตัวเลือก JS และ CSS ที่สามารถแก้ปัญหานี้ได้ เมื่อคุณเปิดใช้งานตัวเลือก JS ตัวเลือก เซฟโหมด (แนะนำ) จะปรากฏขึ้น เซฟโหมดนี้จะโหลดไลบรารี jQuery (ไลบรารีที่เข้ารหัสเริ่มต้นของ WP) ในส่วนหัวของหน้า ปล่อยให้เป็นไฟล์บล็อก แต่จะไม่ทำลายหน้าใด ๆ ที่มีโค้ด jQuery แบบอินไลน์บนหน้า เนื่องจาก jQuery ยังคงโหลดอยู่ในส่วนหัว เครื่องมือ PageSpeed ​​ยังคงบ่นว่าเรามีไฟล์ JS ที่บล็อกการแสดงผล

ดังนั้น ถ้าฉันปิดโหมดปลอดภัยสำหรับไซต์ทดสอบของเรา เครื่องมือ Google PageSpeed ​​จะให้คะแนนที่สมบูรณ์แบบแก่เรา 100 คะแนนบนมือถือและ 100 คะแนนบนเดสก์ท็อป ดีมากใช่มั้ย? ไม่เชิง! เว็บไซต์ของเรายังคงทำงานได้อย่างถูกต้อง แต่มาดูว่าเว็บไซต์โหลดอย่างไร:

แฟลชของเนื้อหาที่ไม่มีสไตล์ (FOUC) สามารถแก้ไขได้โดยใช้ตัวเลือก CSS พาธที่สำคัญ ในการตั้งค่า WP Rocket (ด้านล่างตัวเลือก CSS/JS ที่บล็อกการแสดงผล) ทฤษฎีคือ คุณสามารถเพิ่มโค้ด CSS ที่จำเป็นสำหรับส่วนครึ่งหน้าบนของหน้า เพื่อที่เอฟเฟกต์แฟลชของข้อความที่ไม่ได้จัดรูปแบบจะไม่ปรากฏในการโหลดหน้าเว็บ นี้ยากกว่าเสียง มีเครื่องมือที่ควรจะสร้าง CSS ที่สำคัญนี้ให้กับคุณ แต่ฉันไม่ค่อยประสบความสำเร็จกับเครื่องมือเหล่านี้

ในการสร้างโค้ด CSS เส้นทางวิกฤต:

1. ปิดใช้งานปลั๊กอิน WP Rocket บนไซต์ของคุณ
2. ไปที่เครื่องมือสร้าง CSS เส้นทางวิกฤต
3. ป้อน URL ไซต์ของคุณและเรียกใช้
4. คัดลอกโค้ด CSS พาธที่สำคัญ
5. เปิดใช้งานปลั๊กอิน WP Rocket
6. วางโค้ด CSS ลงในช่อง "Critical path CSS" ในการตั้งค่า WP Rocket
7. ตรวจสอบว่ามีเส้นทาง URL ที่เกี่ยวข้องในโค้ด CSS ที่สำคัญหรือไม่ และเปลี่ยนเป็นเส้นทางสัมบูรณ์

นี่คือลักษณะการโหลดไซต์ทดสอบ WordPress ของเราตอนนี้:

ดีขึ้นแต่ยังไม่ชอบ ใช่ คะแนน Google PageSpeed ​​​​ที่ 100/100 นั้นยอดเยี่ยม แต่เวลาในการโหลดทั้งหมดนั้นช้ากว่า และเรายังมีคำขออีก 2 รายการเนื่องจากเราเปิดใช้งานตัวเลือก CSS/JS ที่บล็อกการเรนเดอร์นี้ ปัญหาหลักสำหรับฉันยังคงเป็นประสบการณ์ของผู้ใช้ในการโหลดหน้าเว็บ ดังนั้นฉันจึงปิดใช้งานตัวเลือก WP Rocket นี้

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

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

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

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

• ดัลลาส เท็กซัส (สหรัฐอเมริกา) = 1.65s
• ซานโฮเซ แคลิฟอร์เนีย (สหรัฐอเมริกา) = 2.53s
• สตอกโฮล์ม สวีเดน (EU) = 3.06s
• เมลเบิร์น (AUS) = 5.38s

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

• ดัลลาส เท็กซัส (สหรัฐฯ) = 0.63s
• ซานโฮเซ แคลิฟอร์เนีย (สหรัฐอเมริกา) = 0.76s
• สตอกโฮล์ม สวีเดน (EU) = 1.21s
• เมลเบิร์น (AUS) = 2.24s

เราจะใช้เวลาเหล่านี้เพื่อเปรียบเทียบเวลาในการโหลด WordPress ของเรา เมื่อเราตั้งค่าไซต์ให้ใช้ CDN

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

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

การใช้ WordPress CDN มีประโยชน์มากมายรวมถึง:

• เวลาแฝงที่ลดลงซึ่งเป็นเวลาและหรือล่าช้าของระยะทางที่ต้องเดินทาง
• ลดเวลาเป็นไบต์แรก (TTFB) ซึ่งเป็นการวัดระยะเวลาที่เบราว์เซอร์ต้องรอก่อนที่จะได้รับข้อมูลไบต์แรกจากเซิร์ฟเวอร์
• ให้บริการเนื้อหาจากแคชเพื่อให้โหลดหน้าเว็บได้เร็วขึ้นและลดภาระให้กับเซิร์ฟเวอร์โฮสติ้ง (ต้นทาง) ของคุณ
• ใช้ HTTP/2 ผ่านการเชื่อมต่อที่ปลอดภัยเพื่อใช้ประโยชน์จากมัลติเพล็กซ์ การขนาน การพุชของเซิร์ฟเวอร์ และการบีบอัด HPACK
• บีบอัดข้อมูลด้วย GZIP หรือ Brotli เพื่อให้แน่ใจว่าไฟล์ HTML, สไตล์ชีต และ JavaScript มีขนาดเล็กลง

CDN ในปัจจุบันมีฟีเจอร์อื่นๆ มากมาย โดยเฉพาะในแผนกความปลอดภัย โดยปกติแล้วจะมีการป้องกัน DDoS การตรวจจับ/ป้องกันบ็อต และอื่นๆ

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

คลาวด์แฟลร์

ขั้นแรก ไปที่ cloudflare.com และลงทะเบียนสำหรับบัญชีใหม่ฟรี หลังจากที่คุณสร้างบัญชี คุณจะต้องตั้งค่าเว็บไซต์ของคุณบน Cloudflare เพื่อให้บริการเนื้อหาคงที่ (สินทรัพย์) ของคุณ

เมื่อคุณลงชื่อเข้าใช้บัญชี Cloudflare ใหม่ ระบบจะขอให้คุณเพิ่มเว็บไซต์ของคุณ (โดเมน) เพื่อเรียกข้อมูลระเบียน DNS โดยอัตโนมัติ

ป้อนโดเมนของคุณและคลิกที่ "เริ่มต้นการสแกน" แม้ว่าฉันจะใช้โดเมนย่อย ( speed.gregorcapuder.com ) ฉันต้องป้อนเฉพาะโดเมนราก: gregorcapuder.com ส่วนการสแกนใช้เวลาประมาณหนึ่งนาทีจึงจะเสร็จสมบูรณ์ และในระหว่างนี้ คุณสามารถดูวิดีโอสั้น ๆ ซึ่งจะอธิบายสิ่งที่เกิดขึ้น หลังจากการสแกนเสร็จสิ้น คุณสามารถคลิกที่ปุ่ม "ดำเนินการต่อ"

ในขั้นตอนถัดไป คุณจะเห็นระเบียน DNS ทั้งหมดที่ Cloudflare สามารถหาได้ในโดเมนของเรา ที่นี่คุณต้องเพิ่มบันทึกที่อาจขาดหายไป ให้ตรวจสอบรายการและตรวจสอบว่ามีบางอย่างหายไปหรือไม่ ในตัวอย่างของเรา โดเมนย่อยความเร็วหายไป ดังนั้นฉันจึงเพิ่มลงในรายการ ในการป้อน ชื่อ ฉันป้อน "ความเร็ว" (ชื่อโดเมนย่อยของฉัน) ในที่ อยู่ IPv4 ฉันป้อนที่อยู่ IP เดียวกันกับโดเมนหลักของฉัน (gregorcapuder.com) แล้วคลิก "เพิ่มระเบียน" ดังที่คุณเห็นในภาพหน้าจอด้านล่าง ฉันได้เปิดใช้งาน Cloudflare สำหรับโดเมนหลักของฉัน เช่นเดียวกับโดเมนย่อยความเร็ว (ทำเครื่องหมายด้วยเมฆสีส้มที่มีลูกศรวิ่งอยู่หลังคลาวด์) ซึ่งหมายความว่าในสองเว็บไซต์นี้ การรับส่งข้อมูลจะได้รับการจัดการและป้องกันโดย Cloudflare

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

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

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

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

ตอนนี้เมื่อเราตั้งค่าด้าน Cloudflare เราควรเปิดใช้งานการตั้งค่า Cloudflare บนปลั๊กอิน WP Rocket ของเราด้วย

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

เมื่อกำหนดค่า CDN แล้ว เราก็สามารถทดสอบเวลาในการโหลดจากสถานที่ต่างๆ อีกครั้งและดูการปรับปรุง (การทดสอบ Pingdom)

• ดัลลาส, เท็กซัส (สหรัฐอเมริกา) = 0.54s
• ซานโฮเซ แคลิฟอร์เนีย (สหรัฐอเมริกา) = 0.70s
• สตอกโฮล์ม สวีเดน (EU) = 0.91s
• เมลเบิร์น (AUS) = 1.16s

ตามที่คาดไว้ เวลาในการโหลดของยุโรปและออสเตรเลียดีขึ้นมากที่สุด และเวลาในการโหลดทั้งหมดของเราอยู่ที่ประมาณ 1 วินาทีหรือน้อยกว่านั้น นั่นเป็นเวลาในการโหลดที่ยอดเยี่ยม!

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

ผลลัพธ์สุดท้าย

คะแนนเครื่องมือความเร็วหน้าสุดท้ายของเราคือ:

• ข้อมูลเชิงลึกของ Google PageSpeed
  • มือถือ: 91
  • เดสก์ท็อป: 97

• GTmetrix
  • PageSpeed: 98
  • YSlow: 91

นี่คือภาพหน้าจอ:

มาเปรียบเทียบข้อมูล GTmetrix ก่อนและหลังการปรับให้เหมาะสมของเรา:

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

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

บทสรุป

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

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

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

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