Header or footer?

All site optimization tutorials tell you that you should put scripts in footer before </body>. What about Iconify? You can put Iconify script in header (between <head> and </head>) or in footer before </body>.

So what's the difference?

Putting Iconify in footer

If you put link to Iconify in footer before </body>, it will load after entire page has been loaded, not blocking rendering. So that's good for page loading speed.

However it also means icon placeholders won't be replaced until entire page has been loaded. Iconify cannot start doing its thing until it has loaded.

Putting Iconify in header

If you put link to Iconify in header (between <head> and </head>), it will load immediately. Downside is any script tag placed in header blocks page rendering until script has loaded.

Iconify is small (about 21kb uncompressed), delivered from fast CloudFlare CDN. It takes fraction of second to load.

Benefit of placing Iconify script in header is it can start replacing icons right away. That means if you have long page, icons will be replaced as soon as part of document loads instead of waiting for entire document to load.

There are pros and cons for each method. You should decide for yourself instead of blindly relying on recommendations from online website checkers. Online website checkers don't know what script does and how it works, so they always recommend to put all scripts in footer.

If your pages are small, probably better to put script in footer before </body>. For example, this website has it in footer.

If your pages are large, dynamically generated, such as forum pages, it might be better to put script in header. Forum pages might take several seconds to load, by placing script in header you make sure visitors see icons as soon as possible.