performance – iT Blog

เปลี่ยนจาก classic editor เป็น block editor

มีโอกาสเข้าไปอัพเดทเนื้อหาใน thainame . NET อยู่เสมอ พบว่า เนื้อหาที่เคยมีไว้ 178 หน้า หรือ 1546 โพสต์ เมื่อเปิด edit post จะมีการถามว่า เลือก update จาก classic editor เป็น block editor ไหม เป็นคำถามที่ จี๊ดมาก เพราะหันกลับไปมอง 1546 โพสต์นี่ หมายความว่า ผมต้องเข้าไป rewrite ทั้งหมดเลยใช่ไหม คำตอบ คือ ใช่

แล้วการเปลี่ยนครั้งนี้ ดีอย่างไร พบว่า Pavel Ciorici เขียนเมื่อ July 21, 2023
มีข้อดี 5 ข้อ

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

วันนี้ได้ทดสอบ ตรวจ pagespeed กับ post ในแบบ classic กับ block เทียบกันแล้ว พบว่า แบบ classic editor ได้คะแนน performance ต่ำกว่า block editor ได้ทดสอบก่อน และหลังเปลี่ยน ได้คะแนนต่างกันชัดเจน จากการทดสอบปรับจำนวน 3 โพสต์

เมื่อหันกับไปมอง wordpress site ทั้งหมด 4 ตัวของผม ก็นั่งคิดอยู่ว่า จะไป rewrite ได้ครบได้อย่างไร แค่ thainame . NET ก็พันกว่าโพสต์แล้ว

แต่ผมกลับมีกำลังใจขึ้นมา เมื่อหันไปมองเพื่อนผู้ประกอบการ เพราะมีเพื่อนที่เค้าให้ความสำคัญกับ “เนื้อหา” เมื่อหันไปมอง ttpcargo.com , umbrella-perfect.com , ofisu.co.th , usb-perfect.com เค้าก็มีโพสต์ที่ออกมาเป็นราย weekly อย่างต่อเนื่องหลายปีติดต่อกัน ให้ได้เรียนรู้เรื่องราวเกี่ยวกับธุรกิจ สินค้า บริการต่าง ๆ ก็หาเวลาไปตามอ่านอยู่ครับ มีเนื้อหาที่น่าสนใจเยอะมาก

ปรับสีพื้นเทมเพจรุ่น 9.0 ก่อนส่งเข้า pagespeed หวังได้ 100

เล่าเรื่องกำหนดสีพื้นใน .css ของเว็บไซต์ด้านการศึกษา

ทิสเซิล (Thistle) คือ ชื่อทั่วไปของไม้มีหนาม มีอยู่มากมายหลายสายพันธุ์ โดย มิลค์ ทิสเซิล เป็นพืชสมุนไพรมีฤทธิ์ทางยาที่มีการนำมาสกัดเป็นแคปซูลจำหน่ายเป็นยาบำรุงร่างกาย มีสรรพคุณ เช่น ดีท็อกซ์ ตับ โดยสีของดอกทิสเซิลเป็นสีม่วง ค่าสี RGB ของ thistle คือ #D8BFD8 ในการกำหนดสีบนเว็บเพจสามารถใช้ชื่อสี thistle ได้เช่นเดียวกับ red, green, blue หรือ teal

**Thistle** is the common name of a group of flowering plants characterised by leaves with sharp prickles on the margins, mostly in the family Asteraceae.

ซึ่งเทมเพจรุ่น 9.0 ของ thaiall.com เปลี่ยนสีพื้นจาก teal สีเขียวนกเป็ดน้ำ เป็น thistle ม่วงอ่อน ก็ด้วยหวังว่าเว็บไซต์จะถูกพัฒนาไปถึงจุดที่มีประโยชน์ต่อการศึกษาของไทย เพราะการพัฒนาการศึกษาไม่ได้ขึ้นกับใครเพียงคนเดียว พบว่า มีผู้พัฒนาเว็บไซต์ด้านการศึกษาจำนวนมากในระบบของทรูฮิต รู้สึกว่ามีเพื่อนที่คิดเหมือนกันอยู่ในประเทศไทยไม่ใช่น้อย ถ้านักพัฒนาท่านใดโชคดีก็จะมีผู้สนับสนุนที่ทำให้มีแรงกำลังพัฒนางานได้อย่างต่อเนื่อง ไม่หายไปตามกาลเวลา

