วิธีทดสอบไซต์ของคุณด้วย Google Lighthouse

เครื่องมือใหม่โดย Google คือการทดสอบและให้คำแนะนำเพื่อปรับปรุงประสิทธิภาพ SEO ความปลอดภัยแนวปฏิบัติที่ดีที่สุดและการเข้าถึงได้ง่าย.


Google เพิ่งเปิดตัว ประภาคาร, เครื่องมือโอเพ่นซอร์สเพื่อตรวจสอบเว็บไซต์ของคุณด้วยตนเองและโดยอัตโนมัติ.

Google Lighthouse ทดสอบอะไรบ้าง?

มี มากกว่า 75 ตัวชี้วัด มันทดสอบและให้คะแนนโดยรวม หนึ่งในสิ่งที่ได้รับความนิยมดังต่อไปนี้คุณอาจสนใจในฐานะเจ้าของเว็บไซต์นักวิเคราะห์ SEO ผู้ดูแลเว็บ.

  • ประสิทธิภาพ – เวลาในการโต้ตอบเวลาแฝงดัชนีความเร็วการเพิ่มประสิทธิภาพทรัพยากร TTFB การส่งมอบสินทรัพย์เวลาดำเนินการสคริปต์ขนาด DOM ฯลฯ.
  • SEO – อุปกรณ์พกพา, เมตา, การรวบรวมข้อมูล, มาตรฐาน, โครงสร้าง ฯลฯ.
  • ปฏิบัติที่ดีที่สุด – การปรับภาพ, ไลบรารี JS, บันทึกข้อผิดพลาดของเบราว์เซอร์, เข้าถึงได้ผ่าน HTTPS, รู้จักช่องโหว่ JS,
  • การเข้าถึง  – องค์ประกอบของหน้าภาษาแอตทริบิวต์ ARIA ฯลฯ.
  • กปภ. (แอปพลิเคชันเว็บขั้นสูง) – เปลี่ยนเส้นทาง HTTP เป็น HTTPS, รหัสตอบกลับตกลง, โหลดเร็วบน 3G, หน้าจอสแปลช, วิวพอร์ต ฯลฯ.

เครื่องมือที่ยอดเยี่ยมและคุณสามารถใช้งานได้หลายวิธี.

ถูกต้อง – มีหลายวิธี หากคุณเป็นนักพัฒนาซอฟต์แวร์คุณสามารถใช้กับ Node.js เพื่อทดสอบโปรแกรมได้ มีเครื่องมือบางอย่างในตลาดขับเคลื่อนโดย Lighthouse ที่ให้การตรวจสอบประสิทธิภาพของเว็บไซต์อย่างต่อเนื่อง.

มาดูกันว่าคุณใช้การทดสอบประภาคารบนไซต์ของคุณอย่างไร.

เริ่มจากสิ่งที่ง่ายที่สุด.

วัดโดย web.dev

Google เปิดตัว web.dev เมื่อไม่กี่เดือนก่อนและได้รับความนิยมอย่างมาก การทดสอบออนไลน์นั้นง่าย.

ไปที่ วัด หน้าและป้อน URL เพื่อเรียกใช้การตรวจสอบ จะใช้เวลาสองสามวินาทีและคุณควรดูรายงานโดยละเอียดพร้อมคะแนนโดยรวม.

ผลลัพธ์ยังแสดงการทดสอบตัวชี้วัดความสำเร็จซึ่งทำได้ดีมากสำหรับการตรวจสอบที่ผ่านและทำงานกับความต้องการเหล่านั้น.

อย่าใช้เวลามากเกินไปในการรับ 100 แม้แต่เว็บไซต์ของ Google ก็ไม่ได้ให้คะแนน.

พิจารณาเป็นแนวทางและพยายามปรับปรุงให้มากที่สุดเท่าที่จะทำได้.

