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

ไม่แน่ใจว่าจะเพิ่มความเร็วโดยรวมของเว็บไซต์ของคุณได้อย่างไร?

ความเร็วของเว็บไซต์เป็นส่วนพื้นฐานของ SEO สมัยใหม่ และเชื่อฉันเถอะ มีผลทันทีและมีนัยสำคัญต่อการจัดอันดับ

หากคุณเคยเยี่ยมชมเว็บไซต์ TheGuideX ของฉัน คุณจะสังเกตเห็นว่าไซต์ของฉันโหลดได้ภายใน 1 วินาที (ฉันได้แนบผลลัพธ์ GTmertix มาด้วยด้านล่างด้วย)

ตาม GTmetrix คะแนน PageSpeed ​​ของ TheGuideX.com คือ 100% และคะแนน YSlow อยู่ที่ประมาณ 95% โดยมีเวลาในการโหลด 0.9 วินาทีและคำขอ HTTP เพียง 23 รายการเท่านั้น ที่น่าตื่นตาตื่นใจ

…และนี่คือรายงานอื่นของ TheVPNCoupon.com ที่ฉันบล็อกเกี่ยวกับ VPN

และตาม GTmetrix คะแนน PageSpeed ​​ของบล็อกอื่นของฉัน (TheVPNCoupon.com) อยู่ที่ประมาณ 99% และคะแนน YSlow คือ 95% โดยมีคำขอ 23-HTTP และเว็บไซต์นี้โหลดได้ภายใน 1 วินาทีเช่นกัน (แม้ว่าจะใช้เวลาเพียง 800 มิลลิวินาทีในการโหลด เว็บไซต์).

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

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

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

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

หากคุณมีความรู้พื้นฐานเกี่ยวกับ VPS เราขอแนะนำให้คุณเปลี่ยนเว็บไซต์ของคุณเป็น DigitalOcean หรือ Cloudways ก่อน และหากคุณต้องการโฮสติ้งที่ใช้ cPanel คุณสามารถเปลี่ยนไปใช้ SiteGround ได้

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

ก่อนที่เราจะเจาะลึกลงไปในเทคนิคการเพิ่มประสิทธิภาพความเร็ว อันดับแรกเราเรียนรู้

ทำไมเรื่องความเร็วถึงสำคัญ?

คุณรอเว็บไซต์โหลดนานเท่าไหร่?

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

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

แต่ทำไมความเร็วของเว็บไซต์ถึงสำคัญ? และเศษเสี้ยววินาทีทำให้เกิดความแตกต่างอย่างไร?

คำตอบ? มันสร้างความแตกต่างอย่างมาก!

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

1. เว็บไซต์ที่ช้าฆ่าการแปลง:

เว็บไซต์ที่ช้าสามารถฆ่าการแปลงเว็บไซต์ของคุณ

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

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

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

2. เราคาดหวังความเร็วและประสบการณ์ผู้ใช้:

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

WTH รอสองวินาทีเพื่อโหลดเว็บไซต์?

หากฉันไม่สามารถรอสองวินาทีได้ ฉันก็ไม่สามารถคาดหวังให้ผู้อ่านของฉันอยู่ได้นานขนาดนี้

มีสองปัจจัยหลักที่เกี่ยวข้องกับประสบการณ์การใช้งานที่ดี:

1. ให้สิ่งที่พวกเขากำลังมองหาแก่ผู้เยี่ยมชมและ
2. ให้กับพวกเขาอย่างรวดเร็ว

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

และทันทีที่ผู้เยี่ยมชมสับสนและหงุดหงิด นั่นหมายความว่าเราได้ทำอะไรผิดพลาด และไม่มีอะไรน่าผิดหวังมากไปกว่าการโหลดที่ช้า

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

3. ความเร็วเว็บไซต์ส่งผลต่ออันดับ Google ของคุณ:

สุดท้ายแต่ไม่ท้ายสุดคือมันครองอันดับของ Google

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

เป็นไปไม่ได้หากไม่มีความเร็วในการโหลดที่ดีและไซต์เหล่านี้ให้ความสำคัญกับไซต์ที่มีความเร็วในการโหลดสูง และตามความรู้ของฉัน พวกเขาได้ประกาศในปี 2010 ว่าพวกเขาต้องการเว็บไซต์ที่มีความเร็วในการโหลดที่รวดเร็วมากกว่าเล็กน้อย

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

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

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

ณ ตอนนี้ ฉันแน่ใจว่าคุณได้เรียนรู้แล้วว่าเว็บไซต์ที่โหลดเร็วมีความสำคัญเพียงใด

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

เครื่องมือทดสอบความเร็วเว็บไซต์

โอเค การปรับความเร็วเว็บไซต์ให้เหมาะสมก็สำคัญ! เมื่อกี้คุณบอกว่าคุณอยู่ที่ไหน?

นั่นคือเว็บไซต์ของคุณช้าหรือไม่? อยู่ตรงกลางหรือเร็วปานสายฟ้า (ยินดีด้วย คุณอาจจะหยุดอ่านได้!)

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

1. GTmetrix

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

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

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

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

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

2. พิงดอม

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

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

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

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

3. Google PageSpeed ​​Insights

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

