Load your page faster: remove unused code
Load your page faster: remove unused code
Find out how to find and remove unused CSS and JavaScript.
Resource links:
https://developers.google.com/web/too…
https://web.dev/remove-unused-code
Series playlist → https://goo.gle/2GFvRCv
Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs
Content
0.06 -> you can make your website faster and use
2.939 -> less data by making sure you don't
5.759 -> request files you don't need this
15.9 -> webpage works fine on my laptop on fast
18.539 -> broadband but let's try loading it on a
21.539 -> mobile phone on 3G now this is the kind
25.08 -> of experience most of your users will
27.18 -> get and that's not so good let's see
30.029 -> what's going on one really easy way to
32.16 -> find website problems is to check the
34.079 -> chrome dev tools Network panel and
36.21 -> filter by type wow that's a lot of files
40.05 -> and a lot of bytes the individual
42.96 -> JavaScript files may not be very large
44.85 -> but each file needs to be passed and
47.7 -> executed and means another request to
51 -> the server which can slow down your site
52.89 -> and use battery let's check what's going
56.399 -> on straight away you can see a problem
58.62 -> I'm linking to multiple different
60.359 -> versions of jQuery now it gets worse
63.09 -> I've linked to the full fat version as
65.489 -> well as the minimized one let's get rid
68.159 -> of the files we don't need you should
70.02 -> only ever link to one version of a
72.33 -> JavaScript library cutting out
74.04 -> unnecessary JavaScript makes your
75.96 -> website more reliable easier to maintain
78.36 -> and simpler to debug let's see what else
82.17 -> is going on now chrome dev tools has a
84.84 -> great feature for finding CSS or
86.759 -> JavaScript that's never used from more
89.64 -> tools select coverage and then start
92.22 -> recording as you use the site I'll use
94.92 -> the site for a while and then see what
96.75 -> the coverage tool finds so let's stop
99.57 -> recording and look at the results now
101.97 -> one thing that really stands out some
104.009 -> CSS and JavaScript files aren't being
106.89 -> used at all now turned out I forgot to
109.35 -> remove links to files I used earlier in
111.78 -> the project I can get rid of those
113.97 -> straightaway and that's a big weight
116.189 -> reduction and less file requests all
118.89 -> without changing any code getting rid of
121.92 -> unused code also makes your site easier
124.5 -> to debug and reduces the amount of code
126.99 -> the browser needs to parse and execute I
129.569 -> hope that was useful take a look at our
132.12 -> other videos for more too
133.46 -> to make your website even faster
135.73 -> [Music]
Source: https://www.youtube.com/watch?v=9DqbnjEidXc