Prefetching a file

In an attempt to make that first page load a smidge faster, I'm including the CSS stylesheet via PHP on the first view, then setting a cookie, then loading the stylesheet at the bottom to cache it. Future page loads will see the cookie and use the traditional <link rel=...>, because the CSS has (or should be) already loaded.

I know, I know... micro optimizing. But I've done so many of these little micro changes that they've added up to be significant :-)

I first set this up using jQuery 1.8 or so, and using $.load('/path/to/css.css') at the bottom worked fine. But now it looks like .load() is deprecated as of around 3.x and it no longer works. So I'm revisiting the concept to see what's better.

I see that I can use prefetch:

<link rel="prefetch" href="/path/to/css.css">

It doesn't work on <=IE10, though:

[caniuse.com...]

And apparently it's not super reliable, even with browsers that do support it... which makes me think it might be removed in the future:

[css-tricks.com...]

But it would be pretty easy to implement in PHP:

if ($_COOKIE['css_exists'])
 echo <<<EOF
<link rel="stylesheet" href="/path/to/css.css">

EOF;

else {
 echo <<<EOF
<style>

EOF;

 include "/path/to/css.css";

 echo <<<EOF
</style>

<link rel="prefetch" href="/path/to/css.css">

EOF;

 setcookie('css_exists', '1', 365, '/');
}

So that's an option, but maybe not a great one.

Another possible solution, I think that I can use jQuery's $.get('/path/to/css.css') at the bottom of the page to do the same thing?

<script>
$.get('/path/to/css.css');
</script>

If so, am I correct in understanding that I could create a callback function that would run AFTER /path/to/css.css has completely loaded?

[api.jquery.com...]

That wouldn't be bad, I could set a cookie there and then if the cookie doesn't exist I can load it via PHP at the top:


<?php

echo <<<EOF
<head>
 ...

EOF;

if (!$_COOKIE['css_exists'])
 include '/path/to/css.css';

echo <<<EOF
 <script>
 // common setCookie() function, I think
 function setCookie(c_name, value, expiredays) {
  if (!expiredays) expiredays = -1;

  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);

  document.cookie = c_name + '=' + escape(value) + '; path=/' + ((expiredays == null) ? '' : '; expires=' + exdate.toGMTString());
 }
 </script>
</head>

<body
...

<script>
$(function() {
 $.get('/path/to/css.css', function() {
  setCookie('css_exists', '1', 365);
 });
});
</script>

</body>
</html>
EOF;
?>

So what do you guys and gals think, would you use prefetch, $.get(), or some other solution that I haven't considered?

# plugged in by cPanel while gzipping <IfModule mod_deflate.c> AddOutPutFilterByType DEFLATE text/html text/plain text/css text/javascript application/javascript application/x-javascript text/xml application/xml application/xml+rss application/vnd.ms-fontobject application/x-font-ttf </IfModule>

Request Method: GET Status Code: 200 OK Referrer Policy: no-referrer-when-downgrade Accept-Ranges: bytes Cache-Control: max-age=31536000, public Connection: Keep-Alive Content-Encoding: gzip Content-Length: 9267 Content-Type: text/css Date: Thu, 20 Feb 2020 18:20:32 GMT Keep-Alive: timeout=5, max=20 Last-Modified: Wed, 19 Feb 2020 19:10:08 GMT Server: Apache Vary: Accept-Encoding,User-Agent Accept: text/css,*/*;q=0.1 Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9 Cache-Control: no-cache Connection: keep-alive Pragma: no-cache Sec-Fetch-Dest: style Sec-Fetch-Mode: no-cors Sec-Fetch-Site: same-origin

; Set to {nocache,private,public,} to determine HTTP caching aspects ; or leave this empty to avoid sending anti-caching headers. session.cache_limiter = nocache ; Document expires after n minutes. session.cache_expire = 180

echo <<<EOF <link rel="prefetch" href="/path/to/css.css"> EOF; if (!$_COOKIE['css_exists']) { $style = file_get_contents('/path/to/css.css'); if ($style) { // homemade minimizer, removed comments and unnecessary spaces $pattern = '#/\*[^*]*\*+([^/][^*]*\*+)* /|\r\n|\r|\n|\t#'; $style = preg_replace($pattern, ' ', $style); $style = preg_replace('#\s{2,}#', ' ', $style); $style = preg_replace('#^\s|\s$|\s?([=),;+])\s?#', '$1', $style); echo <<<EOF <style> $style </style> EOF; setcookie('css_exists', '1', 365, '/'); } } if ($_COOKIE['css_exists'] || !$style) echo <<<EOF <link rel="stylesheet" href="/path/to/css.css"> ... EOF;

if (!$_COOKIE['css_exists']) { $style = file_get_contents('/path/to/css.css'); if ($style) { // homemade minimizer, removed comments and unnecessary spaces $pattern = '#/\*[^*]*\*+([^/][^*]*\*+)* /|\r\n|\r|\n|\t#'; $style = preg_replace($pattern, ' ', $style); $style = preg_replace('#\s{2,}#', ' ', $style); $style = preg_replace('#^\s|\s$|\s?([=),;+])\s?#', '$1', $style); echo <<<EOF <style> $style </style> EOF; } } if ($_COOKIE['css_exists'] || !$style) echo <<<EOF <link rel="stylesheet" href="/path/to/css.css"> ... <script> $(function() { $.get('/path/to/css.css', function() { setCookie('css_exists', '1', 365); }); }); </script> </body> </html> EOF;

// at the bottom of the main page <script> $.get('https://www.mysite.com/test.js', function() { console.log('made it to B'); }); </script> // test.js // I chose a high number to make sure it took some time to load, but it turns out that I could have // just used 1000 and been sure for (var i = 0; i < 100000; i++) console.log(i);

function no_comments($tokens) { $remove = []; $suspects = ['T_COMMENT', 'T_DOC_COMMENT']; $iterate = token_get_all('<?php ' . PHP_EOL . $tokens); foreach ($iterate as $token) { if (is_array($token)) { $name = token_name($token[0]); $chr = substr($token[1], 0, 1); if (in_array ($name, $suspects) && $chr !== '#') $remove[] = $token[1]; } } return str_replace($remove, null, $tokens); } no_comments($style);

Prefetching a file

csdude55

csdude55

phranque

csdude55

NickMNS

csdude55

csdude55

csdude55

tangor

csdude55

tangor

robzilla

csdude55

csdude55

robzilla

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week