Load Github Gist on WordPress in Non-Blocking Way

Here is How to Load Github Gist on WordPress in Non-Blocking Way. If We Use The Default Js, on PageSpeed Insights it Shows Up as Blocking Item. But a slight modification can help to get rid of this trouble. No WordPress plugin or tons of snippets is not needed for this task.

Load Github Gist on WordPress in Non-Blocking Way

This is an example gist of a Shebang script which counts the number of your balls. Your balls means the balls on commonly shared diagram on Facebook where a pyramid of balls appear. Obviously, if you can count how many EYE balls you have your situation is quite sad. The copied Js to be embedded looks like these :

It is fully blocking script. If we simply modify it :

async and defer will cover 90% of the browsers. It will get loaded in asynchronous way. This is live example :

Bonus! Add CSS to Github Gist on WordPress

Whatever CSS you want, you can add it on the page as in-line CSS or add on your Theme’s CSS file. For a fixed height and width, we will use this CSS :

If we want to use kind of a theme, then this can be an example :

Combining all, we can have a live example :

Embedding gist is a bad idea on self hosted WordPress except when we can not avoid it or we need to give the raw url.