after-dark/docs/content/feature/fetch-injection.md

+++ title = "Fetch Injection" description = "Load external scripts and styles with incredible speed." categories = ["experience"] tags = ["performance", "styles"] features = ["snippets", "related content", "code highlighter"] +++

After Dark uses the {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} library to load and execute external scripts and styles faster than browsers are capable of otherwise.

{{< external href="https://hackcabin.com/post/managing-async-dependencies-javascript/" text="Fetch Injection" />}} was conceptualized and developed for After Dark to make it possible to deep-link to full-sized Image Gallery images without blocking page load and has other performance applications:

Use Case	Chrome Performance Comparison (4G simulated connection speed)
	Without Fetch Inject	With Fetch Inject
{{< external href="https://habd.as/talks/screaming-fast-wordpress-redis-vultr/" text="WordPress Twenty Seventeen" />}}	~3.600s	~0.918s

Use Fetch Inject in your Custom Layouts to load scripts and styles cross-origin or from your site static directory.

Given the following static folder contents:

├── layouts
├── static
│   ├── js
│   │   ├── jquery.slim.min.js
│   │   ├── tether.min.js
│   │   └── bootstrap.min.js
│   └── css
│       └── font-awesome.min.css
└── themes

You can dynamically load the entire Bootstrap 4 library including with Web Fonts on-the-fly:

{{< highlight html "linenos=inline" >}}

{{< /highlight >}}

Fetch Inject is non-blocking, has 0 dependencies and is included on all pages within After Dark by default. See {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} for additional use cases.