วิธีเพิ่มความเร็วให้กับไดเรกทอรีหรือเว็บไซต์ตลาดที่สร้างด้วย HivePress

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

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

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

เริ่มจากการติดตั้ง LiteSpeed ​​Cache ก่อน

การติดตั้งแคช LiteSpeed

ก่อนอื่น คุณต้องติดตั้งปลั๊กอิน LiteSpeed ​​Cache คุณสามารถทำได้โดยตรงจากแดชบอร์ด WordPress โดยไปที่ส่วน ปลั๊กอิน > เพิ่มใหม่ ค้นหาผ่านแถบค้นหาและดำเนินการติดตั้ง เมื่อการติดตั้งเสร็จสิ้น เพียงคลิกที่ปุ่ม "เปิดใช้งาน" เพื่อเปิดใช้งานปลั๊กอิน

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

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

ในการปรับการตั้งค่าแคชพื้นฐาน ให้ไปที่หน้า LiteSpeed ​​Cache > Cache หน้านี้มีส่วนต่างๆ มากมาย แต่เราจะพูดถึงการตั้งค่าที่สำคัญที่สุดเท่านั้น

การตั้งค่าแคช

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

แคชวัตถุ

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

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

แคชของเบราว์เซอร์

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

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

ขั้นตอนต่อไปของคุณคือไปที่ส่วน LiteSpeed ​​Cache > Page Optimization เพื่อปรับสไตล์ สคริปต์ และฟอนต์ให้เหมาะสม

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

มาเริ่มกันที่ส่วน การตั้งค่า CSS ที่นี่เราแนะนำให้เปิดการตั้งค่า CSS Minify และ CSS Combine

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

การเพิ่มประสิทธิภาพแบบอักษร

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

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

JS Optimization

ตอนนี้ ไปที่ส่วน การตั้งค่า JS เพื่อเพิ่มประสิทธิภาพไฟล์ JavaScript ที่นี่เราแนะนำให้ทำตามขั้นตอนเดียวกับการตั้งค่า CSS เพียงเปิดใช้งานตัวเลือก JS Minify และ JS Combine เพื่อให้ไฟล์ JS ถูกย่อและรวมเป็นไฟล์เดียว

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

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

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

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

ในส่วน LiteSpeed ​​Cache > Image Optimization > Settings คุณสามารถแปลงรูปภาพเว็บไซต์ของคุณเป็นรูปแบบ WebP ได้โดยเปิดใช้งานการตั้งค่า Create WebP Versions และ Image WebP Replacement

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

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

ไปที่ส่วน LiteSpeed ​​Cache > Page Optimization > Media Settings และเปิดใช้งานตัวเลือก Lazy Load Iframes

ห่อ

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

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

นอกจากนี้ โปรดตรวจสอบบทความต่อไปนี้:

• ปลั๊กอินไดเรกทอรี WordPress ที่ดีที่สุด
• ธีมไดเรกทอรี WordPress ยอดนิยม
• ข้อผิดพลาดเมื่อสร้างเว็บไซต์รายชื่อ WordPress