Hugo Dark Theme Site Generator https://after-dark.habd.as
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

fetch-injection.md 2.6KB

+++ title = “Fetch Injection” description = “Load external scripts and styles with incredible speed.” categories = [“experience”] tags = [“performance”, “styles”] features = [“snippets”, “related content”, “code highlighter”] copyright owner = “Josh Habdas” date = “2019” license = “agpl-3.0-or-later” +++

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 load Bootstrap (w/Font Awesome) and show how long ago it finished:

{{< highlight html “linenos=inline” >}} {{< /highlight >}}

Fetch Inject is 555 bytes compressed, non-blocking and included by default in Custom Layouts. Visit the {{< external href=“https://codepen.io/jhabdas/pen/MpVeOE?editors=0012” text=“CodePen Playground” />}} to try it out.