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 :
1 |
<script src="https://gist.github.com/AbhishekGhosh/847323ec7d35c678fa26.js"></script> |
It is fully blocking script. If we simply modify it :
---
1 |
<script src="https://gist.github.com/AbhishekGhosh/847323ec7d35c678fa26.js" async defer></script> |
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 :
1 2 3 4 5 |
<style type="text/css"> .gist {width:500px !important;} .gist-file .gist-data {max-height: 500px;max-width: 500px;} </style> |
If we want to use kind of a theme, then this can be an example :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<style type="text/css"> div.syntaxhighlighter { border-radius: 3px; border: 1px solid #AC9!important; } div.syntaxhighlighter, div.syntaxhighlighter div, div.syntaxhighlighter code, div.syntaxhighlighter table, div.syntaxhighlighter table td, div.syntaxhighlighter table tr, div.syntaxhighlighter table tbody { font: 13px "Courier 10 Pitch", Courier, monospace!important; } div.syntaxhighlighter .line.alt1 { background-color: #EFC!important; } div.syntaxhighlighter .line.alt2 { background-color: #EFC!important; } div.syntaxhighlighter .line.highlighted.alt1, div.syntaxhighlighter .line.highlighted.alt2 { background-color: #EFC!important; } div.syntaxhighlighter .keyword { color: #007020!important; } div.syntaxhighlighter .value { color: #208050!important; } div.syntaxhighlighter .string,div.syntaxhighlighter .string a { color: #4070A0!important; } div.syntaxhighlighter .comments,div.syntaxhighlighter .comments a { color: #408090!important; font-style: italic!important; } div.syntaxhighlighter .functions { color: #06287e!important; } div.syntaxhighlighter .plain,div.syntaxhighlighter .plain a { color: #333!important; } div.syntaxhighlighter .line.highlighted .content { border-left-color: #c65d09!important; } div.syntaxhighlighter .line.highlighted .content code { font-weight: bold!important; } div.syntaxhighlighter .color1, div.syntaxhighlighter .color1 a { color: #007020!important; } div.syntaxhighlighter .line:first-child td { padding-top: .3em!important; } div.syntaxhighlighter .line:last-child td { padding-bottom: .3em!important; } </style> |

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 , XL2SHere’s what we’ve got for you which might like :
Additionally, performing a search on this website can help you. Also, we have YouTube Videos.
Take The Conversation Further ...
We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!
If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.
Contact Us