วิธีวัดและปรับปรุงความเร็วไซต์อีคอมเมิร์ซ (11 เคล็ดลับ) และเหตุใดจึงเป็นสิ่งสำคัญสำหรับการเพิ่มประสิทธิภาพอัตราการแปลง

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

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

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

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

นี่คือสิ่งที่คุณสามารถหาได้ในโพสต์นี้:

ความเร็วไซต์คืออะไร?
เหตุใดความเร็วไซต์จึงมีความสำคัญ
วิธีตรวจสอบความเร็วไซต์ปัจจุบันของคุณ: อธิบายผลลัพธ์ของข้อมูลเชิงลึกของ Google PageSpeed
วิธีสำรองข้อมูลยอดนิยมสำหรับการเพิ่มความเร็วเพจ
1. ตรวจสอบและปรับปรุงความเร็วของผู้ให้บริการโฮสติ้งของคุณ
2. ปรับรูปภาพให้เหมาะสม
3. เปิดใช้งานการแคชเบราว์เซอร์
4. ลดขนาด HTML, JavaScript และ CSS
5. ใช้ประโยชน์จาก AMP (Accelerated Mobile Pages) และ PWAs (Progressive Web Apps)
6. ฆ่าปลั๊กอิน WordPress ที่มีประสิทธิภาพต่ำ
7. ใช้เครือข่ายการกระจายเนื้อหา
8. เพิ่มประสิทธิภาพเวลาตอบสนองของเซิร์ฟเวอร์ของคุณ
9. ใช้การบีบอัดทุกที่ที่เป็นไปได้
10. โหลดไฟล์แบบอะซิงโครนัสทุกที่ที่เป็นไปได้
11. ลดการเปลี่ยนเส้นทาง
เครื่องมือที่ช่วยเร่งความเร็วเว็บไซต์ของคุณ
พร้อมที่จะปรับปรุงความเร็วไซต์อีคอมเมิร์ซของคุณหรือไม่

ฟังดูเข้าท่า? มาขุดกันเถอะ!

ความเร็วไซต์คืออะไร?

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

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

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

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

เหตุใดความเร็วไซต์จึงมีความสำคัญ

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

เวลาในการโหลดช้ามีผลโดยตรงต่อผลกำไรของคุณ แหล่งที่มา

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

ความเร็วไซต์มีผลต่ออันดับการค้นหา

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

ตามที่ Edwin Toonen เขียนให้ Yoast กล่าวว่า: "คุณไม่จำเป็นต้องฟังอย่างระมัดระวังเพราะคน SEO ตะโกนจากหลังคา: ความเร็วของไซต์คือทุกอย่าง ไม่มีวันใดผ่านไปโดยไม่มีบทความใหม่ เอกสารไวท์เปเปอร์ ตัวแทนของ Google หรือผู้เชี่ยวชาญ SEO บอกเราว่าการปรับความเร็วให้เหมาะสมเป็นหนึ่งในสิ่งที่สำคัญที่สุดที่คุณสามารถทำได้ในตอนนี้ และถูกต้องแน่นอน!”

ความเร็วไซต์ส่งผลต่ออัตราตีกลับ

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

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

ความเร็วไซต์ส่งผลต่อมูลค่าของลูกค้า

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

การลดความเร็วไซต์ของคุณให้ต่ำกว่าหนึ่งเปอร์เซ็นต์สามารถเพิ่มมูลค่าต่อการดูหน้าเว็บได้ถึง 100% แหล่งที่มา

การที่เว็บไซต์มีความเร็วต่ำจะส่งผลด้านลบต่อจิตใจ

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

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

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

วิธีตรวจสอบความเร็วไซต์ปัจจุบันของคุณ: อธิบายผลลัพธ์ของข้อมูลเชิงลึกของ Google PageSpeed

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

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

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

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

