NextJS: Optimize Fonts & Images for Better Performance

Learn to optimize fonts with next/font and images with next/image for faster NextJS apps. πŸš€

NextJS: Optimize Fonts & Images for Better Performance
Dmitry Makarenkov
275 views β€’ Jul 25, 2024
NextJS: Optimize Fonts & Images for Better Performance

About this video

Learning NextJS. 3.Optimizing Fonts & Images

Optimization of fonts (using next/font) and images (using the Image component from next/image).
Switching images depending on the current size of the browser window (viewport): one image for desktop computers, another for mobile devices.

The presentation can be downloaded here:
https://dmpsy.club/references/NextJS/lesson_003_optimize_fonts_images_eng.pdf

Donate the author: https://www.donationalerts.com/r/dmitrymak

Timing

0:00:00 Introduction
0:00:41 Target audience
0:01:12 Agenda
0:02:46 Why optimize fonts (with next/font)
0:04:03 Adding a primary font
0:07:54 Adding a secondary font
0:10:40 Why optimize images (with next/image)
0:13:12 Adding the Image component (hero-desktop.png)
0:15:05 Adding the Image component (hero-mobile.png)
0:18:45 Useful links
0:19:45 Session Summary
0:20:30 Closing Comments

Tags and Topics

Browse our collection to discover more content in these categories.

Video Information

Views

275

Likes

3

Duration

21:42

Published

Jul 25, 2024

Related Trending Topics

LIVE TRENDS

Related trending topics. Click any trend to explore more videos.