/impeccable optimize
Optimize
วินิจฉัยและแก้ไขประสิทธิภาพ UI ตั้งแต่ LCP ถึงขนาดบันเดิล
เมื่อไรควรใช้
/impeccable optimize มีไว้สำหรับอินเทอร์เฟซที่รู้สึกช้า การเพนต์ครั้งแรกใช้เวลานาน การเลื่อนกระตุก ภาพโผล่มาช้า การโต้ตอบรู้สึกล่าช้า บันเดิลส่ง JavaScript 800KB ใช้เมื่อ Web Vitals แย่หรือเมื่อผู้ใช้บ่นว่าสิ่งต่างๆ ช้า
อย่าใช้เป็นการเพิ่มประสิทธิภาพล่วงหน้า หาก LCP คือ 1.1s และ INP คือ 80ms หยุด งานออกแบบสำคัญกว่า
วิธีการทำงาน
สกิลทำงานผ่านห้ามิติประสิทธิภาพ:
- การโหลดและ Web Vitals: LCP, INP, CLS ระบุสิ่งที่บล็อกการเพนต์ครั้งแรก สิ่งที่ทำให้การโต้ตอบล่าช้า สิ่งที่เลื่อนเลย์เอาต์
- การเรนเดอร์: การเรนเดอร์ซ้ำที่ไม่จำเป็น การขาด memoization การปรับความสอดคล้องที่แพง การกระตุกเลย์เอาต์ในลูป
- แอนิเมชัน: มีอะไรกำลังแอนิเมตคุณสมบัติเลย์เอาต์ไหม transform และ opacity เป็นสิ่งเดียวที่ถูกแตะไหม
will-changeช่วยหรือทำร้ายที่นี่ - ภาพและสินทรัพย์: การโหลดแบบ lazy ภาพเรสปอนซิฟ (
srcset,sizes) รูปแบบทันสมัย (WebP, AVIF) ขนาดที่ตั้งไว้เพื่อป้องกัน CLS - ขนาดบันเดิล: import ที่ไม่ได้ใช้ dependencies ที่ใหญ่เกินไป การขาด code-splitting โค้ดที่ตายแล้ว
สกิลวัดก่อนและหลัง ทุกการแก้ไขได้รับการวัดปริมาณ หากการเปลี่ยนแปลงไม่ขยับเมตริก มันจะถูกย้อนกลับ
ลองใช้งาน
/impeccable optimize the homepageรูปร่างที่คาดหวัง:
LCP: 3.2s → 1.4s
- Hero image preloaded (-800ms)
- Removed render-blocking font stylesheet (-240ms)
- Deferred analytics script (-180ms)
INP: 240ms → 90ms
- Debounced scroll handler
- Memoized expensive list render
- Removed synchronous layout read in event loop
CLS: 0.18 → 0.02
- Set dimensions on hero image and logo
- Reserved space for async header badge
Bundle: 340KB → 180KB
- Removed unused lodash import (52KB)
- Code-split the playground route (78KB)
- Dropped deprecated icon set (30KB)ข้อควรระวัง
- เพิ่มประสิทธิภาพก่อนวัด โดยไม่มีเมตริกฐาน คุณไม่สามารถบอกได้ว่าอะไรช่วย รัน
/impeccable optimizeด้วยตัวเลข Web Vitals เฉพาะ ไม่ใช่ความรู้สึก - ไล่ตามชัยชนะเล็กๆ การปรับปรุง INP 20ms ที่ใช้เวลาหนึ่งสัปดาห์แทบไม่คุ้มค่า Optimize มีผลตอบแทนลดลง รู้ว่าเมื่อไรต้องหยุด
- ลืมวัดใหม่หลังทุกการเปลี่ยนแปลง บิวด์อาจทำให้สิ่งต่างๆ แย่ลงในทางที่สกิลไม่ได้คาดการณ์ ตรวจสอบ