ตั้งแต่ WPML เปลี่ยนมาเป็นเชิงพาณิชย์ wpml.org ก็ต้องรับมือกับปริมาณการเข้าชมที่เพิ่มขึ้นอย่างมาก เมื่อสองสัปดาห์ก่อน เซิร์ฟเวอร์ของเราทำงานหนักถึง 95% และมีเวลาตอบสนองนานกว่า 10 วินาที แต่เมื่อใช้ W3TC ภาระการทำงานของเรากลับมาอยู่ที่ 5% และเวลาตอบสนองอยู่ที่ประมาณ 300 ms
หากคุณยังไม่คุ้นเคย W3TC คือปลั๊กอินสำหรับเพิ่มประสิทธิภาพให้กับไซต์ ซึ่งรวมถึงแคชของหน้าเว็บ แต่นั่นเป็นเพียงจุดเริ่มต้นเท่านั้น นอกเหนือจากการแคชหน้าเว็บพื้นฐานแล้ว ปลั๊กอินนี้ยังย่อขนาดไฟล์ JS และ CSS บีบอัดทุกอย่าง และเรียกใช้ CDN (เครือข่ายการจัดส่งเนื้อหา) เมื่อรวมกันแล้ว ฟังก์ชันเหล่านี้สามารถเพิ่มความเร็วให้กับไซต์ได้อย่างมหาศาล ทำให้ไซต์ WordPress ที่ซับซ้อนสามารถรับมือกับปริมาณการเข้าชมที่สูงได้
ทำไมสิ่งนี้จึงสำคัญมากสำหรับไซต์ WordPress
ภาพหนึ่งภาพแทนคำพูดได้นับพันคำ นี่คือวิธีการโหลดไซต์ของเราเมื่อไม่มีการแคชใด ๆ (สร้างโดย Pingdom Tools):
หากคุณคิดว่านี่น่ากลัวแล้ว โปรดจำไว้ว่าในความเป็นจริงมันแย่กว่านั้น แผนภูมิเวลาในการโหลดนี้ถูกบันทึกไว้ในขณะที่เซิร์ฟเวอร์ของเราทำงานอยู่ที่ 5% เมื่อมันทำงานโดยไม่มีแคชจริง ๆ เซิร์ฟเวอร์จะทำงานหนักถึง 95% และใช้เวลาประมวลผลนานกว่ามาก ไบต์แรกใช้เวลาถึง 5 วินาทีในการส่งออก ไม่ใช่ 1/2 วินาทีอย่างที่คุณเห็นในแผนภูมินี้
ในการแสดงหน้าแรกของเราอย่างสมบูรณ์ เซิร์ฟเวอร์ของเราต้องส่งไฟล์ถึง 77 ไฟล์ แม้แต่แผนภูมินี้ซึ่งทำงานที่ภาระเซิร์ฟเวอร์ 5% ก็ยังสิ้นสุดด้วยการหมดเวลาที่ 30 วินาที (ดูเส้นสีแดง)
เป็นเพราะการเขียนโปรแกรมที่ลวก ๆ และแนวทางการออกแบบที่ไม่ดีใช่หรือไม่ ไม่ใช่เลย
พลังของ WordPress มาจากความเป็นโมดูลาร์ คุณสามารถเลือกธีมใดก็ได้ที่คุณชอบ พร้อมกับการผสมผสานปลั๊กอินใด ๆ ก็ได้ ซึ่งหมายความว่าแต่ละส่วนได้รับการพัฒนาอย่างอิสระและทำงานด้วยทรัพยากรของตนเอง ปลั๊กอินส่วนใหญ่ที่คุณเปิดใช้งานจะมีไฟล์ CSS และ Javascript หลายไฟล์ และมีส่วนทำให้เกิดภาระการประมวลผลของ PHP และ MySQL คุณสามารถปรับแต่งด้วยตนเองได้ แต่คุณจะสูญเสียความเป็นโมดูลาร์ที่ยอดเยี่ยมนี้ไปและกลับไปที่จุดเริ่มต้น
ลองรันไซต์ของคุณผ่านเครื่องมือของ Pingdom หรือการวัดเวลาในการโหลดหน้าเว็บอื่น ๆ (มี ส่วนเสริม Firefox สำหรับสิ่งนี้) ดูว่าไฟล์ใดโหลดบ้างและโหลดตามลำดับใด คุณจะสังเกตเห็นว่าไฟล์ CSS โหลดรูปภาพและ CSS อื่น ๆ และมีไฟล์ Javascript จำนวนมากที่โหลดสำหรับแต่ละหน้า
เพื่อเรียกน้ำย่อย นี่คือสิ่งที่เราทำสำเร็จโดยใช้ฟีเจอร์ทั้งหมดจาก W3TC:
ตัวเลขที่คุณเห็นอยู่นี้ถูกต้องแล้ว มีการดึงไฟล์ทั้งหมด 28 ไฟล์เพื่อแสดงหน้าเว็บ 5 ไฟล์มาจาก wpml.org (เซิร์ฟเวอร์ของเราเอง) และที่เหลือมาจาก CDN (เครือข่ายการจัดส่งเนื้อหา) PHP แทบไม่ต้องทำอะไรเลยเพื่อให้บริการหน้านี้ ยกเว้นตรวจสอบว่ามันอยู่ในแคชและการตรวจสอบเล็ก ๆ น้อย ๆ อื่น ๆ อีกสองสามอย่าง
หน้าเว็บทั้งหมดโหลดในเวลาน้อยกว่า 2 วินาทีและทำให้เกิดภาระการทำงานที่เราแทบจะวัดไม่ได้บนเซิร์ฟเวอร์ เรามีความสุข ผู้เข้าชมมีความสุข และแม้แต่ Google ก็มีความสุข
ขั้นตอนที่ 1) แคชของหน้าเว็บ
สิ่งแรกและพื้นฐานที่สุดที่คุณต้องการทำคือเปิดใช้งานการแคชหน้าเว็บ ไปที่ Performance เปิดใช้งาน W3TC และกำหนดค่าในส่วน Page Caching
สำหรับการแคชหน้าเว็บ เรายังคงใช้การตั้งค่าพื้นฐาน สิ่งหนึ่งที่เราเพิ่มเข้ามาคือการยกเว้นบัญชีลูกค้าและส่วนการดาวน์โหลดออกจากแคชของหน้าเว็บ เพื่อไม่ให้ W3TC รบกวนบัญชีลูกค้าของ WPML และการดาวน์โหลดของ WPML
หากคุณใช้แคช opcode W3TC จะใช้ประโยชน์จากสิ่งนี้เพื่อเพิ่มความเร็วให้กับไซต์ของคุณยิ่งขึ้น เราไม่ได้ใช้มัน แต่มันก็คุ้มค่าหากคุณกำลังรันการประมวลผล PHP ที่ซับซ้อนซึ่งไม่ได้ถูกแคชไว้
ขั้นตอนที่ 2) ย่อขนาด – แพ็คและบีบอัด CSS และ JavaScript
จำไฟล์ CSS และ JS ทั้งหมดที่ธีมและปลั๊กอินเพิ่มเข้ามาได้ไหม ตอนนี้ถึงเวลาแก้ไขภาระการทำงานที่พวกมันก่อขึ้นแล้ว
การย่อขนาด (Minify) จะรวบรวมไฟล์ทรัพยากรหลายไฟล์ แพ็คเข้าด้วยกันเป็นไฟล์เดียวและบีบอัด ผลลัพธ์ที่ได้คือไฟล์ขนาดใหญ่หนึ่งไฟล์แทนที่จะเป็นไฟล์ขนาดเล็กหลายสิบไฟล์
แม้ว่าขนาดโดยรวมอาจลดลงเพียง 50% แต่ภาระการทำงานที่ประหยัดได้นั้นมหาศาล แทนที่เบราว์เซอร์จะต้องส่งคำขอ HTTP หลายครั้งและรับไฟล์ขนาดเล็กจำนวนมาก มันจะส่งคำขอเพียงครั้งเดียวและรับไฟล์ทั้งหมดพร้อมกัน การเปลี่ยนแปลงนี้น่าจะเป็นปัจจัยที่ใหญ่ที่สุดในการปรับปรุงการตอบสนองของไซต์คุณ โดยเฉพาะสำหรับผู้เข้าชมใหม่ (ที่ยังไม่มีแคช CSS และ JS ของคุณ)
คลิกที่ปุ่ม Help ที่ด้านบนของหน้า W3TC จะรันผ่านไซต์ทั้งหมดของคุณและค้นหาไฟล์ทรัพยากร จากนั้นจะให้คุณเลือกไฟล์ที่จะรวมเข้าด้วยกัน โดยปกติแล้วคุณสามารถเลือกทั้งหมดได้ แต่คุณต้องใส่ใจกับสิ่งที่คุณกำลังทำอยู่บ้าง เนื่องจากสิ่งนี้อาจเปลี่ยนลำดับการโหลดได้
เมื่อคุณเลือกไฟล์ CSS และ JS ที่จะย่อขนาดแล้ว คุณต้องตรวจสอบให้แน่ใจว่าลำดับของไฟล์เหล่านั้นถูกต้อง
สำหรับไฟล์ CSS ให้ลากไฟล์ขึ้นและลงในรายการ
ลำดับที่คุณเห็นในรายการนี้ควรตรงกับลำดับการโหลดไฟล์ CSS เมื่อไม่มีย่อขนาด (Minify) คุณสามารถดูได้ในซอร์สโค้ดหน้า HTML ของคุณ
ไฟล์ Javascript นั้นยุ่งยากกว่าเล็กน้อย ในที่นี้ลำดับการโหลดมีความสำคัญยิ่งกว่า เนื่องจากลำดับที่ผิดพลาดจะส่งผลให้เกิดข้อผิดพลาดของ JS และการทำงานที่เสียหาย
W3TC ให้คุณเลือกได้ว่าไฟล์ JS ใดจะไปที่ส่วนหัว (header) และไฟล์ใดจะไปที่ส่วนเนื้อหา (body) ตัวอย่างเช่น สคริปต์ Google Analytics จะอยู่ก่อนหน้า ในขณะที่ jQuery จะเข้าไปอยู่ในส่วนหัว เนื่องจากจำเป็นต้องรันก่อน (และอยู่นอกรายการย่อขนาด)
ขั้นตอนที่ 3) เครือข่ายการจัดส่งเนื้อหา (CDN)
สำหรับเราแล้ว สิ่งที่ยอดเยี่ยมที่สุดคือ CDN ที่ทำงานได้อย่างสมบูรณ์แบบ
การกำหนดค่าและการรัน CDN อยู่นอกเหนือขอบเขตของโพสต์นี้ เนื่องจากต้องมีการตั้งค่าและบัญชีในบริการของบุคคลที่สาม
สำหรับไซต์ของเราเอง เราใช้ Amazon S3 สำหรับการจัดเก็บข้อมูลและ CloudFront สำหรับการจัดส่ง มีตัวเลือกที่ดีอื่น ๆ อีกมากมายที่คุณสามารถสำรวจและเปรียบเทียบได้
เมื่อตั้งค่าบัญชี CDN ของคุณแล้ว W3TC จะส่งไฟล์ในเครื่องของคุณไปยัง CDN และแทนที่ลิงก์จากเซิร์ฟเวอร์ของคุณไปยังไฟล์ใน CDN จากนั้นเซิร์ฟเวอร์ของคุณจะส่งเฉพาะไฟล์ HTML และ CDN จะจัดการส่วนที่เหลือ
ในขณะที่เซิร์ฟเวอร์ของคุณเป็นเครื่องเดียว แต่ CDN คือเครือข่ายของเซิร์ฟเวอร์ มันจะส่งไฟล์จากเซิร์ฟเวอร์ที่อยู่ใกล้ที่สุดไปยังผู้เข้าชมแต่ละราย CDN สามารถให้บริการไฟล์คงที่ได้เร็วกว่าเซิร์ฟเวอร์เดียวใด ๆ มาก การใช้ CDN จะช่วยปรับปรุงประสบการณ์ของผู้เข้าชมและลดแบนด์วิดท์และการใช้งานเครือข่ายของเซิร์ฟเวอร์คุณลงอย่างมาก
คุณควรทำตามวิซาร์ดการตั้งค่า CDN ใน W3TC ซึ่งจะช่วยคุณถ่ายโอนคลังสื่อ ทรัพยากรของธีมและปลั๊กอินไปยัง CDN
สนุกกับการปรับแต่งประสิทธิภาพของไซต์อยู่ใช่ไหม แจ้งให้เราทราบโดยการแสดงความคิดเห็นที่นี่ได้เลย!
