oEmbed removal for mobile WordPress speed fanatics.

Updated: November 2018
Mobile Speed
INTERNATIONAL SITE OWNERS: Get under 2-second load time on cheap, shared magnetic hosting. No CDN cheating. And still use dozens of free WordPress plugins!

There’s a small and innocuous request of JavaScript made by WordPress core. Most WordPress site owners are unaware it even exists. Since 2017, WordPress 2.9 and up support oEmbed industry-standard protocol. When you look at a waterfall diagram, this *call* shows up as wp-embed.min.js.

oEmbed was designed to avoid the need to copy and paste HTML code from sites hosting videos, images, text, and more. There are pointless additions to WordPress slowing it down – such as emojis. oEmbed, like emojis, by itself is pretty harmless. It’s the unexpected imported data  delays slowing down your page. Especially video or ‘embed a tweet’ for example.

Adding media is quick and easy with oEmbed. Too easy in our opinion. The content being brought in can include a lot of heavy baggage. This code baggage slows down pages. And example, YouTube includes a lot of ad and tracking data. This isn’t the fault of oEmbed. It’s the fault of the source Google – trying to make money.

WordPress doesn’t care if you use emoticons or embeds – or not. The scripts are loaded on every page regardless if emojis and oEmbeds are visible or absent. That’s global site drag. You can switch this junk off.

oEmbed takes care of all the technical aspects of embedding. It generates an additional request loading the wp-embed.min.js file. And this loads on every single page. While this file is only 1.7 KB, things like these add up over time. Is any optimization too small for mobile web performance?

To embed a video or another object into a post or page, place its URL – like a YouTube video – into the content area. Make sure the URL is on its own line and not hyperlinked (clickable when viewing the post). It will be automatically stylized and responsive. Keeping your site responsive isn’t a problem with oEmbed.

Another option is to wrap the URL in the embed Shortcode.

If WordPress fails to embed the URL, the post will contain a hyperlink to the URL.

WordPress will automatically turn the URL into a YouTube embed and provide a live preview in the visual editor. How much will that add? Usually a speed-killing 500k of extra page weight. A workaround is lazy loading the video.

If WordPress fails to embed the URL, the post will contain a hyperlink to the URL.

WordPress only embeds URLs matching an internal security-approved whitelist. The oEmbed format provides a way to take content from an approved site and then port into your WordPress site while maintaining the content’s graphical look and feel. This is done by simply copying the URL into your post. No need to for extra CSS styling.

You used to need a shortcodes to embed things like video. Shortcodes are codes telling WordPress what to do when it sees that code. These are also called code macros. They’re wrapped in square brackets and look like this:

[socialbuttons]

Once you remove a shortcode plugin, abandoned shortcodes becomes visible in body text. Not cool. There are simple plugins to remove unused shortcodes. Then they don’t show up in body text.

PLUGINS TO REMOVE ABANDONED SHORTCODES

PLUGINS TO DISABLE EMBEDS

  • Disable Embeds 2.5k
    Our recommendation: The free plugin Disable Embeds is super lightweight, only 3 kilobytes. It has over 10,000 active installs (22 percent retention rate). There is nothing to configure, simply install, activate, and the additional JavaScript file will be gone. Features the following:
  • Prevents others from embedding your site.
  • Prevents you from embedding other non-whitelisted sites.
  • Disables the JavaScript file from loading on your WordPress site. You can still embed things from YouTube and Twitter using their embed iframe scripts.

We have disabled embed functionality on PagePipe. We use selective activation to enable it only on pages where we want it.

★★★★★
Disable Embeds
Active installs: 10,000+
Zip file size: 3k
All-time downloads: 45,760
Retention rate: 22 percent (medium)

ALTERNATIVES

To embed a video or another object into a post or page, place its URL into the content area. Make sure the URL is on its own line and not hyperlinked (clickable when viewing the post). WordPress will automatically turn the URL into a YouTube embed and provide a live preview in the visual editor.

Does this work with any URL? No, not by default. WordPress will only embed URLs matching an internal whitelist. This is for security purposes.