ขณะนี้กำลังปรับแต่งรุ่นทดสอบของเทมเพจ 9.0 ให้ผ่านเกณฑ์ประเมินตามมาตรฐานของ Pagespeed insight ของ google.com ทั้ง 4 กลุ่มเกณฑ์ เริ่มจาก
ประสิทธิภาพ (Performance) ตามด้วย การช่วยเหลือพิเศษ (Accessibility) แนวทางปฏิบัติที่ดีที่สุด (Best Practices) และ SEO (Search Engine Optimization) ซึ่งเงื่อนไขการประเมินเปลี่ยนตามความก้าวหน้าของเทคโนโลยี เช่น ภาพที่เหมาะสมก็จะแนะนำให้ใช้ .webp เป็นต้น

แต่การปรับให้ได้ 100 ทุกเว็บเพจนั้น น่าจะทำได้ยาก แต่จะพยายามปรับแก้ให้ได้คะแนนสูงขึ้น เพราะเทมเพจหลักจำเป็นต้องใช้ทรัพยากรภายนอก (External Resources) เฟรมเวิร์ค (Framework) และไลบรารี่ (Library) ที่เราไม่ได้ควบคุมอีกหลายรายการ เช่น Truehits.net, Histats, Bootstrap หรือฝังโค้ดจาก Google drive หรือ Youtube.com

https://www.thaiall.com/web2/

อบรมการจัดการความรู้ ประจำปีการศึกษา 2559 ณ ม.เนชั่น

มหาวิทยาลัยเนชั่น จัดโครงการอบรมการจัดการความรู้ ให้แก่บุคลากร และนักศึกษาของมหาวิทยาลัย หัวข้อ การจัดการความรู้เพื่อเพิ่มประสิทธิภาพในองค์กร (Knowledge Management to improve organization performance) เพื่อเป็นการส่งเสริมพัฒนาบุคลากรอย่างต่อเนื่อง และให้มีศักยภาพในการทำงานบรรลุตามเป้าประสงค์ขององค์กร วิทยากรคือ อาจารย์ ดร.อติชาต หาญชาญชัย จาก มหาวิทยาลัยเชียงใหม่ ในวันพุธที่ 1 มีนาคม 2560 เวลา 09.00 – 12.00 น. ณ ห้อง 4201 อาคารนิเทศศาสตร์และสังคมศาสตร์ โดยมี อ.ศรีเพชร สร้อยชื่อ เป็นผู้ขับเคลื่อน KM และ คุณมณธิชา แสนชมภู งานบริหารทรัพยากรบุคคล ขับเคลื่อนหน่วยงาน มีอาจารย์จากคณะต่าง ๆ นำนักศึกษาเข้าร่วมเรียนรู้จำนวนมาก
—
เอกสารประกอบการบรรยาย
https://www.facebook.com/groups/thaiebook/777949739022513/
—
ภาพกิจกรรม
https://www.facebook.com/ajburin/media_set?set=a.10155023525023895.1073741928.814248894&type=3

ผมสนใจเรื่อง การจัดการความรู้
และทำงานประกันในประเด็นนี้มาก่อน
จึงทำโฮมเพจเล่าเรื่องนี้ไว้ที่
http://www.thaiall.com/km

และทำ Story Telling เล่าเรื่อง การดูแลผู้ป่วยอัลไซเมอร์
จากประสบการณ์ของตนเอง ที่ต้องออกไปดูแลคุณแม่
ในชื่อบล็อกว่า “แม่ล้ม ผมก็ล้ม”
ที่ http://article-thaiall.blogspot.com

ฟังมามีเยอะ ผม lecture ไว้ใน facebook.com ครับ

How KM Works?
1. People
2. Process
3. Technology
ฟังทีไรก็เห็นภาพชัดเจนทุกที ว่าทำอย่างไรให้ KM ทำงานได้