ที่มีการเปลี่ยนแปลงแม้ว่า ตอนนี้ Google จะแชร์เวลาในการโหลดหน้าเว็บสำหรับทั้ง First Contentful Paint (FCP) และ DOM Content Loaded (DCL) คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับเมตริกความเร็วเหล่านี้ได้ที่หน้านักพัฒนาซอฟต์แวร์อย่างเป็นทางการของ Google ที่นี่

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

คุณยังสามารถตรวจสอบคำแนะนำอื่นๆ ของเราเกี่ยวกับการแก้ไข Flash of Invisible Text (FOIT) เพื่อปรับแบบอักษรของเว็บไซต์ของคุณให้เหมาะสม

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

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

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

หากคุณตรวจสอบทวีตนี้โดย John Mueller จาก Google Search เขายังแนะนำเครื่องมือ WebPageTest สำหรับตรวจสอบความเร็วในการโหลดเว็บไซต์

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

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

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

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

วิธีการเหล่านี้เรียบง่ายและง่ายที่สุดพร้อมตัวอย่าง

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

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

แล้วทำอย่างไร…

เพิ่มประสิทธิภาพเว็บไซต์ของคุณ

ตอนนี้สิ้นสุดการรอคอย!

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

1. การเลือกเว็บโฮสติ้งที่รวดเร็วและเชื่อถือได้

ดังนั้นขั้นตอนแรกคือการเลือกผู้ให้บริการเว็บโฮสติ้งที่เชื่อถือได้และรวดเร็ว

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

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

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

แผงเหล่านี้อาจรวมถึง ServerPilot, VestaCP และอื่นๆ อีกมากมาย แต่ฉันมักแนะนำให้ใช้ ServerPilot เนื่องจากเป็นหนึ่งในแผงควบคุมที่ง่ายที่สุดสำหรับการติดตั้ง WordPress (คุณสามารถคลิกที่นี่เพื่อรับเครดิตฟรี $10 สำหรับ ServerPilot)

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

1.1 แนะนำโฮสติ้ง

1.2 ไม่แนะนำโฮสติ้ง

2. การเลือกธีม WordPress ที่ปรับให้เหมาะสม

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

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

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

หากคุณต้องการคำแนะนำเกี่ยวกับธีมใด ๆ เราขอแนะนำให้คุณเลือกธีม WordPress ระดับพรีเมียมจาก StudioPress, MyThemeShop และ GeneratePress ธีมจากตลาดเหล่านี้ได้รับการปรับให้เหมาะสมและเข้ารหัสอย่างดีสำหรับทั้งความเร็วและ SEO (โดยส่วนตัวฉันชอบใช้ธีม GeneratePress บนเว็บไซต์ของฉัน)

คุณยังสามารถตรวจสอบ Astra ซึ่งเป็นอีกธีมหนึ่งที่ปรับให้เหมาะสมสำหรับความเร็วและ SEO เช่นเดียวกับ GeneratePress ธีมนี้ยังมาพร้อมกับตัวเลือกการปรับแต่งมากมาย และเป็นหนึ่งในธีมที่ดาวน์โหลดมากที่สุดใน WordPress repo ที่มีการติดตั้งที่ใช้งานมากกว่า 700K+

2.1 ธีมที่แนะนำ

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

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

3. การเพิ่มประสิทธิภาพโดยใช้ปลั๊กอิน WordPress

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

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

3.1 เพิ่มประสิทธิภาพเว็บไซต์ของคุณด้วย WP Rocket

ดังนั้นปลั๊กอินแรกที่เราใช้สำหรับการเพิ่มประสิทธิภาพความเร็วของ WordPress คือ WP Rocket

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

ปลั๊กอินสามารถช่วยคุณเพิ่มประสิทธิภาพได้

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

หากคุณกำลังใช้ปลั๊กอินแคชอื่น ๆ ฉันแทบจะไม่แนะนำให้คุณเปลี่ยนไปใช้ WP-Rocket

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

ดังนั้น…

วิธีการใช้ WP-Rocket อย่างมีประสิทธิภาพ?

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

เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอิน WP-Rocket ในเว็บไซต์ WordPress ของคุณแล้ว ให้ไปที่ “ การตั้งค่า ” > “ WP Rocket ” เพื่อเปิดหน้าการกำหนดค่า

ตอนนี้ คลิกที่การตั้งค่า " แคช " เพื่อตั้งค่าแคชของเว็บไซต์โดยใช้ปลั๊กอิน WP-Rocket (มันจะแสดงอะไรแบบนี้)

ก่อนอื่น คุณต้องเปิดใช้งาน “ แคชมือถือ ” และหากคุณกำลังตั้งค่าแคชสำหรับอีคอมเมิร์ซ ให้เปิดใช้งานการตั้งค่า “ แคชผู้ใช้ ที่เข้าสู่ระบบ ”

จากนั้นตั้งค่า " Cache Lifespan ” เป็น “ 10 hours “

เมื่อเราตั้งค่าแคชเสร็จแล้ว เราจะย้ายไปที่ “ File Optimization ” ซึ่งเราสามารถย่อ HTML, CSS, JS, Defer JS และ Combine CSS & JS ได้

การตั้งค่าเหล่านี้เป็นหนึ่งในการตั้งค่าที่สำคัญที่สุดของ WP-Rocket นอกจากนี้ยังช่วยลดคำขอ HTTP โดยรวม CSS & JS ของเว็บไซต์ของคุณ

