ธีม WordPress ของคุณเป็นพื้นฐานของประสิทธิภาพด้านหน้าเว็บไซต์ของคุณ ธีมที่สร้าง CSS และ JavaScript ขนาด 300 KB จะโหลดช้ากว่าธีมที่สร้าง 50 KB เสมอ—ไม่ว่าจะมีการแคชและเพิ่มประสิทธิภาพมากแค่ไหน ในการเปรียบเทียบนี้ เราทดสอบธีม WordPress ที่ได้รับความนิยม 6 ธีมภายใต้เงื่อนไขที่เหมือนกันเพื่อให้ข้อมูลประสิทธิภาพที่เป็นกลาง สำหรับข้อมูลเพิ่มเติม คุณสามารถดูได้ที่ คู่มือพัฒนาธีม WordPress.
วิธีการทดสอบ
เพื่อให้การเปรียบเทียบเป็นธรรม การทดสอบทั้งหมดดำเนินการภายใต้เงื่อนไขที่เหมือนกัน:
| พารามิเตอร์ | การตั้งค่า |
|---|---|
| โฮสติ้ง | โฮสติ้งแบบแชร์ (แผน SiteGround GoGeek) |
| เวอร์ชัน PHP | 8.2 พร้อมเปิดใช้งาน OPcache |
| เวอร์ชัน WordPress | 6.7.1 |
| เนื้อหา | 10 โพสต์พร้อมภาพเด่น, 5 หน้า, แถบข้างที่มี 3 วิดเจ็ต |
| ปลั๊กอิน | ไม่มี (ทดสอบประสิทธิภาพธีมแบบบริสุทธิ์) |
| การแคช | ไม่มี (ทดสอบประสิทธิภาพที่ไม่มีการแคช) |
| ภาพ | ใช้ภาพเดียวกันในทุกการทดสอบ, รูปแบบ WebP ที่ปรับให้เหมาะสม |
| เครื่องมือทดสอบ | GTmetrix (เซิร์ฟเวอร์แวนคูเวอร์), ค่าเฉลี่ย 3 การทดสอบ |
แต่ละธีมถูกทดสอบในสถานะเริ่มต้นโดยไม่มีการปรับแต่งนอกเหนือจากการเปิดใช้งานธีมและนำเข้าข้อมูลมาตรฐาน ซึ่งวัดประสิทธิภาพพื้นฐานของธีม—สิ่งที่คุณได้รับจากกล่อง สำหรับข้อมูลเชิงลึกเกี่ยวกับพื้นฐานของธีม โปรดตรวจสอบที่ คู่มือพื้นฐานของธีม.
ผลลัพธ์: ประสิทธิภาพหน้าแรก
| ธีม | ขนาดหน้า | คำขอ HTTP | เวลาโหลด | TTFB | คะแนน PageSpeed | LCP |
|---|---|---|---|---|---|---|
| GeneratePress | 45 KB | 8 | 0.8s | 120ms | 99 | 0.9s |
| Astra | 68 KB | 11 | 1.1s | 145ms | 96 | 1.2s |
| Flavor (ธีม Flavor) | 95 KB | 14 | 1.3s | 155ms | 93 | 1.4s |
| OceanWP | 112 KB | 16 | 1.4s | 165ms | 91 | 1.5s |
| Avada | 285 KB | 28 | 2.3s | 210ms | 72 | 2.6s |
| Divi | 310 KB | 32 | 2.5s | 225ms | 68 | 2.8s |
ผลลัพธ์: ประสิทธิภาพโพสต์เดียว
| ธีม | ขนาดหน้า | คำขอ | เวลาโหลด | PageSpeed | CLS |
|---|---|---|---|---|---|
| GeneratePress | 48 KB | 9 | 0.9s | 99 | 0.00 |
| Astra | 72 KB | 12 | 1.2s | 95 | 0.01 |
| Flavor | 100 KB | 15 | 1.4s | 92 | 0.02 |
| OceanWP | 118 KB | 17 | 1.5s | 90 | 0.03 |
| Avada | 295 KB | 30 | 2.4s | 70 | 0.08 |
| Divi | 320 KB | 34 | 2.7s | 66 | 0.12 |
อะไรเป็นสาเหตุของความแตกต่างด้านประสิทธิภาพ?
ขนาด Payload ของ CSS และ JavaScript
| ธีม | ขนาด CSS | ขนาด JS | ต้องการ jQuery | ไอคอนที่กำหนดเอง |
|---|---|---|---|---|
| GeneratePress | 9 KB | 0 KB | ไม่ | Inline SVG |
| Astra | 18 KB | 12 KB | ไม่ | Inline SVG |
| Flavor | 32 KB | 25 KB | ไม่ | Icon font |
| OceanWP | 42 KB | 35 KB | ไม่บังคับ | Icon font |
| Avada | 120 KB | 85 KB | ใช่ | Icon font + กำหนดเอง |
| Divi | 135 KB | 95 KB | ใช่ | Icon font |
ความแตกต่างระหว่าง GeneratePress (9 KB CSS) และ Divi (135 KB CSS) คือ 15 เท่า ซึ่งส่งผลโดยตรงต่อ First Contentful Paint และ Largest Contentful Paint คุณสามารถวัดเมตริกเหล่านี้ได้โดยใช้ Google Lighthouse.
ความซับซ้อนของ DOM
| ธีม | องค์ประกอบ DOM (หน้าแรก) | ความลึกสูงสุดของ DOM |
|---|---|---|
| GeneratePress | ~350 | 8 |
| Astra | ~480 | 10 |
| Flavor | ~620 | 11 |
| OceanWP | ~750 | 12 |
| Avada | ~1,400 | 18 |
| Divi | ~1,600 | 20 |
Google แนะนำให้รักษาขนาด DOM ให้อยู่ต่ำกว่า 1,500 องค์ประกอบ Avada และ Divi เกินขนาดนี้ในหน้าแรกมาตรฐาน แม้ก่อนที่จะเพิ่มเนื้อหาของผู้สร้างหน้า.
```ประสิทธิภาพหลังการปรับแต่ง
เรายังได้ทดสอบแต่ละธีมโดยเปิดใช้งานการแคชและการปรับแต่งด้วย WP Rocket:
| ธีม | ก่อน (เวลาโหลด) | หลัง WP Rocket | การปรับปรุง |
|---|---|---|---|
| GeneratePress | 0.8วินาที | 0.5วินาที | 37% |
| Astra | 1.1วินาที | 0.7วินาที | 36% |
| Flavor | 1.3วินาที | 0.8วินาที | 38% |
| OceanWP | 1.4วินาที | 0.9วินาที | 36% |
| Avada | 2.3วินาที | 1.5วินาที | 35% |
| Divi | 2.5วินาที | 1.6วินาที | 36% |
การแคชให้การปรับปรุงในเปอร์เซ็นต์ที่คล้ายกันในทุกธีม (~35-38%) แต่ตัวเลขที่แน่นบอกเล่าเรื่องราว: เว็บไซต์ GeneratePress ที่แคช (0.5วินาที) ยังเร็วกว่าเว็บไซต์ Divi ที่แคช (1.6วินาที) ถึง 3 เท่า การปรับแต่งสามารถปรับปรุงธีมใด ๆ ได้ แต่ไม่สามารถเอาชนะสถาปัตยกรรมธีมที่หนักหน่วงได้.
คุณควรเลือกธีมไหน?
| ลำดับความสำคัญ | ธีมที่แนะนำ | ทำไม |
|---|---|---|
| ความเร็วสูงสุด | GeneratePress | ขนาดเล็กที่สุด, เวลาโหลดเร็วที่สุด, โค้ดที่สะอาดที่สุด |
| ความเร็ว + สมดุลฟีเจอร์ | Astra Pro | ความเร็วใกล้ GP พร้อมตัวเลือกการออกแบบและเทมเพลตมากขึ้น |
| ฟีเจอร์ WooCommerce ฟรี | OceanWP | ฟีเจอร์มากที่สุดในระดับฟรี, ดีสำหรับร้านค้าที่มีงบประมาณ |
| ฟีเจอร์สูงสุด (ความเร็วรอง) | Avada | ทุกอย่างที่สร้างขึ้นใน, ชุดฟีเจอร์ที่ใหญ่ที่สุด |
| การสร้างภาพ (ความเร็วรอง) | Divi | เครื่องมือสร้างภาพที่ทรงพลังพร้อมเทมเพลตมากมาย |
สำหรับคู่มือที่ครอบคลุมในการเลือกธีมที่เกินกว่าประสิทธิภาพ ดูที่ คู่มือการเลือกธีม WordPress.
ข้อพิจารณาเพิ่มเติมสำหรับประสิทธิภาพของธีม
การตอบสนองต่อมือถือ
เมื่อการเข้าชมจากมือถือยังคงเติบโต การทำให้แน่ใจว่าธีม WordPress ของคุณตอบสนองต่อมือถือเป็นสิ่งสำคัญ ธีมที่ทำงานได้ดีบนเดสก์ท็อปอาจไม่ให้ประสบการณ์เดียวกันบนอุปกรณ์มือถือ นี่คือเคล็ดลับในการประเมินการตอบสนองต่อมือถือ:
- การออกแบบที่ตอบสนอง: ตรวจสอบว่าธีมปรับเลย์เอาต์และองค์ประกอบโดยอัตโนมัติตามขนาดหน้าจอหรือไม่.
- องค์ประกอบที่ใช้งานง่าย: ตรวจสอบให้แน่ใจว่าปุ่มและลิงก์คลิกได้ง่ายบนหน้าจอขนาดเล็ก.
- แท็กเมตา Viewport: ตรวจสอบว่าธีมมีแท็กเมตา viewport เพื่อควบคุมเลย์เอาต์บนเบราว์เซอร์มือถือ.
การปรับแต่งภาพ
ภาพสามารถส่งผลกระทบต่อเวลาโหลดได้อย่างมาก แม้จะมีธีมที่เบา ภาพที่ไม่ได้ปรับแต่งอาจทำให้เว็บไซต์ของคุณช้าลง พิจารณาวิธีปฏิบัติเหล่านี้สำหรับการปรับแต่งภาพ:
- ใช้รูปแบบที่เหมาะสม: ใช้รูปแบบ WebP หรือ JPEG ที่ปรับแต่งแล้วเพื่อการโหลดที่เร็วขึ้น.
- การโหลดแบบ Lazy: ใช้การโหลดแบบ Lazy เพื่อเลื่อนการโหลดภาพจนกว่าจะอยู่ใน viewport.
- การบีบอัดภาพ: ใช้เครื่องมือเช่น TinyPNG หรือปลั๊กอินเช่น Smush เพื่อบีบอัดภาพโดยไม่สูญเสียคุณภาพ.
การอัปเดตและการสนับสนุนเป็นประจำ
การเลือกธีมที่ได้รับการอัปเดตเป็นประจำเป็นสิ่งสำคัญสำหรับการรักษาประสิทธิภาพและความปลอดภัย มองหาธีมที่:
- มีการพัฒนาอย่างต่อเนื่อง: ตรวจสอบบันทึกการเปลี่ยนแปลงของธีมสำหรับการอัปเดตล่าสุด.
- ให้การสนับสนุน: ตรวจสอบให้แน่ใจว่านักพัฒนาธีมมีการสนับสนุนสำหรับการแก้ไขปัญหาและคำถาม.
- ข้อเสนอแนะจากชุมชน: มองหาความคิดเห็นจากผู้ใช้และฟอรัมชุมชนเพื่อประเมินความพึงพอใจและปัญหาของผู้ใช้.
คำถามที่พบบ่อย
ความเร็วของธีมมีผลต่อการจัดอันดับ SEO จริงหรือไม่?
ใช่ ความเร็วของหน้าเป็นปัจจัยการจัดอันดับที่ได้รับการยืนยันจาก Google และ Core Web Vitals (LCP, FID, CLS) เป็นส่วนหนึ่งของสัญญาณประสบการณ์หน้าเว็บของ Google แม้ว่าคุณภาพของเนื้อหาจะสำคัญกว่าความเร็ว แต่สองเว็บไซต์ที่มีเนื้อหาดีเท่ากันจะเห็นว่าเว็บไซต์ที่เร็วกว่าได้รับการจัดอันดับสูงกว่า ผลกระทบนี้เห็นได้ชัดเจนที่สุดบนมือถือ ซึ่ง Google ใช้การจัดทำดัชนีแบบมือถือก่อน
ฉันสามารถทำให้ Divi หรือ Avada เร็วเท่ากับ GeneratePress ได้หรือไม่?
คุณสามารถปรับปรุงความเร็วของพวกเขาได้อย่างมากด้วยการแคชและการปรับแต่ง แต่คุณไม่สามารถทำให้ตัวเลขดิบของ GeneratePress เท่ากัน ความแตกต่างทางสถาปัตยกรรม—ขนาด DOM, น้ำหนัก CSS, ความพึ่งพา JavaScript—เป็นสิ่งที่มีอยู่ในวิธีการสร้างธีมเหล่านี้ เว็บไซต์ Avada ที่ได้รับการปรับแต่งอย่างดี (~1.5s) ยังคงยอมรับได้ แต่จะไม่สามารถเทียบกับเว็บไซต์ GeneratePress ที่ได้รับการปรับแต่ง (~0.5s)
เวลาการโหลด 1 วินาที เทียบกับ 2 วินาที สังเกตเห็นได้จริงหรือไม่?
ใช่ การวิจัยของ Google แสดงให้เห็นว่าเมื่อเวลาการโหลดเพิ่มขึ้นจาก 1 วินาทีเป็น 3 วินาที ความน่าจะเป็นที่จะเกิดการกระโดดเพิ่มขึ้น 32% สำหรับเว็บไซต์อีคอมเมิร์ซ Amazon พบว่า ทุก ๆ 100 มิลลิวินาทีของความล่าช้าทำให้พวกเขาสูญเสียยอดขาย 1% ความแตกต่างระหว่าง 1 วินาทีและ 2 วินาทีมีความหมายทั้งในด้านประสบการณ์ของผู้ใช้และอัตราการแปลง
ฉันควรเลือกความเร็วของธีมมากกว่าฟีเจอร์การออกแบบหรือไม่?
ขึ้นอยู่กับความสำคัญของคุณ หากคุณกำลังสร้างเว็บไซต์เนื้อหา บล็อก หรือร้านค้า WooCommerce ที่การเข้าชมจากการค้นหามีความสำคัญ ให้ให้ความสำคัญกับความเร็ว (GeneratePress, Astra) หากคุณกำลังสร้างพอร์ตโฟลิโอแบบครั้งเดียวหรือหน้าแลนดิ้งที่ผลกระทบทางสายตามีความสำคัญมากกว่าการเข้าชมจากการค้นหา ธีมที่มีฟีเจอร์มากมายอาจเหมาะสมกว่า
การโฮสต์มีผลต่อประสิทธิภาพของธีมมากแค่ไหน?
การโฮสต์มีผลต่อ TTFB (Time to First Byte) อย่างมีนัยสำคัญ—ธีมเดียวกันบนโฮสติ้งแชร์ราคาถูกอาจมี TTFB 500ms เทียบกับ 100ms บนโฮสติ้งพรีเมียม อย่างไรก็ตาม ความแตกต่างสัมพัทธ์ระหว่างธีมยังคงสอดคล้องกัน: ธีมที่มีน้ำหนักเบามักจะเร็วกว่าธีมที่มีน้ำหนักมากบนโฮสติ้งเดียวกัน สำหรับ คำแนะนำการโฮสต์ โปรดดูคู่มือของเรา
ผู้สร้างหน้าเพจทำให้ข้อได้เปรียบด้านความเร็วของธีมที่มีน้ำหนักเบาหายไปหรือไม่?
บางส่วน การเพิ่ม Elementor ลงใน GeneratePress ทำให้ขนาดหน้าเพิ่มขึ้นจาก 45 KB เป็น ~180 KB แต่ GeneratePress + Elementor (180 KB) ยังคงเบากว่า Divi เพียงอย่างเดียว (310 KB) น้ำหนักพื้นฐานของธีมจะเพิ่มขึ้นจากสิ่งที่ผู้สร้างหน้าเพจสร้าง ดังนั้นการเริ่มต้นด้วยธีมที่เบากว่าจะให้ประโยชน์ที่เพิ่มขึ้น
รับธีม WordPress ที่มุ่งเน้นประสิทธิภาพ
เรียกดู GeneratePress, Astra และธีมที่มีน้ำหนักเบาอื่น ๆ ในราคาที่ GPL สร้างเว็บไซต์ WordPress ที่โหลดเร็วซึ่งมีคะแนนดีใน Core Web Vitals
เรียกดูธีม WordPress ที่เร็ว →