ประเด็นที่ท่านยกมามีมากมาย
อาทิ
– ดาวอังคาร กับ Trappist-1 System
– Duck Family off campus
– คุณเก่งงาน คือ ชะตากรรมของคนเก่ง
– มูลนิธิขวัญข้าว การทำนาข้าวในระบบเกษตรกรรมยั่งยืน
– CPALL โครงการ KM เพื่อนวตกรรม
– SCG โครงการแบ่งปัน แลกเปลี่ยน จัดเก็บ เผยแพร่ และพัฒนา
– สำนักงานวิทยทรัพยากร จุฬาภรณ์ฯ กิจกรรม อาศรม วิทยบริการ
– Siriraj KM : ที่โรงพยาบาลนี้เป็นต้นแบบ ทำมาตั้งแต่ 2548

การติดตาม monitor โฮมเพจหรือเว็บไซต์ได้เช่นเดียวกับคน

ประเมินเว็บไซต์
http://www.check-domains.com/website-analysis/website-analyzer.php

ตัวเราเองก็มักจะประเมินตนเอง หรือมีคนประเมินตัวเราเสมอ
เช่น ได้เกรดอะไร น้ำหนัก ความดัน เบาหวาน
หรือผลสอบแข่งขันต่าง ๆ ว่ามีประสิทธิภาพหรือไม่
http://www.thaiall.com/webmaster/
การทำเว็บไซต์ก็เช่นกัน สามารถติดตามประสิทธิภาพของเว็บไซต์
ได้หลายประเด็น
1. พฤติกรรมการเข้าเว็บไซต์ บริการจากภายนอก
เช่น http://truehits.net/stat.php?login=thaiall
หรือ https://www.stats.in.th/?cmd=stats&sid=47&list=m&y=2016
หรือ https://www.google.com/analytics/

2. พฤติกรรมการเข้าเว็บไซต์ ติดตั้งไว้ภายในเครื่อง
– รวมสคริ๊ปสำหรับนำไปติดตั้ง
http://www.hotscripts.com/category/scripts/php/scripts-programs/web-traffic-analysis/
– วัด web application
http://oracle-java.blogspot.com/2007/08/web-application-jmeter.html
– ภายในเครื่องบริการเว็บก็มี access.log หรือ error.log ที่นำมาวิเคราะห์ได้

3. ประเมินเว็บไซต์ หรือเว็บเพจ
มีหลายมุมให้พิจารณา
http://www.check-domains.com/website-analysis/website-analyzer.php
http://validator.w3.org/check/referer
http://jigsaw.w3.org/css-validator/check/referer
https://developers.google.com/speed/pagespeed/insights/

4. Browser
กด Ctrl-Shift-I มีบริการ Inspector เว็บเพจได้
ว่ารองรับ responsive web design กับอุปกรณ์ต่าง ๆ หรือไม่

5. บริการเสริม
เช่น facebook.com ก็จะมียอด like ยอดแชร์
สามารถ plugin เข้ามาใน webpage ได้
หรือ youtube.com ก็จะมี plugin เช่นกัน
หรือ 4share.com หรือ box.com ก็แชร์แฟ้มให้ดาวน์โหลดได้
—
บทความที่ esarn.com น่าสนใจ
http://www.esarn.com/%E0%B8%A7%E0%B8%B4%E0%B9%80%E0%B8%84%E0%B8%A3%E0%B8%B2%E0%B8%B0%E0%B8%AB%E0%B9%8C%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C/
เรื่อง ทำไมต้องวิเคราะห์เว็บไซต์ มี 4 วัตถุประสงค์
1. เพื่อศึกษาพฤติกรรมการใช้งานบนเว็บไซต์ของคุณ
2. เพื่อนำมาต่อยอดในการวางแผนทางการตลาดให้กับธุรกิจ
3. เพื่อวางแผนการใช้งานคนและงบประมาณ
4. เพื่อเป็นข้อมูลในการปรับปรุงแก้ไขเว็บไซต์ของเรา

ทดสอบการทำงานกับแฟ้มขนาด 1 ล้านไบท์

