1
00:00:03,000 --> 00:00:06,864
We've seen how Next.js optimizes our images,

2
00:00:06,864 --> 00:00:09,375
for example by converting them to

3
00:00:09,375 --> 00:00:11,734
a more modern format like WebP,

4
00:00:11,810 --> 00:00:14,753
which results in a smaller file size.

5
00:00:14,753 --> 00:00:18,182
That kind of optimization is done on the server.

6
00:00:18,182 --> 00:00:20,715
But using the Image component also

7
00:00:20,715 --> 00:00:22,951
enables browser optimizations,

8
00:00:23,025 --> 00:00:24,952
like lazy loading.

9
00:00:24,952 --> 00:00:27,261
Now, this page is not actually the

10
00:00:27,261 --> 00:00:29,297
best example for this feature.

11
00:00:29,365 --> 00:00:31,681
In fact, we've seen that we currently

12
00:00:31,681 --> 00:00:33,433
get a warning in the Console

13
00:00:33,496 --> 00:00:35,721
telling us to add the "priority"

14
00:00:35,721 --> 00:00:37,251
property to our image.

15
00:00:37,321 --> 00:00:39,120
That's because in this page

16
00:00:39,120 --> 00:00:40,652
we only have one image,

17
00:00:40,719 --> 00:00:42,878
and it's displayed near the top,

18
00:00:42,878 --> 00:00:44,754
so it should be loaded by the

19
00:00:44,754 --> 00:00:46,565
browser as soon as possible.

20
00:00:46,630 --> 00:00:49,107
Let's do what the warning suggested,

21
00:00:49,107 --> 00:00:52,423
and set the "priority" prop, that is a "boolean",

22
00:00:52,423 --> 00:00:54,921
so we can just write the prop name,

23
00:00:54,921 --> 00:00:56,887
which in JSX is equivalent

24
00:00:56,887 --> 00:00:58,702
to setting it to "true".

25
00:00:58,778 --> 00:01:00,485
If we save and reload,

26
00:01:00,738 --> 00:01:03,426
we should see that the "img" no longer

27
00:01:03,426 --> 00:01:05,407
has "loading" set to "lazy",

28
00:01:05,477 --> 00:01:07,058
but quite the opposite:

29
00:01:07,058 --> 00:01:10,210
it has "fetchpriority" set to "high",

30
00:01:10,210 --> 00:01:12,547
which is a way to tell the browser that

31
00:01:12,547 --> 00:01:15,334
it should load this image as soon as possible.

32
00:01:15,334 --> 00:01:17,638
And this will prevent that warning

33
00:01:17,638 --> 00:01:19,639
that we were seeing in the Console.

34
00:01:19,639 --> 00:01:21,865
Now, like I said, the ReviewPage

35
00:01:21,865 --> 00:01:23,465
is not the best example

36
00:01:23,535 --> 00:01:25,855
for explaining lazy loading.

37
00:01:25,855 --> 00:01:28,735
Let's take a look at the Reviews page instead.

38
00:01:28,735 --> 00:01:30,972
Here we have multiple images.

39
00:01:30,972 --> 00:01:33,328
We know that we fetch 6 reviews,

40
00:01:33,328 --> 00:01:35,242
so there will be 6 images.

41
00:01:35,315 --> 00:01:37,513
But notice that only 3 of them

42
00:01:37,513 --> 00:01:39,125
are currently visible;

43
00:01:39,198 --> 00:01:41,727
in fact it's more like two and a half.

44
00:01:41,727 --> 00:01:44,756
We need to scroll down to see the rest.

45
00:01:44,756 --> 00:01:47,312
So loading all 6 images straight

46
00:01:47,312 --> 00:01:49,308
away is a bit of a waste,

47
00:01:49,388 --> 00:01:51,036
because the user will only

48
00:01:51,036 --> 00:01:52,557
see 3 of them initially.

49
00:01:52,620 --> 00:01:55,371
Our page could be displayed more quickly

50
00:01:55,371 --> 00:01:57,153
if the browser only loads

51
00:01:57,153 --> 00:01:58,935
the visible images first,

52
00:01:59,006 --> 00:02:01,792
and waits until after the initial page

53
00:02:01,792 --> 00:02:03,991
was rendered to load the rest.

54
00:02:04,064 --> 00:02:07,102
This is what's called "lazy loading".

55
00:02:07,102 --> 00:02:08,955
Now, let me go and open the

56
00:02:08,955 --> 00:02:10,673
code for the ReviewsPage.

57
00:02:10,741 --> 00:02:13,127
This is another one of the files for

58
00:02:13,127 --> 00:02:15,380
which ESLint was showing a warning

