วิธีย่อขนาด CSS, HTML และ JavaScript ของไซต์ WordPress ของคุณ

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

แล้วให้อะไรล่ะ?

การลดขนาดมักต้องใช้การทดลองอย่างมาก แม้ว่าจะมีวิธีแก้ปัญหามากมาย แต่ลักษณะการทำงานของวิธีแก้ปัญหาจะแตกต่างกันไปในแต่ละไซต์ ขึ้นอยู่กับธีมและปลั๊กอินที่คุณใช้

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

การลดขนาดคืออะไร?

เว็บไซต์ประกอบด้วยไฟล์ต่างๆ มากมาย หากคุณทดสอบความเร็วไซต์ด้วย Google PageSpeed ​​Insights คุณอาจได้รับคำแนะนำให้ย่อขนาดไฟล์ HTML, CSS และ JavaScript

ปัญหา? ในฐานะมนุษย์ เราเขียนโค้ดที่มีอยู่ในไฟล์เหล่านี้เพื่อให้เราสามารถอ่านได้ แต่คอมพิวเตอร์ไม่สนใจเกี่ยวกับอักขระ เช่น ความคิดเห็น การจัดรูปแบบ พื้นที่ว่าง และการขึ้นบรรทัดใหม่ ดังนั้นเมื่อพวกเขาเจออักขระที่ไม่จำเป็นเหล่านี้ในไฟล์เว็บไซต์ พวกเขาก็จะเพิกเฉยต่อพวกมัน

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

ตัวอย่างเช่น นี่คือ CSS บางส่วนที่คุณอาจพบในสไตล์ชีต:

a:link {
  color: gray;
}

a:visited {
  color: green;
}

a:hover {
  color: rebeccapurple;
}

a:active {
  color: teal;
}

และนี่คือตัวอย่าง CSS ด้านบนเวอร์ชันย่อ:

a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}

ดูว่าโค้ดมีการบีบอัดมากขึ้นแค่ไหน?

การลดขนาดจะดำเนินการบนเว็บเซิร์ฟเวอร์ก่อนที่จะส่งการตอบกลับ หลังจากการย่อขนาด เว็บเซิร์ฟเวอร์จะใช้ไฟล์ย่อขนาดที่เล็กกว่าและเร็วกว่ามาก แทนที่ไฟล์ต้นฉบับ ส่งผลให้แบนด์วิธลดลงโดยไม่กระทบต่อฟังก์ชันการทำงาน

ตามที่ผู้เชี่ยวชาญด้าน SEO Yoast อธิบาย การลดขนาดไฟล์สามารถประหยัดได้มากถึง 30-40% หรือแม้แต่ 50% ของขนาดไฟล์ในบางกรณี

ทำไมคุณควรย่อขนาดไฟล์ HTML, CSS และ JavaScript ของคุณ

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

การลดขนาดมีประโยชน์หลายประการ:

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

วิธีย่อขนาดไฟล์ HTML, CSS และ JavaScript ของคุณ

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

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

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

เครื่องมือทดสอบความเร็วที่ยอดเยี่ยมอื่นๆ ที่ฉันแนะนำได้ ได้แก่ การทดสอบความเร็วเว็บไซต์ Pingdom และ WebPageTest และทดสอบความเร็วมือถือของคุณ

การลดขนาดไฟล์ด้วยตนเอง

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

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

1. ตัวลดขนาด HTML ของ Will Peavy

HTML Minifier เป็นเครื่องมือออนไลน์ฟรีสำหรับการลดขนาด HTML ที่สร้างด้วย PHP หากต้องการใช้เครื่องมือ เพียงวาง HTML ของคุณลงในพื้นที่ข้อความ รวมถึง CSS ของ JavaScript ในมาร์กอัปของคุณ แล้วคลิกปุ่ม "ย่อขนาด" เพื่อให้แน่ใจว่าสคริปต์ของคุณทำงานหลังจากการย่อขนาด ขอแนะนำให้คุณยุติคำสั่ง JavaScript ด้วยเครื่องหมายอัฒภาค และใช้ไวยากรณ์* *สำหรับความคิดเห็น

2. ตัวย่อ CSS

เครื่องมือฟรีอีกตัวหนึ่งคือ CSS Minifier ทำงานโดยย่อขนาด CSS ที่คุณคัดลอกและวางลงในพื้นที่ข้อความ “Input CSS” มีตัวเลือกสำหรับการดาวน์โหลดเอาต์พุตที่ย่อขนาดเป็นไฟล์ สำหรับนักพัฒนา เครื่องมือนี้ยังมี API อีกด้วย

3.JSCompress

JSCompress เป็นโปรแกรมบีบอัด JavaScript ออนไลน์ที่ช่วยให้คุณสามารถบีบอัดและย่อขนาดไฟล์ JS ของคุณได้มากถึง 80% ของขนาดดั้งเดิม หากต้องการใช้งาน ให้คัดลอกและวางโค้ดของคุณ หรืออัปโหลดและรวมหลายไฟล์เข้าด้วยกัน จากนั้นคลิก "บีบอัด JavaScript" เครื่องมือนี้ใช้ UglifyJS 3 และ babili-standalone