• ข้อมูลภาคสนาม – ข้อมูล นี้อิงตามข้อมูลในอดีตและได้มาจากกลุ่มตัวอย่างผู้ใช้ที่ Google ติดตาม มีประโยชน์เพราะช่วยให้คุณเห็นปัญหาที่คงอยู่ที่อาจเกิดขึ้นในอดีต ไม่ใช่แค่ในกรณีการทดสอบเฉพาะกรณีเดียว แถบหลากสีด้านล่างแสดงให้คุณเห็นว่าหน้าเว็บของคุณเป็นอย่างไรเมื่อเปรียบเทียบกับหน้าอื่นๆ ในรายงานประสบการณ์ผู้ใช้ Chrome (หน้าทั้งหมดที่ Google เก็บข้อมูลไว้)
• Origin Summary (ไม่แสดงโดยอัตโนมัติ) – ข้อมูลสรุปต้นทางซึ่งคุณต้องคลิกเพื่อขยาย จะแสดงข้อมูลเฉลี่ยสำหรับไซต์ของคุณโดยรวม (ไม่ใช่แต่ละหน้า) “Origin” หมายถึง URL พื้นฐาน
• ข้อมูลห้องปฏิบัติการ – นี่คือผลลัพธ์ทันทีของหน้าเว็บของคุณโดยพิจารณาจากประสิทธิภาพเมื่อคุณคลิก “วิเคราะห์” สิ่งเหล่านี้เป็นผลลัพท์ปัจจุบันที่ดึงมาจากประสิทธิภาพชั่วขณะ โดยไม่มีข้อมูลอื่นนำมาพิจารณา คะแนนความเร็วไซต์โดยรวมของคุณที่ด้านบนสุดของหน้าจะขึ้นอยู่กับข้อมูลในห้องปฏิบัติการนี้

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

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

4. ในแต่ละส่วน มีการวัดความเร็วคีย์สองแบบ (FCP และ FID) พร้อมกับการวัด 5 แบบแยกกันในส่วน "ข้อมูลห้องปฏิบัติการ":

• First Contentful Paint FCP – ในบริบทของประสิทธิภาพของเว็บ คำว่า "first paint" หมายถึงองค์ประกอบเว็บแรกที่ผู้ใช้เบราว์เซอร์มองเห็นได้ “First Contentful Paint” คือเมื่อเนื้อหาที่เชื่อมโยงกันชิ้นแรกปรากฏขึ้น คำจำกัดความของ "เนื้อหา" ในที่นี้คือสิ่งใดก็ตามที่กำหนดอย่างไม่ต่อเนื่องในโมเดลวัตถุของเอกสาร โดยพื้นฐานแล้วจะเป็นองค์ประกอบเดี่ยวและองค์ประกอบที่แยกจากกันซึ่งประกอบขึ้นเป็นส่วนหนึ่งของลำดับชั้นของหน้า เช่น รูปภาพหรือบล็อกข้อความ เนื้อหาบางส่วนคือสิ่งที่ผู้ใช้เว็บสามารถ "บริโภค" ได้ ด้วยวิธีนี้ มันจึงแตกต่างจาก "การลงสีครั้งแรก" ซึ่งอาจเป็นเรื่องง่ายๆ เช่น การเปลี่ยนพื้นหลังหรือพิกเซลเดียว
• First Input Delay (FID) – First Input Delay คือการวัดว่าเว็บไซต์ของคุณตอบสนองได้เร็วเพียงใด เมื่อผู้เยี่ยมชมโต้ตอบกับไซต์ของคุณ โดยคลิกที่ลิงก์ ขยายรูปภาพ เลือกตัวเลือกผลิตภัณฑ์ ฯลฯ อาจต้องใช้เวลามากขึ้นในการได้รับการตอบกลับเนื่องจากกระบวนการของเบราว์เซอร์ในเบื้องหลังที่ "ปิดใช้งาน" องค์ประกอบของไซต์แบบโต้ตอบได้อย่างมีประสิทธิภาพ FID อิงตามข้อมูลผู้ใช้จริงที่ Google รวบรวม ดังนั้นจึงไม่รวมอยู่ในข้อมูลห้องปฏิบัติการ
• First Meaningful Paint – โดยพื้นฐานแล้วจะเป็นการวัดว่าผู้ดูสามารถเริ่มบริโภคเนื้อหาได้เมื่อใด การลงสีที่มีความหมายครั้งแรกเกิดขึ้นเมื่อโหลดเนื้อหาครึ่งหน้าบนและแบบอักษรเว็บหลักแล้ว Google ระบุว่าเป็นตัวชี้วัดประสบการณ์ผู้ใช้หลักสำหรับความเร็วไซต์
• ดัชนีความเร็ว – เวลาที่หน้าเว็บของคุณใช้ในการโหลดอย่างสมบูรณ์ในแง่ของภาพ ขึ้นอยู่กับเวลาที่การแสดงผลของเบราว์เซอร์หยุดการเปลี่ยนแปลงในการเปรียบเทียบแบบเฟรมต่อเฟรม
• First CPU Idle – CPU idle ตัวแรกหมายถึงเวลาที่เว็บไซต์มีการโต้ตอบอย่างน้อยในระดับหนึ่ง ไม่ใช่องค์ประกอบเชิงโต้ตอบทั้งหมดที่อาจพร้อมใช้งาน แต่มีหลายอย่างที่จะพร้อม
• เวลาในการโต้ตอบ – เวลาที่ไซต์ใช้ในการโหลดอย่างสมบูรณ์และโต้ตอบได้อย่างสมบูรณ์ พร้อมที่จะตอบสนองต่อการกระทำของผู้เยี่ยมชม
• Max Potential First Input Delay – ตัวเลขที่คาดการณ์สำหรับ FID สูงสุดที่เป็นไปได้หากจะทำการทดสอบ ตัวเลขนี้อิงจากข้อมูลห้องปฏิบัติการ ไม่ใช่ข้อมูลจริง

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