หมายเหตุ: web.dev จำลองการทดสอบโดยใช้อุปกรณ์มือถือและในขณะที่เขียนฉันไม่เห็นตัวเลือกในการทดสอบโดยใช้เดสก์ท็อป.

โครเมียม

คุณรู้หรือไม่ว่า Lighthouse มีให้บริการในเบราว์เซอร์ Chrome ของคุณ? และข่าวดีก็คือคุณสามารถเลือกทดสอบโดยใช้มือถือหรือเดสก์ท็อป มีอยู่ในเครื่องมือนักพัฒนาซอฟต์แวร์.

  • เปิดเบราว์เซอร์ Chrome
  • เข้าถึงเว็บไซต์ของคุณเพื่อทดสอบ
  • เปิดเครื่องมือนักพัฒนาซอฟต์แวร์ (กด F12 หากใช้ Windows) หรือคลิกขวาที่หน้าและคลิกตรวจสอบ
  • ไปที่แท็บตรวจสอบ

ดังที่คุณเห็นด้านบนคุณมีตัวเลือกให้เลือกสิ่งที่คุณต้องการทดสอบ สิ่งนี้ยอดเยี่ยมมากเพราะคุณสามารถมุ่งเน้นไปที่เป้าหมายของคุณและรับผลการตรวจสอบได้เร็ว.

ผลลัพธ์รูปลักษณ์และความรู้สึกจาก Chome และ web.dev ใกล้เคียงกัน.

แต่ถ้าคุณดูอย่างระมัดระวังมีกลุ่มเมทริกเพิ่มเติมหนึ่งกลุ่มที่นี่ – เว็บแอพก้าวหน้า. ดังนั้นอีกเหตุผลในการตรวจสอบโดยใช้ Chrome.

Node.js

ประภาคารมีให้เป็นโมดูลโหนด คุณสามารถติดตั้งลงบนเซิร์ฟเวอร์ของคุณและใช้โดยทางโปรแกรมหรือบรรทัดคำสั่ง ลองตรวจสอบวิธีติดตั้ง Lighthouse อย่างรวดเร็วเพื่อทำการทดสอบ.

การติดตั้ง Lighthouse บน Ubuntu 18.x

ต่อไปนี้ฉันได้ทำการทดสอบแล้ว DigitalOcean เซิร์ฟเวอร์ Lighthouse ต้องการ Node LTS 8.9 หรือใหม่กว่าและฉันคิดว่าคุณได้ติดตั้งแล้ว หากไม่มีให้อ้างอิงกับคู่มือการติดตั้ง Node.js.

คุณจะต้อง เบราว์เซอร์โครเมียม ที่จะติดตั้งบนเซิร์ฟเวอร์ ฉันครอบคลุมคำแนะนำการติดตั้งที่นี่.

การติดตั้งประภาคารนั้นเรียบง่ายเช่นเดียวกับโมดูลอื่น ๆ.

  • เข้าสู่ระบบเซิร์ฟเวอร์ของคุณ
  • รันคำสั่งต่อไปนี้เพื่อติดตั้ง

npm install -g ประภาคาร

ฉันใช้ -g ที่นี่เพื่อให้ติดตั้งเป็นโมดูลส่วนกลาง.

[email protected]: ~ # npm install -g ประภาคาร
/ usr / bin / ประภาคาร -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/ usr / bin / โครเมี่ยมแก้ปัญหา -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> [email protected] postinstall / usr / lib / node_modules / ประภาคาร / node_modules / ax-core
> โหนดสร้าง / utils / postinstall.js

+ [email protected]
เพิ่ม 179 แพคเกจจากผู้สนับสนุน 119 คนใน 10.094 วินาที
[email protected]: ~ #

เมื่อติดตั้งแล้วให้เรียกใช้คำสั่งประภาคารเพื่อให้แน่ใจว่าได้ติดตั้งอย่างถูกต้อง.

[email protected]: ~ # ประภาคาร
โปรดระบุ URL

ระบุ – ช่วยสำหรับตัวเลือกที่มี
[email protected]: ~ #

