เพจสปีด อินไซด์ คืออะไร (psi) logo on print
accessibility

เพจสปีด อินไซด์ คืออะไร

เพจสปีด อินไซด์ คือ เครื่องมือหนึ่งในกลุ่มเครื่องมือที่พัฒนาโดยกูเกิ้ล ถูกออกแบบเพื่อช่วยพัฒนาประสิทธิภาพของเว็บไซต์ให้ดีที่สุด ปรากฎครั้งแรกในการประชุมของนักพัฒนา เมื่อปี พ.ศ. 2553 ซึ่งมี 4 เครื่องมือหลัก ได้แก่ โมดูลเพจสปีด เพจสปีดอินไซต์ เพจสปีดเซอร์วิส และ ส่วนขยายเครื่องมือพัฒนาโครมเพจสปีด
SEO | Responsive | Bootstrap | Full01 | index100* | Pagespeed
PageSpeed Insights (PSI) Performance คือ คะแนนที่บ่งบอกถึงความเร็วในการโหลดและแสดงผลของเว็บเพจ โดยคะแนนเริ่มจาก 0 ถึง 100 ยิ่งคะแนนสูงยิ่งแสดงว่าเว็บเพจสามารถถูกโหลดได้เร็ว และผู้ใช้งานก็จะได้รับประสบการณ์ที่ดีขึ้นในการใช้งานเว็บเพจ
Accessibility คือ การวัดว่าเว็บเพจสามารถเข้าถึงได้โดยผู้ใช้งานทุกคนหรือไม่ ไม่ว่าจะเป็นผู้ที่มีความบกพร่องทางร่างกาย หรือผู้ที่มีอุปกรณ์และเทคโนโลยีที่แตกต่างกัน เช่น ผู้ใช้หน้าขนาดใหญ่ หรือผู้ใช้โทรศัพท์มือถือ
Best practices คือ แนวทางสำหรับการใช้ PageSpeed Insights อย่างมีประสิทธิภาพในกระบวนการพัฒนาเว็บเพจ
SEO (Search Engine Optimization) คือ การเพิ่มประสิทธิภาพให้เนื้อหาสำหรับเครื่องมือค้นหา เป็นการทำให้เนื้อหามีประสิทธิภาพ เหมาะสมกับการถูกค้นพบได้เร็ว หรือถูกจัดอันดับไว้ในอันดับต้น โดยเครื่องมือค้นหา ซึ่งมีสิ่งที่พิจารณา เช่น หัวข้อ คำสำคัญ คำอธิบาย รูปแบบเนื้อหา ที่อยู่เว็บไซต์ ลิงค์เชื่อมโยง ความเร็ว ความปลอดภัย และ รองรับหลายอุปกรณ์
1. หัวข้อตรวจสอบ Performance
lighthouse Lighthouse รุ่น 10 (Audit / Weight)
⚑ First Contentful Paint 10%
⚑ Speed Index 10%
⚑ Largest Contentful Paint 25%
⚑ Total Blocking Time 30%
⚑ Cumulative Layout Shift 25%
developer.chrome.com
ผ่านการตรวจสอบ (Passed audits : 24)
⚐ กำจัดทรัพยากรที่บล็อกการเรนเดอร์
⚐ เลื่อนภาพที่อยู่นอกหน้าจอ
⚐ ย่อ CSS
⚐ ย่อ JavaScript
⚐ ลด CSS ที่ไม่ได้
⚐ ใช้ เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ
⚐ แสดงรูปภาพในรูปแบบรุ่นถัดไป เปิด
⚐ ใช้งานการบีบอัดข้อความ
⚐ เชื่อมต่อล่วงหน้ากับแหล่งที่มาที่จำเป็น
⚐ หลีกเลี่ยงการเปลี่ยนเส้นทางหลายหน้า
⚐ ใช้รูปแบบวิดีโอสำหรับเนื้อหาแบบเคลื่อนไหว
⚐ ลบโมดูลที่ซ้ำกันในชุด JavaScript
⚐ หลีกเลี่ยงการแสดง JavaScript รุ่นเก่าให้กับเบราว์เซอร์สมัยใหม่
⚐ โหลดล่วงหน้ารูปภาพ Largest Contentful Paint
⚐ ใช้หลักนโยบายแคชที่มีประสิทธิภาพกับสินทรัพย์คงที่ พบทรัพยากร 0 รายการ
⚐ เครื่องหมายและการวัดเวลาของผู้ใช้
⚐ ข้อความทั้งหมดยังคงมองเห็นได้ระหว่างโหลดเว็บฟอนต์
⚐ โหลดทรัพยากรของบุคคลที่สามแบบ Lazy ด้วยหน้ากระดาษ
⚐ รูปภาพ Largest Contentful Paint ไม่ได้โหลดแบบ Lazy
⚐ ใช้ตัวรับฟังแบบพาสซีฟเพื่อปรับปรุงประสิทธิภาพการเลื่อน
⚐ หลีกเลี่ยง document.write()
⚐ หลีกเลี่ยงแอนิเมชั่นที่ไม่ได้ประกอบกัน
⚐ องค์ประกอบรูปภาพมีความกว้างและความสูงที่ชัดเจน
⚐ มี <meta แท็ก name="viewport"> ที่มีความกว้างหรือมาตราส่วนเริ่มต้น
⚑ Eliminate render-blocking resources
⚑ Defer offscreen images
⚑ Minify CSS
⚑ Minify JavaScript
⚑ Reduce unused CSS
⚑ Efficiently encode images
⚑ Serve images in next-gen formats
⚑ Enable text compression
⚑ Preconnect to required origins
⚑ Avoid multiple page redirects
⚑ Use video formats for animated content
⚑ Remove duplicate modules in JavaScript bundles
⚑ Avoid serving legacy JavaScript to modern browsers
⚑ Preload Largest Contentful Paint image
⚑ Uses efficient cache policy on static assets 0 resources found
⚑ User Timing marks and measures
⚑ All text remains visible during webfont loads
⚑ Lazy load third-party resources with facades
⚑ Largest Contentful Paint image was not lazily loaded
⚑ Uses passive listeners to improve scrolling performance
⚑ Avoids document.write()
⚑ Avoid non-composited animations
⚑ Image elements have explicit width and height
⚑ Has a <meta name="viewport"> tag with width or initial-scale
2. หัวข้อตรวจสอบ Accessibility
ผ่านการตรวจสอบ (Passed audits : 24)
⚐ แอตทริบิวต์ [aria-*] ตรงกับบทบาทของตน
⚐ [aria-hidden="true"] ไม่มีอยู่ในเอกสาร <body>
⚐ แอตทริบิวต์ [aria-*] มีค่าที่ถูกต้อง แอตทริบิวต์
⚐ [aria-*] ถูกต้องและไม่มีการสะกดผิด
⚐ องค์ประกอบรูปภาพมีแอตทริบิวต์ [alt]
⚐ ปุ่มอินพุตมีข้อความที่สามารถแยกแยะได้
⚐ [user-scalable="no"] ไม่ได้ใช้ในองค์ประกอบ <meta name="viewport"> และแอตทริบิวต์ [maximum-scale] ไม่น้อยกว่า 5
⚐ แอตทริบิวต์ ARIA ถูกใช้ตามที่ระบุไว้สำหรับบทบาทขององค์ประกอบ องค์ประกอบ
⚐ ใช้แอตทริบิวต์ ARIA ที่ได้รับอนุญาตเท่านั้น
⚐ สีพื้นหลังและพื้นหน้ามีอัตราส่วนคอนทราสต์ที่เพียงพอ
⚐ เอกสารมีองค์ประกอบ <title> องค์ประกอบ
⚐ <frame> หรือ <iframe> มีชื่อเรื่อง
⚐ องค์ประกอบ <html> มีแอตทริบิวต์ [lang] องค์ประกอบ
⚐ <html> มีค่าที่ถูกต้องสำหรับแอตทริบิวต์ [lang]
⚐ สามารถแยกแยะลิงก์ได้โดยไม่ต้องพึ่งพาสี
⚐ ลิงก์มีชื่อที่สามารถแยกแยะได้
⚐ รายการมีเฉพาะองค์ประกอบ <li> และองค์ประกอบที่รองรับสคริปต์ (<script> และ <template>)
⚐ รายการ (<li>) อยู่ในองค์ประกอบหลัก <ul>, <ol> หรือ <menu>
⚐ ไม่มีองค์ประกอบใดมีค่า [tabindex] มากกว่า 0
⚐ เป้าหมายการสัมผัสจะมีขนาดและระยะห่างเพียงพอ
⚐ เซลล์ในองค์ประกอบ <table> ที่ใช้แอตทริบิวต์ [headers] หมายถึงเซลล์ตารางภายในตารางเดียวกัน
⚐ องค์ประกอบหัวเรื่องจะปรากฏตามลำดับจากมากไปน้อย
⚐ องค์ประกอบรูปภาพไม่มีแอตทริบิวต์ [alt] ที่เป็นข้อความซ้ำซ้อน
⚐ ตารางมีเนื้อหาที่แตกต่างกันในแอตทริบิวต์ summary และ <caption>
⚑ [aria-*] attributes match their roles
⚑ [aria-hidden="true"] is not present on the document <body>
⚑ [aria-*] attributes have valid values
⚑ [aria-*] attributes are valid and not misspelled
⚑ Image elements have [alt] attributes
⚑ Input buttons have discernible text.
⚑ [user-scalable="no"] is not used in the <meta name="viewport"> element and the [maximum-scale] attribute is not less than 5.
⚑ ARIA attributes are used as specified for the element's role
⚑ Elements use only permitted ARIA attributes
⚑ Background and foreground colors have a sufficient contrast ratio
⚑ Document has a <title> element
⚑ <frame> or <iframe> elements have a title
⚑ <html> element has a [lang] attribute
⚑ <html> element has a valid value for its [lang] attribute
⚑ Links are distinguishable without relying on color.
⚑ Links have a discernible name
⚑ Lists contain only <li> elements and script supporting elements (<script> and <template>).
⚑ List items (<li>) are contained within <ul>, <ol> or <menu> parent elements
⚑ No element has a [tabindex] value greater than 0
⚑ Touch targets have sufficient size and spacing.
⚑ Cells in a <table> element that use the [headers] attribute refer to table cells within the same table.
⚑ Heading elements appear in a sequentially-descending order
⚑ Image elements do not have [alt] attributes that are redundant text.
⚑ Tables have different content in the summary attribute and <caption>.
3. หัวข้อตรวจสอบ Best practice
ผ่านการตรวจสอบ (Passed audits : 14)
⚐ ใช้ HTTPS
⚐ หลีกเลี่ยง API ที่ไม่รองรับ
⚐ หลีกเลี่ยงคุกกี้ของบุคคลที่สาม
⚐ อนุญาตให้ผู้ใช้วางลงในช่องป้อนข้อมูล
⚐ หลีกเลี่ยงการขออนุญาตระบุตำแหน่งทางภูมิศาสตร์เมื่อโหลดหน้า
⚐ หลีกเลี่ยงการขออนุญาตแจ้งเมื่อโหลดหน้า
⚐ แสดงรูปภาพด้วยอัตราส่วนภาพที่ถูก
⚐ ต้อง แสดงรูปภาพด้วยความละเอียดที่เหมาะสม
⚐ มีแท็ก <meta name="viewport"> ที่มีความกว้างหรือมาตราส่วนเริ่มต้น
⚐ เพจมี doctype HTML
⚐ กำหนดชุดอักขระอย่างถูกต้อง
⚐ ไม่มีข้อผิดพลาดของเบราว์เซอร์ที่บันทึกลงในคอนโซล
⚐ ไม่มีปัญหาในแผงปัญหาใน Chrome Devtools
⚐ เพจมีแผนที่แหล่งที่มาที่ถูกต้อง
⚑ Uses HTTPS
⚑ Avoids deprecated APIs
⚑ Avoids third-party cookies
⚑ Allows users to paste into input fields
⚑ Avoids requesting the geolocation permission on page load
⚑ Avoids requesting the notification permission on page load
⚑ Displays images with correct aspect ratio
⚑ Serves images with appropriate resolution
⚑ Has a <meta name="viewport"> tag with width or initial-scale
⚑ Page has the HTML doctype
⚑ Properly defines charset
⚑ No browser errors logged to the console
⚑ No issues in the Issues panel in Chrome Devtools
⚑ Page has valid source maps
4. หัวข้อตรวจสอบ SEO
ผ่านการตรวจสอบ (Passed audits : 8)
⚐ เพจไม่ได้ถูกบล็อกจากการทำดัชนี
⚐ เอกสารมีองค์ประกอบ <title> เอกสาร
⚐ มีคำอธิบายเมตา
⚐ เพจมีรหัสสถานะ HTTP สำเร็จ
⚐ ลิงก์มีข้อความบรรยาย
⚐ ลิงก์สามารถรวบรวมได้
⚐ องค์ประกอบของภาพมีแอตทริบิวต์ [alt] เอกสาร
⚐ มี hreflang ที่ถูกต้อง
⚑ Page isn’t blocked from indexing
⚑ Document has a <title> element
⚑ Document has a meta description
⚑ Page has successful HTTP status code
⚑ Links have descriptive text
⚑ Links are crawlable
⚑ Image elements have [alt] attributes
⚑ Document has a valid hreflang
อ่านเพิ่มเติม
เป้าหมาย PageSpeed Insights 100,100,100,100 รุ่น 9.2 (เริ่มใช้ 8 ต.ค.2567) rsp92.css
wikipedia/Google_PageSpeed_Tools
/web2/index92_671103.html (update : 671103)
file_pagespeed.php
1. ?file=671103&date=671103&v=1.0 + cssjs : 65,100,82,100 / 66,100,81,100
pagespeed.web.dev/analysis/ [report]
2. ?file=671103&fieldset=5fonts&date=671103&v=1.0 + cssjs : 40,100,79,100 / 31,100,81,100
pagespeed.web.dev/analysis/ [report]