เครื่องมือลดขนาดด้วยตนเองสำหรับนักพัฒนา

สำหรับนักพัฒนาที่กำลังมองหาตัวเลือกขั้นสูงเพิ่มเติม Google ขอแนะนำแหล่งข้อมูลการลดขนาด HTML, CSS และ JavaScript เหล่านี้:

• HTMLMinifier – คอมเพรสเซอร์/ตัวย่อ HTML ที่ใช้ Javascript (พร้อมรองรับ Node.js)
• CSSNano – ตัวย่อขนาดโมดูลาร์ สร้างขึ้นบนระบบนิเวศ PostCSS
• csso – ตัวย่อ CSS พร้อมการปรับโครงสร้างให้เหมาะสม
• UglifyJS – เครื่องมือแยกวิเคราะห์ JavaScript, Mangler, คอมเพรสเซอร์และชุดเครื่องมือ “สวยงาม”

คอมไพเลอร์การปิดของ Google เป็นเครื่องมือเพิ่มประสิทธิภาพสำหรับ JavaScript แทนที่จะคอมไพล์จากภาษาต้นฉบับไปเป็นโค้ดเครื่อง มันจะคอมไพล์จาก JavaScript เพื่อสร้าง JavaScript ที่ดีขึ้น แยกวิเคราะห์โค้ดของคุณ วิเคราะห์ ลบโค้ดที่ไม่ทำงาน และเขียนใหม่ และลดขนาดสิ่งที่เหลืออยู่ให้เหลือน้อยที่สุด เครื่องมือนี้ยังตรวจสอบไวยากรณ์ การอ้างอิงตัวแปร และประเภท และเตือนเกี่ยวกับข้อผิดพลาดทั่วไปของ JavaScript

การลดขนาดไฟล์ด้วยปลั๊กอิน

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

หมายเหตุ: สำหรับรายการนี้ ฉันรวมเฉพาะปลั๊กอินฟรีที่มีอยู่ใน WordPress Plugin Repository ที่มีความทันสมัยและทดสอบแล้วว่าเข้ากันได้กับ WordPress เวอร์ชันล่าสุด สำหรับตัวเลือกพรีเมียม ให้เลื่อนลง/

1. HTML ย่อขนาด

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

2. ลดขนาด HTML

ฉันชอบคำอธิบายของ WordPress.org สำหรับปลั๊กอินนี้: “เคยดูมาร์กอัป HTML ของเว็บไซต์ของคุณแล้วสังเกตว่ามันดูเลอะเทอะและไม่ชำนาญแค่ไหน?” ปลั๊กอินนี้จะล้างและลดมาร์กอัปที่เลอะเทอะ

ต่างจากปลั๊กอิน HTML Minify ตรงที่เครื่องมือนี้มีตัวเลือกเพิ่มเติม ประกอบด้วยการย่อขนาดเพิ่มเติมสำหรับ JavaScript และ CSS แม้ว่าจะไม่ยุ่งกับพื้นที่ข้อความหรือข้อความที่จัดรูปแบบไว้ล่วงหน้าก็ตาม นอกจากนี้ยังมีตัวเลือกในการลบความคิดเห็น HTML, CSS และ JavaScript (ปล่อยให้ความคิดเห็นแบบมีเงื่อนไขของ MSIE), ลบแท็กปิด XHTML ที่ไม่จำเป็นออกจากองค์ประกอบโมฆะ HTML5 และลบโครงร่างและโดเมนที่เกี่ยวข้องที่ไม่จำเป็นออกจากลิงก์

3. ผสาน + ลดขนาด + รีเฟรช — ปลั๊กอิน WordPress

ปลั๊กอินนี้ทำมากกว่าแค่ย่อขนาดโค้ดของคุณ มันรวมไฟล์ CSS และ JavaScript ของคุณแล้วย่อขนาดไฟล์ที่สร้างขึ้นโดยใช้ Minify (สำหรับ CSS) และ Google Closed (สำหรับ JavaScript) การลดขนาดจะดำเนินการผ่าน WP-Cron ดังนั้นจึงไม่ส่งผลกระทบต่อความเร็วไซต์ของคุณ

เมื่อเนื้อหาของไฟล์ CSS หรือ JS ของคุณเปลี่ยนแปลง เนื้อหาเหล่านั้นจะถูกประมวลผลใหม่ ดังนั้นจึงไม่จำเป็นต้องล้างแคช ผู้ใช้หลายไซต์ยินดีที่จะทราบว่าปลั๊กอินนี้ทำงานได้ดีบนเครือข่าย

4. ปรับ JCH ให้เหมาะสม

JCH Optimize มีฟีเจอร์ดีๆ มากมายสำหรับปลั๊กอินฟรี: มันรวมและลดขนาด CSS และ JavaScript, ลดขนาด HTML, มีการบีบอัด GZip สำหรับการรวมไฟล์, การสร้างสไปรท์สำหรับภาพพื้นหลัง และคุณสามารถยกเว้นไฟล์บางไฟล์จากการรวมเพื่อแก้ไขข้อขัดแย้ง