Here are examples of whitelisted sites:
Service Embed Type Since
Animoto Videos, WordPress 4.0
Blip Videos, WordPress 2.9
Cloudup Videos, Galleries, Images, WordPress 4.4
CollegeHumor Videos, WordPress 4.0
DailyMotion Video,s WordPress 2.9
Facebook post, activity, photo, video, media, question, note, WordPress 4.7
Flickr Videos & Images, WordPress 2.9
FunnyOrDie.com Videos, WordPress 3.0
Hulu Videos, WordPress 2.9
Imgur Images, WordPress 3.9
Instagram Images, WordPress 3.5
Issuu Documents, WordPress 4.0
Kickstarter Projects, WordPress 4.2
Meetup.com Various, WordPress 3.9
Mixcloud Music, WordPress 4.0
Photobucket Images, WordPress 2.9
PollDaddy Polls & Surveys, WordPress 3.0
Reddit Posts & Comments, WordPress 4.4
ReverbNation Music, WordPress 4.4
Scribd Documents, WordPress 2.9
SlideShare Presentation slideshows, WordPress 3.5
SmugMug Various, WordPress 3.0
SoundCloud Music, WordPress 3.5
Speaker Deck Presentation slideshows, WordPress 4.4
Spotify Music, WordPress 3.6
TED Videos, WordPress 4.0
Tumblr Various, WordPress 4.2
Twitter Tweet, profile, list, collection, likes, Moment, WordPress 3.4
VideoPress Videos, WordPress 4.4
Vimeo Videos, WordPress 2.9
Vine Videos, WordPress 4.1
WordPress plugin directory Plugins, WordPress 4.4
WordPress.tv Videos, WordPress 2.9
YouTube Videos, WordPress 2.9

Embedding media into your site looks as though you did style it to fit into your theme. Plus, no matter what kind of media you add, it consistently looks great even on mobile screens.

You won’t have to worry whether your content can remain responsive since oEmbed already has its bases covered. And changing your color scheme is also not a problem.

Media is displayed dynamically so your visitors can interact with them. If you display a magazine from Issuu, for example, a user can click to turn the pages as you would a book and select a larger view.

The only two requirements are that the URL be placed on its own line and it’s not hyperlinked.

Once you have pasted the URL of the media you want to embed into the visual editor, it appears after it’s processed and displays exactly how it should appear after you publish your post or page.

There’s also another way you can use oEmbed and that’s with a simple shortcode. Media is displayed the same way, but you can add simple styling options.

For example, you could adjust the width and height just as you would with an iFrame. The biggest difference is the link is included between the tags, not inside them.

It works the same as most other shortcodes so it’s easy enough to use. The oEmbed shortcode does have a closing tag so don’t forget to include it when you’re embedding media to your site.

Here’s an example of the structure you would use, and in this case, a YouTube video is being embedded:
[x embed width=”560″ height=”315″]https://youtu.be/WQE2nCaihNQ[/embed x] (remove x’s)

Achieving oEmbed with Plugins

Embedly plugin
Embedly extends the providers that are available to you by default to over 300 different sites including Google Maps, Dribbble, Skitch and deviantART to name only a few. This is also the plugin you may want to use if you prefer not to touch any code, but want to add more oEmbed providers to your site.

It installs as easily as most other plugins and you can even customize the styling if you want. To use it, you just need to add a URL to your posts and pages just as you normally would.

Add External Media plugin
This plugin adds the files you want to embed into your site’s media library to use as if you were the one who uploaded them to your site, but you still get all the regular space-saving benefits you would with regular oEmbed. Plus, it installs like most other plugins so you can get started quickly.

oEmbed Provider plugin
This plugin turns your site into an oEmbed provider so others can easily share your content on their WordPress sites with oEmbed. Just keep in mind that the more your content is shared, the more bandwidth is used so be sure to make sure you have enough in your hosting plan. This plugin is also easy to install with no special instructions outside the regular install pattern.

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"Thanks to your e-book issue #2, FLY.ME, I made my WordPress site even faster than using Hummingbird Pro. That's why I'm canceling my Hummingbird Pro membership." b2c-video-ads.com Frankfurt, Germany

- Abdullah Albayrak

Gutenberg versus Elementor: mobile speed - good or bad?
Repairing WP Post Navigation plugin with CSS.