เมื่อคุณคลิกที่ส่วน " การเพิ่มประสิทธิภาพไฟล์ " คุณจะพบตัวเลือกต่างๆ เพื่อลดขนาด HTML, CSS, JS และรวมไว้ในไฟล์จำนวนน้อยลง

และใน " การตั้งค่าพื้นฐาน" ให้เลือกทั้งสามตัวเลือกเพื่อ " ย่อ HTML" " รวมไฟล์แบบอักษรของ Google" " ลบสตริงข้อความค้นหา" จะไม่ส่งผลต่อเว็บไซต์ของคุณ แต่เมื่อคุณเปิดใช้งานการตั้งค่า " ไฟล์ CSS " และ " ไฟล์ JS " ตรวจสอบให้แน่ใจว่าจะไม่ทำลายไซต์ของคุณ

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

ในทำนองเดียวกัน ในส่วน JS Files ให้คลิกที่ "Remove JQuery Migrate" "Minify JS" "Combine JavaScript Files" "Load JavaScript Deferred" จากนั้นเปิดใช้งาน "Safe Mode for JQuery" ภายใต้ส่วน JS ที่เลื่อนออกไป

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

หลังจากการตั้งค่า File Optimization คุณจะได้รับการตั้งค่าเพื่อจัดการ Lazy Loading & Media คลิกที่ตัวเลือก สื่อ เพื่อทำการเปลี่ยนแปลงในการตั้งค่าสื่อ

ในตัวเลือกนี้ คุณจะได้รับตัวเลือกเพื่อเปิดใช้งานการโหลดแบบ Lazyload บนรูปภาพและวิดีโอ และคุณยังจะได้รับตัวเลือกในการปิดใช้งานการฝัง อีโมจิ และเปิดใช้งานความเข้ากันได้ของ WebP

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

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

หลังจากการตั้งค่า สื่อ คุณจะได้รับตัวเลือกเพื่อเปิดใช้งานการ โหลดล่วงหน้า บนเว็บไซต์ของคุณ

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

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

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

หลังจากนี้ คุณจะได้รับตัวเลือกในการจัดการการ เพิ่มประสิทธิภาพฐานข้อมูล & CDN แต่เราจะข้ามการตั้งค่านี้ที่นี่ และเราใช้ปลั๊กอิน WP-Optimize เพื่อเพิ่มประสิทธิภาพฐานข้อมูลอย่างมีประสิทธิภาพ และเราจะแสดงวิธีใช้งาน CDN ในภายหลังในส่วน CDN

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

ยังไม่เข้าใจการตั้งค่าการเต้นของหัวใจใช่หรือไม่ ฉันจะแบ่งปันตัวอย่างบางส่วนที่เกี่ยวข้องกับการตั้งค่าการเต้นของหัวใจ

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

และตอนนี้ สิ่งสุดท้ายแต่ไม่ใช่การตั้งค่าขั้นต่ำในปลั๊กอิน WP-Rocket คือ การตั้งค่าส่วนเสริม หากคุณกำลังใช้ Facebook Pixel และ Google Analytics บนเว็บไซต์ของคุณ มันจะช่วยคุณจัดเก็บไว้บนเซิร์ฟเวอร์ของคุณเพื่อปรับความเร็วไซต์ให้เหมาะสม

คุณสามารถเปิดใช้งานเพื่อปรับปรุงปัญหาการแคชของเบราว์เซอร์ Leverage บนเว็บไซต์ของคุณ

ส่วนเสริมที่ยอดเยี่ยมอีกตัวหนึ่งสามารถรวมถึงการรวมเว็บไซต์ของคุณกับ Cloudflare & Sucuri จากแดชบอร์ด WP-rocket จะช่วยคุณล้างและล้างแคชของผู้ให้บริการ CDN เหล่านี้ทุกครั้งที่คุณล้างข้อมูลบางอย่างในเว็บไซต์ของคุณ

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

ณ ตอนนี้ เราได้ดำเนินการเพิ่มประสิทธิภาพบางอย่างโดยใช้ปลั๊กอิน WP-Rocket

ตอนนี้ เราจะใช้ปลั๊กอินอื่นๆ เช่น WP-Optimize สำหรับการเพิ่มประสิทธิภาพฐานข้อมูลและ AssetCleanUp Pro สำหรับการเพิ่มประสิทธิภาพความเร็วเพิ่มเติม

3.2 เพิ่มประสิทธิภาพเว็บไซต์ของคุณด้วย Asset CleanUp Pro

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

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

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

ปลั๊กอินนี้สามารถช่วยคุณแก้ไขปัญหา Flash of Invisible Text (FOIT) บนเว็บไซต์ของคุณ และยังบล็อกการเข้าถึง ไฟล์ XML-RPC และทำสิ่งต่างๆ ได้อีกมาก

เนื่องจากเราได้เพิ่มประสิทธิภาพไซต์ของเราด้วย WP Rocket ดังนั้นการแก้ไข HTML, CSS & JS และการตั้งค่าอื่นๆ บางส่วนจึงถูกบล็อก และเราไม่สามารถเปิดใช้งานได้ (นั่นเป็นสิ่งที่ดี!)

เมื่อคุณเปิดใช้งานโหมดทดสอบแล้ว ให้คลิกที่ตัวเลือก Optimize CSS จากนั้นเลื่อนลงไปที่การตั้งค่า Cache Dynamic Loaded CSS แล้วเปิดใช้งาน

