The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by Nada Thongyang, 2020-11-02 01:54:27

คู่มือ13

คู่มือ13

สำรบัญ 1
2
ทำไมเว็บไซต์ตอ้ งเร็ว
สำเหตุที่เวบ็ ไซต์ชำ้ 3
ปจั จยั สำหรบั กำรวัดควำมเรว็ และ คะแนนของเวบ็ ไซต์
4
อธบิ ายการใชง้ าน PageSpeed Insights
ขนั้ ตอนกำรทำให้เว็บไซตเ์ รว็ ขนึ้ 8
8
การเลอื ก Hosting 9
การเลอื ก Theme 10
การเลือกใช้ Plugin 11
การบบี อัดรูปภาพ 12
การทา Lazy Loading 13
การฝงั Font บนเว็บ 15
GZIP Compression 16
การจดั การดว้ ย WP Rocket

การเพิม่ ประสทิ ธิภาพความเร็วเวบ็ ไซต์ WordPress

ทำไมเว็บไซต์ตอ้ งเรว็

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

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

หากเว็บไซต์โหลดช้า มีผลเสียหายคือ คนเข้าเว็บไซต์จะหายไป
เพราะตามตามสถิติแล้ว 53% ที่ใช้เว็บไซต์จากมือถือเลือกจะปิดหน้าเว็บนั้น
และไม่กลับมาดูหากมีการโหลดหน้าเพจเกิน 3 วินาที แถมเว็บไซต์ยังหายไป
จากหนา้ Search Engine เพราะการโหลดหน้าเวบ็ นั้นมีผลตอ่ คะแนน SEO

การเพ่มิ ประสทิ ธิภาพความเร็วเวบ็ ไซต์ WordPress 1

สำเหตุท่เี วบ็ ไซตช์ ำ้

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

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

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

การเพมิ่ ประสทิ ธภิ าพความเร็วเว็บไซต์ WordPress 2

ปจั จยั สำหรับกำรวัดควำมเรว็ และ คะแนนของเว็บไซต์

 Request : การเรียกเพอื่ ใชง้ านในส่วนต่าง ๆ ของเวบ็ เช่น Script ,
CSS , รูปภาพ , วิดีโอ , JQuery เปน็ ตน้

 Load Time : การโหลดหนา้ โฮมเพจหน่ึงคร้ังมีระยะเวลาในการโหลดมาก
น้อยเพียงใด ตัวน้ีจะระบเุ อาไว้

 Page Size : ขนาดไฟลท์ มี่ ีบนหน้าเพจที่ดาวน์โหลด

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

การเพิม่ ประสิทธิภาพความเรว็ เวบ็ ไซต์ WordPress 3

อธิบำยกำรใชง้ ำน PageSpeed Insights

PageSpeed Insights

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

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

หนำ้ แรก PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

การเพิม่ ประสิทธภิ าพความเร็วเว็บไซต์ WordPress 4

เชค็ ควำมเร็วของเวบ็ ไซตท์ ่ตี ้องกำรตรวจสอบ 2

1 ใส่ลงิ้ ค์ของเว็บไซต์ท่ตี ้องการตรวจสอบ
2 คลิก ANALYZE

1

หนำ้ แสดงผลวดั ควำมเรว็ ของเว็บไซต์

1 สามารถเลอื กเช็คบน MOBILE หรอื DESKTOP ก็ได้

1

คะแนนของ PageSpeed 5

 Good Performance- คะแนนมากกว่า 90 ข้นึ ไป
 Needs improvement - คะแนนตง้ั แต่ 50 ถึง 90
 Poor Performance - คะแนนต่ากวา่ 49

การเพ่ิมประสทิ ธิภาพความเรว็ เวบ็ ไซต์ WordPress

Field Data คอื ขอ้ มูลท่รี วบรวมมาจากประสบการณก์ ารใช้งานจรงิ ของผใู้ ช้

12
34

1 First Contentful Paint (FCP) คอื Metric ท่ีใชว้ ดั ระยะเวลาท่ี
Browser ใช้ในการแสดงเนื้อหาเมอื่ DOM ช้ินแรกปรากฎข้นึ เหน็
โครงสร้างหลกั บางส่วน แต่ข้อมลู ยงั แสดงไมค่ รบทั้งหมด

