Http/2 Push for images

Help
1

Hi,

My web hosting company has just enabled http/2.

As my website relies on CDN hosted resources for styles and js libs, the only advantage I see for this new configuration is for preloading the images contained into the posts. So my idea was to list all the images of each post into the Jekyll header:

---
layout: post
title: "Page create a new user"
description: "bla bla"
thumbnail: /images/posts/thumbnails/Add_employee.png
images:
 - "/images/posts/article1/hey.png"
 - "/images/posts/article1/hop.png"
 - "/images/posts/article1/haha.png"
published: true
---

And then to generate the .htaccess as followed:

{% for post in site.posts %}
<FilesMatch "{{ post.url }}$">
      {% for image in post.images %}
      Header add Link "<{{image}}>; rel=preload; as=image"
      {% endfor %}
<FilesMatch>
{% endfor %}

What do you think of this approach?

2

It looks like you are thinking about adding custom headers from Apache and building the htaccess file dynamically with Jekyll. I don’t see this as being problematic but it’s also not the only approach.

You could just as easily build any kind of programmatic file, say a bash shell script. Then, use a loop to select the URL (from huge list/Array) then prefetch them with curl. This would take no time at all to execute and have one huge advantage, keeping this content out of htaccess (esp. FileMatch) will speed things up. Having to check htaccess all the time is never the most optimal solution, and if it must be in htaccess or server-level, considering dynamically write the server block/virtual host file and deploy that instead.

https://httpd.apache.org/docs/2.4/vhosts/examples.html