How to move the sweetalert css to the footer

SweetAlert is a great tool written in js that allows for customized ‘alert’ boxes. While they really aren’t ‘alert’ boxes, they can function as single popup notices to more advanced features like promise based ajax dialogs. We discovered, unfortunately, that sweetalert puts in a mighty big chunk of its CSS into the header of your site.

swall css
swall css

My first thought was that I could just remove the css from the .js file and add it into our scss. No big deal right? Well, the .js is minified and so my first step was to “un-minify” the js. I went to https://unminify.com/ and threw in the source. While it came out not 100% readable (single letter variable and function names etc…) it was a lot more clear. One thing that stuck out to me was this error:

Swal Javascript Error
Swal Javascript Error

After reviewing this snippit, I thought if it were set to ‘top’ (which is it by default) and the css shows up at the top.. what would happen if I changed it to ‘bottom’? Viola! That worked like a charm. Now with VERY little effort I have moved the css from top to bottom. This will improve our SEO, Load-time (first pixel). While this is not the optimal solution, moving the css to our scss files would be better, this will work for now.

 

Leave a Reply

Your email address will not be published. Required fields are marked *