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.

Tagged With 4MHY , VPQ2 , V7O9 , M3P4 , JXCO , JF20 , J6Z6 , H9DH , GG3T , XL2S