Implementing http2 push method on apache php

Question

I have configured my website on http2 but even after reading so many article i am unable to figure out few of its implementation.

I have removed common.css from header file of my website. and added the these lines to .htaccess file.

<IfModule http2_module>
    #Check if there's a cookie saying the css has already been loaded: 
    SetEnvIf Cookie "cssloaded=1" cssloaded
    #If no cookie, and it's an html file, then push the css file 
    #and set a session level cookie so next time it won't be pushed: 
    <filesMatch "\.([pP][hH][pP]?)">
            Header add Link "</assets/css/common.css>;rel=preload;as=style" env=!cssloaded
            Header add Set-Cookie "cssloaded=1; Path=/; Secure; HttpOnly" env=!cssloaded
    </filesMatch>
</IfModule>

but My website is not loading common.css at all. it's breaking. My website is behind Apache server and website is fully build on codeIgniter.

I did add these to my common_head.php file too

<?php
        header: header('Link: </assets/css/jquery-ui.css>; rel=preload; as=style,</assets/css/jquery.mCustomScrollbar.min.css>; rel=preload; as=style,</assets/css/slick.min.css>; rel=preload; as=style,</assets/css/slick-theme.min.css>; rel=preload; as=style,</assets/css/bootstrap.min.css>; rel=preload; as=style,</assets/css/common.css>; rel=preload; as=style,,</assets/css/jplayer.blue.monday.min.css>; rel=preload; as=style');
?>

Now i can see all the css file in inspect element and also can see initialtor Push/others but it is not applying on the page. Page is broken. Apache server: 2.4.6

Please let me know where I am doing wrong?

Answer 1

That code looks familiar! Glad to know my blog post is proving useful :-)

I have removed common.css from header file of my website. and added the these lines to .htaccess file.

That's where you went wrong. It needs to be referenced as normal in the HEAD and also pushed.

When the browser sees the common.css reference it will go to fetch it and see it's already been pushed and just use the pushed resource.

Without reference the server will push it but the browser will just ignore it.

Note HTTP/2 Push is complicated and there's lots of things like this where you can go wrong. See this post for more info: https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/ . Many are saying that it's not worth the gains to use it, and the gains are questionable anyway as you can easily over push and cause the page to load slower rather than faster.