/web2/index92_movecss.html (updated : 671031)
file_pagespeed.php
1. ?file=movecss&date=671103&v=1.1 : 98,100,100,100 / 99,100,100,100
pagespeed.web.dev/analysis/ [report]
2. ?file=movecss&fieldset=blank&date=671103&v=1.0 : 100,100,100,100 / 100,100,100 ( 3 fieldset, no css, no js)
pagespeed.web.dev/analysis/ [report]
3. ?file=movecss&fieldset=cssjs&date=671103&v=1.0 : 67,100,82,100 / 46,100,82,100
pagespeed.web.dev/analysis/ [report]

/web2/index92.htm
file_pagespeed_v92.php
1. ?fieldset=cssjs&date=671029&v=1.0 : 37,100,82,100 / 44,100,81,100
async=true
pagespeed.web.dev/analysis/ [report]
defer="defer"
?fieldset=cssjs&defer=defer&date=671029&v=1.0 : 38,100,82,100 / 43,100,81,100
pagespeed.web.dev/analysis/ [report]
2. ?date=671029&v=1.0 : 59,91,79,100 / 61,91,81,100
pagespeed.web.dev/analysis/ [report]
3. ?fieldset=blank&date=671029&v=1.0 : 99,100,100,100 / 96,100,100,100
pagespeed.web.dev/analysis/ [report]
4. ?fieldset=cssjs&date=671029&v=1.0 : 38,100,82,100 / 40,100,81,100
async=true
pagespeed.web.dev/analysis/ [report]
defer="defer"
?fieldset=cssjs&defer=defer&date=671029&v=1.0 : 38,100,82,100 / 40,100,81,100
pagespeed.web.dev/analysis/ [report]
5. ?fieldset=checkrank&date=671029&v=1.0 : 99,100,100,100 / 98,100,100,100
pagespeed.web.dev/analysis/ [report]
6. ?fieldset=mathjax&date=671029&v=1.0 : 26,100,82,100 / 22,100,81,100
pagespeed.web.dev/analysis/ [report]
7. ?fieldset=goodcode&date=671029&v=1.0 : 100,100,100,100 / 100,100,100,100
pagespeed.web.dev/analysis/ [report]
8. ?remove_begin=235&remove_end=1834&v=1.0 : 38,95,82,100 / 43,95,81,100
pagespeed.web.dev/analysis/ [report]

/web2/index91.htm
file_pagespeed_v1.php
1. ?fieldset=blank&t=671029 / index91.htm : 98,100,100,100 / 99,100,100,100
pagespeed.web.dev/analysis/ [report]

../index.html (updated : 671102)
file_pagespeed.php
1. ?file=welcomepage&date=671102&v=1.0 (../index.html) : 98,100,100,100 / 99,100,100,100
pagespeed.web.dev/analysis/ [report]
Thaiall.com