What do you guys think, is the savings of 2.8kb enough to justify the additional HTTP

would it be smart to have a smaller one just for the homepage, and then load the full one at the bottom of the homepage so that it's cached for the rest of the site?

- if it's not yet the case, make your site use HTTP/2 (which means TLS too),

- try brotli compression instead of GZ,

- "push" your javascript and css ressources, using the PUSH feature of HTTP/2, so that they'll start loading right away (but I don't know if google's page speed is taking this in consideration)

For the first visit of a given person :
- add your css and javascript directly into your page header (no external file) => no rendering blocking , and in all events the first visit requires to load all the code,so you save on connections/packets and profit from the compresison of the whole together.
- populate the cache of the browser by asynchronously load the exernal CSS and JS, once the page is finished loading
- remember that this visitor has seen at least one page
- for the next page he visits, just add the external CSS / JS links, they should be fetched from the browse cache.

<?php

if (!isset($_COOKIE['first_time'])) {
 include '/home/example/www/styles.css';
 include '/home/example/www/javascript.js';

 $nocookie = 1;
 setcookie('first_time', '1', time() + (86400 * 365), '/');
}

else {
 echo <<<EOF
<link rel="stylesheet" href="https://www.example.com/styles.css">
<script src="https://www.example.com/javascript.js"></script>
EOF;
}

// blah blah blah

// Footer
if ($nocookie) {
 echo <<<EOF
<link rel="stylesheet" href="https://www.example.com/styles.css" as="style">
<script async src="https://www.example.com/javascript.js"></script>
EOF;
}

?>

But apparently it doesn't support HTTP/2. We're talking Greek now, though, so I'm not sure what that means.

Since I'm not currently supporting HTTP/2 I'm not sure if this is an option with TLS, but I'll do some research tomorrow!

Are you thinking something like this?

echo "<style>";
include '/home/example/www/styles.css';
echo "</style>";

echo "<script>";
include '/home/example/www/javascript.js';
echo "</script>";

// make a stylesheet link
var myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "styles.css";
// insert it at the end of the head in a legacy-friendly manner
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

[edited by: phranque at 8:20 am (utc) on May 18, 2018]
[edit reason] removed css file url [/edit]