เมื่อเสร็จแล้วให้คลิกที่ปุ่ม บันทึก

ในทำนองเดียวกัน ในส่วน Optimize JS ให้เปิดใช้งาน Cache Dynamic Loaded JavaScript

ตัวเลือกเหล่านี้จะช่วยคุณแคชค่าไดนามิกของ CSS & JS แม้ว่าคุณจะไม่พบปัญหาเหล่านี้ใน WordPress หลังจากใช้ WP-Rocket

เมื่อคุณทำการตั้งค่าเหล่านี้เสร็จแล้ว ให้คลิกที่การตั้งค่า “ Site-Wide Common Unloads ” หลังจากตัวเลือก “ CDN ”

คุณจะพบตัวเลือกบางอย่างในการปิดใช้งาน Emojis , Embeds , Dashicons , Gutenberg CSS Block Library , JQuery Migrate และ ความคิดเห็นตอบกลับทั่วทั้งไซต์

แต่ ถ้าคุณไม่ได้ใช้ Gutenberg ซึ่งเป็นไอคอน Dashicons ในบล็อก คุณสามารถปิดการใช้งานได้

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

ตอนนี้ เราจะย้ายไปที่ส่วน " HTML Source Cleanup " ซึ่งเราสามารถลบองค์ประกอบที่ไม่ได้ใช้ออกจากส่วน <head>

จากการตั้งค่าเหล่านี้ เราสามารถลบองค์ประกอบที่ไม่ต้องการออกจากส่วน <head>

ไม่ต้องกังวล!

การลบองค์ประกอบเหล่านี้จะไม่ส่งผลต่อไซต์ของคุณเลย

ฉันได้ลบตัวเลือกหลายตัวออกจากการตั้งค่าเหล่านี้ รวมถึง ความคิดเห็น RSS, แท็กตัวสร้าง Meta, แท็กเวอร์ชัน WordPress, REST API & ลิงก์ RSD

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

และหากคุณใช้ Asset Cleanup Pro เวอร์ชันพรีเมียม คุณสามารถเปลี่ยนค่า “ Apply font-display CSS ” จาก “ Don't apply ” เป็น “ Swap” สิ่งนี้สามารถป้องกันเว็บไซต์ของคุณจากปัญหาข้อความที่มองไม่เห็นอย่างรวดเร็ว คุณสามารถคลิกที่นี่เพื่อทราบข้อมูลเพิ่มเติมเกี่ยวกับปัญหานี้

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

และหลังจากการตั้งค่า Local Font Optimization คุณจะเห็นตัวเลือกที่คล้ายกันใน “ Google Fonts” การตั้งค่า

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

ใช้ปลั๊กอินและเครื่องมือเฉพาะบนเพจที่จำเป็นโดยใช้ Asset CleanUp Pro

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

คุณลักษณะเหล่านี้อาจรวมถึงการโหลดปลั๊กอินในโพสต์เฉพาะของเว็บไซต์

พูดง่ายๆ ก็คือ สมมติว่าคุณกำลังใช้ “ แบบฟอร์มการติดต่อ 7 ” (ปลั๊กอินยอดนิยมสำหรับการสร้างแบบฟอร์มการติดต่อ) บนเว็บไซต์ของคุณ และใช้ใน “ หน้าติดต่อ ” เฉพาะบนเว็บไซต์ของคุณ

แต่ปัญหาหลักของปลั๊กอินนี้คือมันโหลดไฟล์ CSS & JS ในส่วน <head> ของเว็บไซต์ของคุณ ดังนั้นจึงเพิ่มคำขออีกสองครั้งในทุกหน้า (รวมถึงหน้าติดต่อ) – แต่เราต้องการให้โหลดเท่านั้น หน้าเฉพาะ และนั่นคือ หน้าติดต่อ

ตัวอย่างเช่น; หากคุณตรวจสอบ TheVPNCoupon ฉันใช้ปลั๊กอิน "Contact form 7" ในหน้า Contact และในโพสต์/หน้าอื่นๆ เช่น "Best Animated Movies" ฉันไม่ได้ใช้แบบฟอร์มติดต่อใดๆ แต่ยังคงโหลด CSS & JS ของปลั๊กอิน Contact Form 7 ในหน้าเหล่านี้ (คุณสามารถตรวจสอบในภาพด้านล่าง)

แต่คุณจะแก้ปัญหานี้ได้อย่างไร?

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

จากนั้น ยกเลิกการโหลดไฟล์ CSS & JS เฉพาะ จากตัวเลือกการล้างข้อมูลสินทรัพย์

ตัวอย่างเช่น; หากฉันกำลังสร้างหน้า “ ติดต่อเรา ” บนไซต์ของฉันโดยใช้ปลั๊กอิน “ แบบฟอร์มการติดต่อ 7 ” ฉันจะเผยแพร่หน้านั้นเมื่อพร้อมแล้ว จากนั้นอีกครั้ง ฉันจะคลิกที่ตัวเลือก “ แก้ไขหน้า ” .

เมื่อเราคลิกที่ แก้ไขหน้า จะแสดงไฟล์ทั้งหมดที่มีการร้องขอหรือโหลดเมื่อมีคนโหลดหน้าติดต่อ