59
00:02:15,446 --> 00:02:17,556
because we're using the "img"

60
00:02:17,556 --> 00:02:19,520
tag rather than Next Image.

61
00:02:19,593 --> 00:02:22,214
Let's start by inspecting these images

62
00:02:22,214 --> 00:02:24,007
as they are at the moment.

63
00:02:24,076 --> 00:02:26,806
You can see that the src on this element

64
00:02:26,806 --> 00:02:29,234
is the original Strapi URL.

65
00:02:29,234 --> 00:02:31,455
What we're more interested in right now

66
00:02:31,455 --> 00:02:35,318
is actually in which order the images are loaded.

67
00:02:35,318 --> 00:02:37,391
Let's go and do a hard reload

68
00:02:37,391 --> 00:02:39,710
and then look at the various requests.

69
00:02:39,710 --> 00:02:43,119
Note how, at the moment, all the images are loaded

70
00:02:43,119 --> 00:02:46,305
right after the HTML document, the fonts,

71
00:02:46,305 --> 00:02:47,782
and the stylesheet,

72
00:02:47,860 --> 00:02:50,757
and before any JavaScript files.

73
00:02:50,757 --> 00:02:52,376
Now, to be more accurate

74
00:02:52,376 --> 00:02:54,802
we should look at the Waterfall column

75
00:02:54,802 --> 00:02:56,973
to see the timing of each request.

76
00:02:57,036 --> 00:02:59,057
But by default requests are

77
00:02:59,057 --> 00:03:01,078
sorted by their start time,

78
00:03:01,153 --> 00:03:02,708
so looking at the order in

79
00:03:02,708 --> 00:03:04,142
the list is good enough.

80
00:03:04,202 --> 00:03:06,439
Now, let's go and modify our code

81
00:03:06,439 --> 00:03:09,562
to use the Next Image component instead,

82
00:03:09,562 --> 00:03:12,374
that we need to import into this file.

83
00:03:12,374 --> 00:03:14,496
Let me sort these imports.

84
00:03:14,496 --> 00:03:16,435
Anyway, let's go and see how

85
00:03:16,435 --> 00:03:18,097
this affects our images.

86
00:03:18,167 --> 00:03:20,796
The Next Image component automatically

87
00:03:20,796 --> 00:03:22,526
sets "loading" to "lazy".

88
00:03:22,596 --> 00:03:24,856
Let's see what difference this makes

89
00:03:24,856 --> 00:03:27,332
in terms of network requests.

90
00:03:27,332 --> 00:03:30,689
You can see that the images are now loaded

91
00:03:30,689 --> 00:03:33,006
after the "main-app.js" file,

92
00:03:33,086 --> 00:03:35,087
while earlier they were before

93
00:03:35,087 --> 00:03:36,754
all the JavaScript files.

94
00:03:36,821 --> 00:03:39,555
This shows how lazy loading causes

95
00:03:39,555 --> 00:03:41,646
them to be requested later

96
00:03:41,727 --> 00:03:45,301
in the process of fetching all the page resources.

97
00:03:45,301 --> 00:03:48,137
Now, be aware that different browsers

98
00:03:48,137 --> 00:03:49,670
can work differently

99
00:03:49,746 --> 00:03:52,757
when it comes to lazy-loading images.

100
00:03:52,757 --> 00:03:55,087
Chrome may behave in a different

101
00:03:55,087 --> 00:03:57,343
way from say Firefox or Safari,

102
00:03:57,416 --> 00:03:59,927
and mobile browsers probably differ

103
00:03:59,927 --> 00:04:02,080
from desktop browsers as well.

104
00:04:02,151 --> 00:04:05,288
So this is just to give you the general idea.

105
00:04:05,288 --> 00:04:09,269
Anyway, by loading all images lazily however,

106
00:04:09,269 --> 00:04:12,329
we'll again see the warning about priority.

107
00:04:12,329 --> 00:04:15,176
Let's examine this message in more detail.

108
00:04:15,176 --> 00:04:17,869
It says that the image for "hades"

109
00:04:17,869 --> 00:04:22,077
was "detected as the Largest Contentful Paint"

110
00:04:22,077 --> 00:04:24,389
or "LCP" for short.

111
00:04:24,389 --> 00:04:27,087
Now, the "Largest Contentful Paint"

112
00:04:27,087 --> 00:04:29,090
is one of the metrics used

113
00:04:29,167 --> 00:04:32,336
to measure how quickly a web page loads.

114
00:04:32,336 --> 00:04:35,719
It's defined as the time it takes to render

115
00:04:35,719 --> 00:04:38,142
the largest image or text block

