แจกของฟรี

Website => WordPress => WordPress Plugin => ข้อความที่เริ่มโดย: smf ที่ 27 พฤษภาคม 2016, 23:22:17

หัวข้อ: บีบอัด HTML CSS JS ให้เว็บโหลดเร็วขึ้น ด้วย Autoptimize
เริ่มหัวข้อโดย: smf ที่ 27 พฤษภาคม 2016, 23:22:17
Autoptimize คือปลั๊กอินที่ช่วยในการบีบอัดและจัดการกับไฟล์ Html, CSS และ Js ในเว็บของเรา แล้วสร้างเป็นแคชเก็บไว้ เพื่อให้โหลดได้เร็วขึ้น สามารถใช้ร่วมกับปลั๊กอินแคชอย่าง WP Super Cache (http://pordoo.com/go.php?url=http://www.wpthaiuser.com/wp-super-cache/) หรือปลั๊กอินแคชอื่นๆ ก็จะยิ่งทำให้เว็บเร็วยิ่งขึ้น ส่วน W3 Total Cache (http://pordoo.com/go.php?url=http://www.wpthaiuser.com/w3-total-cache/) นั้นมีฟังชั่น minify อยู่แล้ว ปลั๊กอินนี้พัฒนาโดย futtta (http://pordoo.com/go.php?url=http://profiles.wordpress.org/futtta) ผู้เขียนปลั๊กอินคุณภาพอีกหลายตัว

การตั้งค่าSettings > Autoptimize จากนั้นคลิกปุ่ม Show advanced settings เพื่อเปิดตัวเลือกพิเศษขึ้นมา

HTML

ตั้งค่าเกี่ยวกับการบีบอัด HTML  ค่ะ ติ๊กแค่ข้อแรกก็พอ ตัวนี้ไม่มีอะไรให้เลือกมาก


(http://upic.me/i/4d/5html.png) (http://upic.me/i/4d/5html.png)

JavaScript Options
กำหนการบีบอัพ JavaScript ปกติปลั๊กอินจะตั้งให้ JavaScript ไปอยู่ที่ footer ให้อยู่แล้วซึ่งดีกว่าการให้อยู่บน head นะคะ ข้อสำคัญของการบีบอัด JavaScript และ CSS ก็คือ หากเราทำแล้วพบกว่ามีการแสดงผลผิดพลาด ก็ให้ลอง exclude หรือยกเว้น JavaScript บางตัวดูค่ะ ถ้าตัวไหน exclude แล้วหาย ก็แสดงว่าเราไม่สามารถที่จะบีบอัดตัวนั้นได้นั่นเอง

(http://upic.me/i/l5/javascript.png) (http://upic.me/i/l5/javascript.png)

CSS
การบีบอัด CSS ก็คล้ายๆ กับการบีบอัด JavaScript อย่างที่บอกไปแล้ว คือหากการแสดงผลแปลกๆ เราต้องหาว่าเป็นเพราะตัวไหนมีผลกระทบ แล้วนำมา Exclude

(http://upic.me/i/q0/css-1.png) (http://upic.me/i/q0/css-1.png)

CacheAutoptimize จะทำการบีบอัพ HTML, JavaScript,CSS ทั้งหมดแล้วรวมกันเป็นไฟล์เดียว แยกตามแต่ละประเภทของไฟล์ โดยจะแสดงข้อมูลในส่วนของ Cache Info

(http://upic.me/i/bz/cache.png) (http://upic.me/i/bz/cache.png)

เราสามารถสั่ง Delete Cache ได้ทันทีเช่นกัน ผ่านทาง Toolbar

(http://upic.me/i/00/delete-cache.png) (http://upic.me/i/00/delete-cache.png)

หลังจากนั้นด้านล่างก็ให้เราคลิกที่ปุ่ม Save Changes โดยหากไม่ใช่การตั้งค่าครั้งแรก เราก็จะเห็นข้อมูลของ Cache Info อยู่ด้านบนด้วย เวลาเปลี่ยนการตั้งค่าก็อาจจะต้องเคลียร์ของเดิมด้วย ด้วยการคลิกที่ปุ่ม Save Changes and Empty Cache
อันนี้คือผลหลังการปรับแต่งนะคะ ซึ่งแต่ละเว็บก็อาจจะไม่เท่ากันค่ะ บางคนอาจจะเปลี่ยนมาก บางคนก็อาจจะเปลี่ยนน้อย การบีบ Html, CSS และ Java Script เป็นเพียงแค่หนึ่งในหลายวิธีสำหรับการจัดการกับเว็บไซต์เท่านั้นค่ะ


(http://upic.me/i/61/autoptimize-featured.png) (http://upic.me/i/61/autoptimize-featured.png)
ภาพก่อนและหลังการใช้งาน (tools.pingdom.com)

(http://upic.me/i/1r/gtmetrix.png) (http://upic.me/i/1r/gtmetrix.png)
ซ้าย-ใช้งานปลั๊กอิน ขวา-ก่อนหน้านี้ (gtmetrix.com)

การปรับแต่งในแต่ละเว็บอาจจะไม่เหมือนกัน ขึ้นอยู่กับธีมและปลั๊กอินที่เราใช้ บางเว็บอาจจะไม่มีปัญหากับ JavaScript และ CSS ที่ใช้อยู่เลย ก็จะทำให้ปรับได้เต็มประสิทธิภาพมากกว่า บางเว็บก็อาจจะทำได้ไม่มาก เพราะอาจทำให้เว็บแสดงผลไม่ถูกต้อง อันนี้ต้องอาศัยการทดสอบกันในแต่ละเว็บ


ที่มา: http://www.wpthaiuser.com/minimizing-html-css-js-using-autoptimize/ (http://pordoo.com/go.php?url=http://www.wpthaiuser.com/minimizing-html-css-js-using-autoptimize/)