ดีประภาคารพร้อมที่จะทำการตรวจสอบแล้ว ลองตัวเลือกการทดสอบบ้าง.

ในการรันการทดสอบโดยใช้เบราว์เซอร์ที่ไม่มีส่วนหัว

URL ประภาคาร –chrome-flags ="–หัวขาด"

คุณต้องระบุ URL ที่แน่นอนรวมถึง http หรือ https.

Ex:

[email protected]: ~ $ ประภาคาร https://geekflare.com –chrome-flags ="–หัวขาด"
ChromeLauncher กำลังรอเบราว์เซอร์ + 0ms
ChromeLauncher กำลังรอเบราว์เซอร์ … + 1 มิลลิวินาที
ChromeLauncher กำลังรอเบราว์เซอร์ ….. + 511 มิลลิวินาที
ChromeLauncher กำลังรอเบราว์เซอร์ ….. ✓ + 2 มิลลิวินาที
สถานะการเชื่อมต่อกับเบราว์เซอร์ + 176ms
สถานะการรีเซ็ตสถานะด้วย about: blank + 24ms
เครื่องเปรียบเทียบสถานะ + 30ms
สถานะกำลังเริ่มต้น … + 508ms
สถานะกำลังโหลดหน้า & กำลังรอสคริปต์ออนโหลด, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, การเรียงลำดับของไอคอน, ChromeConsoleMessage การดึงข้อมูล, การเข้ารหัสแบบโต้ตอบ, การเข้ารหัสแบบโต้ตอบ , Hreflang, EmbeddedContent, Canonical, RobotsTxt + 27ms
สถานะการดึงในหน้า: สคริปต์ + 2s
สถานะการดึงข้อมูลในหน้า: CSSUsage + 0ms
สถานะการดึงข้อมูลในหน้าเว็บ: วิวพอร์ต + 0ms
สถานะการดึงในหน้าเว็บ: ViewportDimensions + 0ms
สถานะการดึงข้อมูลในหน้า: ThemeColor + 0ms
สถานะการดึงข้อมูลในหน้า: Manifest + 0ms
สถานะการดึงข้อมูลในหน้า: RuntimeExceptions + 0ms
สถานะการดึงข้อมูลในหน้า: ChromeConsoleMessages + 0ms
สถานะการดึงข้อมูลในหน้า: ImageUsage + 0ms
สถานะการดึงข้อมูลในหน้า: การช่วยการเข้าถึง + 0ms
สถานะการดึงข้อมูลในหน้าเว็บ: LinkElements + 0ms
สถานะการดึงในหน้า: AnchorsWithNoRelNoopener + 1ms
สถานะการดึงในหน้า: AppCacheManifest + 0ms
สถานะการดึงข้อมูลในหน้า: Doctype + 0ms
สถานะการดึงข้อมูลในหน้า: DOMStats + 0ms
สถานะการดึงข้อมูลในหน้า: JSL ไลบรารี + 0ms
สถานะการดึงข้อมูลในหน้า: OptimizedImages + 0ms
สถานะการดึงข้อมูลในหน้า: PasswordInputsWithPreventedPaste + 0ms
สถานะการดึงข้อมูลในหน้าเว็บ: ResponseCompression + 0ms
สถานะการดึงในหน้า: TagsBlockingFirstPaint + 0ms
สถานะการดึงข้อมูลในหน้า: MetaDescription + 0ms
สถานะการดึงในหน้าเว็บ: FontSize + 0ms
สถานะการดึงข้อมูลในหน้าเว็บ: CrawlableLinks + 0ms
สถานะการดึงข้อมูลในหน้า: MetaRobots + 0ms
สถานะการดึงในหน้า: Hreflang + 0ms
สถานะการดึงข้อมูลในหน้าเว็บ: EmbeddedContent + 0ms
สถานะการดึงในหน้าเว็บ: Canonical + 0ms
สถานะการดึงข้อมูลในหน้า: RobotsTxt + 0ms
สถานะการดึงข้อมูลการติดตาม + 1ms
สถานะการดึง devtoolsLog & บันทึกเครือข่าย + 110ms
การดึงสถานะ: สคริปต์ + 27ms
การดึงสถานะ: CSSUsage + 53ms
การดึงสถานะ: Viewport + 192ms
การดึงสถานะ: ViewportDimensions + 5ms
การดึงสถานะ: ThemeColor + 13ms
การดึงสถานะ: เผยแสดง + 2ms
การดึงสถานะ: RuntimeExceptions + 295ms
สถานะการดึงข้อมูล: ChromeConsoleMessages + 1ms
การดึงสถานะ: ImageUsage + 2ms
การดึงสถานะ: การช่วยการเข้าถึง + 22ms
การดึงสถานะ: LinkElements + 526ms
การดึงสถานะ: AnchorsWithNoRelNoopener + 10ms
การดึงสถานะ: AppCacheManifest + 6ms
การดึงสถานะ: Doctype + 20ms
การดึงสถานะ: DOMStats + 4ms
การดึงสถานะ: JSL ไลบรารี + 50ms
การดึงสถานะ: OptimizedImages + 25ms
การดึงสถานะ: PasswordInputsWithPreventedPaste + 234ms
การดึงสถานะ: ResponseCompression + 3ms
การดึงสถานะ: TagsBlockingFirstPaint + 7ms
การดึงสถานะ: MetaDescription + 6ms
การดึงสถานะ: FontSize + 7ms
การดึงสถานะ: crawableLinks + 245ms
การดึงสถานะ: MetaRobots + 6ms
การดึงสถานะ: Hreflang + 2ms
การดึงสถานะ: EmbeddedContent + 2ms
การดึงสถานะ: Canonical + 3ms
การดึงสถานะ: RobotsTxt + 6ms
สถานะการรีเซ็ตสถานะด้วย about: blank + 19ms
สถานะกำลังโหลดหน้า & กำลังรอ onload ServiceWorker ออฟไลน์ StartUrl + 24ms
สถานะการดึงข้อมูลในหน้า: ServiceWorker + 59ms
สถานะการดึงข้อมูลในหน้า: ออฟไลน์ + 0ms
สถานะการดึงข้อมูลในหน้า: StartUrl + 1ms
สถานะการดึง devtoolsLog & บันทึกเครือข่าย + 0ms
การดึงสถานะ: ServiceWorker + 2ms
การดึงสถานะ: ออฟไลน์ + 1ms
การดึงสถานะ: StartUrl + 1ms
สถานะการรีเซ็ตสถานะด้วย about: blank + 5ms
สถานะกำลังโหลดหน้า & กำลังรอ onload HTTPRedirect, HTMLWithoutJavaScript + 48ms
สถานะการดึงข้อมูลในหน้า: HTTPRedirect + 260ms
สถานะการดึงในหน้าเว็บ: HTMLWithoutJavaScript + 0ms
สถานะการดึง devtoolsLog & บันทึกเครือข่าย + 0ms
การดึงสถานะ: HTTPRedirect + 7ms
การดึงสถานะ: HTMLWithoutJavaScript + 12ms
สถานะกำลังตัดการเชื่อมต่อจากเบราว์เซอร์ … + 7ms
สถานะกำลังวิเคราะห์และกำลังดำเนินการตรวจสอบ … + 6ms
การประเมินสถานะ: ใช้ HTTPS + 3ms
การประเมินสถานะ: เปลี่ยนเส้นทางการรับส่งข้อมูล HTTP ไปยัง HTTPS + 24ms
สถานะการประเมิน: ลงทะเบียนพนักงานบริการที่ควบคุมหน้าและ start_url + 1ms
สถานะการประเมิน: หน้าปัจจุบันตอบสนองด้วย 200 เมื่อออฟไลน์ + 0ms
การประเมินสถานะ: มีแท็ก “ ที่มี `width ‘หรือ` initial-scale` + 1ms
สถานะการประเมิน: มีเนื้อหาบางส่วนเมื่อ JavaScript ไม่สามารถใช้งานได้ + 1ms
การประเมินสถานะ: Paintful ครั้งแรก + 6ms
การประเมินสถานะ: Paint ที่มีความหมายแรก + 54ms
สถานะการประเมิน: โหลดหน้าเว็บเร็วพอบนเครือข่ายมือถือ + 10ms
การประเมินสถานะ: ดัชนีความเร็ว + 33ms
การประเมินสถานะ: ภาพขนาดย่อของภาพหน้าจอ + 529ms
การประเมินสถานะ: ภาพหน้าจอสุดท้าย + 287ms
สถานะการประเมิน: Latency การป้อนข้อมูลโดยประมาณ + 2ms
สถานะการประเมิน: ไม่มีข้อผิดพลาดของเบราว์เซอร์เข้าสู่คอนโซล + 16ms
สถานะการประเมิน: เวลาตอบสนองของเซิร์ฟเวอร์ต่ำ (TTFB) + 1ms
การประเมินสถานะ: Idle CPU แรก + 1ms
การประเมินสถานะ: ใช้เวลาในการโต้ตอบ + 30ms
สถานะการประเมิน: เครื่องหมายกำหนดเวลาของผู้ใช้และการวัด + 0ms
การประเมินสถานะ: ลดคำขอที่สำคัญให้น้อยที่สุดความลึก + 2ms
การประเมินสถานะ: หลีกเลี่ยงการเปลี่ยนเส้นทางหลายหน้า + 3ms
สถานะการประเมิน: รายการแอปพลิเคชันเว็บตรงตามข้อกำหนดความสามารถในการติดตั้ง + 2ms
สถานะการประเมิน: กำหนดค่าสำหรับหน้าจอเริ่มต้นที่กำหนดเอง + 1ms
สถานะการประเมิน: ตั้งค่าสีของชุดรูปแบบแถบที่อยู่ + 0ms
สถานะการประเมิน: เนื้อหามีการปรับขนาดอย่างถูกต้องสำหรับวิวพอร์ต + 1ms
การประเมินสถานะ: แสดงภาพที่มีอัตราส่วนกว้างยาวที่ถูกต้อง + 0ms
การประเมินสถานะ: หลีกเลี่ยง API ที่เลิกใช้แล้ว + 1ms
การประเมินสถานะ: ลดการทำงานของเธรดหลักให้น้อยที่สุด + 0ms
การประเมินสถานะ: เวลาดำเนินการ JavaScript + 11ms
การประเมินสถานะ: คำขอโหลดกุญแจล่วงหน้า + 3ms
สถานะการประเมิน: เชื่อมต่อกับจุดเริ่มต้นที่ต้องการ + 2ms
การประเมินสถานะ: ข้อความทั้งหมดยังคงปรากฏให้เห็นในระหว่างโหลด webfont + 2ms
การประเมินสถานะ: คำขอเครือข่าย + 1ms
การประเมินสถานะ: การวัด + 2ms
สถานะการประเมิน: start_url ตอบกลับด้วย 200 เมื่อออฟไลน์ + 1ms
การประเมินสถานะ: ไซต์ทำงานข้ามเบราว์เซอร์ + 1 มิลลิวินาที
สถานะการประเมิน: การเปลี่ยนหน้าไม่รู้สึกว่าถูกบล็อกบนเครือข่าย + 0ms
สถานะการประเมิน: แต่ละหน้ามี URL + 0ms
สถานะการประเมิน: `[aria – *]` คุณสมบัติตรงกับบทบาทของพวกเขา + 1ms
สถานะการประเมิน: `[บทบาท] ทุกอย่างจำเป็นต้องมี ‘[aria – *]` คุณสมบัติ + 1ms
สถานะการประเมิน: องค์ประกอบที่มี `[บทบาท] ‘ที่ต้องการเด็กเฉพาะ` [บทบาท] `s อยู่ปัจจุบัน + 0ms
สถานะการประเมิน: `[บทบาท]` s มีอยู่โดยองค์ประกอบหลักที่จำเป็น + 1ms
สถานะการประเมิน: `[บทบาท] ‘ค่านั้นถูกต้อง + 1ms
การประเมินสถานะ: แอตทริบิวต์ `[aria – *]` มีค่าที่ถูกต้อง + 0ms
สถานะการประเมิน: `[aria – *]` แอตทริบิวต์นั้นถูกต้องและไม่สะกดผิด + 1ms
สถานะการประเมิน: องค์ประกอบ “ มีองค์ประกอบ “ กับ `[ชนิด ="คำอธิบายภาพ"] `+1ms
สถานะการประเมิน: ปุ่มมีชื่อที่สามารถเข้าถึงได้ + 1ms
สถานะการประเมิน: หน้านี้มีหัวเรื่อง, ข้ามลิงค์หรือภูมิภาคหลัก + 1ms
การประเมินสถานะ: สีพื้นหลังและพื้นหน้ามีอัตราส่วนความคมชัดเพียงพอ + 1ms
สถานะการประเมิน: “ มีเพียงกลุ่มที่ถูกเรียงอย่างถูกต้อง “ และ “ กลุ่มองค์ประกอบ “ หรือ “ + 1 มิลลิวินาที
สถานะการประเมิน: ไอเท็มคำนิยามถูกห่อในองค์ประกอบ “ + 0ms
การประเมินสถานะ: เอกสารมีองค์ประกอบ “ + 1ms
สถานะการประเมิน: `[id]` แอททริบิวในหน้านั้นไม่ซ้ำกัน + 1ms
สถานะการประเมิน: องค์ประกอบ “ หรือ “ มีชื่อ + 1ms
สถานะการประเมิน: “ องค์ประกอบมี `[lang]` คุณลักษณะ + 0ms
สถานะการประเมิน: “ องค์ประกอบมีค่าที่ถูกต้องสำหรับแอตทริบิวต์ `[lang]` + 1ms
การประเมินสถานะ: องค์ประกอบภาพมีแอตทริบิวต์ `[alt]` + 1ms
สถานะการประเมิน: “ องค์ประกอบมี `[alt]` ข้อความ + 1ms
สถานะการประเมิน: องค์ประกอบของฟอร์มมีป้ายกำกับที่เกี่ยวข้อง + 0ms
การประเมินสถานะ: Presentational `