มาดูตัวอย่างบางส่วนจากภาพหน้าจอด้านล่าง (เราจะดูรายละเอียดเหล่านี้ส่วนใหญ่โดยละเอียดในส่วนด้านล่าง):

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

• ลดขนาด JavaScript – ย่อเป็นกระบวนการสำหรับการบีบอัดไฟล์ที่มีโค้ด (HTML, CSS, JavaScript ฯลฯ) เพื่อให้สามารถถ่ายโอนจากเซิร์ฟเวอร์ไปยังเบราว์เซอร์ได้รวดเร็วยิ่งขึ้น
• เลื่อนเวลารูปภาพ นอกหน้าจอ – การเลื่อนเวลารูปภาพนอกหน้าจอเกี่ยวข้องกับการหน่วงเวลาโหลดรูปภาพที่ไม่ได้อยู่ครึ่งหน้าบน ลดขนาดของคำขอเซิร์ฟเวอร์แรก และให้เวลาโหลดเริ่มต้นโดยรวมเร็วขึ้น เมื่อโหลดรูปภาพครึ่งหน้าบนทั้งหมดแล้ว รูปภาพที่เหลือของหน้าจะแสดงผล
• ลบ CSS ที่ไม่ได้ใช้ – เป็นเรื่องปกติสำหรับ .css สไตล์ชีตที่จะรวมโค้ดฟุ่มเฟือยจำนวนมาก การลบรหัสนี้สามารถลดขนาดไฟล์ CSS การรวม CSS ทั้งหมดในไฟล์เดียวสามารถลดระยะเวลาที่เบราว์เซอร์ใช้ในการตีความข้อมูลได้
• แสดงรูปภาพในรูปแบบเจเนอเรชันถัดไป – รูปแบบ รูปภาพ เช่น JPEG 2000, JPEG XR และ WebP (รวมถึงรูปแบบอื่นๆ) ให้การบีบอัดได้ดีกว่ารูปแบบอื่นโดยไม่ลดทอนคุณภาพ
• ลดเวลาตอบสนองของเซิร์ฟเวอร์ (TTFB) – เวลาตอบสนองของเซิร์ฟเวอร์สามารถเพิ่มความเร็วได้หลายวิธี รวมถึงการเพิ่มประสิทธิภาพ CMS ของคุณและการเลือกผู้ให้บริการโฮสติ้งที่เร็วขึ้น
• เปิดใช้งานการบีบอัดข้อความ – เมื่อคุณเปิดใช้งานฟังก์ชัน gzip บนเซิร์ฟเวอร์ของคุณ ข้อความในไฟล์จะถูกบีบอัด ลดขนาดและเร่งการถ่ายโอน ไฟล์ที่บีบอัดสามารถประมวลผลได้โดยเบราว์เซอร์

