Loading CSS and JavaScript
CSS and JavaScript snippets have two extra settings: Load as and, for JavaScript, Loading strategy.
Load as
| Option | What happens | Best for |
|---|---|---|
| Inline in the page (default) | The code is printed inside the page, in a <style> or <script> tag |
Small snippets. No extra request |
| External file (cached by browsers) | Snipfire writes the code to a file in wp-content/uploads/snipfire/ and links to it |
Larger stylesheets and scripts that repeat on every page |
External files get a version number that changes whenever the code changes, so browsers and CDNs can cache them for a long time and still pick up your edits straight away.
Both ways go through WordPress's normal style and script loading, so caching and optimisation plugins treat them like any other stylesheet or script.
Loading strategy (JavaScript)
With External file, you can choose how the browser loads the script:
- Normal: loaded and run in place.
- defer: downloaded in the background and run after the page has been parsed, in order. A good default for most scripts.
- async: downloaded in the background and run as soon as it arrives, in no particular order. For independent scripts such as some analytics tags.
The strategy only applies to external files; inline scripts always run in place.
Minification
- CSS is minified automatically, inline or as a file. Comments are removed, except
/*! … */licence comments. - JavaScript is served exactly as you wrote it. If you want it minified, paste minified code or use an optimisation plugin.
Header or footer
JavaScript in the footer (the default) doesn't hold up the page from appearing. Use the header only for scripts that must run before the page renders, such as some A/B testing tools.
If a file goes missing
If the uploads/snipfire folder is cleared (for example by a migration tool), snippets set to External file are printed inline instead, so they keep working. Save the snippet again to rewrite its file.
Something unclear or missing? Tell us