ตอนนี้เราจะทำการเปลี่ยนแปลงการตั้งค่าและ ยกเลิกการโหลด CSS & JS ของแบบฟอร์มการติดต่อ 7 จากทุกหน้ายกเว้นหน้าการ ติดต่อ (คุณสามารถทำการตั้งค่าเดียวกันกับที่เราได้ทำในภาพด้านบน)

3.3 ปรับรูปภาพให้เหมาะสมบนเว็บไซต์

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

แม้ว่าคุณจะตรวจสอบโพสต์บนบล็อกของเราที่ TheGuideX

…รูปภาพหนักกว่าสิ่งอื่นใดบนเว็บไซต์ของฉัน

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

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

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

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

ในการเพิ่มประสิทธิภาพภาพของคุณอย่างเหมาะสม คุณต้องปฏิบัติตามห้าขั้นตอนเหล่านี้

ใช้รูปแบบรูปภาพที่ถูกต้อง

รูปภาพสองประเภทที่ใช้บ่อยที่สุดบนเว็บคือ JPG และ PNG

และพวกเขาไม่เหมือนกัน

ตัวอย่างภาพ JPEG

รายละเอียดรูปภาพ
รูปแบบภาพ	JPEG
ขนาดรูปภาพ	2.893kb
ขนาดภาพที่เหมาะสมที่สุด	607kb
การบีบอัดภาพ % อายุ	79%
คำอธิบายภาพ	ภาพที่ซับซ้อนพร้อมข้อมูลสีมากมาย

ตัวอย่าง PNG Image

รายละเอียดรูปภาพ
รูปแบบภาพ	PNG
ขนาดรูปภาพ	716kb
ขนาดภาพที่เหมาะสมที่สุด	173kb
การบีบอัดภาพ % อายุ	75%
คำอธิบายภาพ	รูปภาพที่เรียบง่ายพร้อมข้อมูลสีเล็กน้อย

ในตัวอย่างข้างต้น ฉันได้แสดงภาพ JPG หนึ่งภาพที่มีการบีบอัดภาพ 79% และภาพ PNG ที่มีระดับการบีบอัดใกล้เคียงกัน – แต่ขนาดที่บีบอัดของภาพ JPEG นั้นมากกว่าขนาดดั้งเดิมของภาพ PNG เนื่องจากความซับซ้อนและ ข้อมูลสีจำนวนมาก

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

3.4 การเพิ่มประสิทธิภาพฐานข้อมูลโดยใช้ WP-Optimize

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

บางครั้งเมื่อเราอัปเดตเนื้อหาของเว็บไซต์ของเราหรือเมื่อเราเขียนบางอย่างใน WordPress Editor การแก้ไขโพสต์ในฐานข้อมูลของเราโดยอัตโนมัติ

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

ในการดำเนินการดังกล่าว เราจะใช้ปลั๊กอิน WordPress ฟรีชื่อ “ WP-Optimize” ปลั๊กอินได้รับการพัฒนาโดย Team Updraft ซึ่งเป็นผู้พัฒนาปลั๊กอินที่น่าทึ่งด้วย ซึ่งฉันแนะนำให้ทำการสำรองข้อมูลไซต์ของคุณ

หากต้องการใช้ปลั๊กอินนี้ เพียงติดตั้งปลั๊กอิน "WP-Optimize" จาก repo ของ WordPress

เมื่อติดตั้งปลั๊กอินแล้ว ฉันขอแนะนำให้สำรองข้อมูลฐานข้อมูลของคุณแล้วไปที่ “ WP-Optimize ” > “ Database” และเมื่อคุณอยู่ในหน้าฐานข้อมูล ให้คลิกที่ " เรียกใช้การปรับให้เหมาะสมทั้งหมดที่เลือก " และจะเริ่มปรับฐานข้อมูลให้เหมาะสม

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

ไม่ต้องกังวล!

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

3.5 อย่าใช้ปลั๊กอินเหล่านี้บนเว็บไซต์ของคุณ

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

ปลั๊กอินเหล่านี้อาจรวมถึง

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

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

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

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

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

CDN หรือ Content Delivery Network คืออะไร?

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

แล้วจะช่วยเพิ่มประสิทธิภาพของเว็บไซต์ได้อย่างไร?

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

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

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

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

4.1 ใช้ Cloudflare บนเว็บไซต์

CDN แรกที่คนส่วนใหญ่ใช้บนเว็บไซต์คือ Cloudflare

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

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

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

ตอนนี้ ไปที่หน้า SSL/TLS และตั้งค่า SSL เป็น Flexible คุณยังสามารถตั้งค่า SSL เป็น Full – แต่ก่อนที่จะตั้งค่า SSL เป็น Full ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณใช้ SSL อยู่แล้ว

เมื่อคุณตั้งค่า SSL บนเว็บไซต์ของคุณแล้ว ให้ไปที่การตั้งค่า Edge Certificate ใน SSL และเปิดใช้งาน “ Always Use HTTPS, ” “ TLS 1.3 ” และเปิดใช้งาน “ Automatic HTTPS Rewrites”

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

เมื่อคุณอยู่ในหน้า การเพิ่มประสิทธิภาพ ในความเร็ว ให้เปิดใช้งาน Auto Minify สำหรับ JavaScript, CSS และ HTML

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

