WordPress มี cache plugin ให้เลือกใช้งานอยู่หลายตัวมาก ซึ่งเคยนำเสนอ การตั้งค่า WP Super Cache กันไปแล้ว บทความนี้ขอแนะนำ W3 Total Cache กันบ้าง เพราะถือว่าเป็น plugin อีกตัวหนึ่ง ที่ได้รับความนิยมในอันดับต้นๆ เหมือนกัน ทำความเร็วไม่ด้อยไปกว่า WP Super Cache แบบกินกันไม่ค่อยลง แต่สามารถปรับแต่งรายละเอียดได้มากกว่า โดยไม่ต้องไปวิ่งหา plugin อื่นๆ มาเพิ่มเติม แต่เป็นแบบไหน ยังไง มาดูกันดีกว่า
ขั้นตอนการติดตั้ง plugin ขอข้ามไปเลยนะครับ ไม่พูดถึง น่าจะติดตั้งกันเป็นอยู่แล้ว Plugin นี้ชื่อ W3 Total Cache ค้นหา plugin แล้วติดตั้งกันได้เลย แล้วอย่าลืม Activate ด้วยนะครับ
เมื่อติดตั้ง W3 Total Cache เสร็จเรียบร้อยแล้ว จะมีเมนูชื่อ Performance โผล่ขึ้นมาทางด้านซ้ายมือ แบบนี้ มีรายละเอียดเยอะมากๆ เมื่อเทียบกับ WP Super Cache ที่ตั้งค่าง่ายกว่ากันเยอะทีเดียว แต่ W3 Total Cache เป็น Plugin แบบที่ตั้งค่าได้ละเอียด ไม่ต้องหา Plugin อื่นๆ มาเพิ่มเติม เช่น เรื่องของการ Minify Style sheet หรือ CSS และ Minify Javascript ก็ทำได้เลย ไม่เหมือนกับ Cache plugin ตัวอื่นๆ Database cache กับ Opject cache ก็มีให้ ซึ่งก็มีรายละเอียดการตั้งค่าลึกลงไปอีก ใช้วิธีเก็บบนดิสก์ เป็นไฟล์อาจเพิ่มความเร็วได้อีกนิด หรือจะใช้ Memcached หรือ Redis ก็มีให้เลือกด้วย เรียกว่า มีอะไรให้ลองเยอะทีเดียว กับ Cache ตัวนี้ ขอบอกว่าต้องลอง เพื่อหา Cache Plugin ที่ถูกโฉลกกับเรามากที่สุด
ก่อนจะเริ่มการติดตั้ง และใช้งาน W3 Total Cache ก็ของลอง วัดความเร็ว ตรวจสอบจำนวนไฟล์ ที่โหลดเอาไว้ก่อน เพื่ออ้างอิง อาจจะวัดผลได้ไม่เต็มที่ เนื่องจากเว็บนี้ ค่อนข้างมีรูปน้อย และรูปมีขนาดเล็กที่ Optimized มาแล้วพอสมควร ตัวเนื้อหาเอง ก็ถูกปรับมาแล้วในระดับหนึ่งด้วย Theme ที่เรียบง่าย เบาๆ ทำให้ความเร็วแบบไม่ติดตั้ง Cache Plugin ทำได้เร็วพอสมควร แต่เมื่อติดตั้ง Cache แล้ว จะทำความเร็วได้ดีขึ้น ที่แน่ๆ Hosting จะมีภาระที่น้อยลงเยอะ ถ้าใครใช้ hosting แบบ Share hosting ก็สบายใจขึ้น ไม่ถูกเตะออกง่ายๆ แน่นอน
ส่วนของ Page Cache ก่อนที่จะ Enable ลองดูใน Dropdown ก่อน อยากกำหนด Cache แบบไหน มีให้เลือกขนาดนี้ทีเดียว ส่วนมากที่ใช้งานกันได้ จะเป็น Disk: Basic และ Disk: Enhanced ส่วน Multiple Servers: นั้น ต้องดูว่า hosting ที่เราใช้งานอยู่นั้น รองรับ Memcached อื่นๆ ด้วยหรือไม่ อย่างของผม แม้จะมีตัวเลือกสองตัวนี้ขึ้นมา แต่ใช้งานไม่ได้เพราะ hosting ที่ใช้อยู่ มีให้ใช้งานผ่าน Socket แต่ W3 Total Cache ไม่มีที่ให้ตั้งค่าเหล่านั้น จึงใช้งานไม่ได้ครับ แต่เอาะเถอะ แค่ Disk: Basic กับ Disk: Enhanced ก็เร็วพอแล้วล่ะ
เอาล่ะ ตอนนี้เลือกเป็น Disk: Enhanced ก่อน แล้วเดี๋ยวค่อยมาดูตัวเลือก Disk: ฺBasic กันทีหลัง อย่างว่าล่ะนะ เบสิกๆ เราไม่ค่อยชอบกัน ชอบแต่ Advance พอติดขัด ค่อยกลับมาหาความเบสิก เลือกเสร็จแล้วอย่าลืม Save Setting ด้วย
ถัดมาเป็นส่วนของการ Minify คือ การลดขนาดไฟล์ลง โดยตัดเอาสิ่งไม่จำเป็นทิ้งไป เช่น Comment ในไฟล์ แต่ก่อนจะทำการ Minify ก็จะมีการ Combine ด้วย คือการรวมเอาไฟล์ CSS ทั้งหมด มารวมเป็นไฟล์เดียว Javascript มารวมเป็นไฟล์เดียวกันก่อน จุดประสงค์ เพื่อช่วยให้มีจำนวนไฟล์น้อยๆ ไฟล์เล็กๆ จะได้โหลดได้เร็วขึ้น ไม่กระจัดกระจาย ค่อยๆ โหลดทีละไฟล์ๆ
เมื่อติ๊กที่ Enable เพื่อจะใช้งาน Minify ในครั้งแรก คำเตือนยาวๆ จะปรากฏขึ้นเต็มจอแบบนี้ เพื่อจะเตือนเราว่า การ Optimization แบบนี้น่ะ จะมี Error เกิดขึ้นด้วยนะ ซึ่งตัวเลือกนี้น่ะ มันไม่ใช่แค่ ติ๊ก เปิดการใช้งานแล้วก็เสร็จไป ไม่ใช่ตัวเลือกที่ เลือกแล้ว ใช้แล้ว ก็ไม่ต้องใส่ใจ สนใจมันอีกเลย เพราะคุณยังจะต้องเจอกับอะไรอีกมากมายนะ มันมีเหตุผลตั้งมากมาย ถึงสาเหตุที่ Minify ทำงานไม่ได้บนเว็บไซต์ของคุณ เช่น เนื้อหา content ของเว็บคุณ แม้กระทั่ง Hosting ที่คุณใช้ และ ยังเรื่องของ Theme และ Plugin อีกมากมาย ทำให้เว็บแต่ละเว็บ มีความแตกต่าง ไม่เหมือนกัน ทำให้ Cache Plugin ตัวนี้ทำงานได้ไม่เต็มที่ หรืออาจะมี Error ก็ต้องยอมรับกันนะ ค่อยๆ ปรับกันไป ถ้าอยากจะใช้งาน ตอนนี้ของเลือกเอาไว้ก่อน เดี๋ยวค่อยมาบอกเล่า ดีหรือไม่ ตอนท้ายบทความ เลือกแล้วกด Save Setting ด้วยนะครับ
ส่วนของ Database Cache และ Object Cache นั้น ยังมีตัวเลือกย่อยอีก ซึ่งก็จะมี Memcached กับ Redis เช่นกัน ซึ่งส่วนมากแล้ว website เล็กๆ จะใช้ share hosting ไม่ได้ใช้ VPS ดังนั้น ตัวเลือกที่ใช้ได้ จึงมีแค่ Disk ใช่แล้วครับ เก็บลงดิสก์ ซึ่ง Database Cache จะช่วยลดระยะเวลาการติดต่อกับ Database ไม่ต้องวิ่งไป Query ใน Database บ่อยๆ ซึ่งในกระบวนการนี้ จะช่วยลดระยะเวลาได้นิดหน่อย แต่ลดภาระ server ได้พอสมควรทีเดียว ส่วน Object Cache เป็นเรื่องของการทำงานของ PHP ของ WordPress ซึ่งช่วยลดระยะเวลาได้นิดหน่อย แต่ลดภาระของ server ได้ดี เอาล่ะ เลือกสองตัวนี้ แล้ว Save Setting ได้
มาต่อกันที่เมนู Page Cache กันต่อ หน้านี้มีตัวเลือกอีกหลายกล่องเช่นเคย มาดูที่ตัวเลือก General เป็นตัวเลือกทั่วๆ ไป ไม่เน้นอะไรมาก ผมเอาแค่นี้พอ และต้องเลือก Don’t cache pages for logged in users ด้วย เพราะต้องการเห็นเนื้อหาจริงๆ เวลาเรา Update หรือเขียนบทความใหม่ ขืนมี Cache จะไม่รู้เลยว่า บทความที่เพิ่ม Update อยู่ไหน เห็นแต่บทความเก่าๆ ตลอดเวลา
ตัวเลือกนี้ เป็นการกำหนดให้ Cache ค่อยๆ ทำการ Preload อยู่เบื้องหลัง เวลาที่มีคนเข้ามาในเว็บเรา จะได้โหลดเว็บได้ไวขึ้น เพราะมี Cache เตรียมเอาไว้ให้แล้ว อย่าลืมใส่ Sitemap ด้วย ตัว Plugin W3 Total Cache จะได้รู้ว่า ต้อง Cache หน้าไหนบ้าง
มาถึงเมนู Minify กันบ้าง General ปล่อยเป็น Default ไว้แบบนั้น ไม่ต้องไปยุ่งอะไร ส่วน HTML & XML ก็ Enable ไว้ได้เลย ส่วนใครจะเลือก Inline CSS minification กับ Inline JS minification และ Line break removal ก็ได้ แต่เลือกแล้วต้องตรวจสอบด้วยว่า การแสดงผลหน้าเว็บถูกต้อง เพราะมีโอกาสเกิด error ได้เยอะทีเดียว
ในตอนนี้ ขอยังไม่เลือก JS Minify ขอปล่อยตัวเลือกนี้เอาไว้ก่อน แต่แวะดู HTTP/2 นิดนึง ตัวเลือกนี้ใช้ไม่ได้นะ ถ้าเราเลือก Disk: Enhanced เอาไว้ ซึ่งตอนนี้ผมเลือกใช้ตัวนั้นอยู่ บอกแล้วว่า Basic ก็มีดี ข้ามไปก่อน เดี๋ยวค่อยอธิบาย
เอาล่ะ ยังไม่เลือก CSS Minify เช่นกัน ขอข้ามไปก่อน ส่วน HTTP/2 ก็เช่นกัน ใช้ไม่ได้กับตัวเลือก Disk: Enhanced นะครับ
สำหรับเมนู Database Cache , Object Cache และ Browser Cache ผมใช้ค่า Default ที่ Plugin ใส่มาให้นะครับ ตัวเลือกเยอะแยะมากมาย ส่วนที่เกี่ยวข้องกับ Performance เค้ากำหนดมาให้เราแล้ว ใช้ไปตามนั้นได้เลย ตัวเลือกอื่นอีกเล็กๆ น้อยๆ แทบจะไม่มีผลอะไรกับความเร็วครับ
ใช้โปรแกรม FTP ที่ชื่อ FileZilla เชื่อมต่อเข้าไปที่ hosting แล้วเข้าไปที่ cache directory กันสักหน่อย มี directory minify มาแล้ว แต่เรายังไม่ได้ Enable ตัวเลือก js และ css minify ดังนั้น ใน directory นี้จึงยังไม่มีอะไร
ใน directory ที่ชื่อ page_enhanced มีไฟล์โผล่ขึ้นมาแล้ว จำได้ไหมครับ เราเลือก Disk: Enhanced เอาไว้ Cache ที่ถูกสร้างขึ้นมา จึงถูกนำมาเก็บเอาไว้ที่นี่ เห็นชื่อไฟล์ และ ไฟล์ gzip แล้ว นึกออกไหมครับว่ามันเหมือนกับ WP Super Cache ยังไง ถ้านึกไม่ออก ย้อนกลับไปดูบทความ WP Super Cache นะครับ ตัวเลือก Disk: Enhanced มันเทียบเคียงได้กับ WP-Super-Cache ของ WP Super Cache ครับ เพราะตัว Plugin จะสร้างไฟล์ html ของหน้านั้นๆ ออกมา พร้อมกับไฟล์ gzip ด้วย เมื่อ Browser ร้องขอหน้าไหนมา เจ้า Cache ตัวนี้ก็ส่งหน้านั้นให้ไปเลย ไม่ต้องสร้างหน้านั้นขึ้นมาใหม่ แบบนี้ก็เร็วสิครับ จะช้าได้ไง
สังเกตดูนะครับ ตอนนี้ยังไม่ได้ Enable ตัว JS minify และ CSS minify เลย จำนวน Request คือ 19 ไฟล์ และ CSS กับ JS ก็ต่างคนต่างอยู่ อย่างที่เห็น
กลับมาใหม่ มา Enable JS minify กับ CSS minify อีกที แล้วเดี๋ยวไปดูผลลัพธ์กัน
เมื่อเราเปิดใช้ JS minify และ CSS minify แล้ว ไฟล์ css กับ ไฟล์ js ก็รวมกันเป็นกลุ่มเป็นก้อนดีขึ้น จำนวนไฟล์ จำนวน request ก็ลดลง และคะแนนเพิ่มขึ้นอย่างที่เห็น คะแนนเพิ่มแบบนี้ค่อยชื่นใจหน่อย
เอาล่ะ วกกลับไปที่เมนู General Setting กันอีกสักครั้ง เมื่อกี้นี้เราเลือก Disk: Enhanced เอาไว้ ตอนนี้ เราจะเลือก Disk: Basic ดูบ้าง เมื่อเลือกแล้ว อย่าลืมไปที่หน้า Dashboard แล้วจัดการ clear cache ซะให้หมดก่อนนะครับ
เมื่อเราเลือก Disk: Basic พร้อมกับ clear cache เรียบร้อยแล้ว จะพบว่ามี directory ใหม่ โผล่ขึ้นมาชื่อว่า page เดี๋ยวเข้าไปดูข้างในกัน
ภายใต้ directory page จะมีชื่อไฟล์ยาวๆ และมีนามสกุลเป็น PHP เห็นแบบนี้แล้ว ก็เทียบเคียงกับ WP Super Cache ในตัวเลือก WP-Cache ได้เลย เพราะสร้างไฟล์เป็น PHP ขึ้นมาเหมือนกัน ดังนั้น ความเร็วที่ได้ ก็จะช้ากว่า Disk: Enhanced แน่นอน
สรุปสุดท้ายของบทความนี้ ขอพูดถึง JS minify กับ CSS minify อีกนิดว่า เมื่อเลือกที่จะใช้งานแล้ว ต้องระมัดระวังให้มาก บางทีถ้าเว็บเราติดตั้ง Plugin จำนวนมาก หรือ Theme ที่เราใช้ มีลูกเล่นเยอะ ไฟล์ CSS และ JS ก็จะมากขึ้นไปด้วยอย่างไม่ต้องสงสัย ซึ่งการรวบรวมไฟล์เหล่านั้น มาเป็นไฟล์เดียวกัน ไม่ได้เกิดผลดีเสมอไป เพราะการรวมไฟล์ ที่ไม่ได้คำนึงถึงลำดับก่อนและหลัง กลับกลายเป็นผลเสีย หน้าเว็บแสดงผลผิดพลาดก็เป็นได้ โดยเฉพาะไฟล์ Jquery.js ที่เคยเจอมา ถูกนำไปรวมไว้หลังสุด ทำให้หน้าเว็บรวน เละเลยทีเดียว ต้องคอยดูแล และจัดการให้ดี เหมือนกับคำเตือนของ W3 Total Cache ที่ เตือนเอาไว้ก่อนจะ Enable minify เค้าเตือนมา ก็ต้องฟังล่ะนะ
ถ้าใครลองใช้ Auto minify แล้ว หน้าเว็บพัง เละ โหลดได้ไม่สมบูรณ์ ยังมีทางเลือกอยู่ ถ้าอยากจะเอาชนะ โดยเลือก Minify mode เป็น Manual ซะ ทีนี้เมื่อเรากลับไปที่เมนู Minify ก็จะพบว่า เราจะเลือกได้ ทั้ง JS และ CSS ว่าจะจับไฟล์ไหนมา minify บ้าง และเรียงลำดับก่อนหลังได้ ถ้าเป็น JS ก็เลือกวางตำแหน่งได้ด้วย อยากให้ไฟล์ไหนอยู่ใน header หรืออยู่อันดับแรก หลังแท็ก body ก็ได้ ไว้ท้ายสุดของ body ก็ได้
เรื่องของ Minify คงแนะนำได้เพียงเท่านี้ และต้องไปลองดูกันเอาเอง เพราะไม่มีสูตรงอะไรตายตัว อย่างที่ W3 Total Cache เตือนเองไว้ครับ เว็บแต่ละเว็บ Server แต่ละแห่ง Theme แต่ละตัว Plugin จำนวนมาก ทำให้เว็บไซต์แต่ละเว็บ มีความแตกต่าง ต้องทดสอบกันเอาเอง ถ้าคิดว่าคะแนน ความเร็วของบรรดา เว็บไซต์ Speed Test ทั้งหลายสำคัญมาก กับคะแนนที่เพิ่มเล็กน้อย ก็ต้องลองเสี่ยงดูครับ