Reduce the impact of third-party code - Google CDN

Question

Seems like my page speed score is heavily impacted by this issue:

Reduce the impact of third-party code Third-party code blocked the main thread for [number] ms

This number changes every time I run the test, sometimes it's 1,000, sometimes 1,400 etc.

from Google CDN I only load up the jquery plugin and loading web fond script to lazy load fonts, here is relevant code:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6/webfont.js"></script>
<script>
 WebFont.load({
    google: {
      families: ['Open Sans:400,600','Roboto:400,500,700']
    }
  });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

this is the info from page speed insights:

Third-Party | Size| Main-Thread Blocking Time

Google CDN | 40 KB | 1,001 ms

Bootstrap CDN | 70 KB| 0 ms

What should I do to increase my speed?

I noticed that adding more JS code to my site, or removing it, is affecting this "main-thread blocking time", even though that code does not come from Google CDN.

For example, If delete some javascript blocks like these local scripts:

<script src="/js/d3.v5.min.js"></script>
<script src="/js/billboard.min.js"></script>
<script defer src="/js/moment.min.js"></script>

the Main-Thread Blocking Time from Google CDN decrease to 500 ms and my score increase

Fimbriation

Simply do not rely on CDNs, instead install package in you local node_modules with NPM – Relique

but isn't using CDN is a recommended practice? especially when it's google so most users have their files in their cache... I never heard of someone that is hosting jquery library on their own server. – Fimbriation

CDN or local, this is always a server call. But npm packages along with webpack and code splitting allow you to decide what part of libraries include in your app, how them are minified separately or togheter etc etc. Along that your js will be cached anyway. Addittionally each CDN incurs a DNS lookup, for example – Relique

Answer 1

There are a few things you can do to improve this for your site:-

1. Add the async attribute to the JS (or defer if async breaks your site as it isn't setup to allow asynchronous loading without running into race conditions). The purpose of this is to remove blocking JS.
2. use <link rel="preconnect" href="itemURL" /> on 3rd part domains to reduce lookup time on the script source by doing all the DNS, TLS and TCP magic that happens as early as possible.
3. If the script is particularly heavy and not essential to page operation consider lazy loading it after a couple of seconds to let the main thread get the important work out of the way (just insert the script or initialise it after a short setTimeout).
4. If all else fails - replace the script, some scripts are just resource hogs and there may be lighter weight alternatives (try http://microjs.com/ as a source of inspiration)

Gerthagerti