1
00:00:02,130 --> 00:00:08,850
Now when you want to optimize your page, it's actually wrong to just go into the code and start changing

2
00:00:08,940 --> 00:00:09,780
anything,

3
00:00:09,780 --> 00:00:15,450
instead you want to measure and audit your page and find performance bottlenecks.

4
00:00:15,450 --> 00:00:18,460
Don't guess, it's that measure.

5
00:00:18,570 --> 00:00:25,560
You want to find out how many round trips you have, how big your script is which needs to be downloaded.

6
00:00:25,590 --> 00:00:32,730
You maybe want to set certain budgets so that you know okay, my script has to be below 100kb and

7
00:00:32,730 --> 00:00:35,640
if it is above it, I will do everything I can to shrink it.

8
00:00:36,210 --> 00:00:41,460
So that's of course one important thing and you want to find out how big it is and how long it takes

9
00:00:41,460 --> 00:00:43,230
before you start optimizing it.

10
00:00:44,450 --> 00:00:50,300
You also want to measure the runtime performance with the help of browser dev tools.

11
00:00:50,300 --> 00:00:56,960
There are a lot of useful features in modern browser dev tools which you can use to find out how long

12
00:00:56,960 --> 00:01:02,620
certain parts of your script take and then you can find out if that seems too long to you,

13
00:01:02,690 --> 00:01:07,130
you can try out an alternative and find out if that is actually better.

14
00:01:07,130 --> 00:01:14,090
You can also explore best practices and patterns and benchmarks you find on the Internet,

15
00:01:14,210 --> 00:01:20,600
you will find a lot of blog posts and discussions when you Google Javascript performance or even more

16
00:01:20,600 --> 00:01:25,880
specific performance questions and you can then have a look at how other people are solving certain

17
00:01:25,880 --> 00:01:29,570
problems or how they are approaching certain things,

18
00:01:29,570 --> 00:01:34,240
so this can also be a useful thing to find out what you could look into

19
00:01:34,850 --> 00:01:42,430
and also important because that is a common mistake, when you do measure performance, measure your production

20
00:01:42,440 --> 00:01:43,490
ready code.

21
00:01:43,670 --> 00:01:50,030
Don't do this in development mode because in development mode, your code is not optimal at all,

22
00:01:50,150 --> 00:01:56,900
build tools like webpack where you use the webpack dev server inject a lot of extra code into your code

23
00:01:57,230 --> 00:01:59,750
to enhance the debugging experience.

24
00:01:59,750 --> 00:02:05,660
Now that's great for finding ordinary issues and problems but it's not great for measuring performance

25
00:02:05,660 --> 00:02:10,790
because the performance during development will not be that great because it's simply not what matters

26
00:02:10,790 --> 00:02:11,670
during development

27
00:02:12,110 --> 00:02:17,180
but if you want to of course have great performance in production, so it's the production ready code

28
00:02:17,180 --> 00:02:19,160
you should test.

29
00:02:19,200 --> 00:02:23,760
Now when we talk about measuring performance, there are a couple of different ways of measuring it.

30
00:02:23,760 --> 00:02:31,170
Now I mentioned the browser dev tools, you also can add certain code snippets to your code, to be precise

31
00:02:31,170 --> 00:02:37,470
you can use performance now which is available in the browser to get a time snapshot and you can take

32
00:02:37,470 --> 00:02:43,530
that before and after your running operation you're not sure about and this allows you to find out

33
00:02:43,530 --> 00:02:45,420
how long an operation takes.

34
00:02:45,420 --> 00:02:50,310
Then of course outside of your code, you do have the browser dev tools as I mentioned, where you have

35
00:02:50,310 --> 00:02:56,250
many features that allow you to detect all kinds of different problems and bottlenecks you might have in

36
00:02:56,250 --> 00:03:04,590
your code and you also have certain web sites like jsperf.com which allow you to benchmark certain

37
00:03:04,590 --> 00:03:09,520
code alternatives against each other and find out which one is quicker.

38
00:03:09,690 --> 00:03:17,910
You also have webpagetest.com, which is a site you can use to test a hosted web site, so not your

39
00:03:17,910 --> 00:03:23,530
locally running one but a hosted web site and which then we'll give you a rich report on how that site

40
00:03:23,550 --> 00:03:27,630
performed and what you could look into there.

41
00:03:27,630 --> 00:03:34,020
Now these are just some tools and I can only recommend that you also Google web site performance,

42
00:03:34,140 --> 00:03:39,450
Javascript performance to find more approaches and more tools that might work well for you.