Removed Thirtdparty webvitals issue

Question

I checked the pageinsights of "http://www.briddles.com/riddle/9-bodmas?l=333"

Most of these are thirdparty. How can i sove it ?

Answer 1

I see 3 important groups there:

1. Youtube
2. Google Ads or analytics
3. Facebook

Here is what I would do:

• 1. I see the youtube player is hidden by default, I would reserve some space for the player (maybe with a lightweight placeholder) and only append the iframe when the user clicks "view answer". This lite-youtube web component is awesome and might help you out. Trust me.
• 2. Normally Google ads is not something you want to get rid of. I would just make sure to load these scripts with the async attribute at least.
• 3. For the facebook comments I imagine 3 approaches:
  • 3.1. Render a placeholder with a button saying "See comments" or something like that and only fetch the scripts when the user press that button.
  • 3.2. Use the Intersection Observer API so when comments section scroll into view, fetch de scripts and render. (You will have to reserve some space to avoid CLS).
  • 3.3. Remove the comments section (if there is almost no usage) or use a different provider that is optimized for web vitals. I don't know which one, but it's still an option.

---

Extra recommendations:

• The main image is too heavy for mobile users, try to use a responsive image, compress the image and choose a lighter format like webp for browsers that support it. More info about image optimization here.
• Reduce the amount of fonts you use and, if possible, host it by yourself and use a CDN. Google fonts is practical but to host your fonts is better for performance.