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
There are a few things you can do to improve this for your site:-
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.<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.setTimeout
).