Optimizing Social Media Embeds in WordPress: Speed and Privacy Tips

Ever wondered why your WordPress site loads slowly with embedded social media content? Do you know how to ensure your site is both speedy and compliant with privacy regulations? We draw back the curtain on the built-in oEmbed functionality of WordPress, highlight its attractive ease of use and potential pitfalls, and share tips on optimizing your site's performance.

Highlights
00:00 Understanding oEmbed
00:54 oEmbed Challenges
01:44 Privacy Concerns
02:55 The Importance of Caching
05:02 Optimizing Load Speed and Lazy Loading
07:32 Recap and Summary of Embedding Practices

Links
- oEmbed Specs: https://oembed.com/
- WP YouTube Lyte: https://wordpress.org/plugins/wp-youtube-lyte/
- Mihdan: Lite YouTube Embed: https://wordpress.org/plugins/mihdan-lite-youtube-embed/
- Embed Privacy: https://wordpress.org/plugins/embed-privacy/

Steffen: 0:00

Hey Dominik, hey Steffen, how do you embed social media content into your WordPress website?

Dominik: 0:09

It's actually pretty easy on first site, right? Because WordPress has a built-in functionality for embedding content that uses definition called OMBET. It's like a protocol directly into your website. So you have probably seen that whenever you are in the content editor in Gutenberg or in even the tiny MCE, you can just paste a URL. This URL will, when you render the content, be converted into a iframe or into something else, but usually it's like an iframe because what you do is you have this URL, it will fetch, like the OMBET information and get back from the server like different metadata but, most importantly, an HTML snippet, and this HTML snippet will be then integrated onto your website.

Dominik: 0:53

And this is where the problem comes in, where things get complicated, because this HTML snippet, it can be anything, right? It can just be regular HTML, like a normal elements that you would find on any website. It could also be an iframe, it could be scripts, it could be CSS and so on, or a link tags or style tags. You don't really have any control over it, right? You cannot really change the looks, usually, depending on what it is or how this HTML is structured, then bound to what this OMBET provider offers you or what it provides you.

Steffen: 1:32

And wait. I had a question on my head. I forgot it. Yes, why is this problematic?

Dominik: 1:40

That was my question Why is this?

Steffen: 1:41

problematic, you ask. But oh, even more specific, one of the things I immediately think about is also the GDPR, the privacy right. When you embed something from an external website, you don't really know when they are loading on your website, if that's an iframe right. So I think about what steps should you take to ensure that you stay privacy conformed with using OMBETs?

Dominik: 2:15

So this is why WordPress specific privacy plugins or GDPR plugins, cookie note, consent management plugins, whatever you wanna call them this is where they come in really handy, because usually they hook into these OMBET resolutions and then replace an iframe or something with a placeholder, and only when you have accepted a certain consent or cookie then they will load the iframe. So this is super nice And this is something that an external solution cannot give you on such an early level. Right, like you should definitely know what you embed and how this works. Also, like, what is a problem? what we've seen is that, like, sometimes it might not even be a privacy issue, right, because you don't necessarily need to load an iframe although this is what most providers do But, like, the original OMBET resolution is taking place on the server, and if this is not cached and if you don't have any caching mechanism, then every time you request a page, it always has to fetch, like the OMBET information first.

Dominik: 3:20

So, and if you have, like, lots of OMBETs on one page, this can take a long time, so rendering will be delayed, and also, if the external server is offline, for example, your site might also hit a timeout while rendering and then your visitor also will get an error message. So be sure that you have like some sort of caching mechanism in there, either like full page caching, or you can also like cached these OMBET responses separately in your database.

Steffen: 3:51

And I think the way we do that with our Flint starter theme is we cache it in some transients. Is that true Sometimes?

Dominik: 4:01

yes, and actually I think, because we usually in our projects we use heavy page caching, right, then it is actually a nice benefit to, whenever you clear your page cache, that you also refatch the OMBED code, because this might change. Like you don't know, something was updated, some newer versions are on there, some new formats and so on.

Dominik: 4:23

Oh right, yeah, and OMBED is like this open format that everyone can implement however they want. So you see a lot of differences, but you always have like this HTML part, at least like from my experience. So that means also, if there is, like, some content that WordPress doesn't recognize, maybe doesn't have OMBED, there is an easy way to do that, like, for example, write your own OMBED provider for that, or contact the platform that you want to embed and tell them yeah, please add like OMBED to your platform so that we can embed it easily in different places as well. Right, then, this was like the server side that I talked about. That might end the privacy side. But also there are some OMBED providers that also integrate scripts, maybe load like lots of data, and in WordPress these things are not optimized. So it could be that the same script will be added over and over again to your site And then the script will only initialize, like this one embed part that it belonged to, or it will initialize all of them, but then the script will do it multiple times because it's also added multiple times to your website. So in that's why you should always, if you use an OMBED, always check the output and check what it actually creates.

Dominik: 5:42

And in some cases it might be like a good idea to either install another plugin that will like slim down the version There's, for example, for YouTube there are a lot of like YouTube light plugins right, where you can just make sure that it doesn't load like the whole fully fledged YouTube iframe but it loads like and like a different one, optimized for loading times and for speed and so on. Then it's usually most of the times these iframes that are loaded are not lazy loaded. So what we do a lot of the times is we say OK, change the markup of what you get back and add either a loading lazy attribute to the iframe. This would be like a modern approach or with an older approach, you could also add like a data attribute, like make the source attribute, like, change that to data source And then, with a plugin with like lazy sizes or with your custom script, just replace or put the data source into the source whenever this iframe gets into the viewport or after the page has been loaded.

Dominik: 6:54

So yes, long story short, if you care for page speed and for good performance and for privacy and all of that whenever you use OMBAT which is super convenient actually, i mean, you cannot deny that it's like super nice to just paste the link and then you have the video or like a card from Twitter or whatever, directly on your website. But be sure to check the output of that And then if it's not like what you think it should be, or if there are better ways to do it, then please adjust, especially if it's like some privacy related things. Just make sure that this is handled well for your visitors.

Steffen: 7:32

OK let me put that in my own words To embed social media into a WordPress website, you typically don't have to do anything. It just works out of the box by copy and pasting a link into your editor. But you should be aware of the server side implications in terms of, for example, caching and loading times, you should be aware about the privacy and you should be aware about the performance implications that this might have. So if you're looking at a WordPress website at scale, be sure to watch OMBATs and to optimize them where needed. Yes, right, thanks for the next summary. Ok, stay safe out there.

Siegfried, deploy!

Optimizing Social Media Embeds in WordPress: Speed and Privacy Tips

Listen to this podcast on