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.

This Article Has Been Shared 3216 Times!

Facebook Twitter Google+ Pinterest