Serving WordPress.org Emojis using Staticaly CDN

Hello there, before I post in this forum for first time, I will Introduce my self. My Name is Farrel Franqois, you can call me Farrel.


Credit: This image are created by Ink Drop from Shutterstock

Before I proceed to the point, I will ask you. Are you using Emoji (Twitter Emoji) in your WordPress-based Blog/Web right now? And, you’re upset that the GTMetrix score doesn’t go up, because there are some emojis that aren’t GZip Compressed, especially for those of you who want get perfect GTMetrix Score. Or, you just want serving your WordPress Blog/Web Emojis with Multi-CDN Network Infrastructure?

If so, then it seems you need to serve your WordPress.org Emojis using Staticaly CDN, which has a Brotli/GZip Compression Feature and uses Multi-CDN Network.

Note: This post intended for WordPress.org (Self-Hosted) users, not WordPress.com, so, you must understand about it.

Goals

s.w.org -> cdn.staticaly.com/gh/twitter/twemoji

Your goal here is to change WordPress Hosted Emoji URL to Staticaly CDN URL that serves an Twemoji files through GitHub. Why Twemoji? Because WordPress using Twitter Emoji (Twemoji) as default emoji for your WordPress Sites/Blog since WordPress 4.2.

Before you following this post, you must create an Child Theme or Using it (if have) from your current theme, if you’re not using Child Theme in your blog/web.

How to

It’s easy for serving Emoji using Staticaly CDN, you just adding these code line below in your Child Theme functions.php file:

function emoji_svg_cdn_url()
{
  return $default_url = "https://cdn.staticaly.com/gh/twitter/twemoji/v11.2.0/2/svg/";
}
add_filter('emoji_svg_url', 'emoji_svg_cdn_url');

function emoji_png_cdn_url()
{
  return $default_url = "https://cdn.staticaly.com/gh/twitter/twemoji/v11.2.0/2/72x72/";
}
add_filter('emoji_url', 'emoji_png_cdn_url');

If you want, you can replace v11.2.0 in code lines with another version of Twemoji (or Tags), Commit Hash or master branch as documented in Staticaly itself. Twemoji Version list (or tags) and releases logs are available here.

Note: The Twemoji itself doesn’t use master branch for general commit updates, it uses gh-pages branch for Push Latest Commit/Latest Update. So, don’t using master or gh-pages branch, you should use another tags (or versions) that available here or Another Commit Hash. Or, you will encounter a cache issue.

After this, Save your file changes, and then Purge/Flush All Cache (Especially, from your Cache Plugin, and if you’re activate ‘Cache Everything’ in Cloudflare Page Rules, you should Purge All your Cloudflare Cache too).

Note: If you don’t want to using Child Theme, you can make it as Plugin, you can see the example code here. Save it in Plugin Folder, Compress with ZIP, then Install it with Upload ZIP file. Btw, this code can be used for Staticaly Plugin too. So, it will can be available soon if @frans want’s :slight_smile:

After that, you can open a new tab and press CTRL + Shift + I for Toggle Inspection Tools, then you click on “Network” tab. Enter your Blog/Web URL in Address Bar and Press Enter to Open it, you will seeing that Emoji are should be served from Staticaly CDN, as emoji shows in your post/article.

Here is the Screenshot (taken from my blog):

As shows on Screenshot above, the content-encoding response header should be br if your browser Supports Brotli Compression, or gzip for else. And, it’s a sign that Staticaly CDN has Brotli/GZip Compression feature and do that.

Conclusion

With Serving your WordPress Emojis using Staticaly CDN, you can increase a little your GTMetrix scores, loading speed, improves emoji availbility for accessible and reliability because of it’s Multi CDN Network. Not only that, you can also change the Emoji Version as you like, because of it’s Flexibility.

And, if Emoji are served as PNG, that image will be compressed and will be convert to WebP on-the-fly (if your browser has support WebP Images).

I’m sorry, if I have a wrong Grammar or My English is Bad, because English is not my native language. And, sorry if I does not have a comparison screenshot, because I didn’t have time to take it.

If you have any Question for this post, Comments, Fixes or Suggestion, you can reply it here. Thank You, and have a nice days :slight_smile:

1 Like

Thank you for your tutorial, I believe this will be useful for those who need it. This December, I really had a lot of things I needed to do, so I will update you if the plugin is available for downloading.

@ardyfeb also working for the wp plugins, he maybe can give you some info.

1 Like

Thanks for your helpfull tutorial, currently i working on Staticaly.com wordpress plugin, Maybe it will be ready for January (new year)

If you want get notification when plugin ready, you can join our mailing list on https://www.staticaly.com

2 Likes

Ah, thanks for your working, I know this plugin maybe released on January 2019. Also, I already join to your mailing list ( farrel(at)franqois(dot)id ).

It will be better if the plugin have option for serving WordPress Emojis, through using WordPress CDN Server (Default) or using Staticaly CDN, and have an version change option. Not only Emojis, also WordPress assets too.

Of course, I will waiting for this plugin until released, and I will try this plugin soon as released :slight_smile:

Just wait for it :wink:

1 Like

Versi Bahasa Indonesia dari Thread diatas, bisa kalian baca artikel yang saya buat di sini. Terima Kasih :slight_smile:

UPDATE 30-05-2019: Since Staticaly changing it’s branding name to Statically, and official domain from staticaly.com to statically.io. Then, the CDN Subdomain will be changed from cdn.staticaly.com to cdn.statically.io.

Although the old subdomain can still be used, but I recommend to using the new CDN Subdomain, for better future usage. Because the staticaly.com domain might will be abandoned later.

Therefore, I will update the post above, and changes the CDN Subdomain. Not only that, I will also add another method to using Twemoji through Statically CDN (with Statically Libs) for shorter. Thank You :slight_smile:

EDIT: I don’t know that I can’t edit this post again. So, it’s impossible to me for editing and adding some method in this post again.

Instead, I will explain the way here. Add or change these code line below in your child theme functions.php file:

function emoji_svg_cdn_url()
{
  return $default_url = "https://cdn.statically.io/gh/twitter/twemoji/v12.0.4/2/svg/";
}
add_filter('emoji_svg_url', 'emoji_svg_cdn_url');

function emoji_png_cdn_url()
{
  return $default_url = "https://cdn.statically.io/gh/twitter/twemoji/v12.0.4/2/72x72/";
}
add_filter('emoji_url', 'emoji_png_cdn_url');

For shorter, you can change value of $default_url variable from https://cdn.statically.io/gh/twitter/twemoji/v12.0.4/2/ to https://cdn.statically.io/libs/twemoji/12.0.4/2/.

Then, the code lines will be as below:

function emoji_svg_cdn_url()
{
  return $default_url = "https://cdn.statically.io/libs/twemoji/12.0.4/2/svg/";
}
add_filter('emoji_svg_url', 'emoji_svg_cdn_url');

function emoji_png_cdn_url()
{
  return $default_url = "https://cdn.statically.io/libs/twemoji/12.0.4/2/72x72/";
}
add_filter('emoji_url', 'emoji_png_cdn_url');

You can also change 12.0.4 with Twemoji Releases Version, you can see it here.

After this, Save your file changes, and then Purge/Flush All Cache (Especially, from your Cache Plugin, and if you’re activate ‘Cache Everything’ in Cloudflare Page Rules, you should Purge All your Cloudflare Cache too).

If it succeed, you should using Statically CDN instead WordPress CDN for loading your Emojis. And, you should using cdn.statically.io instead cdn.staticaly.com or s.w.org for CDN Subdomain or Emoji URL.

1 Like