ได้มีการเขียนเว็บเพจ และใช้ java script มา 4 เว็บเพจ ทุกเว็บเพจมีขนาด 1 ล้านไบท์เท่ากัน
เพื่อทดสอบการใช้เวลา download ของ script แต่ละเว็บเพจ
ทดสอบใน firefox, chrome และ ie มีประเด็นที่สนใจดังนี้
1. เปิด และปิด script ในเว็บเพจ มีผลอย่างไร
2. การ refresh ของแต่ละ browser เมื่อใช้ no-cache แตกต่างกันหรือไม่
โดยใช้ javascript ในการประมวลผลเวลาของแต่ละหน้า ผลการทดสอบที่น่าสนใจ ดังนี้

การทดสอบที่ 1 พบว่า การส่งค่าผ่าน url จะทำให้ load เว็บเพจทั้งหน้าใหม่
เปิดเว็บเพจ http://www.thaiall.com/html/onemillion.htm ครั้งแรก
ใช้เวลาไป 6186 millseconds
เมื่อคลิ๊กลิงค์ Reload แบบส่ง get ใหม่ ใช้เวลาไป 9784 milliseconds
แต่ถ้า Refresh ผ่าน browser จะเรียก script เดิมจากใน cache ใช้เวลา 23 milliseconds

การทดสอบที่ 2 พบว่า การทำงานใน script เดียว ตั้งแต่ต้นถึงท้าย script จะใช้เวลาน้อยมาก
เปิดเว็บเพจ http://www.thaiall.com/html/onemillionv1.htm ครั้งแรก
ใช้เวลาไป 4 millseconds ซึ่งไม่ได้สะท้อนเวลาจริง
เมื่อเปลี่ยนเป็น Reload หรือ Refresh แบบใด ก็ใช้เวลาเท่าเดิม
เพราะทั้งเว็บเพจมีคำว่า script คำเดียว ทุกอย่างอยู่ใน script เดียว หรือ thread เดียว
ไม่มีการเปิดปิด tag script หลายครั้ง เป็นการทำงานใน thread เดียวกัน
จึงได้เวลาจากการประมวลผลตั้งแต่ต้น thread ถึงท้าย thread ไม่แตกต่างกันมากนัก

การทดสอบที่ 3 พบว่า เป็นการทดสอบที่ยืนยันผลของการทดสอบที่ 1
เปิดเว็บเพจ http://www.thaiall.com/html/onemillionv2.htm ครั้งแรก
ใช้เวลาไป 6077 millseconds
ใช้เทคนิคว่า การเปิด tag script ต้นแฟ้ม และปิดทันที เพื่อบันทึกเวลาเริ่มต้น
แล้วเปิด tag script ท้ายแฟ้ม เพื่อประมวลเวลา และแสดงผล
จะแสดงเวลาที่ใช้ ในการ load เว็บเพจ ใกล้เคียงกับความเป็นจริง
คือ ใช้เวลาประมาณ 6 วินาที หรือ 6000 millisecond ต่อการ load หนึ่งครั้ง
แต่ถ้าโหลดจากใน cache ของ browser ก็จะใช้เวลาน้อยมาก คือ ไม่กี่ millisecond

การทดสอบที่ 4 พบว่า เป็นการทดสอบโดยเพิ่ม no-cache ที่ header
ว่า <meta http-equiv=”cache-control” content=”no-cache”>
เปิดเว็บเพจ http://www.thaiall.com/html/onemillionv3.htm ครั้งแรก
ใช้เวลาไป 9562 millseconds
ให้ผลเหมือนกับกรณีทดสอบที่ 1 เมื่อทดสอบบน firefox และ chrome
แต่บน ie (internet explorer) 11
การ refresh ของ browser ใช้เวลา 3776 milliseconds หรือประมาณนี้
สรุปว่า ie ยอมรับคุณสมบัติ no-cache ทำให้การ refresh จะ load ข้อมูลมาใหม่ทุกครั้ง
และการ force reload ด้วยการกด Ctrl-F5 สามารถใช้ได้กับทุก browser ที่ทดสอบ

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