รูปแบบเว็บเพจต้นแบบ คะแนน 100 score


ปรับปรุง : 2567-10-16 (ปรับ broken link)

รูปแบบเว็บเพจต้นแบบ 100

รูปแบบเว็บเพจต้นแบบ หรือ ร่างโฮมเพจ หรือ เทมเพจ คือ เว็บเพจต้นแบบที่ถูกออกแบบทั้งโครงสร้างและระบบ ซึ่งมีหลายระบบให้เลือกใช้ เช่น เวิร์ดเพรส หรือ หลักการของเว็บ 2.0 คือ รูปแบบของเว็บไซต์รุ่นที่สอง ที่เน้นการนำเข้าเนื้อหาจากผู้เขียนที่หลากหลาย นำไปแสดงในเว็บไซต์ได้มากมาย เกิดเครือข่ายสังคม มีรูปแบบที่ดูง่ายน่าตื่นตาตื่นใจ
SEO | Template | HTML | รหัสต้นฉบับ | JavaScript | Responsive | CanvasJS | Bootstrap | Github.io | คำสำคัญ (Key) | Full01 | index90_100 | index100 | index100* |
pagespeed 400 date=671021
เว็บเพจหน้านี้ มีการเรียกใช้ 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 คะแนนเต็ม

rspsocial 350 175
Test on Zend2.com / ProxySite.com / Pagespeed
pagespeed เทมเพจที่สมบูรณ์ คือ เทมเพจที่มีเครื่องมือมากมายถูกติดตั้งไว้ ผ่าน Javascript, CSS และ Library ต่าง ๆ เพื่อสนับสนุนให้การจัดการเนื้อหา มีความสะดวก และมีประสิทธิภาพ
ตัวเลือกMobile
1) Performance
2) Accessibility
3) Best practice
4) SEO		Desktop
1) Performance
2) Accessibility
3) Best practice
4) SEO
100,100,75,100100,100,74,100
100,100,100,100100,100,100,100
99,93,57,10099,93,56,100
98,100,100,10099,100,100,100
100,100,100,10096,100,100,100
100,100,100,100100,100,100,100
100,100,100,100100,100,100,100
100,100,100,100100,100,100,100
96,100,100,100100,100,100,100
100,100,96,100100,100,96,100
100,100,100,91100,100,100,91
100,100,100,100100,100,100,100
99,100,100,100100,100,100,100

My testing on PageSpeed Insights		100,100,100,100100,100,100,100


<link rel="stylesheet" href="../bootstrap/bootstrap.min.css" />
<div style="display:block;margin-left:auto;margin-right:auto;background-color:white;text-align:left;"> <span class="glyphicon glyphicon-book" style="color:darkblue;font-size:18px;width:20px;height:22px;"></span> </div>

<script type="text/javascript">
/* Dynamically load CSS */
function downloadAtOnload() {
var ls = document.createElement("link");
ls.rel="stylesheet";
ls.href= "../bootstrap/bootstrap.min.css";
document.getElementsByTagName("head")[0].appendChild(ls);
}
if (window.addEventListener) window.addEventListener("load", downloadAtOnload, false);
else if (window.attachEvent) window.attachEvent("onload", downloadAtOnload);
else window.onload = downloadAtOnload;
</script>
Thaiall Products HTML Validity CSS Validity Check Link Dead Link
PageSpeed Keyword Position Google Truehits
เอกสารอ้างอิง (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).

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ
หน้าหลัก
Lampang.net
Thaiabc.com
Thainame.net
IT_in_Life
OS
MIS
SWOT
LINUX
Teach Pro.
SPSS
Business
Research
Online Quiz
Data Structure
จรรยาบรรณ
อันดับสถาบัน
ปฏิทินวันหยุด
วิทยาการคำนวณ
การจัดการความรู้
เกี่ยวกับเรา
สนับสนุนเรา
Products
FB : @Thaiall
Blog : เทคโนโลยี