1
00:00:00,600 --> 00:00:05,220
There are many factors that contribute to
the performance of a website.

2
00:00:05,220 --> 00:00:09,210
When a person uses a web browser on a
device like a phone,

3
00:00:09,210 --> 00:00:14,240
a tablet, or a PC and they type in a web
address or click a link.

4
00:00:14,240 --> 00:00:20,510
That creates a hypertext transfer protocol
request, or HTTP request.

5
00:00:20,510 --> 00:00:26,400
It's called a request because it's asking
a web server for a piece of information.

6
00:00:26,400 --> 00:00:31,030
At first, that request might be for an
HTML page, but

7
00:00:31,030 --> 00:00:36,350
then that HTML page generates subsequent
HTTP requests

8
00:00:36,350 --> 00:00:40,950
when it in turn asks for CSS, Java script,
images, and more.

9
00:00:42,040 --> 00:00:46,010
It's important to consider the size of
each one of these assets.

10
00:00:46,010 --> 00:00:48,020
Large images, tons of Javascript and

11
00:00:48,020 --> 00:00:51,370
lots of CSS can make a page take a long
time to load.

12
00:00:51,370 --> 00:00:55,900
In fact, not only must we consider the
size of these assets, but

13
00:00:55,900 --> 00:00:59,240
we also need to consider how many of them
there are.

14
00:00:59,240 --> 00:01:04,150
Because each HTTP request it's self has a
performance cost,

15
00:01:04,150 --> 00:01:08,210
even under conditions when there is no
data being sent, like in a 404 Error.

16
00:01:08,210 --> 00:01:10,840
For these reasons

17
00:01:10,840 --> 00:01:15,550
it's important to create what's called a
performance budget early in the process.

18
00:01:15,550 --> 00:01:20,308
This can be a document that is agreed upon
by you and your team but in most cases.

19
00:01:20,308 --> 00:01:23,956
[SOUND] It's as simple as a target load
time for

20
00:01:23,956 --> 00:01:27,226
the page or the number of HTTP requests.

21
00:01:27,226 --> 00:01:30,949
Oftentimes, the easiest thing to measure
is page weight,

22
00:01:30,949 --> 00:01:35,340
which is the total file size of all of
your site's assets.

23
00:01:35,340 --> 00:01:38,860
You and your team should decide on some
target numbers and

24
00:01:38,860 --> 00:01:40,810
how you're going to achieve them.

25
00:01:40,810 --> 00:01:45,320
Any time a new plugin is brought in or an
icon set or new images and so on,

26
00:01:45,320 --> 00:01:48,080
it needs to be checked against the
performance budget.

27
00:01:48,080 --> 00:01:52,310
Let's take a look at a hypothetical
example to help illustrate.

28
00:01:52,310 --> 00:01:55,640
In most websites, there are many different
stakeholders.

29
00:01:55,640 --> 00:02:00,490
In a business, there might be multiple
departments, executives, individuals, and

30
00:02:00,490 --> 00:02:03,540
customers that all have different needs.

31
00:02:03,540 --> 00:02:09,080
A similar situation exists even if you're
an individual making websites for clients.

32
00:02:09,080 --> 00:02:12,112
When the marketing department wants some
photos added and

33
00:02:12,112 --> 00:02:16,920
the frontend engineer wants to use a few
jQuery plugins to design an interaction.

34
00:02:16,920 --> 00:02:19,780
And then a designer wants to use lots of
fonts and

35
00:02:19,780 --> 00:02:23,130
icon sets, where does that leave
performance?

36
00:02:23,130 --> 00:02:26,160
By setting and agreeing upon a performance
budget,

37
00:02:26,160 --> 00:02:30,230
you will be better equipped to navigate
some challenging decisions about what to

38
00:02:30,230 --> 00:02:34,590
include, what not to include, and where to
compromise.

39
00:02:34,590 --> 00:02:38,375
Thinking about this example again, cutting
down on the size and

40
00:02:38,375 --> 00:02:40,035
number of photos can help.

41
00:02:40,035 --> 00:02:44,885
And maybe the frontend engineer can find a
way to use less JavaScript to accomplish

42
00:02:44,885 --> 00:02:48,980
the same thing, or create a completely new
interaction.

43
00:02:48,980 --> 00:02:53,360
And finally, maybe the designer can
instead pick fewer fonts and

44
00:02:53,360 --> 00:02:59,365
carefully pack SVG icons together in one
HTTP request.

45
00:02:59,365 --> 00:03:01,650
Frontend performance can sometimes be
challenging,

46
00:03:01,650 --> 00:03:04,950
but sticking to a budget can help you make
these decisions.