เครื่องมือบางอย่างเพื่อทำการบีบอัด

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

ดูเพิ่มเติมที่ 6 ปลั๊กอิน WordPress เพื่อสร้างชีวิตใหม่ให้กับบทความของคุณ

นี่คือรายการเครื่องมือที่มีประโยชน์ในการเริ่มต้น เนื่องจากหลายประเภทสามารถย่อขนาดโค้ดได้หลายประเภทฉันจึงรวมตัวเลือกประเภทรหัสไว้ในวงเล็บ

• • cssminifier.com et javascript-minifier.com (CSS และ JS) - ตัวย่อสองตัวนี้โดย Andrew Chilton ใช้งานง่าย คุณเพียงแค่ต้องวางรหัสของคุณจากนั้นคลิกที่ปุ่ม Minify เพื่อแสดงรหัสที่บีบอัด คุณสามารถดาวน์โหลดรหัสออกเป็นไฟล์เพื่อความสะดวก
  • htmlcompressor.com (HTML, CSS & JS) - เครื่องมือบีบอัด / ลดขนาดออนไลน์นี้รองรับประเภทโค้ด HTML, CSS และ JS มันยังรองรับการผสมรหัสประเภทต่างๆเช่น CSS + PHP และ JavaScript + PHP และคุณยังตรวจสอบข้อผิดพลาดในโค้ดที่บีบอัดได้อีกด้วย

• • csscompressor.net (CSS เท่านั้น) - คอมเพรสเซอร์ CSS ออนไลน์นี้รวดเร็วใช้งานง่ายและฟรี

• • jscompress.com (JS เท่านั้น) - เครื่องมือบีบอัด JavaScript นี้ช่วยให้คุณสามารถบีบอัดโค้ด JavaScript โดยการคัดลอกและวาง แต่คุณยังสามารถดาวน์โหลดไฟล์ JavaScript ได้หลายไฟล์พร้อมกัน เหมาะสำหรับการรวมไฟล์ JavaScript ไว้เป็นไฟล์เดียวเพื่อความเร็วในการโหลดหน้าเว็บที่ดีขึ้น
  • เครื่องมือของแดน - เครื่องมือของแดน เสนอยกเลิก ลดขนาด CSS และ เพื่อลดขนาด JavaScript . เครื่องมือทั้งสองมีอินเทอร์เฟซผู้ใช้ที่สะอาดและใช้งานง่าย ไม่มีตัวเลือกขั้นสูงใด ๆ แต่เหมาะสำหรับวัตถุประสงค์ในการลดขนาดทั่วไป

• • refresh-sf.com (HTML, CSS และ JS) - คอมเพรสเซอร์นี้จะลดประเภทโค้ด JavaScript, CSS และ HTML นอกจากนี้ยังมีตัวเลือกการบีบอัดทั้งหมดสำหรับรหัสแต่ละประเภทหากคุณต้องการ
  • คอมไพเลอร์ปิด (JS เท่านั้น) - Closure Compiler เป็นส่วนหนึ่งของ เครื่องมือปิด ซึ่งเป็นชุดเครื่องมือจาก Google Developers ช่วยให้คุณสามารถย่อขนาด JavaScript ของคุณพร้อมกับการเพิ่มประสิทธิภาพที่มีประโยชน์อื่นๆ คุณสามารถใช้โค้ด Javascript ได้โดยป้อน URL ของตำแหน่งไฟล์ js จากนั้นเลือกวิธีที่คุณต้องการให้โค้ดได้รับการปรับให้เหมาะสมและจัดรูปแบบ 

ตัวอย่างเช่นคุณเลือกที่จะเพิ่มประสิทธิภาพรหัสของคุณเพื่อลบเฉพาะช่องว่างถ้าคุณต้องการ เมื่อคุณคลิกที่ปุ่มรวบรวมมันจะลดรหัส (หรือรวบรวม) ให้คุณ

• • minifycode.com (HTML, CSS และ JS) - เว็บไซต์นี้มีตัวย่อสำหรับ JavaScript , CSS et HTML ด้วยส่วนต่อประสานผู้ใช้ที่เรียบง่ายและสะอาดซึ่งบีบอัดรหัสของคุณได้ด้วยคลิกเดียว นอกจากนี้ยังมีเครื่องมือ "beautifier" เพื่อขยายขนาดรหัส minified เพื่อให้อ่านได้ง่ายขึ้น (ตรงกันข้ามกับ minification)

หากคุณกำลังมองหาเครื่องมือออฟไลน์เพื่อลด CSS หรือ JavaScript HTML ในเครื่องให้น้อยที่สุดนี่คือตัวเลือกบางส่วน:

• phpied.com/cssmin-js/ (CSS เท่านั้น)
• yui.github.io/yuicompressor (JS และ CSS)

วิธีลดขนาด HTML, CSS และ JavaScript ของคุณโดยใช้เครื่องมือออนไลน์

