เว็บเพจต้นแบบ ปรับจากรุ่น 9.0

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

ภาพนี้ผ่าน pagespeed

เทมเพจ คือ เว็บเพจต้นแบบที่ถูกออกแบบทั้งโครงสร้าง ภาพ และเนื้อหา มักประกอบด้วยแฟ้มภาพ ตัวอย่างเนื้อหา และรหัสภาษาเอชทีเอ็มแอลที่สามารถนำไปแก้ไขได้ บางครั้งจะมีแฟ้ม .psd ซึ่งมีภาพต้นฉบับให้สามารถแก้ไขได้ด้วยโปรแกรม Photoshop, Imageready หรือ Firework
เเว็บเพจหน้านี้ เป็นการยกร่างโค้ดเว็บเพจขนาดเล็ก ชื่อ index90_100.htm เพื่อทดสอบให้ผ่านการประเมินตามเงื่อนไข 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 เนื่องจากโปรแกรมมีขนาดเล็ก ทำงานได้รวดเร็ว และใช้งานง่าย
+ ผลการทดสอบบน pagespeed ได้ 100 / 100 / 100 / 100
ทดสอบบน pagespeed
ด้วยภาพขนาด และรูปแบบ และ tag ที่แตกต่างกัน
ปรับปรุง : 21 ต.ค.67
- เพิ่ม loading="lazy" ให้กับ img tag
- ยกเลิกการโหลด TTF และ font-family
Test on Zend2.com / ProxySite.com

เอกสารอ้างอิง (Reference)

[1] โอภาส เอี่ยมสิริวงศ์. (2551). "วิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ", บริษัท ซีเอ็ดยูเคชั่น จำกัด., กรุงเทพฯ,.

[2] ซีเอสเอส (CSS). (2561). [ออนไลน์]. เข้าถึงได้จาก : https://getbootstrap.com/docs/3.3/css/. (วันที่ค้นข้อมูล : 9 สิงหาคม 2561).

[3] ภาษา HTML. (2561). [ออนไลน์]. เข้าถึงได้จาก : http://www.codingbasic.com/html.html. (วันที่ค้นข้อมูล : 9 สิงหาคม 2561).