Cloudways ทำการเปลี่ยนแปลงครั้งใหญ่กับ Breeze ดังนั้นบทช่วยสอนในวันนี้จึงเกี่ยวกับวิธีตั้งค่า Cloudways Breeze ปลั๊กอินนี้ดีขึ้นเรื่อยๆ และตอนนี้ก็มี JavaScript ดีเลย์ ควบคุมการเต้นของหัวใจ โหลดฟอนต์ล่วงหน้า และดึงข้อมูลล่วงหน้า มีคะแนนเพียง 3.8/5 ดาว แต่ฉันหวังว่าพวกเขาจะเพิ่มคุณสมบัติใหม่ ๆ และทำให้แอปมีเสถียรภาพมากขึ้น
การตั้งค่า Breeze ส่วนใหญ่จะคล้ายกับที่คุณจะพบในปลั๊กอินแคชอื่นๆ เช่น WP Rocket และ FlyingPress ดังนั้นการตั้งค่า Breeze และการทดสอบ TTFB และเวลาในการโหลดจึงควรใช้เวลาเพียงไม่กี่นาที Cloudways ยังมีบทช่วยสอน Breeze แต่ก็ไม่ได้เพิ่มอะไรมากไปกว่าสิ่งที่มีอยู่แล้วในปลั๊กอิน เพียงติดตั้งปลั๊กอินและทำตามบทช่วยสอนเพื่อทำความเข้าใจให้ดียิ่งขึ้น
ตัวเลือกพื้นฐาน
เปิดระบบแคช เพราะแน่นอนว่าคุณต้องการให้ปลั๊กอินแคชสนับสนุนการแคช
ตั้งค่า Purge Cache After เป็น 1440 นี่คืออายุการใช้งานของแคช ซึ่งถูกกำหนดเป็นหนึ่งวัน คุณสามารถเปลี่ยนตัวเลขนี้ได้หาก CPU ของคุณถูกใช้งานมากหรือหากคุณไม่ได้โพสต์เนื้อหาบ่อยนัก
สร้างเว็บไซต์ที่น่าทึ่ง
ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด
เริ่มเลยเปิดการบีบอัด Gzip เพื่อลดขนาดของ HTML, CSS และ JS โดยการบีบอัดเนื้อหา
เปิดแคชของเบราว์เซอร์ไว้เพื่อให้เบราว์เซอร์สามารถจัดเก็บไฟล์บางไฟล์โดยเพิ่มส่วนหัวที่หมดอายุ
เก็บตัวเลือก Lazy Load Images การตั้งค่าใดในการโหลด iframe แบบสันหลังยาว และใช้คุณสมบัติการโหลดแบบขี้เกียจของเบราว์เซอร์เอง โดยส่วนตัวแล้วฉันจะใช้ Cloudflare Enterprise เพื่อปรับแต่งรูปภาพ (ไม่ใช่ Breeze) ซึ่งมาพร้อมกับ Mirage + Polish Breeze ไม่มีตัวเลือกในการป้องกันไม่ให้รูปภาพโหลดแบบขี้เกียจเป็นรูปภาพแบบโหลดแบบขี้เกียจในพื้นหลัง หรือแทนที่ iframe ของ YouTube ด้วยรูปภาพตัวอย่าง นอกจากนี้ยังไม่มีวิธีการโหลดรูปภาพล่วงหน้า เพิ่มขนาดรูปภาพที่ขาดหายไป ใช้ WebP หรือปรับขนาดรูปภาพสำหรับมือถือ ใช้ Content Delivery Network (CDN) หรือปลั๊กอินปรับแต่งรูปภาพแทน
เปิด Safe Links ข้ามต้นทางไว้ เพื่อให้สามารถเพิ่ม "noopener noreferrer" ให้กับลิงก์ภายนอกได้ สิ่งนี้ช่วยเพิ่มความปลอดภัยโดยการบล็อกการเข้าถึงเว็บไซต์ที่มีลิงก์อยู่ (noopener) หรือโดยการซ่อนข้อมูลผู้อ้างอิง (noreferrer) สิ่งเหล่านี้ไม่ควรทำร้าย SEO หรือลิงค์พันธมิตรของคุณ
ปิดแคชผู้ใช้ที่เข้าสู่ระบบ ไซต์ส่วนใหญ่ไม่จำเป็นต้องแคชผู้ใช้ที่เข้าสู่ระบบ เว้นแต่ว่าคุณกำลังเรียกใช้ไซต์สมาชิกหรือสิ่งที่คล้ายกัน ซึ่งในกรณีนี้ คุณจะต้องเลือกบทบาท
การเพิ่มประสิทธิภาพไฟล์
คุณควรทดสอบการตั้งค่าเหล่านี้เพื่อดูว่าจะทำให้ไซต์ของคุณเสียหายหรือทำให้มีความสำคัญมากขึ้นบนเว็บหรือไม่ หากการตั้งค่าการลดขนาดทำให้ไซต์ของคุณเสียหาย จะเป็นการดีกว่าหากค้นหาไฟล์ที่เสียหายในซอร์สโค้ดของคุณและป้องกันไม่ให้มีการลดขนาดเพื่อให้ไฟล์ที่เหลือสามารถถูกลดขนาดได้
การตั้งค่า HTML
เปิดตัวเลือกการย่อขนาด HTML ไว้เพื่อให้สามารถลดขนาดไฟล์ HTML โดยปล่อยช่องว่างและแสดงความคิดเห็น
การตั้งค่า CSS
ควรเปิดใช้งานตัวเลือก CSS Minify เพื่อให้ปลั๊กอินสามารถลบช่องว่างและความคิดเห็นออกจากไฟล์ CSS เพื่อให้มีขนาดเล็กลง
แบบอักษรควรมองเห็นได้ในขณะโหลด คุณสามารถแก้ไขคำแนะนำของ PSI เพื่อให้แน่ใจว่าข้อความยังคงมองเห็นได้ในขณะที่โหลดฟอนต์บนเว็บโดยเพิ่ม font-display: swap เป็น CSS ของฟอนต์ของคุณ ซึ่งจะบอกให้คอมพิวเตอร์ของคุณโหลดฟอนต์ทางเลือกในขณะที่โหลดฟอนต์ปกติ สิ่งนี้จะหยุด FOIT (แฟลชของข้อความที่มองไม่เห็น) แต่ทำให้เกิด FOUC (แฟลชของข้อความที่อ่านไม่ได้) (แฟลชของเนื้อหาที่ไม่ได้จัดรูปแบบ) มันเป็นทางเลือกดังนั้นลองทั้งสองอย่าง
เปิดใช้ตัวเลือกรวม Inline CSS ซึ่งจะลดขนาด CSS ในบรรทัดด้วย (CSS ที่อยู่ในไฟล์ HTML ของคุณซึ่งตรงข้ามกับ CSS ภายนอก) บางครั้งอาจทำให้ไซต์ของคุณเสียหายได้ ดังนั้นโปรดใช้ความระมัดระวังเมื่อคุณทดสอบการตั้งค่านี้
ปิดการรวม CSS เนื่องจากตาม WP Johnny เฉพาะไซต์ที่มีไฟล์ CSS/JS ขนาดเล็กเท่านั้นที่ควรรวมเข้าด้วยกัน ในขณะที่ไซต์ขนาดใหญ่ไม่ควรรวมเข้าด้วยกัน ตรวจสอบขนาดของ CSS และ JS ของคุณในแผนภูมิ GTmetrix Waterfall
ใช้ตัวเลือกไม่รวม CSS อาจมีบางไฟล์ที่ทำให้เกิดปัญหา ค้นหาไฟล์เหล่านั้นในซอร์สโค้ดของคุณและเพิ่มลงในรายการเพื่อไม่ให้ย่อหรือรวมกัน
การตั้งค่า JS
เมื่อคุณเปิด JS Minify มันจะลดขนาดไฟล์ JS โดยกำจัดช่องว่างและความคิดเห็น
ยุติการรวม JS เป็นแนวคิดเดียวกับการรวม CSS และ JavaScript เข้าด้วยกัน ตรวจสอบแผนภูมิ GTmetrix Waterfall ของคุณอีกครั้ง และรวมเฉพาะเมื่อขนาดไฟล์ JavaScript ของคุณเล็กมากเท่านั้น
อย่าปิดการรวม Inline JS เป็นแนวคิดเดียวกับการรวม CSS แบบอินไลน์ แต่สำหรับไฟล์ JS
Exclude JS ใช้ในลักษณะเดียวกับ Exclude CSS หากการตั้งค่า JS ทำให้เกิดปัญหา ให้ค้นหาไฟล์ที่เป็นสาเหตุและลบออก
ในการย้ายไฟล์ JS ไปยังส่วนท้าย ธีมและปลั๊กอินจำนวนมากจะโหลดไฟล์ JavaScript ในส่วนท้ายอยู่แล้ว อย่างไรก็ตาม หากคุณมีไฟล์ JS ที่ไม่ได้โหลดในส่วนท้าย แต่โหลดในส่วนหัว คุณสามารถเพิ่มได้ที่นี่ (ไม่รองรับไฟล์ที่ย่อขนาด) อาจทำให้ไซต์ของคุณเสียหายได้ง่าย ดังนั้นโปรดใช้ความระมัดระวัง
เลือกอันนี้ ไฟล์ JS ที่มีการเลื่อนการโหลด เฉพาะเมื่อการเลื่อน JavaScript สามารถแก้ไขรายการ PSI ของทรัพยากรที่บล็อกการแสดงผลได้ นี่เป็นจุดเริ่มต้นที่ดีในการเรียนรู้ว่าไฟล์ JavaScript ใดที่คุณควรเลื่อนออกไป แต่ไฟล์ JavaScript ใดๆ ที่ไม่จำเป็นในการโหลดหน้าเว็บควรถูกเลื่อนออกไปจนกว่าจะถึงภายหลัง ลอง Autoptimize หากคุณไม่ต้องการเพิ่มไฟล์ JavaScript ไปยัง Breeze ด้วยมือ
เปิด Delay JS Inline Scripts ไว้ เนื่องจากจะทำให้ JavaScript แบบอินไลน์ล่าช้าจนกว่าผู้ใช้จะโต้ตอบกับมัน ตรวจสอบรายชื่อไฟล์ JS ที่ใช้กันทั่วไปเพื่อชะลอ (คุณจะต้องป้อนคีย์เวิร์ด ไม่ใช่ไฟล์เต็ม) JS บุคคลที่สามจำนวนมาก เช่น AdSense, Analytics, Facebook Pixel และความคิดเห็น โหลดอยู่ครึ่งหน้าล่าง
โหลดล่วงหน้า
โหลด Webfont ล่วงหน้า - ภายใต้ "คำขอคีย์โหลดล่วงหน้า" PSI อาจบอกคุณว่าควรโหลดฟอนต์ใดล่วงหน้า แต่ตามกฎทั่วไป คุณควรโหลดล่วงหน้าเฉพาะฟอนต์ที่อยู่ในไฟล์ CSS หรือโหลดครึ่งหน้าบน นอกจากนี้ยังสามารถใช้เพื่อโหลดไฟล์ CSS ล่วงหน้าได้ แต่หากคุณทำเช่นนั้น โปรดใช้ความระมัดระวังและทดสอบผลลัพธ์
โหลดลิงก์ล่วงหน้า - อย่าปิดสิ่งนี้ เมื่อผู้ใช้เลื่อนเมาส์ไปที่ลิงก์ หน้านั้นจะโหลดในพื้นหลัง เมื่อผู้ใช้คลิกลิงก์ หน้าเว็บจะดูเหมือนโหลดทันที แต่ถ้าผู้เยี่ยมชมจำนวนมากวางเมาส์เหนือลิงก์จำนวนมาก สิ่งนี้จะทำให้ CPU ของคุณทำงานหนักขึ้น
การดึงข้อมูลคำขอ DNS ล่วงหน้า - ดูรายงาน PSI สำหรับ "ลดผลกระทบของรหัสบุคคลที่สาม" คัดลอก URL ของโดเมนบุคคลที่สามทั้งหมดที่โหลดบนเว็บไซต์ของคุณและวางที่นี่ คุณควรใช้การเชื่อมต่อล่วงหน้าสำหรับ Google Fonts + CDN URL สิ่งนี้ช่วยให้เบราว์เซอร์คาดการณ์และโหลดโดเมนของบุคคลที่สามเร็วขึ้นเล็กน้อย แต่อาจจะไม่ทำให้เว็บดีขึ้นโดยรวม
ตัวเลือกขั้นสูง
ส่วนใหญ่แล้ว Never Cache URL ใช้เพื่อกัน URL ออกจากแคช (ส่วนใหญ่สำหรับไซต์ WooCommerce หรือที่คล้ายกัน) หากคุณยกเว้นที่นี่ Cloudways บอกว่าคุณควรแยกออกจากการเคลือบเงาโดยไปที่การตั้งค่าแอปพลิเคชัน > การตั้งค่าการเคลือบเงา > เพิ่มการยกเว้นใหม่
Cache Query Strings เพื่อจัดเก็บ URL ของสตริงในแคช ตามค่าเริ่มต้น Breeze จะไม่เก็บสตริงข้อความค้นหา (URL ที่มีลักษณะดังนี้:?model=mercedes) ไว้ในแคช หากคุณต้องการเก็บไว้ในแคช ให้เพิ่มที่นี่
เปิด "ปิดใช้งานอิโมจิ" ซึ่งจะลบไฟล์ JS ขนาดเล็ก (หากคุณต้องการใช้อิโมจิ เพียงใช้ Unicode)
API การเต้นของหัวใจ
อย่าปิดการควบคุมการเต้นของหัวใจ หากคุณดูการวิเคราะห์ Cloudways ของคุณ (ภายใต้ Application > Monitoring) คุณอาจพบว่า admin-ajax ได้รับคำขอมากเกินไป หากคุณปิดหรือจำกัด Heartbeat API คำขอเหล่านี้และการใช้งาน CPU จะลดลง แม้ว่าจะเป็นการดีที่สุดที่จะปิดทั้งหมด แต่ให้แน่ใจว่าคุณโอเคกับการปิดการแจ้งเตือนปลั๊กอินตามเวลาจริง ดูเมื่อผู้ใช้รายอื่นแก้ไขโพสต์และฟีเจอร์ Heartbeat API อื่นๆ
ปิด Heartbeat Front-end เนื่องจากไซต์ส่วนใหญ่ไม่ต้องการที่นี่
เกี่ยวกับ Heartbeat Post Editor จะบันทึกโดยอัตโนมัติทุกๆ 5 นาที หากคุณต้องการบันทึกอัตโนมัติ คุณสามารถตั้งค่าขีดจำกัดได้ที่นี่
นอกจากนี้ ให้ปิด Heartbeat ในแบ็กเอนด์ เนื่องจากคุณไม่จำเป็นต้องใช้ที่นั่น
ตัวเลือกฐานข้อมูล
นอกเหนือจากการทำความสะอาดหลังการแก้ไข ฉันจะทำอย่างอื่นทั้งหมด การมีตัวเลือกในการเก็บจำนวนการแก้ไขหลังการแก้ไข (เช่น 5 รายการ ดังนั้นคุณจึงมีข้อมูลสำรอง) และการล้างฐานข้อมูลตามกำหนดเวลาเป็นประจำจะมีประโยชน์มาก WP-Optimize เช่นเดียวกับปลั๊กอินแคชอื่น ๆ ควรติดตั้งในบางโอกาสเพื่อทำการล้างฐานข้อมูลของคุณอย่างละเอียดยิ่งขึ้น ด้วยวิธีนี้ คุณสามารถระบุได้ว่าปลั๊กอินหรือโมดูลใดที่ทำให้เกิดการโหลดที่ไม่จำเป็นบนฐานข้อมูล และลบตารางที่ตกค้างที่อาจทิ้งไว้ ทั้ง Breeze และส่วนเสริมแคชอื่น ๆ ไม่ทำเช่นนี้
ซีดีเอ็น
เปิดการเปิดใช้งาน CDN เฉพาะเมื่อคุณไม่ได้ใช้บริการ CDN ของ Cloudflare เช่นเดียวกับ Gijo Varghese ฉันพึ่งพา Cloudflare และ BunnyCDN (ดูโพสต์ Facebook ของเขาด้านล่าง) ข้ามขั้นตอนนี้หากคุณไม่ได้ใช้เครือข่ายการส่งเนื้อหา (CDN) ที่ต้องใช้ URL ของ CDN
หากเครือข่ายการส่งเนื้อหา (CDN) ของคุณใช้ CNAME แบบกำหนดเอง ให้ป้อนที่นี่ คุณสามารถเพิ่มจำนวนเนื้อหาที่ให้บริการโดยเพิ่ม CDN URL ให้กับปลั๊กอินแคชของคุณ นอกเหนือจากการใช้ปลั๊กอิน BunnyCDN
เมื่อพูดถึงการให้บริการเนื้อหาจาก CDN ไดเร็กทอรีเริ่มต้นคือ wp-includes และ wp-content แต่คุณสามารถเพิ่มได้โดยระบุไดเร็กทอรีที่คุณต้องการให้บริการ
รักษาสิ่งนี้ไว้ตามที่เป็นอยู่ โดยปกติแล้ว คุณต้องการให้ CDN จัดเตรียมไฟล์สแตติกทั้งหมด
อย่าปิดหากคุณต้องการใช้ URL เส้นทางสัมพัทธ์ (URL แบบเต็มของเว็บไซต์ของคุณ)
วานิช
เมื่อเปิดใช้งาน "Auto Purge Varnish" จะทำความสะอาดสารเคลือบเงาแบบล่องหน (Cloudways บอกว่าให้เปิดใช้งาน)
เซิร์ฟเวอร์วานิชระบุที่อยู่ IP ของเซิร์ฟเวอร์วานิชของคุณ ซึ่งจะถูกเพิ่มโดยอัตโนมัติ
หากคุณได้ทำการเปลี่ยนแปลงการออกแบบหรือลักษณะอื่นๆ ของไซต์แล้ว แต่ยังไม่เห็นการเปลี่ยนแปลงดังกล่าว ให้ลองล้างแคชของวานิช
ความคิดสุดท้าย
Cloudways นั้นยอดเยี่ยมมาก และฉันใช้ Vultr High Frequency มาระยะหนึ่งก่อนจะเปลี่ยนไปใช้ Breeze (หลังจากย้ายจาก SiteGround) ฉันคิดว่า Cloudways น่าจะเป็นโฮสต์ที่น่าดึงดูดกว่านี้หากให้ความสนใจกับปลั๊กอิน Breeze มากขึ้น