2 First Input Delay (FID) คอื Metric ทใ่ี ชว้ ดั ระยะเวลาต้ังแตท่ ผี่ ู้ใช้
เริม่ มี Action กับหนา้ เวบ็ (Interact) เชน่ Click หรือ Scroll จนถึง
ระยะเวลาที่ Browser ท่มี กี ารตอบสนองกลบั ตอ่ Action นน้ั

3 Largest Contentful Paint (LCP) คือ Metric ท่ใี ช้วดั ระยะเวลา
ต้ังแตเ่ รม่ิ request URL จนกระทัง่ โหลด Element ทม่ี ขี นาดท่ีใหญ่
ท่สี ุดจนเสร็จ วา่ ใชเ้ วลาไปนานแค่ไหน

4 Cumulative Layout Shift (CLS) คือ คะแนนสาหรบั การ
ตรวจสอบ Layout ทง้ั หมดของหนา้ เว็บ ทอ่ี าจจะเกิดการขยับ หรือ
การกระตกุ ทาให้ผใู้ ช้ไมส่ ามารถใช้งานไดต้ รงตามทค่ี วาดหวงั ไว้

การเพ่ิมประสิทธิภาพความเรว็ เวบ็ ไซต์ WordPress 6

Lab Data คอื เป็นข้อมลู จาลองความเรว็ ในการโหลดหนา้ เว็บเพจ

1 2
3 4
6
5

1 First Contentful Paint (FCP) คือ Metric ทใ่ี ช้วดั ระยะเวลาท่ี Browser ใช้
ในการแสดงเนื้อหาเม่อื DOM ชิ้นแรกปรากฎขึ้น เหน็ โครงสรา้ งหลกั บางส่วน แต่
ข้อมูลยังแสดงไม่ครบท้ังหมด

2 Time to Interactive (TTI) คอื Metric ทใี่ ชว้ ดั ระยะเวลาตงั้ แต่เริม่ โหลด Page
ไปจนโหลดทรัพยากรต่าง ๆ ครบ จนหน้าเวบ็ ทง้ั หน้าพร้อมใช้งานและสมารถ

ตอบสนองตอ่ Action ของผใู้ ชไ้ ดเ้ ป็นอย่างดี

3 Speed Index คอื Metric ทใี่ ชว้ ัดความเร็วของการโหลดหนา้ เวบ็ ตวั เลขยิ่งนอ้ ย
ย่ิงดี จะหมายถงึ เว็บโหลดเร็ว

4 Total Blocking Time คือ Metric ท่ใี ช้วัดระยะเวลาการรอการทางานโดยรวม
ระหวา่ ง First Contentful Paint (FCP) และ Time to Interactive (TTI)

5 Largest Contentful Paint (LCP) คือ Metric ทใ่ี ชว้ ัดระยะเวลาต้ังแต่เร่ิม
request URL จนกระท่ังโหลด Element ที่มีขนาดทใ่ี หญ่ท่สี ุดจนเสร็จ ว่าใช้
เวลาไปนานแค่ไหน

6 Cumulative Layout Shift (CLS) คือ คะแนนสาหรบั การตรวจสอบ Layout
ทั้งหมดของหน้าเว็บ ทีอ่ าจจะเกิดการขยบั หรือการกระตุก ทาใหผ้ ู้ใช้ไมส่ ามารถ
ใชง้ านได้ตรงตามที่ควาดหวงั ไว้

การเพม่ิ ประสทิ ธิภาพความเรว็ เว็บไซต์ WordPress 7

ข้ันตอนกำรทำใหเ้ ว็บไซตเ์ ร็วข้นึ

กำรเลือก Hosting

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

กำรเลอื ก Hosting ท่ดี ีควรดูจำกอะไรบำ้ ง?

1. ประสทิ ธิภาพของเครอ่ื ง Server ทีม่ าใช้ Host
2. จานวนลูกค้าตอ่ เครอ่ื ง Server ท่ใี ห้บรกิ าร
3. ความเร็วในการรบั ส่งขอ้ มูล Web Hosting ท่ีดีตอ้ งมี