ต่อไปนี้คือคุณลักษณะบางประการของการใช้การบีบอัดข้อมูล Brotli บนเว็บไซต์ของคุณ

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

ตอนนี้เราย้ายไปที่การตั้งค่า แคช ใน Cloudflare จากนั้นตั้งค่า ระดับการแคช เป็น " มาตรฐาน " และ เบราว์เซอร์แคช TTL เป็น " 1 ปี " ตามลำดับ

เมื่อคุณเปิดใช้งานการตั้งค่าเหล่านี้แล้ว ให้เลื่อนลงไปที่ Always Online แล้วคลิกเพื่อเปิดใช้งาน ด้วยการตั้งค่าเหล่านี้ หากเซิร์ฟเวอร์ของคุณล่ม Cloudflare จะให้บริการหน้าคงที่ของเว็บไซต์ของคุณจากแคช

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการตั้งค่าที่แนะนำได้ที่นี่

ตอนนี้สิ่งที่สำคัญที่สุดคือการตั้งค่า กฎของหน้า บนบล็อกของเราโดยใช้ Cloudflare

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

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

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

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

กฎหน้าแรกสำหรับ Cloudflare

ดังนั้นกฎข้อแรกคือ

• URL : example.com/wp-login.php
• กฎ (เพื่อเลือกจากเมนูดร็อปดาวน์) : ระดับความปลอดภัย จากนั้นเลือก สูง หรือ ฉันอยู่ภายใต้การโจมตี

ตัวอย่าง;

การใช้กฎของหน้านี้

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

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

กฎหน้าที่สองสำหรับ Cloudflare

กฎข้อที่สองคือ

