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

แล้วโฮมเพจหน้าหนึ่งของผมก็ได้ 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