ความสามารถในการสง่ ข้อมลู ได้รวดเร็ว
4. ระบบ Backup ข้อมลู Web Hosting
5. ปริมาณข้อมูลทร่ี ับ-ส่งได้ (Bandwidth)
6. จานวน e-mail ที่สามารถใชไ้ ด้
7. การ Support หรอื การให้บริการหลังการขาย
8. ราคาหรือคา่ บรกิ าร

การเพมิ่ ประสทิ ธภิ าพความเรว็ เวบ็ ไซต์ WordPress 8

กำรเลือก Theme

1. เลอื กธีมฟรี หรอื ธมี เสยี เงิน
การเลอื กธีมเวิรด์ เพลสไม่วา่ จะท้งั แบบฟรแี ละแบบเสียเงิน ส่ิงท่ี

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

2. ควำมเรว็ : ธีมทเ่ี บำ vs ธมี ท่ีฟเี จอร์เยอะ
อัตราความเร็วในการโหลดหนา้ เว็บน้นั ไมเ่ พียงแต่ช่วยเพ่มิ

ประสิทธิภาพด้าน User Experience ให้กับเว็บไซต์ แตย่ งั ช่วยเพ่มิ ประสิทธภิ าพ
ใหก้ ับอนั ดับใน Search Engine รวมถงึ ยังสามารถเพิม่ conversion rate และ
รายไดข้ องเวบ็ อกี ดว้ ย

3 สงิ่ ที่ทำใหเ้ ว็บชำ้ ดงั นี้

 มฟี ีเจอรท์ ่ีหนักๆ เยอะ
เลี่ยงฟีเจอร์ทมี่ ี Slider มากกวา่ 10 แบบ หรอื จะมาพร้อมกบั

20 ปล๊กั อินท่ตี ้องตดิ ตง้ั หรอื JavaScript Animation มากมาย
 ใช้งานพวกไฟลข์ นาดใหญเ่ ยอะไป
เลีย่ งธมี ท่ี full-width images, background video จานวนมาก
 การอพั เดท
สือ่ ถึงธีมนัน้ ไมม่ กี ารอพั เดทเปน็ เวลานาน ใหต้ รวจสอบประวัตกิ าร

อัพเดทแต่ละครง้ั ย้อนหลังของธมี

การเพม่ิ ประสทิ ธิภาพความเรว็ เว็บไซต์ WordPress 9

3. Design และ User Experience
วัตถปุ ระสงค์ของธมี ท่เี ราเลอื กก็คอื ตอ้ งทาให้เว็บไซต์ดูดีทสี่ ุด และ

ส่งเสริมใหแ้ บรนด์ของตามความต้องการทจ่ี ะสื่อ การออกแบบสามารถตอบโจทย์
แบรนดข์ องเราไดเ้ กือบทกุ อยา่ ง

4. รองรบั หลำกหลำยอปุ รกณ์ (Responsiveness)
ทกุ คนมอี ุปกรณ์ทส่ี ามารถเขา้ ถึงเว็บไซต์ จากปัจจุบนั จานวนผูเ้ ข้า

ชมจาก อปุ กรณพ์ กพาจาพวก Smart Phone และ Tablet ดังนน้ั ปฏิเสธไม่ได้
เลยที่จะไม่สนใจ Responsive Theme

5. ควำมปลอดภยั (Security)
มีผลกระทบตอ่ ความปลอดภัยของเวบ็ ไซต์ ซ่งึ อาจจะเกีย่ วกับ

Hosting , Plugins หรือการต้งั Password ที่ไมป่ ลอดภัย สามารถประเมิน
ความปลอดภัยของธมี ได้

กำรเลอื กใช้ Plugin

ควรติดตั้งเฉพาะ Plugin ท่ีใชต้ อ้ งการใชง้ านเทา่ นั้น ต่อใหโ้ หลด
มาแล้วไมไ่ ด้ใชง้ านก็ควรลบออก

ฝกึ ใช้ Theme option ของธีมทเ่ี ลือกให้เต็มประสิทธิภาพ หลาย
คน ไม่ศึกษาฟงั ช่ันตา่ งๆ ของธีมใหด้ ีกอ่ น เชน่ บางธมี มี option สร้างรูปภาพ
แบบ slider ได้เองจากธีมเลย แต่บางคนไมร่ ู้ ก็ไปโหลดปล๊ักอิน slider มาใส่
อีก แบบน้เี ราเรยี กวา่ การใช้งานปลก๊ั อินที่เกินความจาเป็น

