ไดเรกทอรีบทความ
กำลังประสบปัญหาในการเลือกประเภทการฝังที่เหมาะสมสำหรับ W3 Total Cache Minify อยู่ใช่ไหม? บทความนี้จะแบ่งปันประสบการณ์จริงของเว็บมาสเตอร์และให้คำแนะนำทีละขั้นตอนเพื่อเลือกประเภทการฝัง Minify ที่ถูกต้อง หลีกเลี่ยงปัญหาด้านรูปแบบเว็บไซต์และการโหลดที่ผิดพลาด นอกจากนี้ยังรวมถึงวิธีการตั้งค่าที่ใช้งานง่ายซึ่งแม้แต่ผู้เริ่มต้นก็สามารถนำไปใช้ได้อย่างง่ายดายWordPress เร่งความเร็วได้อย่างปลอดภัยโดยไม่ชน!
ฉันกำลังปรับแต่งเว็บไซต์อยู่ และเมื่อฉันเปิดการตั้งค่าการย่อขนาดไฟล์ใน W3 Total Cache ฉันก็รู้สึกงุนงงอย่างมาก เมนูแบบดรอปดาวน์สำหรับประเภทฝังตัวมีตัวเลือกสี่ตัวเลือก ได้แก่ ค่าเริ่มต้น (บล็อก), ใช้ JS สำหรับการไม่บล็อก, ใช้ "แบบอะซิงโครนัส" สำหรับการไม่บล็อก และใช้ "แบบหน่วงเวลา" สำหรับการไม่บล็อก
ฉันคิดอยู่ครู่หนึ่ง เรื่องทั้งหมดนี้เกี่ยวกับอะไรกันแน่?
เชื่อผมเถอะ คุณไม่ได้อยู่คนเดียวหรอก ตัวเลือกทั้งสี่นี้อาจทำให้แม้แต่ผู้เริ่มต้นก็ยังงุนงงได้เลย นับประสาอะไรกับคนที่ใช้ WordPress มาหลายปีแล้ว บทความนี้จะนำเสนอข้อผิดพลาดที่ผมเคยเจอและบทเรียนที่ผมได้เรียนรู้โดยตรง คุณไม่จำเป็นต้องไปอ่านเอกสาร แค่ทำตามคำแนะนำของผมก็พอ
ประเภทการฝังข้อมูลทั้งสี่แบบนี้คืออะไรกันแน่?
ก่อนอื่นเรามาพูดถึงลักษณะนิสัยของตัวละครทั้งสี่ตัวนี้กันก่อน
ค่าเริ่มต้น (ถูกบล็อก)นี่เรียกว่าการบล็อกแบบเริ่มต้น (Default blocking) เป็นวิธีที่ตรงไปตรงมาที่สุด: เบราว์เซอร์จะหยุดเมื่อพบสคริปต์ ดาวน์โหลดและเรียกใช้สคริปต์จนเสร็จสมบูรณ์ จากนั้นจึงแสดงผลหน้าเว็บต่อ ฟังดูน่าเชื่อถือใช่ไหม? แต่ข้อเสียคือ การโหลดหน้าเว็บครั้งแรกจะถูกบล็อก ผู้ใช้จะต้องรอให้สคริปต์ทำงานเสร็จก่อนจึงจะเห็นอะไรได้
การใช้ JavaScript สำหรับการทำงานแบบไม่บล็อกนี่เป็นวิธีที่น่าสนใจมาก แทนที่จะเขียนแท็ก `<script>` ลงบนหน้าเว็บโดยตรง มันจะสร้างสคริปต์ขนาดเล็กขึ้นมาก่อน จากนั้นจึงแทรกสคริปต์ที่จำเป็นต้องโหลดลงในหน้าเว็บผ่าน JavaScript หลังจากที่หน้าเว็บทำงานแล้ว ด้วยวิธีนี้ หน้าเว็บจะแสดงผลก่อน และสคริปต์จะโหลดทีละส่วน ฟังดูดีใช่ไหม? อย่างไรก็ตาม ปัญหาคือ กระบวนการแทรกแบบไดนามิกนี้อาจทำให้ลำดับการทำงานเดิมของสคริปต์เปลี่ยนแปลงไป หากสคริปต์บางตัวในหน้าเว็บของคุณพึ่งพาลำดับการทำงานเป็นอย่างมาก อาจเกิดปัญหาขึ้นได้
ใช้ "asynchronous" สำหรับการทำงานแบบไม่บล็อกวิธีการนี้เกี่ยวข้องกับการเพิ่มแอตทริบิวต์ `async` ลงในแท็ก `<script>` สคริปต์จะดาวน์โหลดแบบอะซิงโครนัสในพื้นหลังและทำงานทันทีหลังจากดาวน์โหลดเสร็จ โดยไม่ต้องรอให้หน้าเว็บทำงานเสร็จ อย่างไรก็ตาม ข้อเสียคือลำดับการทำงานไม่สามารถควบคุมได้ สคริปต์ใดที่ดาวน์โหลดเสร็จก่อนก็จะทำงานก่อน โดยไม่คำนึงถึงลำดับที่คุณระบุไว้ในโค้ด
การใช้ "delay" สำหรับการทำงานแบบไม่บล็อกนี่คือความหมายของการเพิ่มแอตทริบิวต์ `defer` สคริปต์จะรอจนกว่าหน้าเว็บทั้งหมดจะถูกประมวลผลเสร็จก่อนที่จะทำงาน และที่สำคัญคือ มันจะรักษาลำดับเดิมที่คุณเขียนไว้ ซึ่งใช้งานง่ายมาก เพราะมันจะไม่ปิดกั้นหน้าจอแรกและไม่รบกวนลำดับการแสดงผล
ฉันควรเลือกอันไหนดี?
กล่าวโดยสรุป ตัวเลือกทั้งสี่นี้เปรียบเสมือนคำถามแบบเลือกตอบ:คุณต้องการความเร็วหรือความเป็นระเบียบ?
ข้อเสนอแนะของผมมีดังนี้:
หากเว็บไซต์ของคุณมีขนาดเล็ก มีสคริปต์ไม่มาก และคุณไม่ได้มีความต้องการความเร็วในการโหลดสูงมากนัก การใช้การตั้งค่าเริ่มต้น (บล็อก) เป็นตัวเลือกที่ง่ายที่สุด แม้ว่าจะช้าลงเล็กน้อย แต่ก็จะไม่ก่อให้เกิดปัญหาใดๆ
หากคุณต้องการปรับปรุงความเร็วในการแสดงผลหน้าจอแรก และสคริปต์ของคุณไม่มีข้อกำหนดที่เข้มงวด เช่น "A ต้องทำงานก่อน B" ให้จัดลำดับความสำคัญ...การใช้ "delay" สำหรับการทำงานแบบไม่บล็อก(เลื่อนออกไป) นี่ถือเป็นวิธีแก้ปัญหาที่เหมาะสมที่สุดในขณะนี้ เนื่องจากไม่ขัดขวางการแสดงผลและไม่รบกวนลำดับการทำงาน
หากคุณลองใช้คำสั่ง defer แล้วยังพบว่าบางฟังก์ชันยังมีปัญหาอยู่ ให้ลองพิจารณา...การใช้ JavaScript สำหรับการทำงานแบบไม่บล็อกวิธีแก้ปัญหานี้ค่อนข้างรุนแรง แต่ความเข้ากันได้อาจด้อยกว่าเล็กน้อย
ใช้ "asynchronous" สำหรับการทำงานแบบไม่บล็อก(async) เป็นตัวเลือกที่ผมแนะนำน้อยที่สุด เพราะลำดับการทำงานจะสับสนไปหมด ทำให้เกิดข้อผิดพลาดได้ง่าย เว้นแต่คุณจะแน่ใจอย่างยิ่งว่าสคริปต์ทั้งหมดทำงานแยกจากกันอย่างอิสระ
สองข้อผิดพลาดใหญ่ๆ ที่ฉันเคยตกเข้าไป
พูดง่ายทำยาก ผมได้จดบันทึกความผิดพลาดสองอย่างที่ผมเคยทำไว้ คุณสามารถตรวจสอบกับประสบการณ์ของคุณเองเพื่อดูว่าคุณสามารถหลีกเลี่ยงความผิดพลาดเหล่านั้นได้หรือไม่
ข้อผิดพลาดประการแรก: ไม่สามารถดูตัวอย่างธีม WordPress ที่กำหนดเองได้แบบเรียลไทม์
ระยะหนึ่งแล้ว เวลาปรับแต่งธีม หลังจากคลิกบันทึกแล้ว หน้าตัวอย่างจะไม่รีเฟรช ฉันทำการเปลี่ยนแปลงบางอย่าง รีเฟรชหน้าเว็บ แต่ก็ยังคงเหมือนเดิม
หลังจากตรวจสอบแล้ว ผมพบว่าฟังก์ชันการบีบอัดของ Minify เป็นต้นเหตุ วิธีแก้ไขนั้นง่ายมาก:
เข้าถึงปลั๊กอิน W3 Total Cache设置， 找到"การบีบอัด"ยกเลิกการเลือกตัวเลือกนั้น จากนั้นคลิกที่ลูกศรเล็กๆ ด้านล่าง "บันทึกการตั้งค่า" ที่มุมบนขวามือ แล้วเลือก "..."บันทึกการตั้งค่าและล้างแคชขั้นตอนนี้สำคัญมาก หากคุณไม่ล้างแคช คุณจะยังคงเห็นเวอร์ชันเก่าอยู่
หลังจากเสร็จสิ้นแล้ว ให้กลับไปที่การปรับแต่งธีม และการแสดงตัวอย่างแบบเรียลไทม์ก็จะกลับมาเป็นปกติ
ปัญหาที่สอง: ช่องค้นหาของธีม Astra ไม่ตอบสนองเมื่อคลิก
ฉันเคยเจอปัญหานี้มานานแล้ว ฉันใช้ธีม Astra อยู่ และวันหนึ่งก็พบว่าช่องค้นหาไม่ตอบสนอง ไม่ว่าจะคลิกอย่างไรก็ตาม ตอนแรกฉันคิดว่าเป็นปัญหาของธีมเอง แต่ต่อมาพบว่าเกิดจากค่าการตั้งค่า Minify ของ W3TC นั่นเอง
วิธีแก้ปัญหามีดังนี้:
ไปที่ W3 Total Cache → การตั้งค่าทั่วไป → การตั้งค่าการบีบอัดขั้นสูง → JS → การตั้งค่าเครื่องมือย่อขนาด → การตั้งค่าภาษา และเปลี่ยนประเภทการฝังเป็นหนึ่งในสองตัวเลือกนี้:
- ก่อนหน้านี้ การทำงานแบบไม่บล็อกทำได้โดยใช้ JavaScript
- หลังจากนั้น ให้ใช้ JavaScript สำหรับการทำงานแบบไม่บล็อก
ในทำนองเดียวกัน การล้างแคชและรีเฟรชหน้าเว็บจะช่วยให้ช่องค้นหาทำงานได้อย่างถูกต้อง
ส่วนเหตุผลที่เลือกสองตัวเลือกนี้แทนตัวเลือกอื่นๆ นั้น ผมได้ทำการค้นคว้ามาบ้างแล้ว กล่าวโดยสรุปคือ ส่วนประกอบด้านหน้าของธีม Astra ค่อนข้างไวต่อจังหวะการทำงานของสคริปต์ และวิธีการที่ไม่บล็อกบางอย่างอาจทำให้การผูกเหตุการณ์ล้มเหลว การใช้โหมด "ไม่บล็อกด้วย JS" จะช่วยให้มั่นใจได้ว่าสคริปต์จะทำงานหลังจากที่หน้าเว็บโหลดเสร็จสมบูรณ์แล้วเท่านั้น ในขณะเดียวกันก็หลีกเลี่ยงการทำงานที่ไม่เป็นระเบียบซึ่งพบได้ในการใช้แบบอะซิงโครนัส
รายชื่อสถานที่ท่องเที่ยว
สุดท้ายนี้ นี่คือเช็คลิสต์ที่คุณสามารถทำตามได้โดยตรง:
ขั้นตอนแรกคือการกำหนดเป้าหมายของคุณให้ชัดเจน คุณต้องการให้หน้าเว็บโหลดเร็วที่สุดในครั้งแรก หรือคุณให้ความสำคัญกับความเสถียรและการทำงานที่ปราศจากข้อผิดพลาด? สิ่งนี้จะช่วยกำหนดว่าคุณควรใช้ประเภทการฝังแบบใด
ขั้นตอนที่สองคืออย่าเปลี่ยนแปลงทุกอย่างพร้อมกันทีเดียว เริ่มจากการหาหน้าเว็บที่มีความสำคัญน้อยกว่ามาทดสอบก่อน สังเกตดูสักวันสองวัน แล้วค่อยนำไปใช้กับทั้งเว็บไซต์เมื่อแน่ใจว่าไม่มีปัญหาอะไร
ประการที่สาม ควรล้างแคชทุกครั้งหลังการแก้ไข เนื่องจากกลไกการแคชของ W3TC จะทำให้คุณพลาดการเปลี่ยนแปลงล่าสุด ดังนั้นขั้นตอน "ล้างแคชและทดสอบอีกครั้ง" จึงมีความสำคัญอย่างยิ่ง
ประการที่สี่ ใช้เครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ของคุณ หรือเครื่องมืออย่าง PageSpeed Insights เพื่อเปรียบเทียบความเร็วในการโหลดก่อนและหลัง ปล่อยให้ข้อมูลเป็นเครื่องพิสูจน์ ไม่ใช่แค่ความรู้สึกของคุณ
เขียนตอนท้าย
พูดตามตรง ตอนที่ผมเห็นการตั้งค่าประเภทฝังตัวนี้ครั้งแรก ผมตะลึงอยู่นานเลย โหมดบล็อกกิ้งแบบเริ่มต้นดูช้าเกินไป ในขณะที่โหมดอะซิงโครนัสก็ไม่รับประกันลำดับ และการเลื่อนการทำงานอาจทำให้เกิดปัญหาความเข้ากันได้ ผมรู้สึกไม่แน่ใจว่าจะเลือกตัวเลือกไหนดี
แต่ต่อมาผมก็ตระหนักว่ามันเป็นการแลกเปลี่ยนกัน คุณไม่สามารถมีทั้งสิ่งที่เร็วที่สุดและเสถียรที่สุดได้ คุณต้องเสียสละอย่างใดอย่างหนึ่งเสมอ ประสบการณ์ของผมคือการใช้ `defer` ก่อน ซึ่งเป็นวิธีแก้ปัญหาแบบไม่บล็อกที่ปลอดภัยที่สุดในปัจจุบัน แล้วค่อยใช้ `callback` หากเกิดปัญหาขึ้น
หากคุณพบปัญหาที่คล้ายคลึงกัน หรือหากคุณยังมีปัญหาอื่นๆ หลังจากทำตามวิธีการของฉันแล้ว โปรดอย่าลังเลที่จะปรึกษาหารือ การพัฒนาเว็บไซต์นั้นต้องอาศัยการลองผิดลองถูก ไม่มีใครเป็นข้อยกเว้น
ขอบคุณที่อ่านบทความของฉัน แล้วพบกันใหม่ครั้งหน้า
หวัง Chen Weiliang บล็อก ( https://www.chenweiliang.com/ บทความเรื่อง "การตั้งค่าปลั๊กอิน W3 Total Cache Minify: วิธีเลือกประเภทการฝัง? ข้อผิดพลาดและเคล็ดลับช่วยชีวิตของฉัน" ที่ฉันได้แชร์ไป อาจเป็นประโยชน์สำหรับคุณ
ยินดีต้อนรับสู่การแบ่งปันลิงค์ของบทความนี้:https://www.chenweiliang.com/cwl-34003.html