performance – iT Blog

performance ของเว็บเพจ บน pagespeed insights

เว็บเพจหน้านี้ ยกร่างโค้ดเว็บเพจขนาดเล็ก ชื่อ index90_100 เพื่อทดสอบให้ผ่านการประเมินตามเงื่อนไข Diagnose Performance Issue ของ pagespeed insights ทั้ง 4 หัวข้อ คือ Performance , Accessibility , Best practice และ SEO ไดคะแนน 100 ทั้ง 4 หัวข้อ โดยมีการปรับแก้ ดังนี้ 1) ปรับลดขนาดแฟ้ม .css ให้มีขนาดเล็กที่สุด 2) ปรับ layout แก้ปัญหา layout shift 3) ใช้ภาพ .webp แทน .jpg 4) ลดขนาดภาพ และเพิ่มความคมชัด และรักษา ratio ให้เท่าเดิม 5) ยกเลิกการโหลด font, css, js จากภายนอกทั้งหมด ซึ่งอิงกับโค้ดเดิม คือ การปรับแก้โค้ดเว็บเทมเพจเดิมในรุ่น 9.0 ที่เคยได้คะแนน 100 มาก่อน ซึ่งการลดขนาดแฟ้มและแปลงเป็น .webp เลือกใช้โปรแกรม irfanview เนื่องจากโปรแกรมมีขนาดเล็ก ทำงานได้รวดเร็ว และใช้งานง่าย

เว็บเพจหน้านี้ ประกาศ style ก่อน body
จึงเขียนโค้ดแบบ responsive web design และใช้ top bar menu แบบแยก desktop กับ mobile แล้วไม่กระทบคะแนน pagespeed

เว็บเพจหน้านี้ มีการเรียกใช้ bootstrap.min.css เมื่อส่งตรวจสอบกับ pagespeed insights พบว่า การเรียกใช้ bootstrap โดยตรงก่อนเปิด tag body จะทำให้คะแนนได้ไม่เต็ม 100 เนื่องจากต้องใช้เวลาระยะหนึ่ง ในการ Load แฟ้มจากภายนอก ซึ่งวิธีหนึ่งในการแก้ไขการ Load bootstrap คือ เขียน function ใน javascript ไว้ท้าย script เพื่อตรวจสอบ EventListener ว่าเป็น load หรือ onload มีผลให้ การแสดงผลหน้าแรก ผ่านการตรวจสอบของ pagespeed เสร็จสิ้นลง จึงจะมีการ load bootstrap ทำให้เงื่อนไขการโหลด bootstrap ไม่มีผลต่อคะแนน pagespeed insights

ส่วนการ load font .ttf นั้น เว็บเพจหน้านี้ เลือกใช้ font-display:optional; กับทุกฟอนต์ที่นำมาใช้ ซึ่งมีผลให้ ระยะเวลาในการ load font มาใช้งานนั้น แน่ใจได้ว่าจะไม่เกิดขึ้นใน 100ms แรก หรือเป็นการโหลดแบบ background with low priority ทำให้มั่นใจได้ว่า pagespeed insights จะตรวจสอบจนจบแล้ว การโหลดฟอนต์มาใช้จึงจะเกิดขึ้น ต่างกับ font-display:swap; ที่ font จะถูก render ทันทีเมื่อมีการโหลด และพร้อมแสดงฟอนต์ ทำให้เกิดปัญหา layout shift ขึ้นได้ และคะแนนส่วนนี้ก็จะไม่ได้ 100 คะแนนเต็ม

https://thaiall.com/web2/index100.htm

https://thaiall.com/web2/index90_100.htm

การใช้ php คุมการเรียก truehits บน https

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

แต่การเรียกใช้ truehits แบบ http ใน https host นั้น ระบบของ truehits ไม่ให้บริการ https สำหรับสมาชิกแบบฟรี ทำให้ค่าสถิติที่แสดงบน truehits เป็นค่าที่มาจากผู้ใช้ที่เข้าถึงเว็บไซต์แบบ http เท่านั้น ซึ่งการดู statistic การ access host นั้น มีผู้ให้บริการอยู่หลายราย แล้วเราสามารถเปรียบเทียบค่าสถิติเหล่านั้นได้
..
พบผลการประเมินของ pagespeed insights ของ Google ว่าขณะเปิดเว็บเพจแบบ https แล้วในเพจ เรียกใช้ script ของ truehits แบบ http จะมีผลประเมินในหัวข้อ Best practice ได้คะแนนลดลงมากกว่า 20 คะแนน ซึ่งได้เขียนโค้ดทดสอบ Library ต่าง ๆ ไว้ที่ /web2/index100 . php จึงรู้ถึงการลดคะแนนนี้
..
ซึ่ง host ที่บริการ php จะมี variables ดูได้จาก phpinfo() ให้เรียกใช้ได้มากมาย ดังนั้นการเรียก url แบบ http และ https จะมีตัวแปรหนึ่ง ที่ระบุว่าเรียกใช้ URL แบบใด เมื่อใช้ตัวแปร _SERVER[“HTTPS”] ทำการทดสอบด้วย isset() แล้วไปสั่งพิมพ์การแสดง JavaScript ของ truehits เพื่อเรียกเปิดการทำงานของ truehits และถ้าเป็น URL แบบ https ก็จะไม่เรียกใช้ สำหรับผู้ใช้แบบฟรี ทำให้ผล pagespeed insights ใน https ได้ 100 คะแนน เนื่องจากไม่ได้รับผลกระทบ ส่วนการเปิด URL แบบ http ยังได้คะแนนลดลงเช่นเดิม เนื่องจากในโค้ดของ truehits ยังมีการทำงานเชื่อมกับ host แบบ https ในฝั่งของ truehits
..
การเรียกใช้ truehits ยังมีวิธีอื่นที่ truehits แนะนำไว้ เช่น iframe หรือ perl ส่วนการใช้งานค่าสถิติก็มีบริการข้อมูลอีกมากมายที่นำมาใช้ประโยชน์ เพื่อพัฒนาเว็บไซต์ของตน หรือองค์กรได้

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

เปลี่ยนจาก 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 เท่านั้น ไม่ควรไว้วางใจ
และการโหลดภาพไม่มีผลต่อเวลาในการโหลดเว็บเพจ เพราะแยกส่วนกันชัดเจน