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

pagespeed 100/100
pagespeed 100/100

เล่าสู่กันฟัง
เคยมีเพื่อนสนใจเรื่อง “การประเมินเว็บเพจให้ทำงานเร็ว และดีกับผู้ใช้
เพราะถ้าข้อมูลมหาศาลแล้ว ก็มีประเด็นสำคัญ 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
ข้อมูล 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