`องค์ประกอบหลีกเลี่ยงการใช้แอตทริบิวต์` `,` `หรือ` “ สรุป ” + 1 มิลลิวินาที
สถานะการประเมิน: ลิงค์มีชื่อที่มองเห็นได้ + 1ms
สถานะการประเมิน: รายการมีเพียง `
  • `องค์ประกอบและสคริปต์สนับสนุนองค์ประกอบ (` `และ` `) + 1 มิลลิวินาที
    สถานะการประเมิน: รายการรายการ (`
  • `) อยู่ภายใน`
      `หรือ`
        `องค์ประกอบหลัก + 1ms
        สถานะการประเมิน: เอกสารไม่ได้ใช้ “ + 0ms
        การประเมินสถานะ: `[ผู้ใช้ปรับขนาดได้ ="ไม่"] `ไม่ได้ใช้ในองค์ประกอบ` `และแอตทริบิวต์` [ขนาดสูงสุด] ‘ไม่น้อยกว่า 5 + 1 มิลลิวินาที
        สถานะการประเมิน: “ องค์ประกอบมี `[alt]` ข้อความ + 1ms
        สถานะการประเมิน: ไม่มีองค์ประกอบใดที่มีค่า `[tabindex]` มากกว่า 0 + 1ms
        การประเมินสถานะ: เซลล์ใน `
  • องค์ประกอบที่ใช้แอตทริบิวต์ `[ส่วนหัว]` อ้างถึงเซลล์อื่น ๆ ของตารางเดียวกันเท่านั้น + 1 มิลลิวินาที
    สถานะการประเมิน: “ องค์ประกอบและองค์ประกอบด้วย `[role ="columnheader"/"rowheader"] `มีเซลล์ข้อมูลที่อธิบาย + 0ms
    การประเมินสถานะ: แอตทริบิวต์ `[lang]` มีค่าที่ถูกต้อง + 1ms
    สถานะการประเมิน: องค์ประกอบ “ มีองค์ประกอบ “ กับ `[ชนิด ="คำอธิบายภาพ"] `+1ms
    สถานะการประเมิน: องค์ประกอบ “ มีองค์ประกอบ “ กับ `[ชนิด ="ลักษณะ"] `+1ms
    สถานะกำลังประเมิน: `[accesskey]` ค่าไม่ซ้ำกัน + 1ms
    สถานะการประเมิน: การควบคุมที่กำหนดเองมีป้ายกำกับที่เกี่ยวข้อง + 0ms
    การประเมินสถานะ: การควบคุมที่กำหนดเองมีบทบาท ARIA + 1ms
    สถานะการประเมิน: โฟกัสของผู้ใช้ไม่ได้ติดอยู่ในภูมิภาค + 0ms โดยไม่ตั้งใจ
    สถานะการประเมิน: ตัวควบคุมแบบโต้ตอบสามารถโฟกัสได้ด้วยแป้นพิมพ์ + 0ms
    การประเมินสถานะ: หัวเรื่องไม่ข้ามระดับ + 0ms
    การประเมินสถานะ: องค์ประกอบแบบโต้ตอบระบุวัตถุประสงค์และสถานะ + 1ms
    สถานะการประเมิน: หน้ามีลำดับแท็บตรรกะ + 0ms
    สถานะการประเมิน: การมุ่งเน้นของผู้ใช้จะถูกนำไปยังเนื้อหาใหม่ที่เพิ่มไปยังหน้า + 1ms
    สถานะการประเมิน: เนื้อหาของหน้าจอถูกซ่อนจากเทคโนโลยีช่วยเหลือ + 0ms
    การประเมินสถานะ: องค์ประกอบแลนด์มาร์ค HTML5 ใช้เพื่อปรับปรุงการนำทาง + 0ms
    สถานะการประเมิน: การสั่งซื้อภาพในหน้าต่อไปนี้การสั่งซื้อ DOM + 0ms
    สถานะการประเมิน: ใช้นโยบายแคชที่มีประสิทธิภาพกับสินทรัพย์คงที่ + 1ms
    การประเมินสถานะ: หลีกเลี่ยงเพย์โหลดเครือข่ายขนาดใหญ่ + 3ms
    การประเมินสถานะ: เลื่อนภาพนอกจอ + 1ms
    สถานะการประเมิน: กำจัดทรัพยากรการปิดกั้นการแสดงผล + 12ms
    การประเมินสถานะ: ลดขนาด CSS + 28ms
    การประเมินสถานะ: ลดขนาด JavaScript + 64ms
    การประเมินสถานะ: เลื่อน CSS + 69ms ที่ไม่ได้ใช้ออกไป
    การประเมินสถานะ: แสดงรูปภาพในรูปแบบยุคถัดไป + 12ms
    การประเมินสถานะ: เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ + 11ms
    การประเมินสถานะ: เปิดใช้งานการบีบอัดข้อความ + 6ms
    การประเมินสถานะ: ภาพขนาดที่เหมาะสม + 6ms
    การประเมินสถานะ: ใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว + 7ms
    การประเมินสถานะ: หลีกเลี่ยง Application Cache + 11ms
    สถานะการประเมิน: หน้ามีประเภทเอกสาร HTML + 0ms
    การประเมินสถานะ: หลีกเลี่ยงขนาด DOM ที่มากเกินไป + 1ms
    การประเมินสถานะ: ลิงก์ไปยังปลายทางที่มาข้ามปลอดภัย + 2ms
    สถานะการประเมิน: หลีกเลี่ยงการขอสิทธิ์การระบุตำแหน่งทางภูมิศาสตร์ในการโหลดหน้าเว็บ + 1ms
    การประเมินสถานะ: หลีกเลี่ยง `document.write ()` + 0ms
    สถานะการประเมิน: หลีกเลี่ยงไลบรารี JavaScript ส่วนหน้าด้วยช่องโหว่ความปลอดภัยที่ทราบ + 0ms
    สถานะการประเมิน: ตรวจพบไลบรารี JavaScript + 9ms
    สถานะการประเมิน: หลีกเลี่ยงการขออนุญาตการแจ้งเตือนเมื่อโหลดหน้าเว็บ + 1ms
    สถานะการประเมิน: ช่วยให้ผู้ใช้สามารถวางลงในช่องรหัสผ่าน + 0ms
    สถานะการประเมิน: ใช้ HTTP / 2 สำหรับทรัพยากรของตัวเอง + 0ms
    การประเมินสถานะ: ใช้ฟังแบบพาสซีฟเพื่อปรับปรุงประสิทธิภาพการเลื่อน + 1ms
    สถานะการประเมิน: เอกสารมีคำอธิบาย meta + 0ms
    สถานะการประเมิน: หน้ามีรหัสสถานะ HTTP ที่ประสบความสำเร็จ + 1ms
    การประเมินสถานะ: เอกสารใช้ขนาดตัวอักษรที่อ่านได้ชัดเจน + 5ms
    สถานะการประเมิน: ลิงค์มีข้อความอธิบาย + 1ms
    สถานะการประเมิน: หน้าไม่ถูกบล็อกจากการจัดทำดัชนี + 1ms
    สถานะการประเมิน: robots.txt ถูกต้อง + 2ms
    สถานะการประเมิน: เอกสารมีความถูกต้อง `hreflang` + 1ms
    สถานะการประเมิน: เอกสารหลีกเลี่ยงปลั๊กอิน + 1ms
    สถานะการประเมิน: เอกสารมี `rel = canonical` + 0ms ที่ถูกต้อง
    การประเมินสถานะ: หน้าเว็บเป็นมิตรกับมือถือ + 1ms
    สถานะการประเมิน: ข้อมูลที่มีโครงสร้างถูกต้อง + 0ms
    สถานะกำลังสร้างผลลัพธ์ … + 0ms
    ChromeLauncher การฆ่าอินสแตนซ์ของ Chrome 7098 + 59ms
    เอาต์พุต html เครื่องพิมพ์ถูกเขียนไปที่ /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html + 46ms
    CLI Protip: เรียกใช้ประภาคารด้วย `–view` เพื่อเปิดรายงาน HTML ในเบราว์เซอร์ของคุณ + 1ms ทันที

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

    แต่ถ้าคุณต้องสร้างรายงาน JSON รูปแบบ?

    สามารถทำได้ดังต่อไปนี้.

    URL ประภาคาร –chrome-flags ="–หัวขาด" –เอาต์พุต json –output-path URL.json

    ด้วยการใช้ Lighthouse CLI คุณจะสามารถควบคุมการใช้งานตามที่คุณต้องการได้อย่างเต็มที่ ฉันขอแนะนำอย่างยิ่งให้ลองดู พื้นที่เก็บข้อมูล GitHub เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ CLI หรือโดยทางโปรแกรม.

    ข้อสรุป

    Google Lighthouse มีลักษณะเป็นเครื่องมือที่มีแนวโน้มในการทดสอบความต่อเนื่องเพื่อปรับปรุงประสิทธิภาพของไซต์และการใช้งาน หากคุณใช้งาน WordPress และต้องการทำให้เว็บไซต์ของคุณโหลดเร็วขึ้นลองดูสิ จรวด.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map