6. สุดท้าย ใต้ส่วน "โอกาส" คือส่วน "การวินิจฉัย" และผ่านการตรวจสอบ สิ่งเหล่านี้ครอบคลุม (ตามลำดับ) โอกาสในการเร่งความเร็วเพิ่มเติมตามแนวทางปฏิบัติที่ดีที่สุดและเกณฑ์ของเว็บที่คุณผ่าน

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

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

ต้องการข้อมูลเชิงลึกเพิ่มเติมเช่นนี้หรือไม่

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

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

โปรดเลือกช่องทำเครื่องหมายนี้เพื่อดำเนินการต่อ

วู้ฮู! คุณเพิ่งสมัคร ตรวจสอบกล่องจดหมายของคุณเพื่อยืนยันการสมัคร

แล้วเครื่องมืออื่นล่ะ?

สำหรับคุณลักษณะทั้งหมด PageSpeed ​​Insights ไม่ได้ไร้ที่ติ

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

ใช้ Pingdom และ GTmetrix ซึ่งทั้งสองอย่างนี้อนุญาตให้คุณตั้งค่าตำแหน่งของเซิร์ฟเวอร์ทดสอบ เพื่อเพิ่มรูปภาพที่ PageSpeed ​​Insights ให้มา

วิธีสำรองข้อมูลยอดนิยมสำหรับการเพิ่มความเร็วเพจ

ตกลง เรามาเจาะลึกเคล็ดลับที่เป็นประโยชน์กัน

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

1. ตรวจสอบและปรับปรุงความเร็วของผู้ให้บริการโฮสติ้งของคุณ

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

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

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

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

นี่คือข้อแตกต่างที่สำคัญระหว่างแผนโฮสติ้งในแง่ของความเร็ว:

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

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

ต่อไปนี้คือผู้ให้บริการที่ได้รับคะแนนสูงสุดบางส่วนสำหรับผู้ค้าปลีกออนไลน์:

SiteGround – SiteGround มีแผนเฉพาะจำนวนมากสำหรับแพลตฟอร์มอีคอมเมิร์ซ รวมถึง Magento, WooCommerce และ PrestaShop

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

InMotion Hosting – InMotion เป็นที่นิยมอย่างมากกับผู้ค้าปลีกอีคอมเมิร์ซและเป็นหนึ่งในตัวเลือกราคาที่ดีที่สุด

Rackspace – Rackspace เป็นหนึ่งในโซลูชันชั้นนำสำหรับอีคอมเมิร์ซระดับองค์กร โดยนำเสนอโซลูชันเฉพาะและโฮสต์บนคลาวด์ที่หลากหลาย โครงสร้างพื้นฐานด้านการบริการลูกค้าและความปลอดภัยเป็นหนึ่งในสิ่งที่ดีที่สุดในอุตสาหกรรม

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

2. ปรับรูปภาพให้เหมาะสม

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

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

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

ต่อไปนี้คือข้อมูลสรุปโดยย่อของรูปแบบที่พบบ่อยที่สุดและเมื่อใดควรใช้รูปแบบเหล่านี้:

