How to optimize fetching ads from DFP and google tag manager scripts?

Question

I'm part of a team working on improving the lighthouse score of our website : https://www.bikewale.com/m/royalenfield-bikes/classic-350/

We are concentrating on optimising javascript delivery on the page, in order to decrease the time-to-interactive. However, we noticed that scripts like gtm.js, gpt.js and loading of ads on page load, is limiting our maximum improvement to around 70 (lighthouse performance score).

After doing optimisations to javascript delivery on our end, we were able to score atmost 70. We tried removing the js files for google tag manager and gpt, and saw the score rising to 95 (approx). Also, lazy loading all ads, and hence the request to dfp gives us a boost to around 75 (we can't do this due to the first ad is in the first fold).

Please note that we have followed the guides and best practices mentioned in the following links : gtm - https://developers.google.com/tag-manager/quickstart gpt - https://support.google.com/admanager/answer/7485975

googletag.pubads().refresh(immediateAds); // immediateAds is array of first fold ads The refresh method is deteriorating the performance.

Is there a way to optimise the delivery of ads and gtm scripts, in order to improve the performance? Possibly a newer version of the scripts or an alternative? Is there a way to load the first fold ad immediately, and lazy load other ads on the page, without using the refresh() method

Answer 1

Congrats on achieving the 70 score! It's a very respectable score for an e-commerce site.

I'm not super familiar with GTM or GPT, but I can recommend one optimization to help those libraries do their jobs more effectively: preconnect to origins from which ads are served.

For each of those origins, you should add two hints near the top of your page:

<link rel="dns-prefetch" href="https://dt.adsafeprotected.com">
<link rel="preconnect" href="https://dt.adsafeprotected.com">

The first hint asks the browser to do a DNS lookup for the origin. The second asks the browser to set up a TCP connection. Preconnect accomplishes everything dns-prefetch does, but not all browsers support preconnect. Using both hints lets you get the best performance out of as many browsers as possible

Both of these hints give the browser a head start for resources that it won't otherwise know about until later in the page load process.

Keep in mind, depending on the resources loaded, you may need two preconnect hints. You can check the waterfall chart to make sure all connections are set up at the beginning of the page load.