มีเวอร์ชันโปรพร้อมคุณสมบัติการเพิ่มประสิทธิภาพเพิ่มเติม รวมถึงการโหลด JavaScript แบบอะซิงโครนัส การเพิ่มประสิทธิภาพการจัดส่ง CSS เพื่อกำจัดการบล็อกการเรนเดอร์ การรองรับโดเมน CDN/แบบไม่มีคุกกี้ และการโหลดแบบ Lazy Load และการเพิ่มประสิทธิภาพสำหรับรูปภาพ

5. CSS ลดขนาด

การลดขนาด CSS ของคุณด้วยปลั๊กอินนี้ทำได้ง่ายกว่าที่เคย เพียงติดตั้ง เปิดใช้งาน ไปที่การตั้งค่า > การลดขนาด CSSเพื่อเปิดใช้งานเพียงตัวเลือกเดียว: เพิ่มประสิทธิภาพและลดขนาดโค้ด CSS

รหัสในปลั๊กอินนี้ได้รับการแยกจากปลั๊กอิน Autoptimize ยอดนิยม (เพิ่มเติมเกี่ยวกับปลั๊กอินนี้ด้านล่าง) Peter Pfeiffer ผู้เขียนปลั๊กอินมีปลั๊กอินที่คล้ายกันสำหรับ JavaScript, Minify JavaScript

6. ลดความเร็วอย่างรวดเร็ว

ด้วยการติดตั้งที่ใช้งานอยู่มากกว่า 20,000 ครั้งและการให้คะแนน 5 ดาว นี่เป็นหนึ่งในตัวเลือกยอดนิยมสำหรับการลดขนาดไฟล์ หากต้องการใช้งาน ให้ติดตั้งและเปิดใช้งานปลั๊กอินแล้วไปที่การตั้งค่า > Fast Velocity Minifyที่นั่น คุณจะพบตัวเลือกมากมายสำหรับการกำหนดค่าปลั๊กอิน รวมถึงตัวเลือกขั้นสูงสำหรับนักพัฒนา JavaScript และข้อยกเว้น CSS ตัวเลือก CDN รวมถึงข้อมูลเซิร์ฟเวอร์ อย่างไรก็ตาม การตั้งค่าเริ่มต้นทำงานได้ดีสำหรับไซต์ส่วนใหญ่

ปลั๊กอินดำเนินการลดขนาดแบบเรียลไทม์ที่ส่วนหน้าและเฉพาะระหว่างคำขอที่ไม่ได้แคชครั้งแรกเท่านั้น เมื่อคำขอแรกได้รับการประมวลผลแล้ว หน้าอื่นๆ ที่ต้องใช้ CSS และ JavaScript ชุดเดียวกันจะได้รับไฟล์แคชคงที่เดียวกันนั้น

7. เพิ่มประสิทธิภาพอัตโนมัติ

ด้วยการติดตั้งที่ใช้งานมากกว่า 400,000 ครั้ง Autoptimize จึงเป็นเครื่องมือลดขนาดที่ได้รับความนิยมมากที่สุดใน WordPress Plugin Repository

การเพิ่มประสิทธิภาพอัตโนมัติสามารถรวบรวม ลดขนาด และแคชสคริปต์และสไตล์ แทรก CSS ลงในส่วนหัวของหน้าตามค่าเริ่มต้น และยังย้ายและเลื่อนสคริปต์ไปที่ส่วนท้ายอีกด้วย มีตัวเลือกขั้นสูงมากมายสำหรับนักพัฒนาและมี API มากมายเพื่อให้คุณปรับแต่งการเพิ่มประสิทธิภาพอัตโนมัติให้ตรงกับความต้องการเฉพาะของเว็บไซต์ของคุณได้

8. การเพิ่มประสิทธิภาพความเร็วหน้า Hummingbird

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

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

การลดขนาดเป็นคุณสมบัติในปลั๊กอินแคช WordPress

โดยทั่วไปการลดขนาดเป็นคุณสมบัติมาตรฐานที่คุณจะพบในปลั๊กอินแคช นี่คือปลั๊กอินที่ฉันทดสอบและสามารถแนะนำได้:

• ดับบลิวพี ร็อคเก็ต
• W3 แคชทั้งหมด
• WP ซูเปอร์แคช

บทสรุป

ฉันหวังว่าบทความนี้จะช่วยคลายความกระจ่างให้กับคุณ และให้ความเข้าใจที่ชัดเจนว่ามันคืออะไร และคุณจะนำไปใช้กับเว็บไซต์ของคุณได้อย่างไร

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

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

หากคุณชอบโพสต์นี้ ลองดู 6 ปลั๊กอินแคช WordPress ที่ดีที่สุดเมื่อเปรียบเทียบ เพื่อดูคำแนะนำเพิ่มเติมเกี่ยวกับวิธีเพิ่มความเร็วไซต์ของคุณ

คุณได้ลองย่อขนาดรหัสของคุณแล้วหรือยัง? คุณเคยใช้วิธีอื่นใดในการทำให้เว็บไซต์ของคุณเร็วขึ้น? แจ้งให้เราทราบในส่วนความเห็นด้านล่าง!