• JPEG (Joint Photography Expert Group) – JPEG น่าจะเป็นรูปแบบที่ใช้กันอย่างแพร่หลายมากที่สุดสำหรับภาพถ่ายคุณภาพสูงและภาพที่มีรายละเอียดสูง ประโยชน์หลักคือภาพ JPEG แสดงผลได้ดีในขณะที่ให้การบีบอัดในระดับสูง สำหรับภาพถ่าย JPEG เป็นตัวเลือกที่ต้องการ คุณควรพิจารณาใช้รูปแบบ JPEG ที่ใหม่กว่า เช่น JPEG 2000 และ JPEG XR ซึ่งสามารถให้การบีบอัดในระดับที่สูงขึ้น
• PNG (กราฟิกเครือข่ายแบบพกพา) – ในรูปแบบ PNG จะอยู่ระหว่าง JPEG และ GIF มันสร้างสมดุลที่ดีระหว่างคุณภาพ รองรับสีและขนาดที่หลากหลาย PNG มักจะมีขนาดเล็กกว่า JPEG แต่ไม่มีความจุเท่ากันในแง่ของสีและรายละเอียด มีความกังวลเกี่ยวกับความเข้ากันได้กับเบราว์เซอร์รุ่นเก่า แต่ตอนนี้ส่วนใหญ่มีความซ้ำซ้อน
• GIF (รูปแบบการแลกเปลี่ยนกราฟิก) – GIF (รูปแบบที่เก่าแก่ที่สุดรูปแบบหนึ่งบนเว็บ) ทำงานได้ดีที่สุดสำหรับภาพที่มีจานสีที่จำกัด เช่น โลโก้ หากคุณต้องการอัปโหลดภาพที่ประกอบด้วยข้อความเป็นหลัก GIF คือรูปแบบที่เลือกใช้ ประโยชน์หลักของไฟล์ GIF คือไฟล์มักจะมีขนาดค่อนข้างเล็ก เนื่องจากความจุของสีมีจำกัด จึงไม่ควรใช้ GIF สำหรับรูปภาพหรือภาพถ่ายที่สมบูรณ์ คุณยังสามารถใช้ GIF สำหรับแอนิเมชั่นพื้นฐานได้อีกด้วย อย่าใช้ GIF สำหรับสื่อสมบูรณ์ การใช้เนื้อหาที่โฮสต์โดยบุคคลที่สาม (เช่น YouTube) จะเป็นประโยชน์ต่อความเร็วของไซต์มากกว่า

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

