pagespeed – 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/

แล้วโฮมเพจหน้าหนึ่งของผมก็ได้ 100/100 จาก pagespeed ของ google.com

เล่าสู่กันฟัง
เคยมีเพื่อนสนใจเรื่อง “การประเมินเว็บเพจให้ทำงานเร็ว และดีกับผู้ใช้”
เพราะถ้าข้อมูลมหาศาลแล้ว ก็มีประเด็นสำคัญ 2 เรื่องใหญ่ที่ต้องใส่ใจ
ความเร็ว (Speed Rules) คือ ปัญหาในการให้บริการ
การใช้งาน (Usability Rules) คือ หน้าตาเว็บเพจสำหรับผู้ใช้
บริการของ Pagespeed จาก google.com
เป็นตัวเลือกหนึ่ง ที่มีเกณฑ์การประเมินชัดเจน
การได้ 100/100 คือ อะไรที่น่าสนใจ
วันนี้ลองอีกตั้งหนึ่ง ปรับแก้ให้ผ่านเกณฑ์จนได้ (หลังจากไม่เคยถึงเลย)
แล้วก็ผ่านครับ กับเว็บเพจหน้าแรกของผม คือ ศูนย์สอบออนไลน์
http://www.thaiall.com/quiz/index.html

สรุปว่า เมื่อ 22 ม.ค.60 ได้ปรับเว็บเพจ index.html ใน /quiz
ซึ่งเป็นหน้า welcome page ของศูนย์สอบออนไลน์ และเป็นการปรับใหญ่ที่มีคุณสมบัติต่าง ๆ
ต้อนรัปปี 2560 ดังนี้

1) เป็น Responsive Web Design
2) ผ่านเกณฑ์ Pagespeed ของ Google
3) ปรับรูปแบบ และเพิ่มเนื้อหาพาไปยังโฮมเพจที่สำคัญ

การผ่านเกณฑ์ของ Pagespeed มีข้อดี คือ
เว็บเพจของเราจะถูกโหลดอย่างรวดเร็วโดยผู้ใช้
และแสดงผลอย่างเหมาะสม
ทั้งบน mobile device และ desktop computer
ส่วนการเป็น Responsive Web Design
ทำให้การพัฒนา Application บน Google play store กับ App store ของ Google
สามารถทำ Redirect ไปยัง webpage ได้ทันที โดยไม่ต้องปรับแต่งเพิ่มเติม
เห็นแอพหลายตัวที่ทำขึ้นมาง่าย ๆ โดยเชื่อมกับเว็บไซต์โดยตรง
http://www.thaiall.com/web2

[Speed Rules]
Avoid landing page redirects
Enable compression
Improve server response time
Leverage browser caching
Minify resources
Optimize images
Optimize CSS Delivery
Prioritize visible content
Remove render-blocking JavaScript
Use asynchronous scripts

[Usability Rules]
Avoid plugins
Configure the viewport
Size content to viewport
Size tap targets appropriately
Use legible font sizes

หาข้อมูลขนาดจอภาพที่ใช้กันอยู่ในปัจจุบัน

ในอดีต สมัยหนุ่ม นั่งดูความละเอียดของจอภาพ (Resolution)
ก็มีอยู่ไม่กี่แบบ ที่จำได้ก็มี 1024*768 กับ 800*600 และ 640*480
ส่วนจอ 1280*1024 สมัยนั้นไกลฝันมาก ได้แต่มอง ๆ
หลัง ๆ มาเค้าใช้จอกันหลายแบบ หัวหน้ายังชวนใช้ตระกูลไออยู่พักหนึ่ง
ต่อมาหัวหน้าและผองเพื่อน ก็เปลี่ยนเป็นตระกูลซัมกันหมดแล้ว

ข้อมูล resolution ของ gotoknow.org แสดงใน truehits.net

วันนี้ 5 มิ.ย.59 หาข้อมูลความละเอียดว่าชาวโลกเค้าไปถึงไหน
ก็เข้าไปดูระบบรายงานพบว่า ชาวบ้านชาวช่องเข้าใช้จอแบบไหน
เวลาออกแบบเว็บเพจทั้งความกว้าง และความสูง ก็จะได้เข้ากับเค้าได้
สถิติเดือนพฤษภาคม 2559 ของ gotoknow.org ใน truehits.net
ที่เก็บไว้นั้น น่าจะแสดงเพียง 60 แบบ เห็นข้อมูลแล้วก็ต้องพิจารณาตัวเลข
ผู้ออกแบบเว็บเพจจะออกแบบให้จอภาพเหมาะกับทั้ง 60 แบบ นั่นก็เกินไป
ที่สนใจมี 3 แบบ คือ
กว้าง 360*640 (Galaxy S5)
กว้าง 320*568 (iphone5)
กว้าง 375*667(iphone6)
ส่วนที่เกิน 375 หรือ 411*731(Nexus 5X)
หรืออย่าง ipad ที่กว้าง 768*1024 ผมจัดไปอยู่ในกลุ่ม desktop หมดครับ
http://www.truehits.net/module/stats.php?G_CODET=r0028004&t=2&y=2016&m=05&d=&code=4&Web=gotoknow.org
#webdeveloper #responsive #viewport #pagespeed