• URL : example.com/wp-admin/*
• กฎ (เพื่อเลือกจากเมนูดร็อปดาวน์) : ปิดการใช้งานประสิทธิภาพ

ตัวอย่าง;

การใช้กฎของหน้านี้

กฎของหน้านี้ปิดใช้งานประสิทธิภาพภายในโฟลเดอร์ wp-admin การปิดใช้งานจะเป็นการปิด Minification, Rocket Loader, Mirage และ Polish ที่ส่วนหลังของไซต์ของคุณ

กฎหน้าที่สามสำหรับ Cloudflare

กฎข้อที่สามคือ

• URL : example.com/wp-content/*
• กฎข้อที่ 1 : เบราว์เซอร์แคช TTL => ปี
• กฎข้อที่ 2 : ออนไลน์เสมอ => เปิด
• กฎข้อที่ 3 : ระดับแคช => แคชทุกอย่าง
• กฎข้อที่ 4 : Edge Cache TTL => หนึ่งเดือน

ตัวอย่าง;

การใช้กฎของหน้านี้

กฎหน้าที่สามทำงานภายในโฟลเดอร์ wp-content และแคชทุกอย่างภายในโฟลเดอร์ wp-content และ แคชของเบราว์เซอร์หมดอายุ TTL คือเวลาที่ Cloudflare สั่งให้เบราว์เซอร์ของผู้เยี่ยมชมแคชทรัพยากร

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

และ Edge Cache TTL คือการตั้งค่าที่ควบคุมระยะเวลาที่เซิร์ฟเวอร์ Cloudflare จะแคชทรัพยากรก่อนที่จะขอสำเนาใหม่

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

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

4.2 ใช้ ImageKit เพื่อการเพิ่มประสิทธิภาพภาพ

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

หนึ่งในสิ่งที่ดีที่สุดที่ฉันชอบมากที่สุดใน CDN นี้คือการรวมเข้ากับแอปพลิเคชันอย่าง WordPress อย่างรวดเร็ว มันเสนอราคาที่สมเหตุสมผล และฉันพบว่ามันเป็นตัวเลือกที่ดีกว่ามากในการเลือกการปรับภาพให้เหมาะสมยิ่งขึ้น

ImageKit เสนอราคาสามประเภทสำหรับ CDN และคุณสามารถเลือกได้ตามข้อกำหนดของเว็บไซต์ของคุณ (ฉันกำลังใช้ แผนบริการฟรีตลอดกาล บนเว็บไซต์ของฉัน)

เมื่อคุณเลือกราคาและลงทะเบียนกับแพลตฟอร์มแล้ว คุณจะต้องสร้าง จุดสิ้นสุด เมื่อคุณสร้าง End Point แล้ว คุณจะได้รับ CDN URL (ตรวจสอบในรูปภาพด้านล่าง)

อย่างที่คุณเห็น ฉันได้สร้าง CDN URL บนเว็บเซิร์ฟเวอร์ สำหรับชื่อโดเมน TheGuideX URL CDN ของฉันคือ https://ik.imagekit.io/tgx/

เมื่อได้ URL ของ ImageKit แล้ว เราต้องเปิดใช้งานบนเว็บไซต์ WordPress ของเรา ในการทำเช่นนั้น เราต้องเปิดการตั้งค่า WP Rocket CDN โดยไปที่ WordPress Admin Panel > Settings > WP Rocket > CDN

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

เมื่อคุณทำเสร็จแล้ว WP Rocket จะเขียน URL ของรูปภาพใหม่จาก https://theguidex.com ไปที่ https://ik.imagekit.io/tgx เท่านั้น ดังนั้นรูปภาพของคุณจะเริ่มโหลดจาก CDN URL แบบเรียลไทม์

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

และสำหรับการปรับแต่งเหล่านี้ เราเข้าสู่ระบบ ImageKit Dashboard อีกครั้ง จากนั้นคลิกที่ Image Settings

เมื่อคุณอยู่ในหน้า การตั้งค่ารูปภาพ คุณสามารถปรับแต่งการตั้งค่าตามความต้องการของคุณได้

อย่างที่คุณเห็น ฉันได้เปิดใช้งาน “ ใช้รูปแบบที่ดีที่สุดสำหรับการส่งรูปภาพ” และยังเปิดใช้งาน คุณภาพของรูปภาพ เป็น 70%

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

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

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

ดังนั้นการตั้งค่าเหล่านี้จึงเป็นการตั้งค่าที่สำคัญที่สุดสำหรับ ImageKit แต่คุณสามารถตั้งค่าเพิ่มเติมได้อีกมากจากหน้า การตั้งค่ารูปภาพ

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

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

4.3 ใช้ Amazon Cloudfront สำหรับ JS และ CSS

ดังที่คุณทราบ Amazon CloudFront เป็นหนึ่งใน CDN ที่ได้รับความนิยมมากที่สุดที่คุณเคยได้รับ และเว็บไซต์ที่ใหญ่ที่สุดในโลกพึ่งพาบริการ Amazon CloudFront CDN

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

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

เมื่อคุณลงชื่อเข้าใช้บัญชี Amazon AWS แล้ว ให้ค้นหา Cloudfront (คุณสามารถคลิกที่นี่เพื่อเยี่ยมชมหน้า Cloudfront ได้โดยตรง) จากนั้นคลิกที่ " สร้างการแจกจ่าย" จากนั้นเลือก คุณสมบัติเว็บ แล้วคลิก " เริ่มต้นใช้งาน"

ใน ชื่อโดเมนต้นทาง ให้ ป้อนชื่อโดเมนของคุณ ในกรณีนี้ ชื่อโดเมนของฉันคือ https://theguidex.com ดังนั้นฉันจึงเข้าสู่ theguidex.com (ไม่มี www หรือ https)

ถัดจากนั้น คุณต้องป้อน เส้นทางต้นทาง ป้อนเส้นทางไปยังโฟลเดอร์เนื้อหา wp ของคุณ จากนั้นเลือก TLSv1 ในโปรโตคอล SSL และเลือก " Match Viewer" ในโปรโตคอลต้นทาง

ตอนนี้เลื่อนลงไปที่ " การตั้งค่าการแจกจ่าย" จากนั้นเลือก " ใช้ตำแหน่งขอบทั้งหมด" ในระดับราคาและตั้งค่าเริ่มต้นของการตั้งค่า CloudFront SSL

คุณยังสามารถตั้งค่า เวอร์ชัน HTTP ที่รองรับ S และเปลี่ยนเป็น “HTTP/2, HTTP/1.1, HTTP/1.0” เมื่อคุณตั้งค่าเหล่านี้เสร็จแล้ว ให้คลิกที่ " สร้างการจัดจำหน่าย"

ไปที่หน้าการแจกจ่าย Cloudfront อีกครั้งและตรวจสอบว่าการแจกจ่ายของคุณเปิดใช้งานอย่างถูกต้องหรือไม่ (จะแสดงเป็นข้อความสีเขียวใต้ส่วนสถานะ)

เมื่อเปิดใช้งานแล้ว ให้คลิกที่ ID ของโดเมนต้นทางของคุณ

เมื่อคุณคลิกที่รหัสการแจกจ่าย ระบบจะเปิดหน้าที่คล้ายกันดังที่แสดงในภาพด้านบน คัดลอกชื่อโดเมน (แสดงในกล่องสีแดง) และวางลงในส่วน CDN ของ WP Rocket

เมื่อคุณวางชื่อโดเมนใน WP Rocket แล้วเลือกที่ สงวนไว้สำหรับ => “ Javascript/CSS ”

ตอนนี้ คุณได้ตั้งค่า AWS Cloudfront บนชื่อโดเมนของคุณเรียบร้อยแล้ว

การตั้งค่าเหล่านี้เพียงพอสำหรับเว็บไซต์ของคุณในการเพิ่มประสิทธิภาพใน Google PageSpeed ​​Insight, GTmetrix และ Pingdom ตอนนี้คุณสามารถเห็นการเติบโตอย่างรวดเร็วของประสิทธิภาพเว็บไซต์ของคุณ

อย่างไรก็ตาม หากคุณไม่แน่ใจว่าจะเพิ่มความเร็วของเว็บไซต์ได้อย่างไร หรือต้องการบริการเพิ่มประสิทธิภาพความเร็วของเว็บไซต์ สามารถติดต่อเราได้ที่ อีเมล [email protected]

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

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

ปรับแต่ง WordPress สำหรับความเร็ว (ขั้นสูง)

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

1. ใช้ PHP เวอร์ชันล่าสุด

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

เหตุใดจึงต้องใช้ PHP เวอร์ชันล่าสุด

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

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

2. จำกัดการแก้ไขโพสต์

บางครั้งเราลืมเพิ่มประสิทธิภาพฐานข้อมูลของเราโดยใช้ปลั๊กอินเช่น WP-Optimize และอย่างที่ฉันได้กล่าวไว้ข้างต้นว่าเมื่อฉันเขียนโพสต์นี้ มันได้บันทึกการแก้ไขมากกว่า 40 รายการในฐานข้อมูลของฉัน

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

เพิ่มโค้ดบรรทัดนี้ในไฟล์ wp-config.php ของคุณ

 กำหนด ( 'WP_POST_REVISIONS', 4 );

3. ปิดใช้งาน Hotlinking และ Leeching เนื้อหาของคุณ

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

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

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

 #disable hotlinking ของรูปภาพด้วยตัวเลือกรูปภาพต้องห้ามหรือกำหนดเอง
RewriteEngine บน
เขียนCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?theguidex.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L] 

หมายเหตุ: อย่าลืมเปลี่ยน theguidex.com ด้วยชื่อโดเมนของคุณเอง

คุณยังสามารถปิดใช้งานฟีด RSS ได้หากคุณไม่ได้ใช้งานบนเว็บไซต์ของคุณ

4. ใช้ไฟร์วอลล์เว็บไซต์ระดับ DNS

ปัจจัยที่สำคัญที่สุดอีกประการหนึ่งสำหรับการเพิ่มประสิทธิภาพความเร็วคือการใช้ไฟร์วอลล์เว็บไซต์ระดับ DNS หากคุณจำได้ ฉันได้สร้างกฎของหน้า Cloudflare บน theguidex.com/wp-login.php เพื่อเพิ่มความปลอดภัยให้กับหน้าเข้าสู่ระบบของฉัน

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

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

5. ลดการโทรฐานข้อมูล

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

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

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

6. แยกความคิดเห็นออกเป็นเพจ

หากคุณได้รับความคิดเห็นมากมายในบล็อกของคุณ ก่อนอื่นเลย ขอแสดงความยินดีด้วย! นั่นเป็นสัญญาณที่ดีในการสร้างผู้ชมจำนวนมาก

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

ในกรณีนี้ คุณสามารถแบ่งความคิดเห็นออกเป็นหน้าต่างๆ เพื่อเพิ่มความเร็วของหน้าเว็บของคุณ ขั้นตอนง่าย ๆ เพียงไปที่การ ตั้งค่า » การสนทนา และทำเครื่องหมายที่ช่องถัดจากตัวเลือก " แบ่งความคิดเห็นลงในหน้า s”

7. ตรวจสอบการบีบอัด GZIP

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

การบีบอัด GZIP เปิดใช้งานที่ฝั่งเซิร์ฟเวอร์ และช่วยในการบีบอัดขนาดของไฟล์ HTML, JS และ CSS จะใช้กับรูปภาพไม่ได้เนื่องจากถูกบีบอัดในลักษณะที่ต่างไปจากเดิม

คุณสามารถใช้เครื่องมือบางอย่าง เช่น ตรวจสอบการบีบอัด GZIP เพื่อตรวจสอบว่าเว็บไซต์ของคุณใช้ GZIP หรือไม่

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

 # บีบอัด HTML, CSS, JavaScript, Text, XML และแบบอักษร
  AddOutputFilterByType DEFLATE แอปพลิเคชัน/javascript
  AddOutputFilterByType DEFLATE แอปพลิเคชัน/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE แอปพลิเคชัน/x-font
  AddOutputFilterByType DEFLATE แอปพลิเคชัน/x-font-opentype
  AddOutputFilterByType DEFLATE แอปพลิเคชัน/x-font-otf
  AddOutputFilterByType DEFLATE แอปพลิเคชัน/x-font-truetype
  AddOutputFilterByType DEFLATE แอปพลิเคชัน/x-font-ttf
  AddOutputFilterByType DEFLATE แอปพลิเคชัน/x-javascript
  AddOutputFilterByType DEFLATE แอปพลิเคชัน/xhtml+xml
  AddOutputFilterByType DEFLATE แอปพลิเคชัน/xml
  AddOutputFilterByType DEFLATE แบบอักษร/opentype
  AddOutputFilterByType DEFLATE แบบอักษร/otf
  AddOutputFilterByType DEFLATE แบบอักษร/ttf
  AddOutputFilterByType DEFLATE ภาพ/svg+xml
  AddOutputFilterByType DEFLATE ภาพ/x-icon
  AddOutputFilterByType ลบข้อความ/css
  AddOutputFilterByType DEFLATE ข้อความ/html
  AddOutputFilterByType DEFLATE ข้อความ/javascript
  AddOutputFilterByType DEFLATE ข้อความ/ธรรมดา
  AddOutputFilterByType ลบข้อความ/xml

  # ลบบั๊กของเบราว์เซอร์ (จำเป็นสำหรับเบราว์เซอร์รุ่นเก่าจริงๆ เท่านั้น)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  ส่วนหัวต่อท้าย Vary User-Agent

8. ใช้การดึงข้อมูลล่วงหน้า

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

ในฐานะนักพัฒนา เรารู้จักแอปพลิเคชันต่างๆ ดีกว่าเบราว์เซอร์ ดังนั้นเราจึงใช้ข้อมูลนี้เพื่อแจ้งให้เบราว์เซอร์ทราบเกี่ยวกับทรัพยากรหลัก

ตัวอย่างเช่น,

 < link rel = " ดึงข้อมูลล่วงหน้า " href = " image.png " >

9. ลดการใช้แบบอักษรเว็บ

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

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

ตอนนี้ถึงตาคุณแล้ว

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

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

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

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