• อย่าทำให้รูปภาพใหญ่เกินความจำเป็น – นักออกแบบและนักพัฒนาหลายคนทำผิดพลาดในการอัปโหลดรูปภาพขนาดใหญ่ (มักจะเกินหลายพันพิกเซล) ไปยังเซิร์ฟเวอร์ของตน แล้วปรับขนาดโดยใช้โค้ดเพจ นี่เป็นความผิดพลาดครั้งใหญ่ การส่งรูปภาพที่มีความกว้าง 5,000 พิกเซลไปยังเบราว์เซอร์ของผู้เยี่ยมชมของคุณนั้นไม่มีประโยชน์เลย หากรูปภาพนั้นจะแสดงที่ 1,000 พิกเซลบนหน้าผลิตภัณฑ์เท่านั้น บ่อยครั้ง รูปภาพจะต้องมีขนาดค่อนข้างใหญ่เพื่อเปิดใช้งานฟังก์ชันซูม แต่ให้มีขนาดเล็กที่สุด ปรับขนาดภาพก่อนที่คุณจะอัปโหลด
• บีบอัดรูปภาพก่อนอัปโหลด – การ บีบอัดจะลบข้อมูลที่ไม่จำเป็นทั้งหมดออกจากไฟล์รูปภาพของคุณ ซึ่งจะทำให้ขนาดไฟล์มีขนาดเล็กลง รายละเอียดที่ "มองไม่เห็น" บางอย่าง เช่น เวลาที่ถ่ายภาพ อาจถูกฝังอยู่ในไฟล์ เครื่องมือต่างๆ เช่น TinyPNG, JPEG Optimizer และปลั๊กอิน เช่น WPSmush สามารถใช้เพื่อทำงานนี้ได้อย่างรวดเร็ว แผนชำระเงินทั้งหมดที่จำเป็นสำหรับการใช้งานหนักนั้นสมเหตุสมผลมาก
• อย่าใช้ภาพที่ไม่จำเป็นบนหน้าเว็บ – ทุกภาพมีภาระเวลาในการโหลดไซต์ของคุณอย่างเต็มที่ ดังนั้นอย่าใช้ภาพมากเกินความจำเป็น มันง่ายที่จะตกหลุมพรางของการใส่รูปภาพเพียงเพื่อประโยชน์ของมัน ยิงผลิตภัณฑ์อีกหนึ่งครั้งจะไม่เจ็บใช่ไหม? แต่แนวทางปฏิบัติที่ดีในการกำจัดภาพที่ไม่จำเป็นเมื่อสร้างหน้าผลิตภัณฑ์ (ดูเทมเพลตหน้าผลิตภัณฑ์ที่ยอดเยี่ยม) คุณอาจต้องการใช้ประโยชน์จาก "การโหลดแบบขี้เกียจ" เพื่อแสดงภาพครึ่งหน้าบนก่อน (แทนที่จะแสดงภาพทั้งหมดในหน้าพร้อมกัน) รูปภาพที่คุณตั้งค่าเป็น "Lazy Load" ในโค้ด HTML จะโหลดหลังจากที่ผู้เข้าชมมองเห็นข้อมูลที่ด้านบนของหน้าเท่านั้น หรือเมื่อผู้เข้าชมเริ่มเลื่อน

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

3. เปิดใช้งานการแคชเบราว์เซอร์

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

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

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

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

4. ลดขนาด HTML, JavaScript และ CSS

เวอร์ชันสั้น: ใช้ CDN (เครือข่ายการจัดส่งเนื้อหา) เพื่อเปิดใช้งานการลดขนาดอัตโนมัติและลดขนาดไฟล์ของคุณได้ถึง 60% การตั้งค่า CDN เป็นกระบวนการที่ค่อนข้างตรงไปตรงมาซึ่งเกิดขึ้นได้จากบริการที่มีชื่อเสียง เช่น CloudFlare และ Amazon AWS

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

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

การลดขนาดสามารถลดขนาดไฟล์เว็บได้อย่างมาก แหล่งที่มา

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

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

5. ใช้ประโยชน์จาก AMP (Accelerated Mobile Pages) และ PWAs (Progressive Web Apps)

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

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

AMP และ PWA คืออะไรกันแน่? นี่คือภาพรวมโดยย่อ:

• Accelerated Mobile Page (AMP) – AMP เป็นเฟรมเวิร์กการพัฒนา – ประกอบด้วยชุดย่อย HTML (AMP HTML) เฟรมเวิร์ก JavaScript และ CDN (เครือข่ายการจัดส่งเนื้อหา) ที่เป็นตัวเลือก ซึ่ง Google สร้างขึ้นเพื่อให้นักพัฒนาซอฟต์แวร์ส่งสายฟ้าแลบ หน้าเว็บบนมือถือที่รวดเร็วโดยไม่ต้องลงทุนทรัพยากรจำนวนมากในการเพิ่มประสิทธิภาพความเร็ว แม้ว่า AMP จะได้รับการพัฒนาในขั้นต้นสำหรับไซต์ที่มีเนื้อหาเป็นพื้นฐาน (คุณสามารถเห็นลูกศรฟ้าผ่าเล็กๆ ในผลการค้นหาสำหรับหน้าข่าวจำนวนมาก) แต่ก็ได้รับความนิยมเพิ่มขึ้นเรื่อยๆ ในหมู่ผู้ค้าปลีกออนไลน์
• Progressive Web App (PWA) – PWA เหมือนกับแอปบนอุปกรณ์เคลื่อนที่ที่เข้าถึงผ่านเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ พวกเขาทำซ้ำคุณสมบัติหลายอย่างของแอพ เช่น การเข้าถึงผ่านไอคอนบนหน้าจอหลักของมือถือและการแจ้งเตือนแบบพุช แต่ไม่จำเป็นต้องสร้างซอฟต์แวร์ที่กำหนดเองหรือให้ผู้ใช้ติดตั้งอะไรก็ได้บนโทรศัพท์

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