การเพมิ่ ประสทิ ธภิ าพความเรว็ เวบ็ ไซต์ WordPress 10

กำรบบี อดั รูปภำพ

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

https://tinypng.com/

https://www.websiteplanet.com/th/webtools/imagecompressor/

การเพิ่มประสิทธภิ าพความเร็วเวบ็ ไซต์ WordPress 11

กำรทำ Lazy Loading

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

ข้อจากัดของการทา lazy load คอื ตอ้ งใช้ JavaScript หรอื เทคนิค
CSS เข้า เมื่อ Chrome จะรองรบั การทา lazy load ที่ตวั เบราว์เซอร์เลย สิ่งที่
นกั พฒั นาเว็บต้องทามีเพยี งแค่ใสค่ ุณสมบตั ิ loading= "lazy" เขา้ ไปในแทก็ img
เทา่ นั้น ที่เหลือ Chrome จะจดั การเลอื กรูปทเ่ี หมาะสมมาแสดงให้เอง โดยไม่
ต้องเขยี นโค้ดใดๆ ตอนนฟี้ เี จอรน์ ีใ้ ช้ไดแ้ ลว้ ใน Chrome Canary

Lazy Load Plugin
วิธีการใช้งาน Lazy Load WordPress Plugin เพียงแคต่ ดิ ต้งั ก็

สามารถใชง้ านได้โดยไมต่ ้องตงั้ ค่าอะไรเพม่ิ เติม

การเพิ่มประสิทธิภาพความเรว็ เวบ็ ไซต์ WordPress 12

กำรฝงั Font บนเวบ็

Seed Fonts เป็นปลก๊ั อินช่วยจดั การในเร่ืองของฟอนตข์ อง
WordPress ให้ใช้บริการฟรี โดยมีรายการฟอนต์ (Font Family) ให้เลือกทั้ง
ภายในตัวปลั๊กอนิ เองหรือเลือกจาก Google Fonts

ใหท้ าการตดิ ตง้ั ปลั๊กอิน Seed Fonts เหมอื นกับปลัก๊ อินท่ัวไป
1 พมิ พ์ “Seed Fonts” ทช่ี ่องเพมิ่ ปลก๊ั อนิ

จากนัน้ ทาการติดตง้ั ปลั๊กอนิ Seed Fonts 1
1
1 ติดตงั้ (Install Now)
เมอ่ื ติดต้งั เรียบร้อยจากน้ัน เปิดใชง้ าน (Activate)

การเพ่มิ ประสทิ ธภิ าพความเร็วเวบ็ ไซต์ WordPress 13

1 3
2 4

5

6

7 14

1 คลิก รปู แบบเวบ็ (Appearance)
2 คลกิ ฟอนต์ (Font) เพื่อเขา้ สู่หน้า Font Settings
3 ตก๊ิ “ใช่” ตรงชอ่ ง Enable Heading Font
4 เลือก Bundled Font
5 เลอื กขนาดฟอนตท์ ีเ่ ราต้องการ
6 ต๊กิ “ใช่” เพ่ือเพมิ่ คาสั่ง !important ใช้กบั เวบ็
7 คลิก “บันทกึ การเปล่ยี นแปลง”

การเพ่ิมประสิทธิภาพความเรว็ เว็บไซต์ WordPress

GZIP Compression

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

กำรทำ gzip compression

 ทาใหเ้ ว็บไซตโ์ หลดได้เร็วขนึ้
 ลดการทาการงานในการโหลดขอ้ มลู ของ server & client
 เมอื่ เวบ็ ไซต์โหลดเรว็ ขึน้
 ลดการใช้งาน Bandwidth

การเพิ่มประสิทธิภาพความเรว็ เว็บไซต์ WordPress 15

กำรจดั กำรด้วย WP Rocket

เป็นองคป์ ระกอบการปรับความเรว็ เวบ็ ด้านเทคนิค ถ้าจะปรบั ให้
ครบท้งั 6 องค์ประกอบ คือ ทา Cache , Database, ทา Minification , GZIP
Compression , Lazy Load และ Image optimization