116
00:04:38,142 --> 00:04:39,705
visible on the page.

117
00:04:39,783 --> 00:04:41,862
If we look at our Reviews page,

118
00:04:41,862 --> 00:04:43,855
the first image is in fact

119
00:04:43,855 --> 00:04:45,847
the largest bit of content

120
00:04:45,924 --> 00:04:49,262
that's displayed right after we load the page.

121
00:04:49,262 --> 00:04:53,460
So, it's not a good idea to lazy-load that image.

122
00:04:53,460 --> 00:04:55,629
We want the browser to load it

123
00:04:55,629 --> 00:04:57,652
as soon as possible instead.

124
00:04:57,725 --> 00:04:59,729
Now, there's actually more than

125
00:04:59,729 --> 00:05:01,152
one image on this page

126
00:05:01,217 --> 00:05:03,380
that's visible without scrolling.

127
00:05:03,380 --> 00:05:06,862
In fact, how many images will be "above the fold"

128
00:05:06,862 --> 00:05:09,300
also depends on the screen size.

129
00:05:09,300 --> 00:05:11,207
On a large browser window,

130
00:05:11,207 --> 00:05:14,011
we see all 6 images in full.

131
00:05:14,011 --> 00:05:17,221
So, which images should we lazy-load?

132
00:05:17,221 --> 00:05:19,469
We just don't know exactly how

133
00:05:19,469 --> 00:05:21,718
many will be "below the fold".

134
00:05:21,793 --> 00:05:25,023
In practice, it's ok to use lazy-loading

135
00:05:25,023 --> 00:05:26,962
for most of them anyway.

136
00:05:27,042 --> 00:05:28,910
They will still be loaded by

137
00:05:28,910 --> 00:05:30,444
the browser eventually.

138
00:05:30,510 --> 00:05:33,442
What I usually do is set the priority

139
00:05:33,442 --> 00:05:35,954
only on the first image in a list.

140
00:05:35,954 --> 00:05:38,709
When using "map" to iterate over an array

141
00:05:38,709 --> 00:05:40,567
the callback function receives

142
00:05:40,567 --> 00:05:42,240
an optional second argument

143
00:05:42,301 --> 00:05:44,510
that is the "index" of the current

144
00:05:44,510 --> 00:05:45,874
element in the array.

145
00:05:45,939 --> 00:05:48,363
So we can easily set the "priority"

146
00:05:48,363 --> 00:05:49,955
only on the first image

147
00:05:50,025 --> 00:05:52,303
by passing "index === 0" as

148
00:05:52,303 --> 00:05:54,243
the boolean expression.

149
00:05:54,328 --> 00:05:57,383
This will be true only for the first element.

150
00:05:57,383 --> 00:05:59,246
Let's see if this works.

151
00:06:00,687 --> 00:06:03,002
If we inspect the first image again,

152
00:06:03,002 --> 00:06:05,808
you can see that it now has "fetchpriority"

153
00:06:05,808 --> 00:06:06,721
set to "high".

154
00:06:06,786 --> 00:06:09,400
While if we go and check the second image,

155
00:06:09,866 --> 00:06:12,387
this one has "loading: lazy".

156
00:06:12,387 --> 00:06:15,015
And it will be the same for the other images.

157
00:06:15,015 --> 00:06:18,303
This way we avoid the "priority" warning.

158
00:06:18,303 --> 00:06:20,511
But we'll still use lazy loading

159
00:06:20,511 --> 00:06:22,099
for most of the images,

160
00:06:22,168 --> 00:06:25,009
as we should see in the network requests.

161
00:06:25,009 --> 00:06:27,289
The first image is loaded right

162
00:06:27,289 --> 00:06:28,834
after the stylesheet.

163
00:06:28,907 --> 00:06:32,406
While the rest of them are deferred until later.

164
00:06:32,406 --> 00:06:34,656
And by the way, they've also been

165
00:06:34,656 --> 00:06:36,838
converted to "webp" and resized,

166
00:06:36,906 --> 00:06:38,818
reducing their file sizes,

167
00:06:38,818 --> 00:06:41,031
as explained in the previous video.

168
00:06:41,031 --> 00:06:43,050
But the main focus of this

169
00:06:43,050 --> 00:06:44,992
lecture was lazy-loading,

170
00:06:45,069 --> 00:06:47,689
that's enabled by default when using

171
00:06:47,689 --> 00:06:49,508
the Next Image component.

172
00:06:49,581 --> 00:06:52,098
We can selectively disable this feature

173
00:06:52,098 --> 00:06:54,412
by setting the "priority" prop.