6. ฆ่าปลั๊กอิน WordPress ที่มีประสิทธิภาพต่ำ

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

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

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

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

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

7. ใช้เครือข่ายการกระจายเนื้อหา

เวอร์ชันสั้น: CDN (เครือข่ายการกระจายเนื้อหา/การส่งเนื้อหา) มีราคาไม่แพงในการสมัครและใช้งานง่าย

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

CDN บรรเทาผลกระทบด้านลบของการถ่ายโอนข้อมูลในระยะทางทางภูมิศาสตร์ที่กว้าง แหล่งที่มา

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

การใช้ CDN ยังช่วยให้คุณควบคุมต้นทุนแบนด์วิดท์ได้ (หากคุณจ่ายเงิน) และจัดการกับปริมาณการใช้งานที่เพิ่มขึ้น

8. เพิ่มประสิทธิภาพเวลาตอบสนองของเซิร์ฟเวอร์ของคุณ

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

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

คุณสามารถตรวจสอบเวลาเป็นไบต์แรกได้ด้วย WebPageTest มันควรจะต่ำกว่า 200 มิลลิวินาที

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

เป็นพื้นที่ที่สองที่เรากังวลที่นี่ Optimizing server speed is a massive topic that's well beyond the scope of this article, but there are a handful of optimization tweaks that can have a significant effect on server processing speed.

Here's a quick checklist for ensuring good server response time:

• Configure your CMS (content management system) for optimal speed – Your CMS is responsible for the management and handling of your content. Check if there are any settings specific to your CMS that can be disabled or enabled to boost response time. On WordPress, for example, you should ensure you have the latest PHP version installed and limit any processes that consume CPU (server resources).
• Clean up your database – Whenever a browser requests a dynamic page, your server needs to query a database to retrieve information and “build” that page. Poorly-optimized databases can cause this process to take longer than it should. Server-side caching, which stores a copy of your pages without the need to consult a database, can be a great way to overcome this problem.
• Consider a premium DNS (domain name system) lookup service – The DNS turns your domain name into an IP address. Your address is stored with your DNS provider, who needs to be consulted to provide the exact IP that maps to your domain. Opting for a DNS provider with faster lookup functionality can shave milliseconds off your load time. And every millisecond counts. Use this service to check your DNS speed.

Remember to evaluate all of these changes in the context of your TTFB. Generally speaking, server-side changes can be quite technical, so it's good practice to hire an experienced optimization developer to ensure that no mistakes are made. It's also usually easier to implement server changes with a dedicated hosting package, as access to certain functionality may be limited on shared and VPS hosting.

9. Use Compression Wherever Possible

Short Version: Gzip enables you to compress files before they're sent to a visitor's browser. It's an easy server-side function to turn on and can cut file sizes significantly (leading to faster transfer).

Along with images, you can also compress other files to increase transfer speed. You can use gzip functionality to compress CSS, HTML, and JavaScript files that are larger than 150 bytes.

So how exactly does it work?

Whenever your server sends files to a visitor's browser, the size of these files make a big difference to the amount of time it takes to process them. Gzip is a software application that compresses your files (by up to 70%) before they are sent. Because the files are smaller, they are delivered to the browser much more quickly.

To take advantage of gzip, you simply need to enable it on your server, either by adding a few lines of code to your .htaccess file or through the control panel (for IIS servers).