การเพมิ่ ประสทิ ธภิ าพความเรว็ เวบ็ ไซต์ WordPress 16

Dashboard

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

การเพ่ิมประสิทธิภาพความเรว็ เวบ็ ไซต์ WordPress 17

Cache

WP Rocketไดเ้ ปิดใช้งานการแคชของหนา้ โดยค่าเร่มิ ตน้ แต่
สามารถปรับแต่งการตัง้ คา่ เพ่ือเพ่ิมความเร็วเวบ็ ไซต์

1.กำรแคชของอปุ กรณเ์ คลื่อนที่ (Mobile Cache)

เรมิ่ ตน้ เราจะสังเกตเหน็ ว่าการแคชของอุปกรณเ์ คล่อื นทีเ่ ปดิ อยู่เปน็ ค่า
เริม่ ตน้ อยา่ งไรก็ตามเราขอแนะนาใหเ้ ลอื กเปดิ “Separate cache files for mobile
devices” ด้วยเช่นกนั

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

การเพ่มิ ประสิทธภิ าพความเร็วเว็บไซต์ WordPress 18

2.แคชของผใู้ ช้ (User Cache)
หากรันเว็บไซต์แบบที่ ผู้ใช้คนอืน่ ต้องทาการ login เพอื่ เข้าใชง้ านนน้ั

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

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

3.อำยกุ ำรใชง้ ำนแคช (Cache Lifespan)
คือ เวลาท่ีต้องการจดั เก็บไฟล์ทแ่ี คชไว้บนเวบ็ ไซต์ โดยค่าเริม่ ตน้ ถกู ตง้ั ค่า

ไวท้ ี่ 10 ชั่วโมง ซ่งึ สามารถทางานไดด้ ีกับเว็บไซตส์ ว่ นใหญ่ สามารถต้งั คา่ ใหเ้ ป็นค่าทต่ี ่า
กว่า ถ้าหากเปน็ เว็บไซตท์ มี่ ีผ้ชู มเป็นจานวนมาก หรือมกี ารอัพเดทบ่อยๆ นอกจากน้ยี ัง
สามารถตง้ั ค่าให้เป็นค่าทีส่ ูงขนึ้ ไดห้ ากไม่ไดป้ รับปรงุ เว็บไซตบ์ ่อย ๆ

หลังจากครบชว่ งอายขุ อง Cache Lifespan แลว้ WP Rocket จะลบ
ไฟล์ทแ่ี คชไว้ นอกจากนย้ี งั จะเริ่มการโหลดแคชท่มี เี นื้อหาทป่ี รบั ปรุงทันที

การเพ่ิมประสิทธภิ าพความเรว็ เว็บไซต์ WordPress 19

File Optimization

ชว่ ยใหส้ ามารถลดขนาดไฟลแ์ บบ static เชน่ JavaScript และ CSS
stylesheets สามารถสลับไปยงั แท็บ File Optimization และทาเคร่ืองหมายในช่อง
สาหรบั ชนดิ ของไฟล์ทต่ี ้องการบีบอัด

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

การเพมิ่ ประสิทธิภาพความเร็วเวบ็ ไซต์ WordPress 20

จะสามารถลดการใช้แบนดว์ ธิ โดยรวมของคุณและชว่ ยใหค้ ณุ ประหยดั
ค่าใชจ้ า่ ยลงไปได้

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

การเพม่ิ ประสิทธิภาพความเรว็ เวบ็ ไซต์ WordPress 21

Media

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

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

การเพิ่มประสิทธิภาพความเร็วเว็บไซต์ WordPress 22

Preload

สามารถตรวจสอบการตงั้ ค่าการโหลดล่วงหน้าใน WP Rocket โดยการ
สลบั ไปยงั แทบ็ “Preload” โดยค่าเร่มิ ต้นปลั๊กอนิ เร่มิ ต้น จะทาการรวบรวมข้อมูล
หนา้ แรกและตดิ ตามการเชอื่ มโยงไปยงั โหลดแคช

