วิธีการย่อ HTML, CSS และ JavaScript ให้เล็กลงโดยใช้ปลั๊กอินลดขนาดอัตโนมัติ

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


หากคุณเคยทดสอบความเร็วกับ Google PageSpeed หรือ GTmetrix, คุณอาจเห็นตัวเลือกนั้น.

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

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

Minify คืออะไรและทำไมจึงเป็นประโยชน์?

minification เป็นภาษาการเขียนโปรแกรมที่ลบอักขระที่ไม่จำเป็นทั้งหมดออกจากซอร์สโค้ดโดยไม่เปลี่ยนฟังก์ชั่น อักขระที่ไม่จำเป็นเหล่านี้มักจะมี“อักขระช่องว่าง, อักขระบรรทัดใหม่, แสดงความคิดเห็น, และ บล็อกตัวคั่น”. 

ก่อนที่จะลดขนาดและหลังจากลดขนาด

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

วิธีย่อ HTML, CSS และ JavaScript ให้เล็กลง

มีสองวิธีที่คุณสามารถย่อ HTML, CSS ได้ & JavaScript คุณสามารถแก้ไขรหัสชุดรูปแบบของคุณหรือคุณสามารถใช้ปลั๊กอิน WordPress ที่เรียกว่า Autoptimize. ในบทความนี้เราจะแสดงให้คุณเห็นกระบวนการทั้งสองเกี่ยวกับ วิธีย่อ HTML, CSS และ JavaScript ให้เล็กลง.

หากต้องการทราบไฟล์ HTML, CSS หรือ JavaScript ที่ถูกต้องซึ่งเป็นสาเหตุของปัญหาคุณต้องตรวจสอบกับเครื่องมือทดสอบความเร็วไซต์ใด ๆ เช่น เครื่องมือ Google PageSpeed หรือ GTmetrix. เนื่องจากไฟล์บางไฟล์ของคุณมีอักขระที่ไม่จำเป็นเหล่านี้.

หลังจากตรวจสอบผลเว็บไซต์ของคุณคุณจะได้รับมัน นี่คือภาพด้านล่างของเว็บไซต์ของฉันที่พิจารณา แก้ไข CSS และ JavaScript.

การลดขนาด Css, JavaScript

มันมีผลต่อคุณภาพของธีมของคุณ ดังนั้นไม่ต้องกังวลถ้าคุณเห็นทั้งคู่พูดกันว่าลดขนาดลงและเป็นการดีกว่าที่จะได้รับธีมพรีเมี่ยม.

มีเครื่องมือออนไลน์บางอย่างที่คุณสามารถย่อขนาดโค้ด HTML, CSS และ JavaScript. 

ก่อนที่จะทำการเปลี่ยนแปลงใด ๆ ให้สำรองข้อมูลของไฟล์นั้น.

# 1 ลดขนาดรหัส:

ลดขนาดเครื่องมือรหัส

ลดขนาดรหัส เป็นเครื่องมือการแก้ไขแบบ All in One มันสามารถลดขนาดโค้ด JavaScript, CSS และ HTML ของคุณ สิ่งที่คุณต้องคัดลอก HTML หรือ CSS หรือรหัส JavaScript และวางที่นี่ จากนั้นคลิกที่ ลดขนาด ตัวเลือก เครื่องมือนี้ลดขนาดรหัสของคุณโดยอัตโนมัติ หลังจากนั้นให้คัดลอก Minified code ในไฟล์นั้น.

คุณสามารถลดขนาด CSS และรหัส JavaScript ของคุณเช่นรหัส HTML ด้วยเครื่องมือนั้น.

# 2 Willpeavy:

Willpeavy

Willpeavy เป็นเครื่องมือที่ยอดเยี่ยมอีกอย่างหนึ่ง ลดขนาด HTML รหัส เครื่องมือนี้ทำงานในลักษณะเดียวกับการย่อขนาดโค้ด มันย่อ HTML และ CSS หรือ JS ใด ๆ ที่รวมอยู่ในมาร์กอัปของคุณ ในการใช้เครื่องมือนี้คุณเพียงแค่คัดลอกรหัสของคุณที่นี่และคลิกที่ลดขนาด.

ลดขนาดโดยใช้ปลั๊กอินลดขนาดอัตโนมัติ

Autoptimize

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

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

ตั้งค่าการแนะนำอัตโนมัติ

คุณสามารถทำทุกสิ่งได้อย่างง่ายดายจากการตั้งค่าปลั๊กอิน หลังจากเปิดใช้งานปลั๊กอินนี้แล้วให้ไปที่ การตั้งค่า> Autoptimize.  คลิกที่ปุ่ม“ แสดงการตั้งค่าขั้นสูง”.

ใน HTML ส่วนตรวจสอบ“ เพิ่มประสิทธิภาพโค้ด HTML” และ“ เก็บความคิดเห็น HTML” เพื่อประสิทธิภาพที่เร็วขึ้น.

ปรับขนาดตัวเลือก HTML อัตโนมัติ

ใน JavaScript ส่วนเปิดใช้งาน“ เพิ่มประสิทธิภาพรหัส JavaScript” นอกจากนี้คุณยังสามารถเปิดใช้งาน “บังคับ JavaScript ใน” โหลด JS ก่อนและลดโอกาสของข้อผิดพลาด JS ในกรณีที่ JS ของคุณแตกสคริปต์คุณสามารถเปิดใช้งาน“ เพิ่มการตัดคำแบบลองจับได้”.
ปรับขนาดตัวเลือก JavaScript อัตโนมัติ

ใน CSS ส่วนเปิดใช้งาน“ เพิ่มประสิทธิภาพโค้ด CSS”,“ รวมอินไลน์ CSS ด้วย” คุณยังสามารถเปิดใช้งาน“ Inline and Defer CSS” หากคุณมี CSS แบบย่อ ลองใช้เครื่องมือนี้เพื่อลดขนาด CSS ของคุณและวางลงในกล่อง.

ปรับขนาดตัวเลือก CSS อัตโนมัติ

ใส่ของคุณ CDN URL ในฟิลด์“ CDN Base URL” ตัวอย่างเช่น ‘//cdn.example.com/’.

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

ทำให้ตัวเลือก CDN ลดขนาดอัตโนมัติ

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

ข้อสรุป

การลดขนาด HTML, CSS และ JS เป็นประโยชน์สำหรับเว็บไซต์ของคุณ มันจะลบตัวอักษรที่ไม่จำเป็นของโค้ดและทำให้มันเล็กลงซึ่งเป็นมิตรกับเบราว์เซอร์ วิธีนี้คุณสามารถปรับปรุงความเร็วในการโหลดเว็บไซต์ของคุณ.

หากบทช่วยสอนนี้ช่วยลด HTML, CSS และ JavaScript ให้แชร์บทความนี้ Facebook, พูดเบาและรวดเร็ว, Google+.

บทความที่เกี่ยวข้อง,

  • วิธีใช้เบราว์เซอร์แคชบน WordPress
  • วิธีเพิ่มประสิทธิภาพฐานข้อมูล WordPress โดยใช้ WP-Sweep
  • 7 เครื่องมือเพิ่มประสิทธิภาพภาพที่ดีที่สุดสำหรับ WordPress 2017
  • วิธีการเปิดใช้งานการบีบอัด Gzip อย่างง่ายดายใน WordPress เพื่อการโหลดที่เร็วขึ้น
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map