Regarding performance of flynt with my site

[rajpatel2435]

Hi @aaronmeder @timohubois,

Got that!

Thank you so much for your response.

As Flynt provides a speed score of 100, I am building my WordPress theme with the help of Flynt. However, I am currently experiencing a performance issue where the mobile score is around 57, primarily due to Total Blocking Time (TBT).

Could you assist me in improving this? I would appreciate any insights into where I might be going wrong.

Here is the site: Baltimore Ravens

Regarding your answer, I need to use the 3rd party scripts in order to make full stack web app. If i use strategy like async defer it does not seems to work and website will be break.

Could you give me the different approach so that does not affect the speed as well as performance

Thanks,

[aaronmeder]

Hey @rajpatel2435

Performance optimization can be a complex topic. Flynt provides a great web vitals score out of the box, but as you mentioned the rest is up to each individual site and it's components 😅

II will not go into detail, since the needed optimisation might be too specific,
but here a few ideas for your site, which might help a little:

• Load the Google Fonts locally instead from their CDN. I usally use webfonts helper to download the fonts and it also gives you the @font-face definitions.
• Try to see if it's better when you also load jQuery locally instead from their CDN. If possible try to get rid of jQuery all together - Flynt v2 setup comes without jQuery in the frontend by default.
• There are 46MB+ loaded on page load, specifically 4x 12MB mp4 videos. This needs to be avoided!
  

Some other thoughts:

• I don't really see you using any flynt-components at all. I would try to wrap each block (like the NFL standings sidebar element or the team leaders elements) into their own flynt-component. Then (if it uses javascript) have a good look at what might be the best loading strategy for it: https://github.com/flyntwp/flynt?tab=readme-ov-file#javascript-modules
  If you can load some component's with load:on="visible" then that can help a lot with web vitals (if they aren't in the viewport on load).
• Another strategy for dealing with external third party data: sometimes instead of loading external data from an external API using javascript when the page is loaded, you might be able to do the same on the server in PHP and then cache that API response for a while and display the data directly from your own server. Might lead to some more complexity however.

Sorry I might not have much more time to get into more detail on each point.

Hope some of that might help you to score some more points.
Aaron

[rajpatel2435]

Hi @aaronmeder @timohubois

Thank you for your response. I will try those strategy and let5 you know the result.

Can you have any suggestion for google login, fb login and apple login script which i need to load in each pages?

Thanks,
Raj

[rajpatel2435]

Hi @aaronmeder @timohubois

I loaded the font locally as well as loaded jQuery locally. For fonts part, I don't have that issue any more but for jQuery still exists. For the third party login, I tried to use async strategy but I can not see too much difference.

What is your thought on these?

One more question, for LCP. I already preloaded the image as well as compressed the image but it is taking 11ms for LCP. Is there any different approach or solution?

Thanks