การเพิ่มประสิทธิภาพรูปภาพและฟอนต์ใน React
ใช้ next/image หรือ ที่โหลดแบบ lazy พร้อมขนาดและรูปแบบที่ถูกต้อง (AVIF/WebP) รวมถึง font-display
การเพิ่มประสิทธิภาพรูปภาพและฟอนต์ใน React เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดรูปภาพจึงสำคัญ
โดยทั่วไป รูปภาพเป็นทรัพยากรที่ใหญ่ที่สุดในหน้า รูปภาพที่ไม่ได้ปรับให้เหมาะสมทำให้ LCP ไม่ดี หน้าโหลดช้า และมีค่าใช้แบนด์วิดท์สูง โดยเฉพาะบนมือถือ
คอมโพเนนต์รูปภาพของ Next.js
next/image ปรับรูปภาพให้เหมาะสมโดยอัตโนมัติ ได้แก่ การโหลดแบบเลื่อนเวลาเป็นค่าเริ่มต้น, srcSet แบบตอบสนอง, รูปแบบสมัยใหม่ (WebP/AVIF) และขนาดที่ถูกต้องเพื่อป้องกัน CLS
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority // preload above-the-fold images
sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>การโหลดแบบเลื่อนเวลาใน React ทั่วไป
เพิ่ม loading='lazy' ให้กับองค์ประกอบ <img> แบบเนทีฟ browser จะเลื่อนการโหลดรูปภาพที่อยู่นอกหน้าจอจนกว่าจะเลื่อนมาใกล้พื้นที่แสดงผล
// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />
// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />รูปแบบรูปภาพสมัยใหม่
แสดงผล WebP หรือ AVIF แทน JPEG/PNG โดย AVIF มีขนาดเล็กกว่า JPEG 50% ที่คุณภาพเท่ากัน ใช้องค์ประกอบ <picture> เพื่อเจรจารูปแบบพร้อมตัวเลือกสำรอง
<picture>
<source srcSet="/hero.avif" type="image/avif" />
<source srcSet="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />
</picture>รูปภาพแบบตอบสนองด้วย srcSet
จัดเตรียมรูปภาพหลายขนาด เพื่อให้ browser เลือกความละเอียดที่เหมาะกับหน้าจอ และหลีกเลี่ยงการดาวน์โหลดรูปภาพขนาด 2000px สำหรับหน้าจอมือถือขนาด 400px
<img
src="/photo-800.jpg"
srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Photo"
/>ตัวแทนแบบเบลอ / โครงร่าง
แสดงตัวแทนแบบเบลอขณะโหลดรูปภาพ เพื่อป้องกันการเลื่อนของเค้าโครงและทำให้ผู้ใช้รู้สึกว่าหน้าทำงานเร็วขึ้น
// With next/image blur placeholder:
<Image
src="/photo.jpg"
alt="Photo"
width={800}
height={600}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>กลยุทธ์การโหลดฟอนต์
ฟอนต์จะขัดขวางการเรนเดอร์ ใช้ font-display: swap เพื่อแสดงฟอนต์สำรองขณะโหลดฟอนต์กำหนดเอง ซึ่งช่วยลด FOIT (ข้อความที่มองไม่เห็นชั่วคราว)
/* In global CSS: */
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2');
font-display: swap; /* show fallback, swap to MyFont when ready */
}การปรับฟอนต์ให้เหมาะสมใน Next.js
next/font โหลด Google Fonts ขณะสร้างโครงการ โฮสต์ฟอนต์ด้วยตนเอง และใช้ font-display: optional เพื่อกำจัด CLS ที่เกิดจากการสลับฟอนต์
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export default function RootLayout({ children }) {
return <html className={inter.variable}><body>{children}</body></html>;
}การเลือกชุดอักขระของฟอนต์
โหลดเฉพาะชุดอักขระที่ต้องใช้ ฟอนต์ Unicode ครบชุดอาจมีขนาดตั้งแต่ 1MB ขึ้นไป ส่วนชุดอักขระละตินมักมีขนาด 30–80KB
// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin
// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });การโหลดฟอนต์สำคัญล่วงหน้า
โหลดฟอนต์ที่ใช้ในส่วนที่เห็นได้ทันทีโดยไม่ต้องเลื่อนล่วงหน้า เพื่อให้โหลดพร้อมกับการแยกวิเคราะห์ HTML และลดเวลาที่ขัดขวางการเรนเดอร์
<link
rel="preload"
href="/fonts/MyFont.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>CDN และการแคช
ให้บริการรูปภาพและฟอนต์จาก CDN พร้อมค่า TTL ของแคชที่ยาวนาน (Cache-Control: max-age=31536000, immutable) ชื่อไฟล์ที่มีแฮชของเนื้อหาช่วยให้ไฟล์ใหม่ข้ามแคชได้
ตรวจสอบความเข้าใจ
font-display: swap ทำอะไรให้กับฟอนต์เว็บ
สรุปทบทวน
ใช้ next/image เพื่อการปรับให้เหมาะสมโดยอัตโนมัติ หรือใช้ loading='lazy' แบบเนทีฟร่วมกับ srcSet ใน React ทั่วไป แสดงผล AVIF/WebP พร้อมตัวเลือกสำรองด้วย <picture> ใช้ font-display: swap กับฟอนต์เว็บ ใช้ next/font เพื่อโฮสต์ Google Fonts ด้วยตนเอง และโหลดทรัพยากรสำคัญในส่วนที่เห็นได้ทันทีโดยไม่ต้องเลื่อนล่วงหน้า
คำถามที่พบบ่อย
บทเรียน “การเพิ่มประสิทธิภาพรูปภาพและฟอนต์ใน React” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเพิ่มประสิทธิภาพรูปภาพและฟอนต์ใน React” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเพิ่มประสิทธิภาพรูปภาพและฟอนต์ใน React”
ใช้ next/image หรือ ที่โหลดแบบ lazy พร้อมขนาดและรูปแบบที่ถูกต้อง (AVIF/WebP) รวมถึง font-display คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การเพิ่มประสิทธิภาพรูปภาพและฟอนต์ใน React” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การวัด Core Web Vitals ในแอป React
- การวิเคราะห์บันเดิลและกลยุทธ์การแยกโค้ด
- การเพิ่มประสิทธิภาพรูปภาพและฟอนต์ใน React
- การลด INP: การเพิ่มประสิทธิภาพตัวจัดการอีเวนต์