10. Load Files Asynchronously Wherever Possible

Short Version: Asynchronous loading is far faster than synchronous loading. Enable it through your CMS (content management system).

Synchronous loading occurs when files load consecutively, one after the other. Asynchronous loading is when files load together.

During an asynchronous load, multiple files are loaded at the same time. แหล่งที่มา
Because browsers process files in a hierarchical fashion – loading the first page elements first – synchronous loading can significantly increase the amount of time it takes to achieve full page load. Asynchronous loading allows the browser to load multiple elements in conjunction without waiting for the previous load to complete.

It should be possible to change settings that determine synchronous vs asynchronous loading through your CMS software. If you are using WordPress, there are several plugins you can use.

11. Reduce Redirects

Short Version: By eliminating redirects, you can cut seconds off your site speed. Remember that each redirect requires a separate request to be sent to the server.

Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list.

Whenever one of your pages redirects to another URL, your visitor has to wait for the server to respond all over again.

Often, numerous redirects occur in response to a single request, especially when desktop pages redirect to mobile pages. All of this adds up to make overall page load time much slower.

Use a tool like Screaming Frog to check for any redirects. Then go through all the flagged pages and see if you can get rid of any.

Don't worry too much about loss of search rankings (one of the main reasons webmasters keep redirects) as your page will likely replace the redirect link in the results sooner rather than later.

In particular, be very wary of “redirect chains”. These are sequences of redirects between more than two pages. If you have to keep redirects, break up the chain by ensuring that each individual redirect points to the main page.

Tools to Help Boost Your Site Speed

Here's a quick rundown of the tools you need to help with implementation:

Google PageSpeed Insights – Already covered in detail above, this tool is hands-down the best for testing and optimizing your site.

Pingdom and GTmetrix – Both of these page speed tools offer additional information to Google PageSpeed insights, in particular geographical response times. They are useful for building a complete picture of your site speed problems.

WebPageTest – A simple tool to test your TTFB.

DNSPerf – A good tool for testing the speed of your DNS provider.

Google Test My Site – You can also use Google Test My Site to generate a broader report about your mobile performance, which includes information about site speed. It's a good complementary tool for use in conjunction with PageSpeed Insights.

Google Analytics – At all stages of the optimization process, you should be linking changes to specific and measurable outcomes. Google Analytics will enable you to track how traffic, engagement and conversions are affected by speed optimization.

Image Compression Tools – For image editing, you should aim to keep as much control as possible. Photoshop and GIMP (which is free) are two feature-rich image-editing apps that will allow you to compress images exactly as you wish.

CSS Sprite Tools – There are many free tools for creating CSS sprites (compiled images) from Toptal, Spritegen, and Sprite Cow.

Content Delivery Networks (CDNs) – There are many fantastic CDNs that come with a range of additional features. Check out CloudFlare, Amazon AWS, and Google Cloud CDN.

Minify Tools – Minification is best done through a CDN, which automates the entire process. Remember, if you do decide to minify your code manually, you will need to maintain two separate development areas. Try out Minifier and JSCompress.

Ready to improve your ecommerce site speed?

Improving your site's speed is a big job. But it's worth it. A fast-loading site provides your customers and potential customers with a positive experience that is likely to keep them returning to purchase again and again.

But remember one crucial point. It's vital to take a consistent approach. You should be monitoring and optimizing regularly. For optimal results, speed testing and optimization need to be conducted regularly (as with most things when it comes to ecommerce optimization).

Ideally, site speed testing should be built into your broader optimization strategy, conducted on all new and modified pages, and periodically reviewed across your site.

Now, time to head over to PageSpeed Insights.

Download Your Free Optimization Checklist

Site speed optimization is only one small part of ecommerce optimization. To ensure that all your optimization boxes are ticked, we've written the most comprehensive ecommerce optimization checklist on the web. Or probably anywhere, for that matter.

Oh, and it's free! Click here to download it now and gain a vital edge over your competitors.