Bild- und Font-Optimierung in React
Verwenden Sie next/image oder Lazy Loading für mit korrekten Abmessungen und Formaten (AVIF/WebP) sowie font-display.
Bild- und Font-Optimierung in React ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Bilder entscheidend sind
Bilder sind typischerweise die größten Ressourcen auf einer Seite. Nicht optimierte Bilder führen zu schlechtem LCP, langsamen Seitenladezeiten und hohen Bandbreitenkosten – besonders auf Mobilgeräten.
Next.js Image-Komponente
next/image optimiert Bilder automatisch: standardmäßiges Lazy Loading, ein responsives srcSet, moderne Formate (WebP/AVIF) und korrekte Abmessungen zur Vermeidung von 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
/>Lazy Loading in einfachem React
Fügen Sie nativen <img>-Elementen loading='lazy' hinzu. Der Browser verzögert das Laden von Bildern außerhalb des sichtbaren Bereichs, bis sie beim Scrollen in die Nähe des Viewports gelangen.
// 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" />Moderne Bildformate
Liefern Sie WebP oder AVIF statt JPEG/PNG aus. AVIF ist bei gleicher Qualität 50 % kleiner als JPEG. Verwenden Sie ein <picture>-Element zur Formataushandlung mit Fallbacks.
<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>Responsive Bilder mit srcSet
Stellen Sie mehrere Größen bereit, damit der Browser die passende Auflösung für den Bildschirm auswählen kann. So vermeiden Sie beispielsweise, ein 2000 Pixel großes Bild für einen 400 Pixel breiten Mobilbildschirm herunterzuladen.
<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"
/>Blurhash-/Skeleton-Platzhalter
Zeigen Sie während des Ladens des Bildes einen verschwommenen Platzhalter an, um Layoutverschiebungen zu vermeiden und die wahrgenommene Performance zu verbessern.
// 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
/>Strategie zum Laden von Schriftarten
Schriftarten blockieren das Rendering. Verwenden Sie font-display: swap, um während des Ladens der benutzerdefinierten Schriftart eine Fallback-Schriftart anzuzeigen und so FOIT (Flash of Invisible Text) zu reduzieren.
/* 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 */
}Schriftartenoptimierung in Next.js
next/font lädt Google Fonts beim Build, hostet sie selbst und verwendet font-display: optional, um CLS durch den Austausch von Schriftarten zu vermeiden.
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>;
}Schriftarten-Subsetting
Laden Sie nur die benötigten Zeichensätze. Eine vollständige Unicode-Schriftart kann 1 MB oder größer sein; ein lateinischer Zeichensatz ist typischerweise 30–80 KB groß.
// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin
// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });Kritische Schriftarten vorladen
Laden Sie Schriftarten, die im sichtbaren Bereich verwendet werden, vorab, damit sie parallel zum Parsen des HTML geladen werden und sich die renderblockierende Zeit verringert.
<link
rel="preload"
href="/fonts/MyFont.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>CDN und Caching
Liefern Sie Bilder und Schriftarten über ein CDN mit langen Cache-TTLs aus (Cache-Control: max-age=31536000, immutable). Dateinamen mit Content-Hash stellen sicher, dass aktualisierte Dateien den Cache umgehen.
Kurztest
Was bewirkt font-display: swap bei Webfonts?
Zusammenfassung
Verwenden Sie next/image für automatische Optimierung oder natives loading='lazy' zusammen mit srcSet in einfachem React. Liefern Sie AVIF/WebP mit <picture>-Fallbacks aus. Setzen Sie bei Webfonts font-display: swap ein, verwenden Sie next/font zum Self-Hosting von Google Fonts und laden Sie kritische Ressourcen im sichtbaren Bereich vorab.
Häufig gestellte Fragen
Ist die Lektion „Bild- und Font-Optimierung in React“ kostenlos?
Ja — der vollständige Text von „Bild- und Font-Optimierung in React“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Bild- und Font-Optimierung in React“?
Verwenden Sie next/image oder Lazy Loading für mit korrekten Abmessungen und Formaten (AVIF/WebP) sowie font-display. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Bild- und Font-Optimierung in React“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Core Web Vitals in React-Apps messen
- Bundle-Analyse und Strategie zur Codeaufteilung
- Bild- und Font-Optimierung in React
- INP reduzieren: Optimierung von Event-Handlern