เครื่องมือออนไลน์เหล่านี้จำนวนมากมีกระบวนการที่คล้ายกันซึ่งเกี่ยวข้องกับขั้นตอนต่อไปนี้:

• วางซอร์สโค้ดของคุณหรือดาวน์โหลดไฟล์ซอร์สโค้ด 
• ปรับการตั้งค่าให้เหมาะสมสำหรับเอาต์พุตเฉพาะ (หากมีตัวเลือก)
• คลิกปุ่มเพื่อบีบอัดรหัส
• คัดลอกผลลัพธ์รหัสย่อหรือดาวน์โหลดไฟล์รหัสย่อ

สำหรับตัวอย่างนี้ฉันจะใช้เครื่องมือย่อขนาดจาก minifycode.com.

ดูเพิ่มเติม: วิธีการเพิ่มโค้ด CSS ได้อย่างปลอดภัยบน WordPress โดยการปรึกษาลิงค์นี้

ขั้นแรกให้ค้นหาไฟล์ CSS (ปกติเรียกว่า style.css) ในไฟล์เว็บไซต์ของคุณและเปิดโดยใช้เครื่องมือแก้ไขหน้า จากนั้นคัดลอกโค้ด CSS ทั้งหมดไปยังคลิปบอร์ดของคุณ

ไปที่ minifycode.com และคลิกที่แท็บตัวย่อ CSS จากนั้นวางโค้ด CSS ในช่องป้อนข้อมูลและคลิกที่ปุ่ม ลดขนาด CSS.

เมื่อสร้างรหัสย่อใหม่ให้คัดลอก

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

ว่ามัน!

ทำซ้ำกระบวนการเดียวกันเพื่อลดไฟล์ JavaScript และ HTML ของเว็บไซต์ของคุณ

วิธีลด HTML, CSS และ JavaScript ใน WordPress โดยใช้ปลั๊กอิน

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

มีปลั๊กอินมากมายที่จะทำให้งานสำเร็จ แต่ฉันจะพูดถึงตัวอย่างสั้น ๆ

เติมอัตโนมัติ (ฟรี)

การทำให้อัตโนมัติน่าจะเป็น WordPress ปลั๊กอิน ของ minify ที่ได้รับความนิยมมากที่สุด เป็นที่นิยมเพราะใช้งานง่ายและเต็มไปด้วยคุณสมบัติที่ทรงพลัง มันสามารถรวมกลุ่ม (รวมสคริปต์) ลดขนาดและแคชรหัสของคุณ เป็นโบนัส คุณมีตัวเลือกเพิ่มเติมเพื่อเพิ่มประสิทธิภาพ Google Fonts, รูปภาพ ฯลฯ

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

สำหรับข้อมูลเพิ่มเติมโปรดดูคำแนะนำของเราเกี่ยวกับ:  วิธีการติดตั้งปลั๊กอินในเวิร์ดเพรส

เมื่อเปิดใช้งานปลั๊กอินไปที่ การตั้งค่า> การเพิ่มประสิทธิภาพอัตโนมัติ. จากนั้นในแท็บพารามิเตอร์หลักตรวจสอบโค้ดที่คุณต้องการปรับให้เหมาะสม (HTML, CSS และ / หรือ JavaScript) แล้วคลิก Eบันทึกการเปลี่ยนแปลง.

คุณสามารถคลิกที่ปุ่ม แสดงการตั้งค่าขั้นสูง ที่ด้านบนของหน้าเพื่อปรับแต่งการเพิ่มประสิทธิภาพโค้ดของคุณเพิ่มเติม

จะมากหรือน้อยนั้น! ค่อนข้างเรียบง่ายและทรงพลัง

W3 Total Cache (ฟรี)

W3 แคชรวม เป็นปลั๊กอินสำหรับแคชที่ยอดเยี่ยมที่มีความสามารถในการลดไฟล์ HTML, JS และ CSS ของคุณ

WP Fastest Cache (ฟรี)

WP แคชเร็วที่สุด - ปลั๊กอินนี้ WordPress แคชเป็นที่นิยมอย่างมากกับความคิดเห็นสูง มันทำการปรับแต่งประสิทธิภาพต่าง ๆ รวมถึงการรวมและลด HTML CSS และ JavaScript เพื่อประสิทธิภาพที่ดีขึ้น

อ่านบทความของเราเกี่ยวกับ ปลั๊กอิน 8 WordPress เพื่อเพิ่มการแชทสดบนบล็อกของคุณ

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

เพื่อสรุป

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

ปลั๊กอิน WordPress 9 เพื่อซ่อนเนื้อหาของบล็อกของคุณ ที่จะค้นพบอย่างแน่นอน

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

ค้นพบปลั๊กอิน WordPress พรีเมียมบางอย่าง  

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

เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้

แหล่งข้อมูลอื่น ๆ ที่แนะนำ

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

สรุป