• สามารถบอกปล๊ักอนิ เพ่ือใชแ้ ผนผงั ไซต์ XMLของคณุ ในการสรา้ งแคช
• สามารถปดิ คณุ ลกั ษณะการ Preload ได้เชน่ กันแต่เราไม่แนะนา
• การปิด Preload จะทาใหผ้ ูใ้ ช้โหลดเพจคร้ังแรกชา้ เสมอ
หมำยเหตุ : โปรดเปดิ คุณสมบัติ Preload ไวเ้ พือ่ ใหไ้ ด้ผลลพั ธป์ ระสิทธิภาพสงู สดุ

การเพ่ิมประสทิ ธภิ าพความเรว็ เวบ็ ไซต์ WordPress 23

Advanced Rules

ชว่ ยใหส้ ามารถควบคุมการแคชแบบเต็มรูปแบบ และสามารถเลอื ก tab
Advanced Rules เพ่อื ยกเว้นหน้าเวบ็ ท่ไี ม่ต้องการให้แคช

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

นอกจากน้ี สามารถยกเวน้ การแคชคกุ ก้ี (ประเภทเบราว์เซอร์และประเภทอปุ กรณ์)
ระบบจะทาการสรา้ งแคชโดยอตั โนมตั เิ มอ่ื คุณกดป่มุ บันทกึ การต้งั คา่

การเพิ่มประสิทธภิ าพความเร็วเว็บไซต์ WordPress 24

Database

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

• ไมแ่ นะนาใหล้ บการแก้ไขโพสต์ Post Cleanup เพราะจะมีประโยชน์ในการ
ยกเลิกการเปลย่ี นแปลงในโพสต์ WordPress และเพจของคุณในอนาคต

นอกจากนี้ ยังไมจ่ าเป็นตอ้ งลบสแปมและแสดงความคิดเหน็ (Comments Cleanup)
เพราะ WordPress จะทาการลบให้เองโดยอตั โนมตั ิภายใน 30วัน

การเพิม่ ประสทิ ธิภาพความเร็วเว็บไซต์ WordPress 25

CDN

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

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

การเพิม่ ประสทิ ธภิ าพความเร็วเวบ็ ไซต์ WordPress 26

Heartbeat

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

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

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

การเพิม่ ประสทิ ธิภาพความเร็วเว็บไซต์ WordPress 27

Add-ons

สามารถปรับแตง่ คณุ สมบัติไดโ้ ดยง่าย ลองมาดกู ันว่าเราสามารถปรับแตง่
addons อะไรไดบ้ ้าง

1.Google Analytics Addon
Add-on ของ Google Analytics ช่วยให้สามารถโฮสต์ รหัส Google

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

การเพิม่ ประสทิ ธภิ าพความเร็วเว็บไซต์ WordPress 28

Add-ons

2.Facebook Pixel
หากกาลงั ใช้ Facebook Pixel สาหรบั การติดตามผใู้ ช้แล้ว addon น้ี

จะโฮสต์ Facebook Pixel จะช่วยปรบั ปรงุ คะแนน pagespeed แตอ่ าจไมม่ ี
ผลกระทบใดๆ ที่เกดิ ขึน้ จรงิ เกย่ี วกับความเร็วในการโหลดเวบ็ ไซต์
3.Varnish Addon

หากผใู้ หบ้ ริการ hosting ใช้ Varnish Addon ตอ้ งเปดิ ใชง้ าน addon
น้ี การทาเช่นนจ้ี ะช่วยใหแ้ นใ่ จว่าแคช Varnish Addon จะถูกล้างเมื่อ WP Rocket
ทาการลา้ งแคช
4.Cloudflare

หากกาลังใช้ Cloudflare CDN ต้องเปดิ ใช้งาน addon นเี้ พื่อให้ทางาน
ควบคู่ไปกบั WP Rocket เพียงแคเ่ ปดิ ใช้งาน addon และคลิกท่ปี ่มุ “Save
change”
5.Sucuri

หากกาลังใช้ Sucuri ตอ้ งเปิดใช้งาน addon นี้และคลิกทปี่ ุ่ม
“Save change” หลังจากนน้ั ใหป้ อ้ นคีย์ API ของบญั ชี Sucuri เพื่อเช่อื มต่อบัญชี

การเพ่ิมประสทิ ธิภาพความเรว็ เวบ็ ไซต์ WordPress 29

Tools

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

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

การเพ่ิมประสทิ ธิภาพความเร็วเว็บไซต์ WordPress 30


Click to View FlipBook Version