Embedded tweets take a toll on your website performances!
I just discovered after running Lighthouse on Mockoon's website (https://mockoon.com) that using Twitter embedded tweets is taking a huge toll on the website performances.
Here is the Lighthouse report: https://imgur.com/LlZWyXL
Over 50 HTTP requests, multiple JS files blocking the main thread for seconds, MB of data and resources, etc. (https://imgur.com/kyGetTj)
Did some of you had the same experience?
I am seriously thinking about ditching the embedded tweets completely or replace them with lightweight screenshots.
Trending on Indie Hackers
For screenshots, I quick Google gave me http://themaninblue.com/experiment/screenshot-a-tweet/. I tried it out and it uses the banner of the author as background image. Pretty nice.
Nice tool, I was looking for something like this, thanks.
Yep, totally. I too was surprised - about 20+ requests per embedded tweet. Nuts.
My product (https://markfolder.com) is all about bookmarking tweets, so you can imagine what's going to happen in folders with hundreds of embedded tweets!
I'm going the same route as @yongfook, i.e. lazy load them as the user scrolls.
Farez
Hi Ferez, are you using the Twitter API? If so, it could be worth using the text of the tweet as a preview when listing them, and then show the embed when viewing a specific tweet.
I'm assuming there's pagination on those folders?
I'm using the API in a product I've developed for people doing research, which allows the user to save both tweets and videos from YouTube, though I'm seeing good performance.
I'm using just the open oEmbed API, so I'm already capturing the tweet and some basic info, so your idea is a good one. I'll explore this!
Theundercloud looks like another great "second brain" app (I initially read it as "Thundercloud".
Aye, the domain name fairies got there before me!
Probably the best solution!
I would also like to try generating light text/CSS versions with no dependencies.
Yes definitely need to go with something lighter I think. Good stuff.
I realised the same after embedding several tweets on my homepage - the first-paint performance tanked.
Now I lazy-load the tweets. The page loads without them, then as the user scrolls down nearer the tweet section, they load. The initial page load is much faster now.
You can see the lazy load in action on bannerbear.com
I use Waypoints to detect when the user has scrolled near the tweet section:
http://imakewebthings.com/waypoints/
This is a nice approach, I would rather go for something simple, but I will have a look at this.
Well, that's sort of obvious....request.
You can do them with Html & CSS and then ylu are ready to go.
It takes time, I know but I am sure you'll find the snippet somewhere.
Oh, I did.
Can I feature it on my newsletter? I mean mockoon.
Nice, thanks for the resource!
It would be an honor to have Mockoon featured in your newsletter!
Do you need any materials, logo, screenshot?
Thanks :)
You are very welcome Guillaume!
You can send some text, around 140 characters to [email protected]
just like in these posts, under this text:
APPS, TOOLS n’ SITES ―
thanks a lot!
Sent! Thank you :)
Superb. I will answer back
That's correct, performance will suffer.
Another big problem is not only performance but also privacy. By embedding widgets (Twitter, Facebook), you expose your users to their tracking tools and theoretically you should also display and update your GDPR cookie banner because of it.
+1 for the GDPR, that's even worse.
But I wasn't expecting such shitty performances from such a widely used "tool".
pretty much any embed is bad because of the additional network request you have to do.
Sure, but I use other things like GA, or Github button, and it's nowhere as bad as Twitter megabytes of things just to display some text.
You can put it inside an accordion and label it (Check X from Twitter).
I can't see the embedded tweets on your page so it's not quite clear what you're doing. But you definitely shouldn't be doing the fetching from the front end while the page is loading.
Much better would be to fetch them and store them either in your db or in memory on your server before any visitor has even requested the page. Then, when a request comes in, send all the tweet data to the front end along with everything else for the initial page render.
I removed them for now.
I cannot follow your approach, I don't use Twitter API but their tweet embedding tool, which is some HTML/CSS and a JS script. Also it's a static website, so no DB or backend. But delaying the load when user scroll is an idea I will explore.
This comment was deleted 4 years ago.
I agree, the ditching is temporary :)
But here it was not an extra second, it was a lot more.