After successfully including the http2 in apache2. I was facing the problem for the server push. I have 4-5 css ,4-5 js and 100 images in the site. So how would i work with multiple assets?
<link href="source" rel="stylesheet">
<script src="source"></script>
<img src="source">
header('Link: </asset/to/push.js>; rel=preload; as=script')
so i have to header for each and every assets if i have 100 assets there will be 100 header or so
An alternative solution to adding the Link headers and have Apache parse them and push the associated resources, is to naturally correlate secondary resources such as js, css and image files to the primary resource.
This is the approach that we have taken in Jetty (disclaimer, I am the implementor of that solution).
We use this solution to serve our own Website, based on WordPress, over HTTP/2 with HTTP/2 Push.
The approach is presented here: slides, video.
The basic idea is that when a browser received an HTML page, it immediately parses it and perform the requests needed to download secondary resources such as js and css files. The server, in this case Jetty, can correlate the primary resource (the html) with the secondary resources.
The next time a request for the same html page arrives, Jetty already knows what are the secondary resources needed, and can push them. There is no need for Link headers, as Jetty "learns" what are the resources needed by a page from the request patterns that the browser performs.
This approach can be fine tuned on basis to basis, but works fine out of the box and provides dramatic performance improvements, see here for the live demo in the video linked above.
I recommend to read/watch the whole slides/video for a larger context about HTTP/2 and HTTP/2 Push, but the point is that the combination Jetty + PHP with HTTP/2 is a powerful solution for HTTP/2 Push and requires no changes to PHP pages - which is perfect when using PHP frameworks such as WordPress or Drupal, and to avoid adding 100+ Link headers to your PHP pages.
Just push whats really needed early, otherwise you might end up with no performance benefit at all.
Thats how i add an Icon-Font:
header("link: </fonts/icons.woff2?v=".$version.">; rel=preload; as=font; type=\"font/woff2\" nopush", false);
Do not forget to set the replace=false when using multiple link-headers.